PDA

View Full Version : Newbie having some trouble

mikewebb
11-23-2006, 06:30 PM
Hi there. I am very new to website designing. A friend and I are building a small website selling CDs. We are using CSS/HTML. The problem I am having is when a page has a lot of content it looks fine but when it only has a small amount of content then the page collapses and quite frankly looks stupid. I have read some tutorials on columns/faux columns etc. but am getting very lost and confused to the point that I can't see where I might be going wrong.
The site is two columns with left hand navigation.

The CSS I am using is:

/* --------- 1. defaults --------- */
{ margin: 0; padding: 0; }
body { color: #000000; font: 11px/14px Verdana, Arial, sans-serif; padding-bottom: 50px; background-color: #BAC5BA }
/* --------- 2. structure --------- */
#wrapper { width: 759px; margin: 0 auto; border-right: 1px solid #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } #masthead { margin-bottom: 17px; background-color: #6A7872 height: 173px; voice-family: "\"}\""; voice-family:inherit; height: 163px; }
pullNav { float: right; margin-top: 20px; margin-right: 10px; }
#navigation { width: 127px; float: left; margin-right: 20px; background-color: #93A49A } #content { width: 601px; float: left; } .column { width: 187px; float: left; padding-bottom: 20px; margin-right: 20px; }
# .noRightMargin { margin-right: 0; }
#footer { clear: both; }
.separator { clear: both; height: 4px; background-color: #4f615f; margin-bottom: 13px; } .separatorInvisible { clear: both; height: 1px; }
/* ---------- 3. links and navigation ---------- */
a { color: #000000; }
a:hover { color: #0a189d; }
#navigation a { text-decoration: none; color: #ffffff; padding-left: 10px; display: block; width: 127px; voice-family: "\"}\""; voice-family:inherit; width: 117px; }
#navigation a:hover { background-color: #93A49A; }
#navigation ul { list-style-type: none; background: #000000; border-top: 1px solid #4f615f; border-right: 1px solid #4f615f; border-left: 1px solid #4f615f; font: bold 11px Arial, sans-serif; }
#navigation li { border-bottom: 1px solid #4f615f; text-transform: uppercase; line-height: 17px; }
#pullNav ul { list-style-type: none; background: #000000; border-top: 1px solid #4f615f; border-right: 1px solid #4f615f; border-left: 1px solid #4f615f; font: bold 11px Arial, sans-serif; }
#pullNav li { border-bottom: 1px solid #4f615f; text-transform: uppercase; line-height: 17px; }
#pullNav a { text-decoration: none; color: #ffffff; padding-left: 10px; display: block; width: 127px; voice-family: "\"}\""; voice-family:inherit; width: 117px; }
#pullNav a:hover { background-color: #93A49A; }
/* ---------- 4. fonts ---------- */
h1, h2, h3, h4, p, ul { } #content h1 { font-size: 18px; text-transform: uppercase; margin-bottom: 12px; background: none; padding-left: 10px; font-family: Arial, sans-serif; } #navigation h1 { color: #000000; font: bold 11px Arial, sans-serif; text-transform: uppercase; }
#content .column h1 { font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 14px; line-height: 16px; margin-bottom: 2px; background: none; text-transform: none; padding-left: 0; }
h2 { color: #000000; font: bold 11px Arial, sans-serif; text-transform: uppercase; }
.column h2 { } h3 { } h4 { } p { margin-bottom: 1em; }
.introEnlargedText { font-weight: bold; font-size: 14px; color: #000000; }
#footer p { font-size: 10px; }
/* -- list styles -- */
ul { list-style-type: none; }
.ourPrice { font-weight: bold; color: #000000; }
/* ---------- 5. images ---------- */
a img { border: 0; }
.column a img { border: 10px solid #e1e1e1; margin-bottom: 10px; }
/* ---------- 6. hacks ---------- *
/ body { /* IE 5 centring bug fix */ text-align: center; }
#wrapper { text-align: left; }
#content h1, #pullNav li, #navigation h1, h2 { text-transform: uppercase; }

If anybody could point out what I do to make the page expand I would be very grateful.
_Aerospace_Eng_
11-23-2006, 07:32 PM
Yeah great got CSS but no HTML. How are we supposed to help you? The link to your site would be better.
AJW06
11-23-2006, 08:15 PM
i agree we need html
ahallicks
11-24-2006, 09:12 AM
If it's a height issue, create a min-height value for the content section that is large enough so as not to make it look stupid. Then create this in your stylesheet:

.prop {
float: right;
width: 1px;
height: (whatever height you set for the min height value);
}

then in your page, where the content is put the <div class="prop"></div> above any text. It's the only I.E hack I know that works as a min-height value so your box can stretch, but won't go below whatever you set this prop height, and your min-height to be.
mikewebb
11-24-2006, 11:38 AM
Sorry guys. Here is the html:

<!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>Stormblast Records</title>
<meta name="description" content="Stomrblast Records Music Store. New &amp; Used Heavy Metal CDs!" />
<meta name="keywords" content="Stormblast Records, Heavy Metal, New &amp; Used CDs, Black Metal, Death Metal,Doom, Thrash, Folk Metal, Power Metal, Progressive, Heavy Metal, Imports ,Clothing" />
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(storm.css);
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
<div id="masthead">
<div id="pullNav">
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="news.html">News</a></li>
<li><a href="releases.html">New Releases</a></li>
<li><a href="shipping.html">Shipping Info</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="ebay.html">Ebay</a></li>
</ul>
</div>
</div>
<div id="navigation">

<ul>
<li><a href="black.html">Black Metal</a></li>
<li><a href="death.html">Death Metal</a></li>
<li><a href="doom.html">Doom</a></li>
<li><a href="thrash.html">Thrash</a></li>
<li><a href="folk.html">Folk Metal</a></li>
<li><a href="power.html">Power Metal</a></li>
<li><a href="prog.html">Progressive</a></li>
<li><a href="heavy.html">Heavy Metal</a></li>
<li><a href="imports.html">Imports</a></li>
<li><a href="used.html">Used CDs</a></li>
<li><a href="clothing.html">Clothing</a></li>
</ul>

</div>
<div id="content">
<p><span class="introEnlargedText">Welcome to the Stormblast online Heavy Metal store.</span> We are the newest online store selling Heavy Metal CDs and clothing. We specialize in all things metal, extreme and underground. We're Heavy Metal fans ourselves so we know exactly what types of bands you are after. Take a look around the site. There is an extensive collection of CDs and clothing listed to guarantee you will find something to satisfy your needs. Be sure to check out our Ebay auctions as well.</p>
<div class="columnBlock">
<div class="column">
<a href="product6.html"><img src="assets/product_6.jpg" alt="Thornography" width="167" height="167" border="0" /></a>
<h1><a href="#">Cradle Of Filth: Thornography</a></h1>
<p>New CD from Britain's top extreme metal band. Probably their most versatile release to date. Includes the single Temptation.</p>
<ul>
<li class="ourPrice">Our price: £9.49</li>
</ul>
</div>
<div class="column">
<a href="product5.html"><img src="assets/product_5.jpg" alt="Christ Illusion" width="167" height="167" border="0" /></a>
<h1><a href="#">Slayer: Christ Illusion.</a></h1>
<p>The Gods of thrash metal are back with a powerful, hard hitting new album.</p>
<ul>
<li class="ourPrice">Our price: £5.99 </li>
</ul>
</div>
<div class="column noRightMargin">
<a href="product4.html"><img src="assets/product_4.jpg" alt="A Twist of Myth" width="167" height="167" border="0" /></a>
<h1><a href="#">Blind Guardian: A Twist Of Myth (Import)</a></h1>
<p>Includes: Interesting new album from the popular German Power Metallers.</p>
<ul>
<li class="ourPrice">Our price: £5.99</li>
</ul>
</div>
<div class="separator">
<!-- x -->
</div>
</div>
<div class="columnBlock">
<h1>RECOMMENDATIONS</h1>
<div class="column">
<a href="#"><img src="assets/product_7.jpg" alt="Emperor" width="167" height="167" border="0" /></a>
<h1><a href="#">Emperor: Prometheus-The Discipline of Fire And Demise</a></h1>
<p>The leaders of Black Metal with an outstanding album.</p>
<ul>
<li class="ourPrice">Our price : £5.99</li>
</ul>
</div>
<div class="column">
<a href="#"><img src="assets/product_8.jpg" alt="Product shot" width="167" height="167" border="0" /></a>
<h1><a href="#">Dream Theater: Octovarian</a></h1>
<p>The pioneering progressive metal masters produce yet another quality album.</p>
<ul>
<li class="ourPrice">Our price: £5.99</li>
</ul>
</div>
<div class="column noRightMargin">
<h2>More Stromblast recommended items</h2>
<br />
<ul class="clearanceList">
<li><a href="#">Nightwish: Oceanborn</a>: £5.99</li>
<li><a href="#">Opeth: Deliverance</a>: £5.99</li>
<li><a href="#">Nile: Black Seeds of Vengeance</a>: £5.99</li>
<li><a href="#">In Flames: Reroute To Remains</a>: £5.99</li>
<li><a href="#">Whitesnake: 1987</a>: £5.99</li>
<li><a href="#">Cinderella: Long Cold Winter</a>: £5.99</li>
</ul>
</div>
<div class="separator">
<!-- x -->
</div>
</div>
<div id="footer">
<p>Prices &amp; availability are subject to change without notice. Site design by Tamarisk Designs. All images are © Copyright the respective rights holders. </p>
</div>
</div>
<div class="separatorInvisible"><!-- x --></div>
</div>
</body>
</html>


I hope that helps. The page looks fine like that but for info regarding shipping, or for some of the categories there is nowhere near as much content. The page literally collapses and simply looks squashed and I don't know how to correct it.
_Aerospace_Eng_
11-24-2006, 06:50 PM
Try this for your CSS
/* --------- 1. defaults --------- */
* {
margin:0;
padding:0;
}

html, body {
color:#000;
font:11px/14px Verdana, Arial, sans-serif;
height:100%;
background-color:#BAC5BA;
}

/* --------- 2. structure --------- */
#wrapper {
width:759px;
margin:0 auto;
border-right:1px solid #000;
border-left:1px solid #000;
min-height:100%;
}

* html #wrapper {
height:100%;
}

#masthead {
margin-bottom:17px;
background-color:#6A7872;
}

pullNav {
float:right;
margin-top:20px;
margin-right:10px;
}

#navigation {
width:127px;
float:left;
margin-right:20px;
background-color:#93A49A;
}

#content {
width:601px;
float:left;
}

.column {
width:187px;
float:left;
padding-bottom:20px;
margin-right:20px;
}

.noRightMargin {
margin-right:0;
}

#footer {
clear:both;
}

.separator {
clear:both;
height:4px;
background-color:#4f615f;
margin-bottom:13px;
line-height:0px;
font-size:0;
}

.separatorInvisible {
clear:both;
height:1px;
line-height:0px;
font-size:0;
}

/* ---------- 3. links and navigation ---------- */
a {
color:#000;
}

a:hover {
color:#0a189d;
}

#navigation a {
text-decoration:none;
color:#fff;
padding-left:10px;
display:block;
width:127px;
voice-family:"\"}\"";
voice-family:inherit;
width:117px;
}

