|
CSS - Nesting Div Tags With Absolute Positioning In Css
Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom?
Similar TutorialsI'm having a problem with the way my div tags are behaving in a page I am trying to build. I have all the div's nested properly (I think) but the problem is is that the footer is appearing right below the top banner. The footer is not nested in the div that contains the rest of the pages content it appears behind everything else actually. I have been messing with my style sheet and moving everything around to no avail. For some reason the div that contains all the content has a height of zero when it shouldn't. I have used similar page structure before on other pages but this is the first time im using two columns of free floating boxes as opposed to one solid column divided in two. I'm leaving the style sheet and the mark up below if you can figure it out that would be great. There is only one image and it shouldn't have anything to do with this problem. I will be eternally grateful to whoever can help me as this has made me seriously consider hitting my computer with a brick. Code:
// here's the stylesheet
body{
background: url('../images/mainbackground.jpg/') repeat fixed;
font-family: calibri, helvetica, 'sans serif';
line-height: 130%;
margin: 0px;
padding: 0px;
}
#banner{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 27px 0px;
height: 100px;
}
#nav{
float: right;
height: 100px
width: 90px;
margin: 0 auto;
padding:0;
}
#nav ul{
list-style: none;
display: inline;
line-height: normal;
}
#nav li{
background: #b34150;
float: left;
margin: 65px 10px 0px;
padding: 5px 20px 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 50px;
height: 30px;
text-align: center;
font-size: 14pt;
}
#nav li a{
text-decoration: none;
color: white;
font-weight: bold;
text-shadow: 0px 3px 3px #000;
}
#nav li:hover{
background: #ec9aa5;
-moz-border-radius:0px;
border: 0px solid #eccdcd;
-moz-box-shadow: 0px 0px 35px #fff;
}
#content{
width: 900px;
margin: 0 auto;
background: none no-repeat;
}
#left_column {
float: left;
width: 700px;
margin: 0 auto;
}
#main{
background: url('../images/banner-back-top.jpg/') repeat-x top center #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
width: 650px;
padding: 8px 5px;
float: left;
}
#right_column {
float: right;
width: 175px;
margin: 0 auto;
}
#sidebar{
background: #fff;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-moz-box-shadow: 3px 3px 3px #fff;
-webkit-box-shadow: 3px 3px 3px #fff;
width: 175px;
margin: 0 auto;
padding: 8px;
float: left;
}
#footer{
background: #b34150 repeat-x 50% 100%;
border-bottom: 3px solid white;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 100px;
}
#footer_info {
background: #91323f;
text-align: left;
font: normal normal normal 75%/normal calibri, helvetica, sans-serif;
color: white;
float: left;
}
//And here is the mark up
<html>
<head>
<title>SL | Clothing</title>
<meta name="description" content="description" >
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script type="text/javascript" src="resources/dropdown.js" ></script>
<link rel="canonical" href="">
</head>
<body>
<div id="banner"><img src="images/top.jpg" alt="" >
<div id="nav">
<ul>
<li style="background: #ec9aa5;"><a href="">Home</a></li>
<li><a href="" >Shirts</a></li>
<li><a href="" >Hats</a></li>
<li><a href="" >About</a></li>
<li><a href="" >Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
</div>
</div>
<div id="right_column">
<div id="sidebar">
Content Goes Here!
</div>
</div>
</div>
<div id="footer">
<div id="footer_info">Copyright 2010 SL CLothing LLC. Web Design and Layout by : Ian Auld</div>
</div>
</body>
</html>
Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> I am a newbie to CSS and HTML I am trying to understand how div positioning works I made a CSS and a class container where I did put some thing now I made another class say named useful which is placed inside div tags of class container white I am finding problem is when the next div element of class useful is placed then its position is not coming as I desire some one told me to use float to over come it worked when I used an image but it did not worked when it was not an image here are the contents of my CSS about which I am asking .header_container { margin:auto; height:101px; width: 1290px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: #D5EDB3; border-right-color: #D5EDB3; border-bottom-color: #D5EDB3; border-left-color: #D5EDB3; } .header { background-image: url(n/mm_health_photo.jpg); height: 101px; width: 382px; } .header1 { position:relative; background-color: #D5EDB3; height:101px; width: 908px; float:left; border-left-color:#999900; border-left-width: thin; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; margin-left: 381px; margin-top: -101px; } Now the problem is in above CSS margin-left and margin-top has been used which I dont think is needed following is my html code <!-- Header Container Startts --> <div class="header_container" > <div class="header"> </div> <!-- header container left image in this box --> <div class="header1"></div> <!-- the right side of header --> </div> <!--Header Finishes here --> Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it? Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! Hi everyone, I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow. The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look) It renders perfectly in Firefox, safari and google chrome. Go figure. I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit: w w w . goscoblog. com/test/index.html Thanks In advance I think the best way to explain this is by example, if you go to this page: http://lifeyouwant.workinprogress.co.uk/how-we-work You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right. Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox). I would prefer to try not to use a hack for IE7. ANy ideas would be great! Thanks. Good morning, I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out. I have a floating bar with all of my navigation links in it which is absolutely defined with the following code: Code: #headerBar { /* sets position of floating bar */
position: absolute;
clear: both;
top: 57px;
left: 0px;
padding: 0px;
margin: 0px;
width: 100%;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be. The url is: http://www.alokw.com Any suggestions? Thanks! Hey guys, This is my first time messing with absolute positioning, and I am in a pickle. I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up. Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site. Check out the page and source code he URL Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes): Code: <style type="text/css">
<!--
div#links a:hover {text-decoration: none;
background: #698165;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
padding: 5px; margin: 10px; z-index: 100;
color: white;
font: 10px Verdana, sans-serif; text-align: justify;}
div#links a:link { text-decoration: none;
color: white;}
div#links a:visited { text-decoration: none;
color: white;}
-->
</style>
then the code is activated by: Code: <a href="#">Mowing <span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care. Our services will provide you with a beautiful, healthy landscape that will turn heads. If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes. </span> </a> Any help would be greatly appreciated, and thanks in advance! Hello All. I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe BUT, I have ran into a problem on myspace with code. I am trying to create a linkable image I believe it would be called. <a href="website url"> <img src="wouldnt let me post url's" /> </a> Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.) I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also. I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage. Thanks in advance to anyone who replies, and also apologies for my incredible noobness. -Connor Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence. I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div. If you go to http://www.refinethetaste.com/html/ At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right. Hey, I have a bit of a problem and am very new to using CSS. On a web site I am making I have used a CSS style sheet to position a table on the page. This what the coding on the sheet is like: table { position: absolute; top: 117px; left: 120px; width: 167px; } However, I have a second table that I wish to position using absolute positioning, but I have no idea how the browser can tell the difference between the two. As you can see above, the first table has been identified as 'table', but what can I call the second table so that I can use different pixel settings without effecting the first? 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... Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/ heres the css Code:
html, body {height: 100%;}
body {
background: #beb185 url('images/bggrad.gif');
background-attachment: fixed;
font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 0px;
margin: 0px;
text-align: left;
}
/*==============================
Layout
==============================*/
div#container {
background: #fff;
width: 961px;
height: 100%;
margin: 0px;
padding: 0px;
text-align: left;
float: left;
z-index: 1;
}
div#page {
height: 100%;
float: left;
z-index: 2;
}
#left-col {
background: #121212 url('images/leftcolgrad.jpg');
color: #fff;
width: 190px;
min-height: 100%;
height: 100%;
padding: 0px 5px 0px 5px;
border-right: 10px solid #13496e;
float: left;
z-index: 3;
}
#right-col {
color: #000;
width: 750px;
height: 100%;
padding: 0px;
border-right: 1px solid #121212;
float: right;
z-index: 4;
}
div#header {
background: #fff;
width: 740px;
height: 78px;
margin: 0px;
padding: 0px 5px;
text-align: left;
float: left;
z-index: 5;
}
div#content {
background: #fff;
width: 740px;
padding: 0px 5px 0px 5px;
float: left;
clear: both;
z-index: 6;
}
div#footer {
position: absolute;
bottom: 0px;
background: #000 url('images/footergrad.jpg');
width: 740px;
height: 180px;
padding: 0px 5px 0px 5px;
float: left;
/*clear: both;*/
z-index: 7;
}
K...I have an absolutely positioned toolbar in a search tool page. There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content! Anyone know what I can do about this? It's a little...crappy. MPEDrummer For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px; What I get when rendering however, is the following: Right: http://tim.komta.com/images/css/Firefox.gif Wrong: http://tim.komta.com/images/css/IE.gif More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising. Anyway, what am I doing wrong? If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning. Any thoughts? MPEDrummer Ignore this post, I guess - I got it working. I think - not sure - it was the order of things in the stylesheet. Honestly, I'm not sure. I begin every post with an apology - I'm old and CSS is still fairly alien to me... I mean, this is an awfully basic question. I think I understand absolute positioning - well, obviously I guess I don't; but I've used it on my current project, and on some previous ones, to position elements on a page..... Right now, I am trying to position a search box under a java slider or, at least, somewhere else on the page. The search form is within a DIV, already - maybe that's the problem. I always thought that you could create a DIV that simply used the absolute directive, assign the values for top and left, and wrap it around an area of a page - even another DIV. Then again, I'm an idiot. I cannot get this damned search box to end up anywhere other than where the code for the form DIV is placed (in other words, placing a DIV around it in an attempt to absolutely position the thing does nothing). I thought that would work. I though I'd done that before. Maybe I need a very, very long nap and a new job when I wake up. Anyway, as opposed to pasting all of the code, here's a link to the thing's temporary parking place: http://www.michiganstatemattress.com Could someone tell me how I could move that darned form up into the area I've described in the pic - I though about putting it in the header....I'm not sure. Thanks for any input. 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! |
|||||||