|
CSS - Relative Positioning And Negative Values
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 Similar TutorialsIn 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>
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 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. 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, 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! 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? 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. 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? 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 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... 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 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? 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> 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. EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE. First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code? Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html. Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem. Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there? Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html. ...And I haven't even tried it on a mac browser yet... 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'm aiming to have a flash navigation console nested inside a div which extends outside the left boundary of it's parent div. It's very hard to explain exactly so I've drawn some diagrams. Here's what I'm trying to acheive: URL Here's the actual result i've come up with so far: http://www.advancedschoolyearbooks.com/divtest.html The results differ depending on the browser. In IE the horizontal positioning of the "NavInner" DIV is spot on but vertically it is hugging the top of the "Wrapper" table when it should be hugging the top of the "Navigation" DIV In firefox I can not see the image contained in the "NavInner" DIV at all. Here's a snip of my CSS: Code:
body, html, #wrapper {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
height: 100%;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 100%;
}
#OuterFull {
width: 100%;
text-align: center;
display: block;
}
#OuterBoxed {
width: 969px;
height: 650px;
display: block;
margin: 0 auto;
}
#LeftCol {
width: 485px;
height:650px;
float: left;
}
#RightCol {
width: 484px;
height: 650px;
float: left;
background: url(bg.jpg) bottom left no-repeat;
}
#Navigation {
width: 484px;
height: 180px;
float: right;
overflow: hidden;
text-align: right;
margin: 0 auto;
}
#NavInner {
width: 969px;
height: 180px;
float: right;
text-align: right;
position: relative;
left: -485px;
}
#Content {
width: 484px;
height: 470px;
float: right;
overflow-y: auto;
overflow-x: hidden;
}
Here's my HTML: Code: <body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="wrapper">
<tr>
<td align="center" valign="middle">
<div id="OuterFull" align="center">
<div id="OuterBoxed">
<div id="LeftCol">LeftCol</div>
<div id="RightCol">
<div id="Navigation">
<div id="NavInner"><img src="nav.jpg" /></div>
</div>
<div id="Content">Content</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
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 I was under the understanding that an element positioned absolutely is positioned in context to the closest parent object that has positioning of absolute or relative, and barring that, the body. I have quite simple code: html4strict Code: Original - html4strict Code <div style="position:relative; height:50px; width:250px; background:#69c;"> <input type="text" style="position:absolute; top:5px; left:0; right:0;"> </div>
I would expect this to be top-aligned with 5 pixels of blue showing, and stretched the width of the containing div, but it's not. It's the correct height from the div but not the sides of the container - can anyone tell me why that is, or what should be done ( short of width:100%; )? Thanks, Brett |
|||||||