|
CSS - Divs Not Aligning Properly
I'm trying to recreate a header that was built using tables.
Here is an example of the original header. This is how I want it to look using div. http://65.175.116.253/logo/html_head_p1.html Here is the code for the table based header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <img src="http://65.175.116.253/logo/banner.jpg"> </td> </tr> </table> </body> </html> Here is the header using the code with DIVs. http://65.175.116.253/logo/styletest.html Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px;
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#headerbanner {
background: #004C91;
position: absolute;
width: 600px;
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">
</body>
</html>
Similar Tutorialshttp://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> What've I done wrong...? See what's happening with my calendar he tuirennhurstfield.com/calendartrial.php In IE8 the SUN & MON columns are replacing columns FRI & SAT and are pushing TUES-SAT down a level so they are below... This seems to only be happening in IE8, works fine in IE6, IE7, Safari and Firefox... I purchased this script and the script worked fine in IE8 on the demo (see he codecanyon.net/item/smooth-php-calendar-reloaded/full_screen_preview/105891 ) I've clearly edited something wrong in the CSS when I was making it work with the visual look of my site... But I'm not sure what I'm looking at, and the original developer has given me the sterling advice of "check your css" If you can help at all please let me know! Thanks!!! I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated. Here is the HTML and the CSS is below it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div><!-- /#header -->
<div id="navigation">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >Links</a></li>
</ul>
</div><!-- /#navigation -->
<div id="content">
<div id="leftcolumn">
<div class="box_blue">
<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
<div class="box_content_blue">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
</ul>
</div><!-- /.box_content_blue -->
</div><!-- /.box_blue -->
</div><!-- /#leftcolumn -->
<div id="main">
<p>This is the main content</p><br /><br />
<p><a href="layouts/121836.htm">
<img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
<p><a href="layouts/121836.css">
<img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
<p>To download, right click and choose 'Save Target as...'</p>
<p> </p>
<p>If you use one of these layouts, please consider linking to CSS Portal.<br />
http://www.cssportal.com</p>
</div><!-- /#main -->
</div><!-- /#content -->
<div id="footer">
<p>This is the Footer</p>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
</body>
</html>
Code:
* { padding: 0; margin: 0; }
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('images/bg.png') fixed;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#header {
color: #333;
height: 200px;
background: url('images/header.png') fixed;
}
#footer {
height: 100px;
clear: both;
color: #333;
background: #6B6659;
}
#navigation {
float: left;
width: 1000px;
height: 35px;
color: #333;
background: #6B6659;
background: #b5bdc8; /* old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
line-height: 35px;
}
#navigation li {
display: inline;
float: left;
padding: 0 10px;
color: #dddddd;
}
#content {
background: #f6f9fa repeat;
color: #545454;
margin: 0 auto;
box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
-webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
position: relative;
}
#leftcolumn {
color: #333;
background: #EBE3CD;
width: 200px;
float: left;
padding: .5em;
}
#main {
color: #333;
background: #fff;
width: 770px;
float: right;
padding: 8px;
}
.box_blue {
-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
margin: 1.6em 0;
}
.box_header_blue {
background-color: rgb(23, 71, 115);
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 3em;
text-align: center;
font-size: 1.2em;
-moz-border-radius-topleft: 1.2em;
-moz-border-radius-topright: 1.2em;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px; border-style: solid;
border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50);
text-shadow: 1px 1px 1px rgb(16, 16, 16);
background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
}
.box_content_blue {
padding: .5em;
background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
display: inline-block;
border-right: 1px solid rgb(0, 0, 50);
border-width: 1px;
border-style: solid;
border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50);
-moz-border-radius-bottomleft: 1.2em;
-moz-border-radius-bottomright: 1.2em;
}
.box_content_blue li {
padding: 10px 0;
border-bottom: 1px dotted #cccccc;
}
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 I am trying to get these 2 divs, which are going to be acting as a "tab" off of the main layout of the page. The first one for Personal is working and displaying correctly as far as I can tell, but something is wrong with my Business one. It doesn't seem to be taking any of my styles for displaying that tab correctly, either that or the position is totally off. If anyone could help me out I'd greatly appreciate it. Here's the css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: #ffffff;
}
#acccountselector-business {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: url("accountselectorleft.png");
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
min-width: 64%;
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: #ffffff;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 200px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 12px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: left;
width: 33%;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And the html: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id="accountselector-wrapper"> <div id= "accountselector-home">Personal</div> <div id= "accountselector-business">Business</div> </div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id= "headerwrapper-spacer"> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage My Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Thanks I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox. It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK. The sections are Core Details Features Description Contact/Shipping/Payment Promotion Brief example <div> <h2>Core</h2> content bla bla bla </div> <div> <h2>Details</h2> content bla bla bla </div> The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up. Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail. http://quotes.cybercon.net/classifiedsform.html Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section. http://quotes.cybercon.net/classifiedformIE.jpg http://quotes.cybercon.net/classifiedformFF.jpg Thanks! -Jason My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions? I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line. gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left. I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned? link to photo Album can be found here but please note this is a dynamically set IP so is likely to change: http://85.210.107.231/PA.html Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie Hi All Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE: http://www.flatsinbraunton.co.uk/ce/ Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin Essery Carpets</title>
<style type="text/css">
html {
font-family:Helvetica,Arial,sans-serif;
}
body {
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-body.jpg);
background-repeat:repeat-x;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
#logo {
position:absolute;
left:0px;
top:78px;
width:327px;
height:102px;
}
#headstrap {
position:absolute;
left:327px;
top:78px;
width:473px;
height:102px;
}
img {
border-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
</div>
<div id="headstrap">
<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
</div>
</div><!--END CONTAINER DIV -->
</body>
</html>
Any help welcome thanks Rich 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; } I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. 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. |
|||||||