|
CSS - Problems Seperating Div's Vertically
hi guys, having a few problems laying out div's on my page....
http://www.coltontooling.co.uk/test.php (all the css is in style tags in the page itself) I have one div surrounding all content called wrapper, which just centers the page. Then I have the orange bar and menu bar, and the white div which is called main content. My problem is trying to get the last grey bar to sit nicely at the bottom of the page. I placed it at the bottom of the white maincontent div with a negative margin-bottom, but as you can see (in firefox at least) it hovers almost at the bottom, but not quite far down enough. No matter what I change the margin-bottom to, it will not move down any further. My other attempt was to put it outside the maincontent div at http://www.coltontooling.co.uk/2.php , but as you can just about see it sits at the top behind the maincontent div. I could move it down manually from here but then it wont match any dynamic content in the maincontent box. Am i missing something obvious here? I'm pretty stumped thanks a lot, tom Similar TutorialsI'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use. Here's the code I have so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>LAYOUT</title> </head> <body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);"> <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div> </div> </div> </body> </html> I'd love some advice, as I'm very much a hobbyist at this. P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks. Robin I'm trying to make a box (graphic) that will expand vertically as more content is added. I've made my border with flourishes and shadows, so a purely CSS box design isn't an option... Here's an exploded view of what I'm looking to do: ________________ |.........................| |.........................| |.........................| Top section that is static |.........................| |.........................| |.........................| Middle section with vertically |.........................| repeatable graphic |________________| Bottom section that closes it off Here's my code so far... Code: <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">THIS IS THE CONTENT AREA</div> </div> </div> This code only makes the top half of the design, I can't seem to make the middle and bottom parts work. I'd appreciate any suggestions. Thanks. Hi, I use blog software (Wordpress) to run my site and this allows me to use different themes. I have created three themes that are exactly the same except for the colours used. I would like to seperate the layout definitions from the colour definitions so that I can call the layout css on all of them and then call the required colour css. I have tried taking out all references to colour and then putting those references into a new css and then calling that but unfortunately it didn't work. I am presuming that some definitions require more than just colours. Can somebody help seperate the layout from the colours for me? I'm sure there are other "issues" with the css, so if anything else is bad please let me know. I have attached the relevant css as a text file. TIA Phillip Even though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search. Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this. Thanks! I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6 http://www.fogcat.co.uk/example/test002.html But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE. I'm told that display:inline-block is not properly supported, which is probably the root of my problems. What I want a set of divs down the page (the "imagedivs") Each div will contain An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image. This is one of those things that's a doddle with tables, but I'm trying to train myself to think CSS. What obvious thing am I over looking? Code: +--------------------------------------+ | +----------------+ | | | .............. | | --- <div> | | : : | | ... <img> | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ +--------------------------------------+ | +----------------+ | | | .............. | | | | : : | | | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems. I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else. Here's how it looks now: Code: <html> <head> <title>CSS Divisions</title> <style type="text/css"> #Wrapper { width:800px; margin-left:auto; margin-right:auto; text-align:left; } #Header { width:800px; height:120px; background:#FC6;} #PNav { width:800px; height:40px; float:left; background:#CCC; } #Content { width:800px; height:400px; float:left; overflow:hidden; background:#FFC; } #Footer { width:100%; height:80px; float:left; text-align:center; background-color:#FC6; } </style> </head> <body> <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div> </body> </html>
Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen. I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far. Any help would be greatly appreciated! I am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen. Thanks i'm trying to vertically align a div box (the sign in area) so that it sits on top of this grey (soon to be) navigation bar...i've floated the box to the right...i want it to align to the bottom now...can anyone help me? ------> http:// www . u2station . com / index2.php and the stylesheet is at: http:// www . u2station . com /movabletype/mt-static/support/themes/u2station/u2station.css i've basically been trying to radically modify an existing theme that movable type (MT) publishing system created so i can alter it to my specs. any quick help with this simple css adjustment would be extremely helpful...(otherwise i'm thinking of reverting back to old fashioned tables as a last resort). Hello, how do you align vertically a radiobutton with label without using the <br> tag in css? Code: <fieldset>
<legend>Food</legend>
<input name="Password" type="radio" id="p" value="" checked="checked" />
<label>HTML</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>ASP</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>Donut</label> <br />
<input name="n1" type="radio" id="p" />
</fieldset>
Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks OK, I have three images: a top, middle, and bottom that need to align vertically. It should look like a typewriter with paper coming out when said and done. You can see what's wrong at csshore(dot)com Here is the css: #top { background:url(images/top.gif) no-repeat; background-position:50%; width: 617px; float:none; margin:0 auto; height: 55px; position: relative; } #container { background:url(images/middle.gif) repeat-y; background-position:center; width: 601px; padding:0; margin:0 auto; height: 100%; position: relative; min-height:600px; } #bottom { background:url(images/bottom.gif) no-repeat; background-position:50%; width: 800px; height:485px; margin:0 auto; position: relative; } .center { background-image:url(images/wood014.jpg); } And the html: <div id="top" class="center"></div> <div id="container" class="center">When in the course of human events, it becomes necessary for a people to through off the reigns of governement and create a new one. </div> <div id="bottom" class="center"></div> Ignore the failed attempt to quote the Declaration of Independence. I have tried everything I know (which admittedly is little) and I can't get them to align. Thanks in advance. Hi, Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions. Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them. Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:- IMG.middle { vertical-align: middle; } In the HTML for the image map I have:- <IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/> Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top. Cheers, Rob. So I'm still on my quest to be able to create my 1st entirely CSS site, and need some help as I'm not sure how to do this. I want to be able to align a navigation list at the bottom right of the content area. Also while I'm at it, I want the site to be at a minimum 462px (just an example), but would like for it to increase in height if the content itself expands beyond the 462. And the navigation menu, I'd like to somehow keep at the bottom right of the viewable area. Thanks... here's the code... HTML Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div class="outer"> <div class="logo"> <img src="images/logo.gif" /> </div> <div class="spacer"> </div> <div class="nav"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a> </div> <div class="content"> <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> </body> </html> CSS Code: Code:
body {padding:0px;
margin:0px;
}
div.outer {background-image:url('images/bg2.jpg');
background-repeat:no-repeat;
width:770px;
height:462px;
}
div.logo {text-align:right;
padding:10px;
height:75px;
}
div.spacer {float:left;
width:200px;}
div.nav {float:right;
text-align:right;
padding:20px;
}
div.content {background-image:url('images/bg3.jpg');
width:400px;
padding:20px;
}
.nav a{text-decoration:none;
color:black;
font-size:20px;
font-family:"sans serif", verdana, arial;
}
.nav a:hover{text-decoration:underline;
}
Hey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties: #gNav { width:768px; height:19px; text-align:left; vertical-align:middle; } i need for the three text links to line up directly in the middle (vertically) of that <div>. To achieve this in IE6 and NN+, I attach the following style to the text. .nookum { font-size:.9em; vertical-align: 25%; color:#FFFFFF; } I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>. Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE? Not strictly css but css may be the solution :-) I have created a sample page where you can see the problem: http://www.virtual-league.com/demo/ I want the images to sit flush above one another. If I take the text out of any of the lines then the images on those lines will join up nicely. Any ideas? is it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. Suppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally. To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing. Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right? Skolem How would I center an image vertically in a div that has varying height? Normally I would set a line-height and then a vertical-align but the container is of varying size dependent on content . The only way I can think of is to make the image a background and do background-position: center center; Is that the only workaround? Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> |
|||||||