Forum Moderators: not2easy
My problem is that I am trying to get masthead, a navigation sidebar, and one or two columns of content onto my page. I can't seem to get it to work, however, because my content appears underneath my navigation, and I am afraid that if I position it, the text will leak out of the sides of the box.
Also, another problem: the navigation is supposed to have pure css submenus that pop to the side (explained at [meyerweb.com...] -- look at the example on the right), but it seems to pop out correctly, leaving a few inches of space below the main part of the menu between the other ctegories. It's hard to explain. You have to run it. Well, here's the code:
HTML with a little php (self explanatory)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Page Title</title><link rel="stylesheet" media="screen" type="text/css" href="/css/screen/default.css" />
<link rel="stylesheet" media="print" type="text/css" href="/css/print/default.css" />
<link rel="stylesheet" media="handheld" type="text/css" href="/css/handheld/default.css" />
<link rel="alternate" type="application/rss+xml" href="/rss/feed.rss" title="RSS feed for Website" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.svccsc.org/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Language" content="en" />
<meta name="author" content="author name and url" />
<meta name="Keywords" content="keyword list" />
<meta name="Description" content="description sentences" />
</head>
<body>
<div id="container1">
<div id="masthead">
<h1><a href="http://www.svccsc.org/"><img src="/images/logo1.gif" alt="alt text" /></a><br /><span id="masthead-text">Masthead Text</span></h1><h4><a href="http://grassroots.org"><img src="/images/grassroots_banner.gif" alt="grassroots text" /></a></h4>
<form id="searchbox" method="post" action="http://example.org/phpdig/search.php?template_demo=newspaper.html&result_page=search.php&browse=1&query_string=&limite=10&option=start">
<fieldset>
<legend>Search the site (press ctrl s)</legend>
<?php
[i]/*This shows the searchbox feature only to supported browsers, thus enriching their experience, and while it degrades gracefully in other browsers, it still does not validate. This script allows it to validate by attempting to show a searchbox only if it is being viewed in a compatible browser.*/[/i]
$browser_user_agent = (isset($_SERVER['HTTP_USER_AGENT']))? strtolower($_SERVER['HTTP_USER_AGENT']) : '';
if(strpos($browser_user_agent, 'webkit'))
{?>
[i]<!--
Note to Picky Sods:
I know that using type="search" means that my page normally wouldn't validate, but for safari/webkit users it offers such a nice search experience, and degrades nicely for other browsers, that there really is no reason why I shouldn't. Also, when I attempt to validate it, it does perfectly well, due to some php trickery.
-->[/i]
<input type="search" accesskey="s" name="query_string" size="15" autosave="org.example.search_history" results="10" />
<? } else {?>
<input type="text" name="query_string" size="15" />
<? }?>
<input type="submit" value="Search!" />
</fieldset>
</form>
</div>
<div id="navigation">
<img src="/images/navigation.gif" alt="Navigation" />
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a><ul><li><a href="">General Information</a></li><li><a href="">History</a></li><li><a href="">Donors</a></li></ul></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Support Us</a><ul><li><a href="">Raffle</a></li><li><a href="">Online Donation</a></li><li><a href="">View Our Wishlist</a></li><li><a href="">Other Donation Informataion</a></li></ul></li>
<li><a href="">Discussion Forum</a></li>
<li><a href="">Board Application</a></li>
<li><a href="">Newsletter</a></li>
</ul>
</div>
<div id="content1">
<h1>Welcome to the homepage</h1>
</div>
<div id="content2"></div>
<div id="footer"></div>
</div>
</body>
</html>
And CSS
#masthead {
margin: 0 0 10px 0;
width: 760px;
height: 210px;
background: url(/images/mastheadbackground2.gif) repeat-x;
}#masthead h1 {
float: left;
position: relative;
bottom: 25px;
}#masthead #masthead-text {
position: relative;
bottom: 125px;
right: 45px;
}#searchbox {
float: right;
width: 220px;
margin: 15px;
position: relative;
bottom: 240px;
}#searchbox legend {
border: 1px solid #666;
padding: 3px;
//background-image: url(/images/lightbackground.gif);
background-color: #CCC;
}#searchbox input {
border: 3px double #666;
}img {
border: 0;
}#masthead h4 {
position: relative;
bottom: 140px;
left: 190px;
}#navigation ul, navigation ul ul {
clear: left;
list-style-type: none;
width: 160px;
padding: 0;
border-style: none;
}#navigation li, #navigation li ul li {
background-image: url(/images/background.gif);
margin: 2px;
border-width: 1px;
border-style: solid;
border-color: #000;
}ul link, ul a:visited, ul a:hover, ul a:active {
display: block;
padding: 2px 10px;
text-decoration: none;
}ul a:link {
color: #FFE4C4;
}ul a:visited {
color: #FFF;
}ul a:hover {
color: #F00;
background: #FFF;
}ul a:active {
color: #000;
}#masthead br {
display: none;
}#container1 {
width: 760px;
padding: 0 0 50px 0;
background: url(/images/background.gif);
}li ul {
display: none;
position: relative;
left: 152px;
}li:hover > ul {
display: block;
position: relative;
bottom: 25px;
left: 152px;
}#content1 {
}
[edited by: tedster at 12:25 am (utc) on June 29, 2007]
[edit reason] remove specifics [/edit]
The best method of posting your code in this forum is to post XHTML/HTML with the styles within the <HEAD></HEAD> tags. This allows helpful users to copy and paste this information into their favorite editor and/or straight into an .html file and have the HTML and CSS work nearly instantly (except for missing images).
As for your specific problem, however, you seem to have all the necessary elements, but they're not all defined properly.
For instance, you want your content to wrap around to the right of your sidebar, correct? Unfortunately, your #navigation division is not defined at all in the CSS. You should float it to the left and define a width for it.
On the other hand, I see a lot of CSS code in there that's very questionable. For example, using the "display" property can really cause some inconsistent problems across the browser if used incorrectly. Before setting the display property to "none" or "block" ask yourself if it's absolutely necessary or if there's other ways to do it.
Also, be careful of using the "position" property as well. You could probably find a solution to your layout without using "position" at all (except maybe for the CSS navigation menu you've sampled).
With all that said, however, I would strongly encourage you to get all the basic "parent" divisions properly positioned in your layout before adding all your bells and whistles. You must have a very solid foundation structure of your CSS layout working in order to make life easy when you add in all the meat and potatoes.
Hope that helps... if not, clean up the code a bit and make another example that's more easily viewed.
Cheers!
[edited by: coyoteRick at 11:43 pm (utc) on June 28, 2007]
