|
CSS - Problem Getting Simple Page Laid Out Correctly
I'm having troubles figuring out how to lay out the beginnings of a simple page using div's and css.
The html is simple. I have a container that I want to be horizontally centered but I want it to stretch from the top to the bottom of the page. Inside this container div, I want a header div containing a header and an image next to each other. Underneath that div I want a nav bar. The problem is that the nav bar and the header bar are on top of each other AND the container won't stay flush with the top and bottom of the browser window unless I use huge negative margins. Code:
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<img src="images/myimage.jpeg"/>
</div>
<div id="navbar">
</div>
</div>
</body>
Code:
@charset "utf-8";
body {
background-color: #022000;
}
#container {
background-color: #0B400A;
height: 1000px;
width: 970px;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
margin-bottom: -20px;
}
#container #header img {
float: right;
}
#container #header h1 {
font-size: 100px;
color: #FFFFFF;
float: left;
}
#container #navbar {
background-color: #022000;
height: 200px;
width: 920px;
border: thin solid #33FF00;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
Similar TutorialsHi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox. Site: www.measureoffaith.net Stylesheet: www.measureoffaith.net/style.css Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet. Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well. Thanks so much. index.html w/ stripped content: 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>
<title>
Measure of Faith on Aerie Peak
</title>
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
</div>
<div id="container">
<div id="navigation">
<!-- Start of Navigation Bar (NavigationBar2) -->
<table id="NavigationBar2" border="0" cellspacing="0"
cellpadding="0" nof=
"NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
width="140">
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton1) -->
<a href="#" onmouseover=
"F_roll('NavigationButton1',1)" onmouseout=
"F_roll('NavigationButton1',0)"><img id=
"NavigationButton1" name="NavigationButton1"
height="30" width="140" src=
"images/Home_Hbutton_on2.gif" onload=
"F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
border="0" alt="Home" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton2) -->
<a href=
"/eqdkp/viewnews.php"
onmouseover="F_roll('NavigationButton2',1)"
onmouseout="F_roll('NavigationButton2',0)"><img id=
"NavigationButton2" name="NavigationButton2"
height="30" width="140" src=
"images/Raid_News_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
border="0" alt="Raid News" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton3) -->
<a href="charter.html" onmouseover=
"F_roll('NavigationButton3',1)" onmouseout=
"F_roll('NavigationButton3',0)"><img id=
"NavigationButton3" name="NavigationButton3"
height="30" width="140" src=
"images/Charter_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
border="0" alt="Charter" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton4) -->
<a href=
"roster.html"
onmouseover="F_roll('NavigationButton4',1)"
onmouseout="F_roll('NavigationButton4',0)"><img id=
"NavigationButton4" name="NavigationButton4"
height="30" width="140" src=
"images/Roster_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
border="0" alt="Roster" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton5) -->
<a href=
"/eqdkp/listmembers.php"
onmouseover="F_roll('NavigationButton5',1)"
onmouseout="F_roll('NavigationButton5',0)"><img id=
"NavigationButton5" name="NavigationButton5"
height="30" width="140" src=
"images/DKP_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
border="0" alt="DKP" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton6) -->
<a href="/phpBB2/index.php"
onmouseover="F_roll('NavigationButton6',1)"
onmouseout="F_roll('NavigationButton6',0)"><img id=
"NavigationButton6" name="NavigationButton6"
height="30" width="140" src=
"images/Forums_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
border="0" alt="Forums" /></a>
</td>
</tr>
</table>
</div>
<div id="content">
<div class="newspost"><div class="wraptitle">
<p class="subtitle">- I... AM... UNLEASHED!</p>
<p class="thetitle">MAGTHERIDON DOWN</p></div>
<div class="newsdate">
28.04.2007 by <img src="images/icons/mar.png" />
</div>
<div class="newscontent">
Magtheridon proved to be no match to the professional
button clicking skills of MoF. Wiping a few times in
order to fine tune the button clicking, we emerged
with victorious with zero deaths and some bad loot.
</div>
<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
</div>
...clipped content...
</div><div style="clear: both;">
</div>
<div id="footer">
</div>
</body>
</html>
style.css: Code: html,body { height: 100%; }
body{
background: #000000 url('background-image.jpg') repeat-y;
margin: 0;
height: 100%;
}
.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}
.wraptitle{
float: left;
height: 79px;
}
p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}
p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}
.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}
.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}
p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
text-decoration: none;
}
a:active{
text-decoration: none;
}
#banner{
background-image: url('header-one.jpg');
height: 200px;
width: 943px;
padding: 0;
}
h5.styling{
color: #555555;
font-family: trebuchet ms, tahoma;
border: 0;
padding: 8px;
margin: 0;
}
p.styling{
color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 8px;
margin: 0;
text-align:justify;
}
td.styling{
font-color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 0;
margin: 0;
text-align:justify;
}
html > body #navigation{
background-image: url('left-runner.jpg');
font-size: 0;
float: left;
width: 140px;
min-height: 100%;
padding: 0 0 0 4px;
line-height: 0;
border: 0;
margin: 0;
}
html > body #content{
background: #EDF2F5;
float: right;
width: 796px;
min-height: 100%;
padding: 0;
border: 0;
margin: 0;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}
#container{
width: 940px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#footer{
background-image: url('bottom-frame.jpg');
width: 943px;
height: 47px;
}
I'm trying to get my page to format correctly in IE. It looks fine in firefox, but in IE when the page is first loaded the footer isn't at the very bottom of the window. If I refresh the screen it drops down to the bottom and it looks fine. Here is my HTML and CSS. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./nmi.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Client Server NMI</title>
</head>
<body>
<!-- TitleBar -->
<div id="titleBar">
<div id="titleImg">
<img src="./title_csnmi.jpg" alt="title image">
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
</div>
<!-- Clear out the float settings -->
<div class="clearDiv"></div>
<!-- Main Page -->
<div id="container">
<div id="iframe">
<iframe src="foo.html" name="main" frameborder=0 width=100% height=100%></iframe>
</div>
<div id="navBar">
<h4>Interface Menu</h4>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
</div>
</div>
<div class="clearDiv"></div>
<div id="footer">
Client Server NMI - MEDITECH
</div>
</body>
</html>
Code:
html{
margin:0;
padding:0;
}
body{
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
color: black;
}
/*Title Navigation bar */
#titleBar{
position: absolute;
top:3px;
width: 100%;
padding:5px 0 5px 0;
border-bottom:2px solid gray;
border-top:2px solid gray;
}
#titleImg{
position:relative;
margin:10px 40px 0 5px;
float:left;
}
img{
text-decoration:none;
border:0;
}
.titleLinks{
position:relative;
float:left;
margin-left:2px;
padding:5px 15px 0 15px;
border:1px solid gray;
width:auto;
height:auto;
}
.clearDiv{
clear:both;
}
/*Main Div*/
#container{
position:absolute;
margin:0;
padding:0;
top:100px;
width:100%;
height:74%;
}
#iframe{
position:relative;
margin:0;
padding:0;
width:85%;
height:100%;
float:left;
}
/*Side Navigation bars*/
#navBar{
position:relative;
float:left;
margin-left:10px;
width:13%;
font-size:10px;
border-left:1px solid #333366;
border-right:1px solid #333366;
border-bottom:4px solid #333366;
}
#navBar h4{
margin:0;
padding:2px 3px 2px 0;
background-color:#333366;
font-size:1em;
color:#EEEEEE;
text-align:right;
}
#navBar a{
display:block;
text-decoration:none;
color:black;
background-color:#EEEEEE;
padding:4px 2px 4px 8px;
}
#navBar a:hover{
background-color:#333366;
font-weight:bold;
color:white;
}
/* Footer */
#footer{
position: absolute;
width: 100%;
bottom:0;
left:0;
font-size:.75em;
text-align:right;
background-color:#333366;
color:white;
}
Need a bit of CSS guidance I would like somefeed back on what is a good way to structure a page template using CSS I would like the page content to be displayed 780 px width, Centered Header image at top 780 px wide Horzontal Nav below 780 px wide also 2 columns of content below footer at bottom Im sure this is a common layout as I have seen it on many sites. Im just not sure what the optimal way to set it up using divs. SEO being my primary concern Here is the layout: Code: <body> <div id="main"> <div id="header"> headet stuff here </div> <div id="nav"> the nav </div> <div class="content"> <div id="left_content"> left content </div> </cfif> <div id="right_content"> right </div> </div> <div id="footer"> footer </div> </div> </body> STYLE SHEET: Code: #main{
position: relative;
margin-left: auto;
margin-right: auto;
width: 780px;
}
#header {
position: relative;
width: 780px;
height: 100px;
margin: 0;
padding: 0;
background-color:#8787d5;
}
#nav {
position: relative;
width: 780px;
margin: 0;
padding: 0;
border-top: 1px solid #ffffff;
background-color:#8787d5;
background-image:url(../images/nav_bg.png);
}
.content {
position: relative;
top: 0px;
left: 0px;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
background-color:#e9e9f5;
}
#left_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
left: 5px;
top: 5px;
width: 325px;
padding: 0;
}
#right_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
top: 5px;
left:335px;
width: 440px;
padding: 0;
}
#footer {
position: relative;
padding: 20px 10px 10px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #993300;
text-align: center;
}
THe problem I am having is when I use relative position for left-content and right_content the right content is positioned to right of but at the bottom of the left_contetn div. I can get them to line up correctly using absolute positioning but then the content div that contains them and that also has the border and backgrond color does not expand vertically to to contain the left_content and right_content divs. any help is greatly appreciated thankya Hi all, I am making a test page for a client. It's a VERY simple site (he's a simple guy ), but I am having a little trouble with something that's probably pretty easy. For some reason, though I just can't get it to cooperate. The site is at www.bartlett-family.net/test On the footer, you'll notice that it also has a few links and those links have the SAME properties (through the CSS) as the other page links on the left and right. I don't want that. I want the links in the footer to be WHITE at all times, whether clicked, hovered over, etc. How can I do this? Thanks! Chris I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this click here When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? San I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem: img386.imageshack.us/img386/1795/ddddye5.png As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS: Quote: #maincontentleft { float : left; width : 252px; height: 100%; background-image : url("images/sidecontentbg.gif"); } #sidecontentbg { background-image : url("images/sidecontentbg.gif"); padding-left : 15px; padding-right : 15px; height: 100%; background-color: red; } #sidecontenttop { background-image : url("images/sidecontenttop.gif"); } #footer { padding-top: 5px; padding-bottom: 5px; background-color : #ebebeb; height : 35px; border : 1px solid #dbdbdb; text-align : center; } The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom. Thanks in advance! Fairly straightforward problem: I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div. Anyway to set the content as fixed and just have the user scroll if the browser is too small? Thanks! Ohh.. and both divs the "blankDiv" and "header" are floated left... Code: #blankDiv{ width:10%; background-image:url("../images/header_tile.png"); background-repeat:repeat-x; height:224px; float:left; } #header{ float:left; }
Quote: I just started working with CSS again, and I'm having problems coding my layout. The problem is he I'm testing on Firefox. div#wrapper is the problem. EDIT well, after playing with it some more, I have found out that this has no pattern to it at all, its pretty much just producing random results, so infinitely STUPID!!! Seriously. This is something that is so simple, and yet these idiots who come up with this crap make it so difficult. If you want to pad left and right, it shouldn't be this goddamn difficult. Sorry, I'm VERY pissed now, after working on something so basic for so long. I can only get a padding on the right for so far, and then it skips over to completely aligning to the right, while the left is so much farther over, even if it has smaller padding... what the hell. Heres the full code: index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Elemental Concepts</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="upperwrapper"> <div id="banner"></div> <div id="memberswrapper"> <div id="members"> </div> <div id="membersfooter"></div> </div> </div> </div> </body> style.css Code:
body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div#wrapper {
width: 700px;
margin: 0 auto;
padding: 0px 50px 0px 25px;
text-align: left;
background-image: url('mainbg.jpg');
height: 100%;
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background-image: url('banner.jpg');
}
div#memberswrapper {
float: right;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background-image: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
div#wrapper, is the main div, which has a background. I need the insides spaced about 15 px from the left, and 15 px from the right. But for whatever reason, it usually ends up spacing 25 px from the left, and 5 from the right, the more I play with the numbers though, to get the results I want, the more obscure it becomes... it just WILL NOT do what I want, and WILL NOT follow any logical pattern with how it display. Help is really appreciated. I am completely and utterly lost... EDIT 2: Still working on it, and no progress, except the background image keeps disappearing every time I even think about touching the background attribute! I'm about to say **** it, and use tables. This is ridiculous. I just opened up IE6, and it looked even more obscure than it does in Firefox. This makes no sense. I just read a few tutorials on div padding, doesn't mention anything about this. Maybe its the floats causing the problem... but I don't see why elements on the inside could stretch the containing element, if it has fixed size and padding, and that still doesn't explain the IE6 problem's, which I'm not even going to get into now... since I have probably confused you enough already. I seriously think I could write an entire HTML/ CSS parsing engine, in any language, in less time than it would take me to code this layout properly in HTML/ CSS. Ridiculous. Well, I got the top working in Firefox, instead of floating left and right, the banner and memberswrapper, I floated one left, and the other had a left-margin. Though, I am almost 100% sure, the text, and other divs below are not going to align properly, with the edges of the above [banner and memberswrapper]. I am also afraid to see what this looks like in IE6. style.css Code: body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div {
margin: 0;
padding: 0;
}
div#wrapper {
width: 725px;
margin: 0 auto;
padding: 0 25px 0 25px;
text-align: left;
background: url('mainbg.jpg');
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background: url('banner.jpg');
}
div#memberswrapper {
margin-left: 477px;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
Edit Again: Looks just as bad as it did before, in IE6. The background image repeats horizontally, which it should have absolutely no reason to do so, the width is 50 pixels less than the images width, and the padding on the left and the right, are each 25 pixels, accounting for the full image size... and yet the full image and then some is displayed. If screen shots would help, I can take some. Or if you want to see what an impossible layout to code looks like, I can send you a zip of everything. Theres 2 options left, tables or absolute positioning. For some reason, a layer that is marked z-index:0 is coming up above a layer I have marked z-index:100. The problem is only occurring in IE (works fine in Firefox, etc.). I've dumbed the code down to get to the bare bones of it. The sample is he http://www.davidaskitchenandtiles.com/test.php You can see the code via view source or below. Note that the text "Z-index 0 (or not defined)" is on the z-index:0 layer, so it should be under the white layer, which is z-index:100. This is the case in Firefox, but the text runs over it in IE. Thanks so much if you can let me know why this is. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="0" cellspacing="0" border="0" width="300"> <tr> <td width="300" height="200" bgcolor="blue"> <div style="position:relative"> <div style="position:absolute; background-color:#ffffff; top:50px; left:15px; width:200px; height:300px; display:block; z-index:100;border:2px solid green; overflow:hidden"> z-index 100 </div> </div> </td> </tr> <tr> <td width="300" height="200" bgcolor="red"> <div style="position:relative; z-index:0"> Z-index 0<br>(or not defined) </div> </td> </tr> </table> </body> </html> I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b> Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>
I'm using dreamweaver to work on a basic example that I seem to have working fine. However I've uploaded it onto the server and it's coming out as if there was no styleing at all applied inclucing colour. I've showed an example of both the site and code if anyone can help. I should have a load of colums and rows, like tables, wit text in them but all I seem to see is just words laid out with no styling attacted to them......God I've forgotten how awkward code can be at times. Below is the link. http://ballyviewbuilders.com/Centering.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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.wrapper
{
width: 750px;
margin: 0 auto;
text-align: left;
}
div.1a
{
float:left;
width:190px;
background: FFFF00;
color:000000;
padding: 10px;
}
div.1b
{
float:left;
width:190px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1c
{
clear:both;
background: EEEE00;
width:400px;
padding: 10px;
}
div.1d
{
float:left;
width:80px;
height:40px;
background: DDDDDD;
color:000000;
padding: 10px;
}
div.1e
{
float:left;
width:10px;
background: DDDDDD;
color:000000;
padding: 10px;
}
</style>
</head>
<body>
<div class= "wrapper">
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a </div>
<div class ="1a">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
<div class ="1d">gfgdfg</div>
<div class ="1d">gfgdfg</div>
<div class ="1e">g</div>
<div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div>
</div>
</body>
</html>
When I switch between pages with images on them, everything is fine. When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike I'm trying to create a very simple navbar with css rollovers. I made one based on a tutorial on the macromedia website but it's not quite right (in Internet Explorer anyway) If you have a look here you can see what I want it to look like: http://www.eveythingfree.buildtolea...ieds/index2.php Now here is my attempt: http://www.eveythingfree.buildtolea.../whynotwork.php It looks fine in Mozilla but in IE the right hand side of the table doesn't exist (there is no 1 pixel black line). What have I done wrong? Heres the css properties: Code: .button a {
background-color: #e9e9e9;
border: 1px solid #333333;
display: block;
text-decoration: none;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
}
.button a:hover {
background-color: #DDDDDD;
border: 1px solid #333333;
color: #CC0000;
text-decoration: none
}
Can anyone spot it? Unlike in the design I'm trying to replicate, I want to have 1px lines dividing the links. This works in the 2nd example except for the problem on the right. I really hope someone can shed some light on all this. Thanks in advance, Robert ok, so after i click a link it goes to the css visited link. .menu_1a a:link {color:#666666; text-decoration: none;} .menu_1a a:hover {Background: #666666; color:white;} .menu_1a a:visited {color:#666666; text-decoratoin: none;} is my code. after i have clicked a link and i hover over the link again the background color is #666666 and the color is #6666666. i need the visited link to have the same exact thing as the original link any ideas? -kevin Hi, Here's my problem: css Code: Original - css Code <div style="width:69%; text-align:center; float:left;"> <div style="width:80%; min-height: 98px; border: black thin solid;"> BLEH </div> </div> <div style="width:30%; text-align:center; float:right;"> RIGHT </div> <div style="width:69%; text-align:center; float:left;"> The above code, should in theory make two "cells", one on the left and one on the right, side by side. Within the left one there should be another box, aligned centrally. This is fine in internet explorer, yet in Firefox & similar browsers it refuses to do this - I'm sure this is something very simple. Many thanks, Alan Hi Everyone. Apologies if this problem has been posted before or if it's simple - I'm very new to CSS! I'm having some problems inheriting text size from a class in a table. I have a table that inherits from a class (clsRoundCornersTable below) that specifies that text size should be 12px. This works fine except when I have another table defined within my original table which has text at the default size. I'm assuming that my sub table is not inheriting from the parent but instead is using the <TABLE> definition below but I thought that text size would filter down. Can anyone help???? TABLE { border-width:0px; border-style:solid; width:100%; text-align:left; } TR { border-width:0px; border-style:solid; } TH { vertical-align:top; border-width:0px; border-style:solid; } TD { vertical-align:top; border-width:0px; border-style:solid; } .clsRoundCornersTable { border:0px; padding:0px 0px 0px 0px; width:100%; background-color:whitesmoke; font-size:12px; } |
|||||||