I am currently working with images and backgrounds css positions. I have been struggling trying to get the same image appear beside(left/right) the the content area. I am trying to have the image position not be affected with pagee re size .
How can i get the same picture to appear beside the content area? EXAMPLE
This what I am aiming for:
Here's my stab at it. I used an absolutely positioned div positioned in the center to contain the images and then used position relative to get them to specific pixel positions to either side. The trick is that if you don't use relative positioning, they are on top of one another so you have to apply a top: equivalent to the height of the image to one of them to get it to shift to match.
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; /* not really required */
}
.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;
}
You could use 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 need it to stay in the same place you (even if you resize the page) you could use an absolute position:
#left2 {
position: absolute;
left: 20px;
top: 160px;
}
I use Chrome developer tools to try this stuff out btw. Here's a screenshot of your page with my code:
http://d.pr/i/wXQ2
Related
I'm trying to position an image to the right within a container. However, after I set my parent container to position: relative;, my image disappears. Any ideas? Website: http://andrewgu12.kodingen.com/. Thanks!
CSS:
.slide {
padding-top: 138px;
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
div#inner-container {
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
white-space: normal;
position: relative;
}
div#name {
right: 0;
bottom: 200px;
position: absolute;
}
HTML:
<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
<div id="inner-container">
<div id="name" clas="row">
<img src="images/names.png">
</div>
</div>
</div>
It does not disappear, it just goes all the way up and out the monitor xD You have to remember that when you use position: absolute the object is going to look for a parent that has position: relative to position itself. When you add position: relative to div#inner-container it changes the div#name.row reference. Maybe adding height: 100%; to the parent div might do the trick for what you want?
Try this:
div#name {
position:fixed;
right: 0px;
bottom: 200px;
}
I Solved it! The parent div that has position:relative actually goes really high up the monitor. So you need to set the the top style to 0px and play around with the top,bottom,right,left styles that come with position relative. So basically add (top: 0px) to your css styling.
I am trying to float some text (prices) over images. The images are always the same width and height, but the text may be different length. So I'm trying to keep always the same space on the right side and expand the text towards the left as needed. For some reason, I can't make it work. It always expands floating out of the box to the right. Any ideas?
Here is my HTML code:
<div class="productphoto">
<img src="photo.jpg">
<div class="pricetag">$1959.99</div>
</div>
And the CSS:
.productphoto {
position: relative;
width: 100%; /* for IE 6 */
}
.pricetag {
position: absolute;
top: 190px;
left: 190px;
text-align:right;
}
You need to position your .pricetag relative to right, not left:
.pricetag {
position: absolute;
top: 190px;
right: 10px; /* NOT left: 190px; */
text-align:right;
}
DEMO
HTML:
Text
CSS:
.image {
float: left;
}
.text {
float: left;
margin-left: 10px;
}
Example - http://jsfiddle.net/Hxcgs/
So, I've seen tons of questions about this, but I would like a personal example. I'm rather new to programming, so I may be a little stupid...
Anyway, I have two <div>s, one with id bg and the other with class player.
This is what it looks like:
The red box is the player, and the large image is the bg.
I need the player to start in the center of the bg.
The bg is 640px X 640px.
This is the code I have so far in my CSS file:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
}
.player {
position:relative;
background-color:#FF0000;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
}
Try changing your stylesheet to:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
position: relative;
}
.player {
position: absolute;
background-color: #FF0000;
width: 32px;
height: 32px;
top: 320px;
left: 320px;
z-index: 1;
}
And your HTML should look like this:
<div id="bg">
<!-- your bd code here -->
<div class="player"></div>
</div>
position: relative is relative to where the object would be placed normally. In your example, it would normally come below the first div, so that's where it will stay. (In other words position: relative used with a positioning of 0 won't move the objet anywhere.)
You could add top: -320px; left: 320px. That would position it it the space of the first div. But maxksbd19's answer is probably the better solution for your ultimate goal.
I try and avoid absolute positioning as it does not adapt to the container size and a change to the container requires you to go through your css and change all the absolute values.
I would do the following
CSS:
#bg {
overflow: auto; /* stops the .player from from moving #bg down */
width: 640px;
height: 640px;
background-color: blue;
text-align: center; /* center child div in IE */
}
.player {
background-color: White;
width: 32px;
height: 32px;
margin: 0 auto; /* center div in parent for non IE browsers */
margin-top: 304px; /* 50% from top minus div size */
}
HTML:
<div id="bg">
<div class="player"></div>
</div>
Now you only have to keep track of the top margin of the child container.
I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?
<div style="position:relative">
<div style="width:300px; height:300px" id="map_localization"></div>
<div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>
This is what almost works for me, but need to put the CENTERED layer OVER the map
Can you reveal some code?
I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.
I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
Specifically, the CSS of the div to be centered would look something like this.
#divToBeCentered {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
Update
Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:
http://jsfiddle.net/2zaxd/
Here's the HTML (similar to what you had).
<div id="containerForAll">
<div id="map_localization"></div>
<div id="divToBeCentered">CENTERED</div>
</div>
and the CSS.
#containerForAll, #map_localization, #divToBeCentered {
border: 1px solid #000;
}
#containerForAll {
position: relative;
width: 300px;
height: 300px;
}
#map_localization, #divToBeCentered {
position: absolute;
}
#map_localization {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#divToBeCentered {
width: 100px;
height: 100px;
margin-left: -50px;
left: 50%;
top: 50%;
margin-top: -50px;
}
This centers the inner div above your map via absolute positioning.
I have made a webpage and this is the code to the main div.
#Div {
margin-left: 0px;
position:absolute;
margin-top: -1px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #030;
width: 660px;
margin-left:-330px;
left:50%;
padding-top: 0px;
height: 440px;
}
Is there a css technique i can use to make sure the page occupies the whole page no matter the size of the computer screen the browser is on.
Why are you setting margin-left twice? Why are you floating (and displaying inline) a div that you want to take up the whole screen? Setting a negative left margin will move your whole div to the left, and therefore cause it to not reach all the way to the right even when the width: 100%.
Take away all margins. Do width:100%. change display:inline to display:block. Take away the float. If you have to set this to position:absolute, then be sure to specify: top: 0px; left: 0px
min-height: 100%;
min-width: 100%;
and use a CSS Reset - http://meyerweb.com/eric/tools/css/reset/
You want to center your webpage, without beeing cut at the left on small screens?
Use following:
#outer{
text-align: center;
}
#inner{
margin:0 auto;
width: 660px;
text-align: left;
}
<div id="outer">
<div id="inner">
content
</div>
</div>
Perhaps you can take some inspiration from a CSS framework and strip out the bits that you need? http://cssgrid.net/
#container {
background: blue;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
2border: 1px solid red;
}
<div id="container"></div>