|
CSS - Using Css To Alter Divs Display Order?
Hello everyone,
I am currently trying to find a solution in css that would allow me to alter the design of the following html structu Code: <body> <div id="header"> Website Title Here </div> <!-- header --> <div id="content"> <div id="article"> Article goes in here </div> <!-- article --> <div id="menu"> Menu goes in here </div> <!-- menu --> </div> <!-- content --> </body> What I want to do is keep that structure intact so that when someone visits the page from a text browser or something else that does not support css, the article appears before the menu. But I want the menu to appear before the article when someone has css enabled (not to the left or right of the article, but above it altogether). I tried using the "position: absolute; top: 0; left: 0;" tag on #menu, and while it does move the menu right under the header, it doesn't bump the article under the menu, it leaves them both overlaying each other. The first solution that comes to mind would be to add the same css tags to #article and move it down by the height of the menu, but the problem is that the menu will always vary in height. Is there a way to make the article align itself with the bottom of the menu div without using fixed values? Thanks! Jerome Similar TutorialsAs usual, my designs work best in Firefox, but this time it's to an annoying degree, because the menu on this page shows on the left underneath the shrimp logo, but in both IE 6 and IE 7 it's between the two header divs. Oh, and in IE 6 the header background colour doesn't show up. I know the PNG doesn't work, too, but I can fix that with Javascript later on, it's not too crucial. Would anyone please help me with this? Here's the code: style.css Code: body {
background-image: url('images/background.png');
background-color: #FFFFFF;
font-family: Gill Sans MT, sans-serif;
font-size: 16px;
}
h1 {
font-size: 110%;
}
h3 {
font-size: 105%;
margin-left: 4px;
margin-top: -1px;
margin-bottom: -8px;
}
#container {
padding: 5px;
background-color: #CAD1F4;
background-position: top left;
background-repeat: no-repeat;
background-attachment: scroll;
margin: auto auto auto auto;
max-width: 1024px;
min-width: 800px;
border: 1px dashed #000000;
}
#header_left {
background-image: url('images/header_bg.png');
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #B5BFF2;
float: left;
width: 630px;
height: 180px;
clear: right;
}
#header_right {
float: right;
padding-top: 20px;
padding-bottom: 20px;
width: 160px;
height: 140px;
}
#navigation {
float: left;
clear: left;
width: 130px;
border: 4px double #000000;
margin-top: 3px;
}
#li_home {
list-style-image: url('images/home_icon.gif');
}
#li_about {
list-style-image: url('images/about_icon.gif');
}
#li_cast {
list-style-image: url('images/cast_icon.gif');
}
#li_blog {
list-style-image: url('images/blog_icon.gif');
}
#li_gigs {
list-style-image: url('images/gigs_icon.gif');
}
#li_photo {
list-style-image: url('images/photo_icon.gif');
}
#li_contact {
list-style-image: url('images/contact_icon.gif');
}
#li_feedback {
list-style-image: url('images/feedback_icon.gif');
}
#main {
float: right;
width: 83.75%;
}
#footer {
padding: 20px;
clear: both;
}
#footer p {
text-align: center;
font-size: 70%;
}
#footer a:link, a:visited, a:active {
color: #000000;
text-decoration: underline;
}
.noborderimg {
border: 0px;
}
index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SHRIMPS - Sheffield University Improv Society</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="STYLESHEET" type="TEXT/CSS" />
<script type="text/javascript" src="http://www.makepovertyhistory.org/whiteband_small_right.js"> </script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header_left"><img src="images/logo_color.png" class="noborderimg" alt="Shrimpage the Shrimp!" /><img src="images/shrimps_header.png" alt="SHRIMPS - Sheffield University Improv Society" /></div>
<div id="header_right"><a href="http://www.shef.ac.uk"><img src="images/sheffield_uni_button_160x40.png" class="noborderimg" alt="The University of Sheffield" /></a><br /><a href="http://www.sheffieldunion.co.uk"><img src="images/sheffield_union_button_160x40.png" class="noborderimg" alt="Sheffield Union" /></a></div>
<div id="navigation">
<h3>Navigation</h3>
<ul>
<li id="li_home">Home</li>
<li id="li_about">About Us</li>
<li id="li_cast">Cast</li>
<li id="li_blog">Blog</li>
<li id="li_gigs">Gigs</li>
<li id="li_photos">Photos</li>
<li id="li_contact">Contact</li>
<li id="li_feedback">Feedback</li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"><p>This interweb site was designed by resident geek <a href="http://www.danielhough.co.uk">Daniel Hough</a>, and the "Shrimpage the Shrimp" logo (top left) was created by the very talented <a href="http://katebert.deviantart.com">Kate Wiles</a>.</p></div>
</div>
</body>
</html>
Thanks, I'd appreciate any help at all. I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution. Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser. I've validated my code, and just can't figure out what the problem is. (I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.) Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help. Here is the HTML: <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="parent"> <div id="left_top"> </div> <div class="bigcontainer" id="right_top"> a very<br>special<br>place<br>on the<br>internet </div> <div class="container" id="left_mid"> additional reading </div> <div class="container" id="right_mid"> tab one | tab two | tab three | tab four | tab five </div> <div class="container" id="left_bottom"> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </div> <div id="right_bottom"> <p> Lorem ipsum dolor sit amet... </p> </div> </div> </BODY> </HTML> Here is the CSS: body { font-family: sans-serif; font-size: 10px; margin: 0; padding: 0; background-color: #e5e5e5; } div.bigcontainer { font-size: 20px; font-weight: bolder; vertical-align: middle; padding: 20px 20px 0px 0px; text-align: right; } div.container { font-size: 12px; font-weight: bolder; vertical-align: middle; padding: 10px 20px 5px 0px; text-align: right; } #parent { margin: 0px; padding: 0px; position:relative; } #left_top { width: 35%; height: 190px; background-color: #7d7d7d; float: left } #right_top { width: 65%; height: 190px; color: #ffcc00; background-color: #666666; float: right; } #left_mid { width: 35%; height: 35px; color: #ffff99; background-color: #ffd426; float: left; } #right_mid { width: 65%; height: 35px; color: #666666; background-color: #ffcc00; float: right; } #left_bottom { width: 35%; height: 100%; padding: 20px; color: #999999; text-align: right; background-color: #e5e5e5; float: left; } #right_bottom { width: 65%; padding: 20px; color: #666666; text-align: right; background-color: #ffffff; float: right; } Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Were in the middle of re-writing our tools and alowing our users (who put our tools in their website) much more controll over the css of the page. One of the things were touting is that the user can change the order of the fields in the forms to suit what ever is more important to them. While this may work well positionally , the tab orders are all f'd up. Is there any way to set these in CSS?.. All of the inputs and labels are each in their own divs with a unique ID. I'm thinking this isn't possible but I thought id ask I'm having trouble with the CSS on this page: http://www.mediamogulsweb.com/... You'll notice that in IE the CSS drop down menu is partially hidden by the center graphic on the page...In FF, this is not a problem.... I'm almost entirely sure that this is a z-index issue, but I've checked the z-index, and everything seems fine....the drop down menu elements have a higher z-index than the center graphic elements, yet it still doesn;t work in IE... Any ideas why? Thanks. Hi So I am setting up a portfolio website and I have been focusing mainly on the highslide portion which I got working great (with this forums help, thank you!). Now I have gotten rid of all the tables and garbage like that and am trying to make the images the backgrounds so they will be locked but now the image links spill out of the column and don't line up anymore. this is what it SHOULD look like: http://kdpatton.com/index01.htm but this is what does look like: http://kdpatton.com/portfolio02.htm I can't figure out why. Any help would be great. Love this forum! Thanks for taking the time to read my question. Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed? I'm trying to make a page, and it works in IE, but not in Firefox. Thanks, Brad is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks. Code:
#page_footer {
background-color: #ff0000;
width: 729px;
height: 30px;
position:relative;
bottom: 0px;
left: 35px;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
}
<!-- // MANDATORY PAGE CONTENT HOLDER // -->
<div id="page_content_holder_sizing">
<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<!-- // CONTENT TEMPLATE // -->
<!-- // END CONTENT TEMPLATE // -->
</div>
<!-- // MANDATORY PAGE FOOTER // -->
<div id="page_footer">
footer goes here
</div>
<!-- // END MANDATORY PAGE FOOTER // -->
<!-- // END MANDATORY PAGE CONTENT HOLDER // -->
I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to. Here is a simplified example of my problem: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>
<body>
<div style="position:relative;">
<div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
</div>
<div>
<div style="position:relative;background:red;height:300px;">
If you can read this, I am higher in the stacking order than the green <div>
</div>
</div>
</body>
</html>
The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option. This is only happening in IE6 and 7. Anyone have any any ideas? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm |
|||||||