|
CSS - Problems Positioning Div Relative To Another Div
Okay, I have a few menu items and when I mouse over one of them, I want a sub div to show up. However, if I try and position the div relative to another, it gets positioned properly, but pushes the content below it downward, which I do not want. I want the content to float above like any sub menu would when the main menu item is rolled over.
However, when I absolutely position the div, it's position changes based on the current width of the browser. I could technically get the width of the browser when the page loads and dynamically position it but I'm obviously making this harder than it has to be. Besides, the function would have to rerun every time the person changes the width of the browser. Possible, but again I know I'm making this harder than need be. I'd rather not spam devshed with a link to my site, but if you want to see the problem, I'll post it. Thanks in advance. Similar TutorialsI'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>. So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through. If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious. Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them? The following gives me the staggered layout: Code:
.leftColumn{
margin-left:20px;
width:100px;
border:thin dotted #999999;
}
.middleColumn{
margin-left:121px;
width: 450px;
border:thin dotted #999999;
}
.rightColumn{
margin-left:572px;
width: 200px;
border:thin dotted #999999;
}
.main{
left:200px;
width: 950px;
background-image: url(Images/PaperBkg.gif);
background-repeat:repeat-y;
}
<div class="main">
<div class="leftColumn">
</div>
<div class="middleColumn">
</div>
<div class="rightColumn">
</div>
</div>
Thanks guys. I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers. As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems: 1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated. 2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers. 3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow. Original site (tables): http://www.gpleague.com New test site (css): http://www.gpleague.com/cssp.htm Css file: http://www.gpleague.com/csstest.css In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css" title="">
#SearchContainer { position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
#SearchField { position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
#LoginMessage { position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
#Login { position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
#Signup { position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }
</style>
</head>
<body>
<div id="SearchContainer">
<div id="SearchField">Epsum factorial non</div>
<div id="LoginMessage">Lorem ipsum dolor</div>
<div id="Login">Li Europan lingues<br>Li Europan lingues</div>
<div id="Signup">xxx</div>
</div>
</body>
</html>
How can I position several elements, relative to the position of another element? I tried this: <div> Test <span style="position:relative;top:40;left:40">Foo</span> <span style="position:relative;top:40;left:40">Bar</span> </div> I want both Foo and Bar to be 40 pixels to the right and below of Test. But they appear next to eachother instead of stacking on top of eachother. How can I position them "relative" to the div tag? First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look. So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively. Hi, I'm using a floated division for my menu; and using relative positioning to move this slightly to the left and up - you can see it here. It works in all browsers I've tried except Konqueror - the positioning simply has no effect . Also: the content of the main division (to the right) becomes completely distorted when scrolling - again: only when using Konqueror . Could this be due to the fact that they are floated divs? The code is valid HTML and CSS. Is Konqueror non-compliant with W3 Standards? Should I bother trying to accommodate it? Anyone have any ideas? Hi, I have the following code: PHP Code: <table cellspacing="0" cellpadding="2" border="0"> <tr> <td valign="top"> <span style="position: relative; top: 80px; left: 10px;"><img src="images/sold.gif" alt="" border="0"></span> <img src="upload/mainimage.jpg>" alt="" border="0"> </td> </tr></table> The span and sold.gif image are pushing the main image down in the table, so there's a big piece of whitespace above it. Not sure what I'm doing wrong here.. is there some special trick I should know about using relative positioning? Code: <div style="width: 500px; height: 500px;"> <div style="position:relative; top: 0px; left: 0px; width: 30px; height: 10px;">at 0</div> <div style="position:relative; top: 10px; left: 0px; width: 30px; height: 10px;">at 10</div> </div> The divider seems to add a break rendering absolute positioning useless. How can I fix this so that I can use absolute positioning in more than one div inside the main fixed size container? Thanks I have a div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below: Code: <div style="position:absolute; top:20; left:20; width:200; height:200; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">- <a href="#1">News</a></div> <div align="left">- <a href="#3">FAQ</a></div> <div align="left">- <a href="#2">ABC</a></div> <div align="left">- <a href="#6">Forums</a></div> <div align="left">- <a href="#7">Contact</a></div> </div> <div style="position:absolute; top:20; left:235; right:20; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">Caption</div> <div align="left">bla bla bla This is the right side. </div> </div> Alright... i am creating a simple website and because of the way the site is to be created, I am using position: relative. However I'm trying to get the links on the left and right of an image to go under part of the image... In IE it works fine... in Opera, NS, and FF it doesn't. Is there something I need to add to my css to get it to work properly... CSS: Quote: td.homeleft {position:relative; top:50px; left:50px; font-size:14px; } td.homeright {position:relative; top:50px; right:30px; font-size:14px; } HTML Code: <html> <head> <link rel="stylesheet" href="lolli.css" type="text/css"> <title>UF Lollicup!</title> </head> <body bgcolor="fdf066"> <table align="center"> <tr> <td class="homeleft"> <center>Menu<br><br> Shop Now<br><br> What's New<br><br> Promos</center> </td> <td> <img src="images/homepageflower.gif"> </td> <td class="homeright"> <center>Links<br><br> Feeback<br><br> Newsletter<br><br> Pictures</center> </td> </tr> <tr> <td colspan="3" align="center"> <img src="images/bar.gif"> </td> </tr> <tr> <td colspan="3" align="center"> Gainesville, Florida 352-505-3662 </td> </tr> </table> </body> </html> I know some of you don't like tables... sorry for using them. Here's the site I'm working on: Site in Progress Here's what the site should look like: http://www.crash-tech.com/Lollicup/images/main.jpg Also the blue bar at the bottom... I'm going to want to place text on top of that as well, so would use relative positioning again. If anyone can suggest a better way to do this, that would be great. Had also considered doing the main page in Flash or using the image and mapping links. Thanks in advance. ok, here's what i'm working with: multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap. does anyone have a suggestion to fix this? do i need to post code? thanks Hi all I have uploaded the page I am having problems with to http://www.nickcb.com/JesseHora/ so you can check it out and see my problem. The problem is that I want to have about a 10px margin between each of the horizontal bars. (The red will be different images eventually) Previously the site was left justified and the black portions of the bars were not there. I used a relative positioning to move the bars up slightly to cover up the area where the bubble on the end would be. The bubble on the end is floated over banner image so that the image can be switched with PHP at a later date. The person I am making it for decided that they wanted the site centered with black bars extending to the left side of the screen. I did this with the class .blackleft in the code below. That seems to work except it pushed all the horizontal bars further apart. This makes sense though because there is an addition horizontal item that pushes them down. Now the problem is that if I increase the amount that I relatively position each bar up it only moves the second bar up. To maintain an even spacing I have to keep moving each bar up by more and more. I could do this because I am going to generate the page with PHP but I would prefer to fix it in CSS. Page HTML (view source on above page for all code) Code: <div class="container"> <div class="blackleftnew"></div> <div class="barnew"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="bannernew"/> <img src="images/illustration_new.gif" class="typebubblenew"/> </a> </div> <div class="blackleft" style="top: -140px"></div> <div class="bar" style="top: -249px"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/design.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft" style="top: -240px"></div> <div class="bar" style="top: -349px"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/dircord.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/artdir.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/random.gif" width="100" height="100" class="typebubble"/> </a> </div> <div class="blackleft"></div> <div class="bar"> <a href="page.php"> <img src="images/banner.gif" width="700" height="97" class="banner"/> <img src="images/photo.gif" width="100" height="100" class="typebubble"/> </a> </div> Style Sheet (excerpt) Code:
.container {
z-index: 0;
width: 744px;
padding: 0px;
margin: 0 auto 0 auto;
}
.blackleft {
z-index: 1;
position: relative;
top: -40px;
left: -700px;
width: 744px;
height: 97px;
background-color: black;
}
.bar {
z-index: 5;
position: relative;
top: -149px;
margin: 10px 0px 10px 0px;
overflow: hidden;
height: 105px;
}
.typebubble {
z-index: 10;
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: -100px;
left: +645px;
}
.blackleftnew {
z-index: 1;
position: relative;
top: 10px;
left: -700px;
width: 744px;
height: 97px;
background-color: black;
}
.barnew {
z-index: 5;
position: relative;
top: -137px;
margin: 10px 0px 10px 0px;
overflow: hidden;
height: 145px;
}
.typebubblenew {
z-index: 30;
position: relative;
top: -130px;
left: +625px;
}
.bannernew {
display: block;
margin-top: 40px;
}
.banner {
margin-top: 2px;
}
.footer {
position: relative;
top: -40px;
text-align: center;
}
Thanks for any help. Hello Can anybody explain me the difference between the absolute and the relative positioning methods? If i use nested <span> elements in a table row which one is suitable? And also what the "Z-index" property tells us? I am so confused with these terms nowadays.And waiting your help. Thank You Very Much... Hi, I'm not sure if this is possible or not, but I can't get it to work accurately, and I wondered if anyone could give me some help. I would like to position a layer at an absolute position (T:128 L:253) which is no problem, but then I would like that layer to have a relative width from that fixed point, expanding/contracting to whatever size the browser is. I've tried several different things, but can't seem to get this particular setup. If I set the width of the layer to 100%, the layer positions itself correctly on the page, but pushes beyond the right hand side of the browser causing a horizontal scroll. Has anyone done this before? Am I missing something critical? or is this impossible to do with layers/css Thank you! Hello, I am very new to CSS, having only used stylesheets for basic formatting of text, etc. I have created a site where the layout is based on tables (I know ... when I have spare time, I will start learning CSS for this). I have a main table with 1 row and 1 column, height 95%, width 100%. Within this I have a table with a fixed layout (set height, width) for the table elements. This table is centre and middle aligned. Unfortunately the text provided for one of the cells in the table is exceeding the amount expected and the cell height has increased to accommodate for this. I thought of creating a layer and placing it over the cell and inserting the text here and setting the overflow to scroll. However, depending on screen resolution, browser the layer is not always positioned where I want it. Can I somehow position the layer relative to the table cell ? If not, do you have any suggestions as to what I can do to fix this. I do not have the option to rewrite the site using CSS, due to deadlines. Thanks in advance for your help. Bea im creating ajax auto complete text box but my div tag does not appear correctly in IE7 (ok on firefox) appearing behind the textbox IE7 screen shot URL Firefox screen shot URL codes are HTML Code:
<tr>
<td align="left">PHONE BRAND</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlBrand" class="au_cm_pnl"></div>
</div>
</td>
</tr>
<tr>
<td align="left">PHONE MODEL</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
</div>
</td>
</tr>
CSS Code:
.au_cm_loc
{
text-align:left;
position:relative;
}
.au_cm_pnl
{
position:absolute;
top:25px;
left:0px;
border:1px solid #39AAE4;
width:204px;
max-height:50px;
overflow-x: hidden;
overflow-y: auto;
visibility:hidden;
background-color:#FEFEFE;
z-index:500;
}
.au_cm_pnl a
{
display:block;
padding:5px 0px;
width:95%;
margin:-7px 0px;
color:Blue;
text-decoration:none;
padding-left:5%;
background-image:url(../Images/textbox_bg.jpg);
}
.au_cm_pnl a:hover
{
background-image:url(../Images/button_bg.jpg);
color:#FFFFFF;
}
please help me to fix this problem thank you chathura Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal I am listing a number of events from a database on this page Here's the code: Code: <div id='eventblurb'>
$Comment
</div>
<div id='eventdetails'>
<p class='countrylist'>
Date: $Date<br>
Time: $Time<br>
Cost: $Cost<br>
City: $City<br>
Contact: <a href='mailto:$Email'>$Contact</a> - $Phone <br>
Address: $Addr1 <br>
Address: $Addr2 <br>
Address: $Addr3 <br>
Address: $Addr4 <br>
Website: $Website <br>
</p>
</div>
and the css: Code: #eventblurb {
position:relative;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
height: 200px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
margin: 0 0 0 10px;
padding: 10px;
}
#eventdetails {
position:relative;
top: -200px;
left: 300px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
margin: 0 0 0 10px;
padding: 10px;
}
As you can see there is a big gap underneath each event. I know that this is caused by moving the relatively positioned div. My question is, how can I do this without using tables and still keep the div in content flow? Thank you Is it bad css form to use negative values when you are working with relative positioning? I have a graphic intensive site that was drawn in photoshop and I am trying to code it. The graphics require exact placement but also need to move with the design if the browser window is re-sized, relative positioning will do this but I find myself having to use negative values on some of the graphics to have them place properly. I know if I move a graphic above another in the html code the relative values will change but I am having problems figuring out what should go first, second, third... I know relative positioning deals with the regular flow of the page but when you are dealing with all graphics how do you know what to put first etc... I hope I made sense and I wish I had an address for you to look at the page but I don't at the moment... Can anyone help? Thank you, Jen |
|||||||