Currently, I am working on implementing CSS positions for images and backgrounds. My main struggle lies in trying to display the same image next to the content area while ensuring its position is not affected by page resizing.
Can anyone provide guidance on how to achieve this? Take a look at this example.
Here is what I am aiming to achieve:
Check out my version. I implemented an innovative approach by using a centrally positioned div to contain the images and then applying specific pixel positions to each image using relative positioning. This allowed me to prevent the images from overlapping, ensuring they shift appropriately when necessary.
HTML:
<div id="image_container">
<div id="img_r" class="outside_image">
<img />
</div>
<div id="img_l" class="outside_image">
<img />
</div>
</div>
CSS:
#image_container{
position: absolute;
top: 0px;
left: 50%;
width: 0px;
z-index: 900; /* optional */
}
.outside_image img{
width: 200px;
height: 200px;
}
.outside_image {
position: relative;
}
#img_r{
float: right;
right: -725px;
top: 200px;
}
#img_l{
float: left;
left: -725px;
}
To achieve the desired effect, you can apply a negative margin-left on #left2:
#left2 {
float: left;
width: 200px;
background: #DDD;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
margin-left: -248px;
}
If you want #left2 to remain in a fixed position regardless of page resizing, you can use absolute positioning:
#left2 {
position: absolute;
left: 20px;
top: 160px;
}
I personally test these styles using Chrome developer tools. Feel free to check out a screenshot of your page with my applied code here:
When designing my website, I encountered an issue with the active navigation link style. It successfully changes when clicked and scrolled to the section, but does not update when the user scrolls away. How can I make the active style update on user scroll ...
In an ancient web application, the design was primarily constructed using rigid tables: <div class="main"> <table width="520" border="0" cellspacing="0" cellpadding="0"> <tr> <td>...</td> </ ...
Looking for some assistance with my HTML and CSS code. Specifically, I need the position of the #header id to be set as absolute: <div class="main"> <a href="www.website.com"> <div id="header" class="other"> </div> #heade ...
I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...
Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...
The website at was uniquely crafted by hand, without the use of platforms like Wordpress or any PHP-type databases. Upon its creation over 15 years ago, a legal notice was not initially included on the website. Now, there is a desire to add a link to a l ...
I'm currently working on a popup to display some preload content, but unfortunately it's not functioning properly. Instead of showing the preload content, it's displaying another element. <html> <script src="http://www.flygoldf ...
How can I incorporate CSS text retrieved from the backend into my Angular component? I attempted to use DomSanitizer's bypassSecurityTrustHtml method, but found that any included style tags were being escaped. For instance: import {BrowserModule, ...
One issue I'm facing with my site is the component called NavPanel. This consists of two components - a back button (BackToButton) and a search field (SearchTextField). Everything looks fine on a standard screen size, but when the screen size decrease ...
https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...
Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...
Looking for a way to adjust panel height based on screen size? <div class="container-fluid"> <!--Heading--> <div class="row " align="center"> <h1 style="font-family: 'Roboto', sans-serif; font-size: 45px;"> Test Aut ...
Here are the HTML and CSS code snippets I am working with: #page { background-color: #000; color: #fff; height: 360px; width: 360px; min-height: 100%; } #viewport { font-size: 20pt; text-align: center; } .taskTitle { height: 13%; fon ...
I am puzzled as to why the Back to top link does not float to the right of the "footer area" which has a width of 960px. Upon running my code, the back to top link ends up in the middle of the footer. Here is the snippet of my code - can anyone identify th ...
Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...
I am completely new to using bootstrap, particularly bootstrap 3. The goal I have is to change the color of labels such as "Name", "Email Address", "Phone Number" and "Message" from dark grey to white in the design shown below. https://i.sstatic.net/yDTto ...
The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...
https://i.sstatic.net/gKdAN.png I attempted to decrease the form width by applying padding on both sides of the form using 'px-5'. However, when I implemented this change, the column holding the '#lastName' input shifted to a new line. ...
Is there a way to achieve a similar effect as seen here? I've tried implementing the code from this answer, but it's not entirely clear. The suggestion is to use this jQuery plugin, but I can't seem to make it work. I prefer using Foundation ...
I'm currently attempting to access a single cell on an ag-grid using Angular 6. The HTML structure is as follows: <ag-grid-angular style="width: 700px; height: 200px;" class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs" ...