|
CSS - Bustin' Out All Over
Nope, not June, but my content. It doesn't matter how many or few pictures are included here, the bottom one is busting out of the frame:
http://www.sheepevent.org.uk/photos.php Here is the CSS: Code: p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container {
border: 1px solid #666;
width: 80%;
margin-right: 10%;
margin-left: 10%;
}
#menu {
width: 156px;
float:left;
height: 430px;
}
#main {
margin-left: 156px;
padding: 5px 5px 20px;
border-top: 1px #666666;
border-right: 1px #666666;
border-bottom: 1px #666666;
border-left: 1px solid #666666;
}
#header {
border-bottom: 1px solid #666666;
background: #006699;
}
#datestrap {
background-color:#006699;
border-top: 1px #666666;
border-right: 1px #666666;
border-bottom: 1px #666666;
border-left: 1px #666666;
font: 1em Arial, Helvetica, sans-serif;
color: #eee;
height: 70px;
}
#datestrap img {
border: 0;
}
#sponsorlogo {
padding-left: 5px;
padding-top: 2px;
float: right;
padding-right: 2px;
}
.clear {
clear:both
}
#subcontainer {
border-bottom: 1px solid #666666;
height: 100%;
}
#footer {
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
}
.mainlinesponsor {
font-family: Arial, Helvetica, sans-serif;
font-variant: normal;
color: #666;
font-size: 0.6em;
vertical-align: middle;
padding-top: 3px;
}
.majorsponsor {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
font-size: 0.5em;
}
.navtop {
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
padding: 3px;
border-top: 1px solid #CCCCCC;
border-right: 1px #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px #CCCCCC;
}
#navigation {
width: 90%;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 6px;
}
.navmain {
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
padding: 3px;
border-top: 1px #CCCCCC;
border-right: 1px #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px #CCCCCC;
}
.coorganiser {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 0.6em;
vertical-align: middle;
height: 130px;
}
a:link {
color: #003366;
text-decoration: none;
}
a:visited {
color: #663366;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.default {
font: 12px Verdana, Arial, Helvetica, sans-serif;
list-style: square;
}
#mainpane {
padding-top: 15px;
}
#mainpane2 {
padding-top: 15px;
min-height: 1000px;
}
.exhibitors {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.exhibitors p{
border-top: 1px solid #ccc;
border-bottom: 1px #ccc;
width: 50%;
text-indent: 10px;
margin: 0px;
padding-bottom: 2px;
}
.head1 {
font: 1.9em Arial, Helvetica, sans-serif;
font-variant: bold;
color: #069;
}
.head2 {
font: 1.7em Arial, Helvetica, sans-serif;
font-variant: bold;
color: #069;
}
.head3 {
font: 1.2em Arial, Helvetica, sans-serif;
color: #069;
padding-bottom: 10px;
}
.caption {
font-variant: bold;
color: #069;
}
and here is the page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>NSA Sheep 2008: Book your tickets</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="subcontainer">
<div id="menu">
<div><a href="http://www.nationalsheep.org.uk"><img src="artwork/sheep2006.gif" alt="Sheep 2008 logo" width="150" height="136" border="0"></a></div>
<div id="navigation">
<? include("navigation.html") ?>
</div>
<div class="coorganiser">
<div align="center">CO-ORGANISER<br>
<a href="http://www.threecounties.co.uk/" target="_blank"><img src="artwork/tcas.gif" alt="Three Counties Agricultural Society" width="101" height="120" border="0"></a></div>
</div>
</div>
<div id="main">
<div id="header">
<div id="datestrap">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Wednesday, 30 July<br>
Three Counties
Showground,
Malvern, Worcestershire</td>
</tr>
</table>
</div>
</div>
<div id="mainpane">
<? include("artman/publish/article_62.shtml") ?></div>
</div>
</div>
<div id="footer"><span class="mainlinesponsor">MAINLINE SPONSORS <br>
</span><a href="http://www.eblex.org.uk/" target="_blank"><img src="artwork/eblex.gif" alt="Eblex logo" border="0"></a><a href="http://www.environment-agency.gov.uk/business/444304/1224648/" target="_blank"><a href="http://www.shearwell.co.uk/" target="_blank"><img src="artwork/shearwell.gif" alt="Shearwell Data logo" width="139" height="68" border="0"></a><a href="http://www.ah.novartis.com" target="_blank" alt="Novartis Clik logo"><img src="artwork/clik.gif" border="0"></a><a href="http://www.waitrose.com" target="_blank" alt="Waitrose logo"><img src="artwork/waitrose.gif" border="0"></a>
</div>
</div>
</body>
</html>
FYI, the include being processed consists of essentially nine img tags separated by <br>'s. Can anyone help? At my wit's end here! Similar TutorialsHi There - Most of my CSS has been pretty pedestrian. Now I've been assigned a layout that is a bit more adventurous and I'd really like to try it. You can see it at leevodra.com slash layout7.gif . (Forum rules prohibit me from posting a URL or inserting an image or attaching an image. Not sure what best to do here.) Briefly, there's a vertical nav that is semi-transparent and sits above the other divs. It needs to be a fixed width, but with the option of having it be flexible width. The main content container sits behind the nav and has a left margin of a percentage. (The same percentage as the right nav div.) It lives underneath the nav div and goes all the way over to the right. It's better to look at the picture. How do I approach this? Instead of a header and footer that go all the way across, there's a big vertical stripe that cuts off everything else. How do I make the text in the main content container be sensitive to the vertical nav? If the vertical nav's flexible, (doubt I can get away with that since it needs to be fixed) then I can have a percentage from the edge. But what if it's fixed width? Do I need a separate text div on the same z-index as the nav? Is there a way to add pixels to a percentage? Do I just cheat and give it a max-width? Any help getting started or with the finer points of this layout will be greatly appreciated. |
|||||||