|
CSS - Layout Problem Involving Ie And Floated 'things'
hello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases.
i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content. not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like here a cut down version of the page, including just the area in question is available here XHTML css i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK? in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE. a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience. would anyone mind having a look? hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain. thank you for your time J Similar TutorialsI am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things. Example One: The header of the search box is stretching to the right, when the googleads box is floated right. Eample Two: The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers. These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks! Site CSS Problem here - view in IE6 Relative CSS Hello! This is quite an odd one. In IE6, there's a problem whereby upon hovering over the category / product links, the position of elements will shift a small amount. This is the best I can explain the issue really. There are no positioning changes attributed to the .hover pseudo-element on either class. I have a feeling it has something to do with margins, but am at a loss trying to find the solution. Any help rewarded with a glacier cherry, some sugar and 44 gleaming rep points Hello, I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one. My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content. I placed: Code: <br style="clear: both;"> after the content <div> which usually does the trick but it's not working for some reason... And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus. This happens in IE only. Any ideas? Page html/css: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
background-color: #f9dcb3;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#cRightPaneBot {
background-color: #D9E0EA;
border: 1px solid #9DA7B5;
margin: 23px 0px 0px 0px;
padding: 15px 10px 15px 15px;
/*
width: 673px;
height: 238px;
*/
}
.cLeftPane {
margin: 0px 20px 0px 0px;
border: 1px solid #9DA7B5;
overflow: hidden;
float: left;
background-color: #F5F7FB;
height: 223px;
/*
*/
}
h1 {
font-size: 1.5em;
/*
display: inline;
*/
}
.breakAfter {
margin: 0px 0px 10px 0px;
}
</style>
</head>
<body>
<div id="cRightPaneBot">
<h1 class="breakAfter">My Title</h1>
<div class="cLeftPane" style="width: 200px;">
hello
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna.
</div><br style="clear: both;">
</div>
</body>
</html>
I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would. Here is the basic code I have so far: Code: <html>
<head>
<style type="text/css">
div.box1 {
border: 1px solid red;
background: #afafaf;
padding: 2px;
float: left;
}
div.box1 table {
float: left;
border: 1px solid blue;
margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
<table>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
</table>
<table>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<h1>Next Text</h1>
</body>
</html>
I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code: div.box1:after {
content: 'clear me';
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables? I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css. I got a header (140px height), main container and a footer. The main container consists of three areas (from left to right): - a fixed sized column with some illustration (48px) - main contents column, (all available space) - a fixed sized column with newsfacts and such (301px) I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link. I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px. Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is. Here's a screenshot fragment in Firefox, the only browser in which I got it to work: http://www.stack.nl/~rem/linksbox.jpg I've got the following code: 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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welkomstpagina</title>
</head>
<body>
<div id="startpageLinksBox">
<div id="links">links</div>
<!-- <ul>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
</ul>
-->
</div>
</body>
</html>
with the following CSS file. Code: body {
margin: 0;
width: 100%;
background: url("../../images/common/bg_news.gif") repeat-y top right;
}
div#links {
display: inline;
height: 20px;
border: solid 1px #000000;
float: right;
width: 200px;
margin-left: 48px;
margin-right: 0px;
}
div#startpageLinksBox {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #e0e0e0;
height: 20px;
position: absolute;
left: 48px;
top: 140px;
margin-right: 302px;
}
div#startpageLinksBox ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
border: solid 1px #000000;
height: 20px;
}
div#startpageLinksBox ul li {
float: right;
border: solid 1px #e0e0e0;
padding: 0px 5px;
}
a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }
Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem. It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems. I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing. Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
How do I fix this CSS-Firefox Issue? I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox. CSS: #nav {width:400px; list-style:none; overflow:hidden;} #nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/} #nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);} #home {} #home:hover {background-position:0 -100px;} #products #products #history #history #contact #contact #nav a:link {color:blue;} #nav a:hover {color:green;} a {outline:none;} HTML: <td width="80%" id="nav"><center><ul id="nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="product">Products</a></li> <li><a href="#" id="history">History</a></li> <li><a href="#" id="contact">Contact</a></li> </ul></center> </td> [This menu is organized by a large table, hence the 80% width which helps organize the elements of the page] PLEASE Help me. I can't seem to get it working. EDIT: Solved. Hi, Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links) h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0 and h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0 The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers. In the style sheet a div tag positions the address : #address {clear:both;position:relative; font-size:smaller; top: 40px; left: 0px; width: 145px; height: 80px; } I've used <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" /> <![endif]--> In the page the address is written as: <div id="address"> <div align="right">The Company Name Inc.<br> 1234 Glenn View Road<br> Hilldale, OW 12345<br> 123-456-7890</div></div> ...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect. A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address. I want to know a fix that will position the address correctly about 40px below the menu. Thanks I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish: www.dvolve[PLEASE REMOVE].org/tst.jpg And here's what I currently have: www.dvolve[PLEASE REMOVE].org/tst.htm However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong? Hello, I'm having issues with a new layout in IE 6. The HTML is as follows: Code: <div id="gsContainer">
<div id="gsLeftBorder"></div>
<div id="gsRightBorder"></div>
<div id="gsContent">
<div id="gsHeader">Heading</div>
<div id="gsBox">
Some content
</div>
</div>
</div>
The CSS is as follows: Code: #gsContainer {
position: relative;
width: 795px;
height: 185px;
margin: 0 0 15px 0;
padding: 0px;
}
#gsLeftBorder {
float: left;
position: relative;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/Left.gif);
background-repeat: no-repeat;
height:185px;
}
#gsRightBorder {
position: relative;
float: right;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/GreenRight.gif);
background-repeat: no-repeat;
height:185px;
}
#gsContent {
position: relative;
height: 185px;
margin-left: 4px;
margin-right: 4px;
width:779px;
padding: 0px;
}
#gsHeader {
position: relative;
height: 25px;
margin: 0px;
padding: 6px 0 0 10px;
width:769x;
color: #fff;
font-size: 14px;
font-family: arial;
font-weight: bold;
background-image: url(/images/Header.gif);
background-repeat: repeat-x;
}
#gsBox {
position: relative;
height: 129px;
margin: 0px;
padding: 25px 5px 0px 31px;
width:743px;
color: #000;
font-size: 11px;
font-family: verdana;
background-image: url(/images/Back.gif);
background-repeat: repeat-x;
}
The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side. However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div. When I play with the widths, if I shave 8px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder Any ideas how I can resolve this? Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Hello there. I Have a small problem i think. I have an layout which i want to have heights in %. This seems to be difficult. In the attachement i have an example of how it is ment to look. The header should be 135px height. The 2 leftside blocks should be 50% of the page which is left, and not the whole page (viewport). I Don't have an good example, becouse i can't figure it out :S. If someone has an link to somekind of div-builder or fluid design builder etc.. that would be nice . Thx in advanced. Css Layout Problem -------------------------------------------------------------------------------- This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Hi! Am new here, been doing CSS for a few months now, had a few problems here and there, but overall, is going well I have done this website homepage so far : http://www.moretonhallglass.com/cross/ It works fine on all browsers, except 1! which is IE 6. I have read into bugs for this but have been unable to fix it as yet. The problem is that the middle picture with the painting and descripton it seems to have a break at the top of it and pushes it down the page, have tried all sorts to fix it in the CSS code, but to no avail yet. Anyone know how to fix it? Thanks for your help HTML : 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=ISO-8859-1" />
<title>Daisy Cross</title>
<script type="text/javascript">
<!--
function swap(img, ref) {
if (document.images) { document[img].src = ref; }
}
-->
</script>
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/top.jpg" width="940" height="129" border="0" alt="Daisy Cross" />
</div>
<div id="mid" style="display: inline;"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/dcross_01.jpg" width="940" height="24" border="0" alt=""></td>
</tr><tr>
<td><img src="images/dcross_02.jpg" width="545" height="135" alt=""></td>
<td><a href="#" onmouseover="swap('mid1','images/dcross2_03.jpg')" onmouseout="swap('mid1','images/dcross_03.jpg')"><img name="mid1" src="images/dcross_03.jpg" width="194" height="135" border="0" alt=""></a></td>
<td><a href="#" onmouseover="swap('mid2','images/dcross2_04.jpg')" onmouseout="swap('mid2','images/dcross_04.jpg')"><img name="mid2" src="images/dcross_04.jpg" width="201" height="135" border="0" alt=""></a></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_05.jpg" width="940" height="136" border="0" alt=""></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_06.gif" width="940" height="10" border="0" alt=""></td>
</tr>
</table></div>
<div id="content-container">
<div id="content">
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onmouseover="swap('nav1','images/nav2_01.gif')" onmouseout="swap('nav1','images/nav_01.gif')"><img name="nav1" src="images/nav_01.gif" width="130" height="32" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav2','images/nav2_02.gif')" onmouseout="swap('nav2','images/nav_02.gif')"><img name="nav2" src="images/nav_02.gif" width="130" height="31" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav3','images/nav2_03.gif')" onmouseout="swap('nav3','images/nav_03.gif')"><img name="nav3" src="images/nav_03.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav4','images/nav2_04.gif')" onmouseout="swap('nav4','images/nav_04.gif')"><img name="nav4" src="images/nav_04.gif" width="130" height="29" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav5','images/nav2_05.gif')" onmouseout="swap('nav5','images/nav_05.gif')"><img name="nav5" src="images/nav_05.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav6','images/nav2_06.gif')" onmouseout="swap('nav6','images/nav_06.gif')"><img name="nav6" src="images/nav_06.gif" width="130" height="28" border="0" alt=""></a></td>
</tr>
</table>
</div>
<div id="aside" class="text">
<img src="images/welcome.gif" width="400" height="42" border="0" alt="Welcome" />
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div><div id="footer">
<img src="images/footer.jpg" width="888" height="60" border="0" alt="" />
</div>
</div>
</body>
</html>
CSS : Code: #container
{
margin: 0 auto;
width: 940px;
background: #fff;
}
#header
{
background: #ccc;
padding: 0px;
margin: 0 0 0 0px;
display: inline;
}
#header h1 { margin: 0px; }
#mid
{
margin: 0;
padding: 0;
background: #ffffff;
display: inline;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 940px;
height:auto;
background: #fff;
}
#content
{
clear: left;
float: left;
width: 160px;
padding: 0px 0;
margin: 0 0 0 20px;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 750px;
padding: 10px 0;
margin: 0 10px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #fff;
text-align: right;
padding: 0px;
}
This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Please have a look in the attached example: the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side. Anyone with some advice? Hi, I am trying to create a two sided site with nav and constant info on the right and a dynamic area on the left. I have laid out the right side as I need it but can't get both sides to start at the same point on the page. I think this has to do with the way I need it setup to show the background images I have for each div. The right side always starts after the left has finished depending on how much content is in the left area. I have an example link attached with some of the basic code and the .css file Example Page http://parkesproperties.com/dublin_blues/divtest.html .css file http://parkesproperties.com/dublin_blues/base_mz2.css All images http://parkesproperties.com/dublin_blues/images Is there a work around or have I missed something obvious? Any help is appreciated! Cheers Denis |
|||||||