#navigation a:hover {
background-color:#93A49A;
}

#navigation ul {
list-style-type:none;
background:#000;
border-top:1px solid #4f615f;
border-right:1px solid #4f615f;
border-left:1px solid #4f615f;
font:bold 11px Arial, sans-serif;
}

#navigation li {
border-bottom:1px solid #4f615f;
text-transform:uppercase;
line-height:17px;
}

#pullNav ul {
list-style-type:none;
background:#000;
border-top:1px solid #4f615f;
border-right:1px solid #4f615f;
border-left:1px solid #4f615f;
font:bold 11px Arial, sans-serif;
}

#pullNav li {
border-bottom:1px solid #4f615f;
text-transform:uppercase;
line-height:17px;
}

#pullNav a {
text-decoration:none;
color:#fff;
padding-left:10px;
display:block;
width:127px;
voice-family:"\"}\"";
voice-family:inherit;
width:117px;
}

#pullNav a:hover {
background-color:#93A49A;
}

/* ---------- 4. fonts ---------- */
h1,h2,h3,h4,p,ul {
}

#content h1 {
font-size:18px;
text-transform:uppercase;
margin-bottom:12px;
background:none;
padding-left:10px;
font-family:Arial, sans-serif;
}

#navigation h1 {
color:#000;
font:bold 11px Arial, sans-serif;
text-transform:uppercase;
}

