|
CSS - Height, And Wrapping Prob
PROB FIXED
hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED Similar TutorialsHi, this would be my first post. I've been using CSS for about 6-7 months now, and I always find that IE is difficult. Below is the CSS I am using: Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 72.5%;
font-family: tahoma, sans-serif;
background: url(bricks.png) repeat;
bakground-attachment: fixed;
color: #FEEFA2;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: #090;
text-decoration: none;
}
a:visited{
color: #FEEFA2;
text-decoration: underline;
}
p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: #FEEFA2;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: url("bricks.png")repeat #222;
background-attachment: fixed;
min-width: 720px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 0px 0px 0px 0px;
padding-top: 10px;
padding-bottom: 0px;
}
#main-content {
background: url("") repeat-y #4B4214;
padding-left: 230px;
padding-right: 230px;
padding-top: 20px;
border-right: 1px solid #000;
width: 45%;
margin-left: 10%;
}
#header {
width: 82%;
margin: 0% 0% 0% 10%;
background: #342E0E;
text-align: center;
font-size: 1em;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 150px;
padding-top: 20px;
font-size: 1em;
}
#footer {
background: #342E0E;
margin-left: 10%;
width: 82%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
The problem lies with the left-sidebar div. Here is my HTML: 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MythScape: The Hub for the Paranormal & Mythological</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="fav.png">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript">
function cacherVoir(theDIV){
leStyle = document.getElementById(theDIV).style ;
if(leStyle.display == "block") {
leStyle.display = "none";
}
else{
leStyle.display = "block";
}
}
</script>
<meta name="verify-v1" content="LiYZqvPLQLMOR/3+Stk2cMxWr2l80SisI86GjbuNmLU=" >
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<?php
include "button.php";
?><br/>
MythScape -v. 1.5-!
</div>
<div style="clear:both;"></div>
<div id="left-sidebar">
<p>
<?php if (!isset($_COOKIE['loggedin'])) {
$link_reg = '<a href="user_login.php">Register</a><br/>';
echo("You are not logged in!<br/>");
include "log.php";
echo $link_reg;
}
else{
$link_logout = '<a href="logou.php">Logout</a><br/>';
$change = '<a href="changepage.php">Change Password</a><br/>';
$mysite_username = $_COOKIE['mysite_username'];
echo ("Welcome, $mysite_username. <br/>");
include "access.php";
echo $change;
echo $link_logout;
}
?>
<a href="http://mythscape.freezoka.com/wiki//index.php?MythScapeMainPage" target="_blank">Wiki</a></div>
</p>
</div>
<div id="main-content">
<p>Cryptids, animals that haven't been proven to exist or have little or no information documented on them, could very well be around us. No one can
disprove their existence, but there is evidence that can neither support nor destroy the possibility of them being real. Cryptozoology (the study of
cryptids) comes from the Greek words: <i>kryptos</i>, <i>zoon</i>, and <i>logos</i>, which translate to: hidden, animal, and discourse. The term was coined
by Lucien Blancou when he dedicated a book to Bernard Heuvelmans, "the master of cryptozoology". Accounts of cryptids are abundant and diverse. Even if outsiders
to an area have never heard of a cryptid, the native peoples often have tales of them; if the creature never existed, surely they would not have accounts
and stories about them.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Cryptozoology Main Page</div>
<p>Demonology, or the study of demons, is a branch of theology, and involves the studying of demons' existence, or the belief in them. Demons are very common
in religion, and are not always evil. In fact, most demons in ancient religions were good, bad, or both. Djinn (Middle Eastern demon-like beings)
could become good and adopt Islam. However, in some religions, like Christianity, demons are always evil and serve their lord, Satan.A demonologist studies
demons and catalogues their existence; they made be a member of the occult or an exorcist for one of the major religions of today.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Demonology Main Page</div>
<p>Mythology is the study of myths, which are tales that have been gathered and reflect on a culture's beliefs. Myths were abundant in ancient
civilizations like Egypt, Greece, Japan, and Rome, but in the modern world our myths reflect things that aren't religious or spiritual in any way. Tribal mythology is abundant in areas
of Pacific Asia or Africa.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Mythology Main Page</div>
<p>
This website is the source of information on all of these topics. It is an unprecedented amalgamation of information that is free for you to read!</p> </div>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p><?php
include "footer.php";
?></p>
</div></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In Firefox, it's perfectly okay. The Left sidebar nests within the main container and looks gooood. In IE, though, the sidebar jumps in between the header and the maincontainer so that it is in the middle making a huge gap. http://mythscape.freezoka.com If you'd like to see what I'm talking about. Please help PHP Code: body { margin: 0px; font-family: Tahoma; font-size: 10px; background-color: #777; } #bodywrapper { margin-left: auto; margin-right: auto; width: 750px; background-color: #FFF; } #logo { margin-left: 15px; margin-top: 7px; margin-bottom: 7px; } .image { display: block; } .topnav { float: right; margin-top: 25px; background-image: url( images/line.gif ); } #left { float: left; width: 180px; background-color: #ccc; } #right { float: right; width: 180px; background-color: #ccc; } #center { margin-left: 190px; margin-right: 190px; background-color: #ccc; } #clear { clear: both; } #contentwrapper { margin: 0px; } PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-us" /> <link href="/css/layout.css" type="text/css" rel="stylesheet" media="all" /> <title>Petroleum Listing Service</title> </head> <body> <div id="bodywrapper"> <div id="header"> <div class="topnav"> image image image </div> <div id="logo"> <img class="image" src="images/logo.gif" /> </div> </div> <div id="contentwrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="center"> center </div> <div id="clear"></div> </div> <div id="footer"> </div> </div> </body> </html> The problem I am having is it seems that FF starts rendering the white background only once the image is placed...it doesn't count the margin above it as content I assume... IE however does what I want it to do...renders the margin above the image as content, and thus the white background starts at the very top of the page, thus a white margin between the top of the page and the logo. How do I rectify the problem? I understand that FF is probably doing it right...but how do I make FF also start the white background at the top. I was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out. http://esdcar.org/about/board.html?category_id=1&sub_id=2 I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked. This is the current iteration: Code: #container
{ color: #775b36;
background-color: #ffefca;
border: 4px #f5c674 solid;
width: 800px;
margin: auto;
background: url(../images/bkg_faux.jpg) repeat-y 50% 0;
z-index: 6003; }
<snip (unrelated divs)>
#content
{ width: 75%;
position: relative;
margin: 0em;
float: right;
z-index:6002;}
#header
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat;
background-position: top; height: 100px;
border-bottom: 4px #f5c674 solid;
text-decoration: none; color: #775b36;
text-align: left;
margin-bottom: 0em;
position:relative;
z-index:6001; }
#header p
{ float: right;
/*margin-right: 1%;*/
margin-top: 0em;
padding-top: .2em;
font-size: .7em;
position:relative;
z-index:6000;
display:inline;
background:#ffefca;
padding: 2px; }
What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it. Hi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Well I have a multi-part question. I am obviously new to css. I have a site located here . As you can see in the panel to the left the text spans past the footer. I would like the text to push the footer down. I have been trying for hours to get this to work but well.... here I am Any help would be greatly appreciated. Second part is that I opened this in IE on mac and WHOA! Not good to say the least. Any ideas on how I can hack this to match the way it looks in FF? Again any help would be great. Thanks for your time and expertise, phpkata. Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Noted only on certain laptops is a quirk causing the rt floated column (body) to be shifted below the lf float...basically a glitch in the width dimensioning. The first time I noticed it it happened to be one of the wide format DELL laptops using IE thus figuring it had something to do with the non-4x3 ratio. But, I just saw it again yesterday on a run-of-the-mill Compaq. While this instance was noted using IE they also had Netscape installed and it exhibited no crowding problem allowing the webpage to view properly. The following link is directed to a page known to exhibit that quirk on select laptops - http://www.solidgroundnc.com/the_band/bio_band.htm I know trying to use pixel values is a bit on the I-beg-to-be-frustrated side of life. ;-) Using percentages I never achieved my expected results and reducing pixel width to build breathing room was hampered by its cumulative effect on the sub-nav list. I was goaded to use percentages for that list, and I really wanted too, but it never seemed successful. Any insight, if anyone can even duplicate the symptom, would be greatly appreciated. Regards, Golem2 Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use. Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders. Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white. Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover. Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation. http://www.lockheed-martin.co.uk/css/full_layout_test.html ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that? also I was trying to align the menu to middle but margin:auto isnt working like it did for the body? finally I want to style forms without using floats or br but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own) Code:
form {
width:30%;
}
fieldset, input {
color:green;
border:1px solid green;
}
legend {
margin-left:0.5em;
}
label{
white-space:pre;
margin:0 1em 0em 1em;
}
input {
width:50%;
margin-bottom:1em;
}
input[type="submit"] {
padding:2px;
margin-left:1em;
width:auto;
}
form: Code:
<form action="" method="post">
<fieldset>
<legend>Example of a form</legend>
<label>First Name</label>
<input type="text" name="firstName" size="10"/>
<label>Last Name</label>
<input type="text" name="lastName" size="10"/>
<label>Some options</label>
<input type="checkbox" name=""/> Some
<input type="checkbox" name=""/> other
<input type="submit" name="submit" value="submit"/>
</form>
PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements.. Hi, I need some help with understanding why netscape is rendering list items differently to IE The Embedded (Dreamweaver-wizard-created) style sheet looks like this: Code: <style type="text/css">
<!--
.bul-mnu-lst {
font-family: "Trebuchet MS", "Andale Mono", "Arial Unicode MS", "Eras Medium ITC", "Microsoft Sans Serif";
font-size: 80%;
line-height: 140%;
color: #666666;
list-style-position: inside;
display: list-item;
font-weight: bold;
vertical-align: text-top;
list-style-image: url(hme_imgs/bullits/dottedArrw_bul.jpg);
list-style-type: none;
}
-->
</style>
the HTML using the sheet looks like this: Code: <div id="activitiesMnu" style="position:absolute; width:218px; height:186px; z-index:1; left: 17px; top: 227px; visibility: visible;">
<p class="bul-mnu-lst"> football</p>
<p class="bul-mnu-lst"> rugby</p>
<p class="bul-mnu-lst"> tennis</p>
<p class="bul-mnu-lst"> badminton</p>
<p class="bul-mnu-lst"> swimming</p>
<p class="bul-mnu-lst"> squash</p>
<p class="bul-mnu-lst"> volley-ball</p>
</div>
The problem is, Netscape based browsers are ignoring the, line-height: attribute or just misinterpreting it and using what looks like double spacing between lines. This is causing the layer to overlap other page items and looks aweful. In I.E, it looks as expected. i've tried changing to percentages instead of pixels for the value as heard percentages are best Also tried, list-style-position from 'outside' to 'inside' values and, list-style-image: to non and used a default preset setting (square) bullet-style. - but the problem persists. any suggs?? I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: I searched the forum and could not find a post with a similar issue, so I am creating this one. I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background. URL REMOVED I appreciate any help I can get with this - Cadet Palmer Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link). Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden. I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done. Please be my CSS hero. I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div See what I mean... Open this link in FF and then in IE Ahh, great, now it's putting the gutter there in IE regardless. Great. Here's the CSS I'm using: Code:
body { font-family: tahoma; font-size: 12px; background: #fff; }
img { border: 0px; }
#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }
and here's the HTML (minus the CSS): 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page :: </title>
<style type="text/css" media="screen">
<!--Already included in snippet above /-->
</style>
<script type="text/javascript">
function roll(item, onOff) {
var targetDiv;
var targetText;
var showHide = onOff;
targetDiv = document.getElementById(item.id);
targetText = document.getElementById(item.id + "Text");
if (showHide == 1) {
targetDiv.className = "navSelected";
targetText.className = "navTextSelected";
} else if (showHide == 0) {
targetDiv.className = "nav";
targetText.className = "navText";
}
}
</script>
</head>
<body>
<div id="Container">
<div id="NavContainer">
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
</div>
<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>
</body>
</html>
Hope to god someone can explain what's going on before I go totally insane. I'm having trouble getting text to wrap within a DIV. In my purposely garish sample code below, what I want is for the image and the paragraph to appear side by side within the red DIV, with the paragraph wrapping onto multiple lines as necessary. What happens instead is that if the paragraph is too long to fit on one line beside the image, the blue DIV moves underneath the red one and the text remains on one line. Not what I want at all! 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>
<style type="text/css">
p {
margin: 0 0;
color: white;
}
#title {
background-color: red;
height: 105px;
}
#left {
float: left;
margin: 20px 20px;
background-color: yellow;
}
#right {
float: right;
margin: 20px 20px;
background-color: blue;
overflow: hidden;
}
</style>
</head><body>
<div id="title">
<div id="left">
<a href="index.htm"><img src="http://i52.tinypic.com/2u9l5z9.png" alt="" width="429px" height="65px" border="0" /></a>
</div>
<div id="right">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
</div>
</body></html>
If you shorten the paragraph you can see where I want the text to be displayed. It's only when it exceeds the available width within the red DIV that the whole blue DIV moves further down the page, where the text is suddenly quite happy to start wrapping. This can probably be solved with a single line of CSS but I've been trying all sorts with no joy. Can anyone please pinpoint what I need to do? My menu keeps wrapping when the browser window is resized... How do I prevent this? Here is my code: index.php Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sphinx Gaming Inc. -::- Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript">
var blanking_flag = true;
function search_remvalue(method)
{
if (blanking_flag === true && method == 'focus')
{
document.search_frm.query.value = "";
blanking_flag = false;
}
else if (method == 'focus' && document.search_frm.query.value == "Search...")
{
document.search_frm.query.value = "";
blanking_flag = false;
}
if (blanking_flag === false && document.search_frm.query.value == "" && method == 'blur')
{
document.search_frm.query.value = "Search...";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><h1><p>Sphinx Gaming Inc.</p></h1></a>
</div>
<div id="navigation">
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Partners</a></li>
</ul>
<form name="search_frm" action="" method="get">
<input type="text" size="30" name="query" value="Search..." onBlur="search_remvalue('blur')" onFocus="search_remvalue('focus')"/>
</form>
</div>
<div id="content">
<p>This is the main content</p>
</div>
<div id="footer">
<p> It is currently <?php echo date('l \t\h\e jS \of F Y h:i:s A'); ?><br/> </p> <br/>
<p class="bottom">Copyright Richard Carson, 2010. If you have any questions, comments or concerns, feel free to email me at rcarson@sphinxgaming.com</p>
</div> </div>
</body>
</html>
main.css Code: * { padding: 0; margin: 0; }
html,
body {
margin:0;
padding:0;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
white-space:nowrap;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-height:100%;
position: relative;
}
#content {
float: left;
color: #333;
background: #FFFFFF;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#header {
color: #555;
width: 100%;
float: left;
height: 75px;
background: #000000;
}
#header h1 {
font-size: 50px;
}
#header p {
text-align: center;
}
#header a {
width: 99.9%;
height: 100%;
float: center;
text-align: center;
display: block;
text-decoration: none;
font-weight: normal;
}
#header a:link {
color: #999;
border: none;
}
#header a:visited {
color: #999;
border: none;
}
#header a:hover {
color: #999;
border: none;
}
#header a:active {
color: #999;
border: none;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
clear: both;
color: #999;
background: #333;
}
#footer p {
text-align: right;
margin: 3px;
padding: 1px;
vertical-align: top;
}
#footer p.bottom {
text-align: center;
font-size: 10px;
vertical-align: bottom;
}
#navigation {
float: left;
width: 100%;
padding: 0;
margin: 0;
height: 25px;
color: #999;
background: #333;
text-align: center;
}
#navigation ul
{
padding: 0;
margin: 0;
display:inline;
width: 100%;
}
#navigation li
{
float: left;
padding: 0;
margin: 0;
display:inline;
}
#navigation li a
{
height: 25px;
line-height: 25px;
float: left;
width: 120px;
padding: 0;
margin: 0;
display: block;
border-left: 0.1em solid #444;
border-right: 0.1em solid #444;
color: #999;
text-decoration: none;
text-align: center;
}
#navigation a:link {
color: #999;
}
#navigation a:visited {
color: #999;
}
#navigation a:hover {
color: #BBB;
}
#navigation a:active {
color: #FFFFFF;
}
Thanks in advance, Richard Carson Good afternoon, hoping you guys can help me with something that's been tasking me the last couple of days. Basically I have an image floated right inside a container div, and I wan't some divs to wrap around this on the left. I've done this bit. Inside each of the divs is a left floated number and a paragraph of text. I'm having trouble getting this not to wrap around the number without floating certain elements and breaking the rest of the layout. Here's a stripped down version of the page (sorry if the code is messy). Code: http://tomarcher.co.uk/upload/linkdump/test/single%20-%20Copy.php I look forward to your replies. Please can you take a look at my page http://www.doylecompanylaw.com/doyle.html The bottom div #basediv is all borked. I can't for the life of me figure out why. The main #outerdiv has a background image applied to it and it should all line up with the base div but its not displaying properly on Firefox or Opera. Any ideas? |
|||||||