|
CSS - Layout Problem - Layers
Okay, I am attempting to make my first-ever layout, (all by myself!! I'm so proud.) but, seeing as this is my first real attempt, I've run into some problems. My latest seems pretty simple, yet I can't seem to find a solution...
The page in progress is here. Currently I have made divs as a css layout for my content, and have a fixed background. The problem: I would like it if my content didn't go over the top part of the background; the moon and the brushes/text I plan to add. Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane? I don't know if I'm at all on the right track with this, so I'd appreciate your thoughts and suggestions. Thanks. Similar Tutorialsi'm trying to write a liquit layout based in layers and css and have the next code: Code:
<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>
and in the body: Code: <body> <div id='header'>header</div> <div id='menu'>menu links</div> <div id='content'>contents</div> the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window but i've seen a lot of pages that do not behave this way... what am i missing???? Hi I have a div (#adcontainer), in that there are some boxes (#adcontainer .ad). Inside every box there should be a small image at top 5, left 5. At top 5, right 5 there should be a price-flash-image. Everything works perfect besides the price-flash.. I can't manage to position correctly. The css I'm using is: Code:
#adContainer { position: relative; width: 155px; float: left; margin: 0; margin-left: 5px; padding: 0;}
#adContainer .ad { width: 100%; margin: 0; padding: 0px; border: 1px solid black; background-color: white; }
#adContainer img { position: relative; display: block; top: 0px; left: 0px; padding: 3px; z-index: 1; }
.price { position: absolute; width: 68px; height: 40px; top: 5px; right: 5px; background-image: url('../images/price_flash_small.png'); font-size: 13pt; font-weight: bold; text-align: center; line-height: 40px; display: block; z-index: 99; }
HTML: Code: <div id="adContainer"> <div class="ad"><img src="shop/images/products/48602_small.jpg" width="94" height="100"><div class="price">24,90</div></div> <div class="ad"><img src="shop/images/products/4258_small.jpg" width="100" height="57" alt="Flow"><div class="price">78,00</div></div> <div class="ad">ad 3</div> </div> Please help! Hi, http://sinistersuicide.net/lolastour12.html is the page I'm working on. Problems: - I tried using absolute positioning on my div layers but if the page was viewed on a lower resolution than what I'm using 1440x900 the div layers would move from where they were positioned. - So I transfered over to relative positioning and all was fine till I noticed a huge gap at the bottom of the page. The code for the page is: 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">
<html>
<head>
<title>lolastour1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.centre {
width: 406px;
height: 260px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -480px;
left: 15px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
.samplemovie {
width: 500px;
height: 340px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -1105px;
left: 20px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script></stylesheet>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#faabcb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<!-- Save for Web Slices (lolastour1.psd) -->
<table width="921" height="1301" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="17">
<img src="images/lolastour1_01.jpg" width="920" height="209" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="209" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/lolastour1_02.jpg" width="60" height="910" alt=""></td>
<td rowspan="2">
<a href="http://">
<img src="images/Join.jpg" width="102" height="47" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_04.jpg" width="93" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Members.jpg" width="172" height="41" border="0" alt="Members Log In Here"></a></td>
<td rowspan="3">
<img src="images/lolastour1_06.jpg" width="66" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Gallery.jpg" width="138" height="41" border="0" alt="Gallery"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_08.jpg" width="89" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Videos.jpg" width="144" height="41" border="0" alt="Videos"></a></td>
<td colspan="3" rowspan="5">
<img src="images/lolastour1_10.jpg" width="56" height="910" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_11.jpg" width="172" height="512" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_12.jpg" width="138" height="512" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/lolastour1_13.jpg" width="144" height="869" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/lolastour1_14.jpg" width="102" height="863" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="506" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/lolastour1_15.jpg" width="24" height="357" alt=""></td>
<td colspan="7">
<a href="http://">
<img src="images/Join-17.jpg" width="521" height="40" border="0" alt="Join"></a></td>
<td rowspan="2">
<img src="images/lolastour1_17.jpg" width="13" height="357" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/lolastour1_18.jpg" width="521" height="317" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="317" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/lolastour1_19.jpg" width="34" height="181" alt=""></td>
<td colspan="14">
<a href="http://">
<img src="images/Join-21.jpg" width="863" height="68" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_21.jpg" width="23" height="123" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/lolastour1_22.jpg" width="863" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/lolastour1_23.jpg" width="703" height="26" alt=""></td>
<td colspan="3" rowspan="2">
<a href="http://www.sinistersuicide.net/lolastour2.html">
<img src="images/Page-2-Tour.jpg" width="172" height="58" border="0" alt="Page 2 Of Tour"></a></td>
<td rowspan="2">
<img src="images/lolastour1_25.jpg" width="11" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/lolastour1_26.jpg" width="310" height="32" alt=""></td>
<td colspan="3">
<a href="http://">
<img src="images/Webmasters.jpg" width="259" height="32" border="0" alt="Webmasters"></a></td>
<td colspan="4">
<img src="images/lolastour1_28.jpg" width="134" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="127" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td></td>
</tr>
</table>
<div class="centre">
<a href="images/freeimage1.jpg" rel="prettyPhoto" title=""><img src="images/freeimage1thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage2.jpg" rel="prettyPhoto" title=""><img src="images/freeimage2thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage3.jpg" rel="prettyPhoto" title=""><img src="images/freeimage3thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage4.jpg" rel="prettyPhoto" title=""><img src="images/freeimage4thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage5.jpg" rel="prettyPhoto" title=""><img src="images/freeimage5thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage6.jpg" rel="prettyPhoto" title=""><img src="images/freeimage6thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage7.jpg" rel="prettyPhoto" title=""><img src="images/freeimage7thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage8.jpg" rel="prettyPhoto" title=""><img src="images/freeimage8thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage9.jpg" rel="prettyPhoto" title=""><img src="images/freeimage9thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage10.jpg" rel="prettyPhoto" title=""><img src="images/freeimage10thumb.jpg" width="90" height="120" alt="" /></a>
</div>
<div class="samplemovie">
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','450','300','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://sinistersuicide.net/lolacasting.flv');
so.addVariable('controlbar','none');
so.addVariable('autostart','true');
so.addVariable('icons','false');
so.addVariable('stretching','fill');
so.write('mediaspace');
</script>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE. The problem: I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly. The code (taken from my site): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#content
{
margin-left: 205px;
margin-right: 205px;
width: 610px;
margin-top: 0px;
line-height: 150%;
background-color: white;
border: 1px solid red;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 4px 0px 8px 4px;
background-color: red;
color: #fff;
border: 1px solid white;
}
div#container
{
/* background-image: url(../nav_col_base.jpg); */
/* background-repeat: repeat-y; */
background-color: yellow;
border: 1px solid black;
}
div#container2
{
/* background-image: url(../more_col_base.jpg);
background-repeat: repeat-y;
background-position: right; */
border: 1px solid black;
background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
#cleardiv
{
clear: both;
height: 1em;
}
</style>
</head>
<body>
<div id="banner">
<h1>This is my banner division</h1>
</div>
<div id="container">
<div id="container2">
<div id="vermenu">
This is the VERMENU division. Lets see what happens if I add a whole lot of content to this deivision. I am expecting the content division to drop down and start displaying just as this content ends.
</div>
<div id="more">This is the more division. I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
<div id="content">This is the content division. I cannot figure out why this division drops to just under the larger of the other two divisions. If you add lines to any of the two divisions, this division shifts down ...</div>
<div id="cleardiv"></div>
</div>
</div>
</body>
</html>
I have color coded the layers to simplify identifying the layers and where they show. What am I doing wrong? Thank you all in advance for your assistance. Jose PS: I cannot post a link otherwise, I would have provided you with one for my website. My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other Been pulling my hair out all day over this. Got most of the bugs figured out, but these last two I have no clue about. Both problems only seem to happen in IE7 Site is here. First problem is with the navigation bar, when I mouse over the bottom three links (recent projects, news, and contact us), it shifts the down for some reason. Second problem, Right below the innovative & efficient areas, the footer seems to come up and cover that area. Please, any help is really appreciated. Thanks! 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. Hi. I have a "small" problem. I am using NiftyCorners (http://www.html.it/articoli/nifty/index.html) and whenever the corner is added to a nav bar at the top of my page, the link in the nav moves down a bit, making it lower than the rest. I have tried playing with padding, margin, etc but can't seem to get the link position to stay put. I am trying to get my nav bar to work like the one in the below link: http://boardreader.com/pop/films/-/-/90.html?o=90 I am guessing it has to do with the fact that the containing div is blocking it? Any ideas how to prevent the shift in the link position? Code below and Image of problem attached.... Thanks! Code:
<table style="width: 100%; height: 100px; padding: 10px;" cellspacing="0">
<tr style="width: 100%;">
<td style="width: 100%">
<script type="text/javascript"></script>
<form name="searchform" action="/search.aspx" style="margin: 0pt; display: inline;">
<input name="a" value="f" type="hidden">
<input name="z" value="1" type="hidden">
<div id="logo" style="float:left; top:0px;">
<div>
<a href="http://www.x.com" tabindex="-1" class="logoimg"><img src="http://pics.x.com/aw/pics/logos/logo_x45.gif" alt="X" border="0" height="45" width="110" /></a>
</div>
</div>
<div id="mastermenu" style="top:16px; left:128px; border-bottom:solid 1px black; right:15px; position:absolute">
<div> <span><script type="text/javascript">//WRITE LOGIC FOR SIGNIN OR REGISTER HERE</script>Hello! <a href="http://www.x.com/singin/signin.aspx">Sign In</a> or <a href="http://www.x.com/registration/register.aspx">Register</a>.</span></div>
<ul id="mastertabslist" style="padding-top:9px;">
<li><a href="../today/today.aspx"><span>Home</span></a></li>
<li><a href="../looking/looking.aspx"><span>Community</span></a></li>
<li><a href="../search/search.aspx"><span>Search Tools</span></a></li>
<li class="help"><a href="#nogo"><span>Help</span></a></li>
</ul>
</div>
<script type="text/javascript">
[SNIP...]
</script>
<div id="search_main" style="float:right; height: 95px; width:350px; border:solid 1px red; padding-top:5px;">
<div style="float:left; width:50px; height:20px; vertical-align:bottom; margin: 0 5%;">Search in:</div>
<div id="div_videos" style="float:left; width:50px; height:20px; padding-left:10px;"><a href="#nogo" id="search_videos" class="" style="cursor:pointer;" onclick="switch_search_videos(this.id);"><span>Videos</span></a></div>
<div id="div_images" style="float:left; width:50px; height:20px; background-color:#6699CC;" class="is_menu"><span style="padding-bottom:5px; vertical-align:top; margin-bottom:5px;"><a href="#nogo" class="l_link" id="search_images" style="cursor:pointer;" onclick="switch_search_images(this.id);">Images</a></span></div>
<div id="div_profiles" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_profiles" style="cursor:pointer;" onclick="switch_search_profiles(this.id);"><span>Profiles</span></a></div>
<div id="div_forums" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_forums" style="cursor:pointer;" onclick="switch_search_forums(this.id);"><span>Forums</span></a></div>
<div id="search_box" style="background-color:#6699CC; position:relative; width:330px; float:left;">
<span> </span>
<input class="query" name="q" type="text">
<input class="submit" value="Search" type="submit">
<a class="adv" href="/index.search.aspx?a=a&x=1">Advanced search</a>
<br />
</div>
</div>
</form>
</td>
</tr>
</table>
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 Check this page: http://www.putimg.net On Ie the adsense div is staying on the other div.... This is the adsense div css: #adsense { position:absolute; margin-top:20px; border:0px; width:120px; height:240px; } Solved it: #adsense { position:absolute; margin-top:20px; left:5px; border:0px; width:140px; height:240px; } 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;
}
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, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here 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" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today Hi, I am new to using CSS to do my layout rather then tables. So far its working out well, and I can see the advantages in the long run. I am running into a small snag right now, that I was hoping someone might be able to help me out with. The site is succesfully displayed he http://www.yourbeergear.com/group/stackhouse/news.php But I found whenever the CENTER column is NOT the longest, it goes wonky, as seen he http://www.yourbeergear.com/group/stackhouse2/news.php The code I'm using basically runs like this Code:
<!-- Header -->
<div id="header">
<div align="center">HEADER</div>
<!-- end of Header --></div>
<!-- center column -->
<div id="c-block">
<div id="c-col">
//CONTENT
</div>
<!-- end of center column --></div>
<!-- FOOTER -->
<div id="footer" align="center">
<div align="center>FOOTER</div>
</div>
<!-- end of FOOTER -->
<!-- left column -->
<div id="lh-col"><br />
<h4 align="center">Left Column</h4>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><br />
<h4 align="center">Right Column</h4>
</div>
<!-- end of right column -->
and the CSS file is as follows Code:
/* Layout Stylesheet */
body{
margin: 0;
padding:0;
background:#808080;
color: #333333;
}
#lh-col{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#c0c0c0;
color: #333333;}
#rh-col{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#c0c0c0;
color: #333333;}
#c-block {
width:100%;
z-index:1;
background:#c0c0c0;
color: #333333;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #000000;
width:100%;
background:#eeeeee;
color: #333333;
margin:0;
}
#c-col{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
color: #333333;
z-index:5;
border: solid #000000;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #000000;
border-width:1px 0;
background:#eeeeee;
color: #333333;
margin:0;
}
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 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? |
|||||||