#content .column h1 {
font-family:Verdana, Arial, sans-serif;
font-weight:700;
font-size:14px;
line-height:16px;
margin-bottom:2px;
background:none;
text-transform:none;
padding-left:0;
}

h2 {
color:#000;
font:bold 11px Arial, sans-serif;
text-transform:uppercase;
}

.column h2 {
}

h3 {
}

h4 {
}

p {
margin-bottom:1em;
}

.introEnlargedText {
font-weight:700;
font-size:14px;
color:#000;
}

#footer p {
font-size:10px;
}

/* -- list styles -- */
ul {
list-style-type:none;
}

.ourPrice {
font-weight:700;
color:#000;
}

/* ---------- 5. images ---------- */
a img {
border:0;
}

.column a img {
border:10px solid #e1e1e1;
margin-bottom:10px;
}/* ---------- 6. hacks ---------- */

body { /* IE 5 centring bug fix */
text-align:center;
}

#wrapper {
text-align:left;
}

#content h1,#pullNav li,#navigation h1,h2 {
text-transform:uppercase;
}
You know simple problems can be fixed by using the CSS validator. http://jigsaw.w3.org/css-validator/

Though your CSS won't validate because of the voice family hack. I'm going to guess you probably have no idea how that works. Its better to use conditional comments (http://www.quirksmode.org/condcom.html) to feed IE browser specific styles of your choice.
mikewebb
11-25-2006, 10:18 AM
Thanks for that-that has the height of the page sorted nicely.
It has thrown up one slight problem. The PullNav in the Masthead now covers the entire width of the Masthead. I was going to place the site logo within the Masthead as a background image.
How do I ensure the PullNav will retain its original size and not cover the entire width of the Masthead?
_Aerospace_Eng_
11-25-2006, 04:35 PM
Just give it a width.
mikewebb
12-05-2006, 10:28 AM
Hi there. I have tried to give it a width but am still ending up with the same results. What might I be doing wrong?