CSS/HTML questions

breNTx22 · May 30, 2010

I posted a few days ago about this. Basically, I'm doing a website for a class i'm taking in college (beginners level) and depending on how well my skills develop I might start doing this more and see where it leads.

My site

I'm running into a few small problems though.

1) My banner/navigation bar is a different size on my index page then it is on my Shopping and Building pages. They're reading from the same CSS file so why would this be and how could I fix it?

2) My text makes the screen extend, how can I set it so the user doesn't have to scroll right to read the text?

3) I'm still a little unclear how to remove the padding between the images. I set the padding (top, bottom, right, left) to 0px but that didn't seem to affect it.

Thanks.

newseed · May 30, 2010

1) My banner/navigation bar is a different size on my index page then it is on my Shopping and Building pages. They're reading from the same CSS file so why would this be and how could I fix it?

You are using percentages in the css for images. If you want the images to be a fix size then create your image to be just that. No need to apply css or inline width/height to the image(s). Right now your actual image size is 600px by 100px.

2) My text makes the screen extend, how can I set it so the user doesn't have to scroll right to read the text?

Right now your content is contained by the body tag. I would suggest that you wrap a div around all your content like this:

<body>

<div id="wrapper">

all other html/content here

<div>

</body>

Then you can set that #wrapper to have a fixed width of something like 990px; and apply margin: 0 auto; to it as well. This will put your content with that div plus it will center the whole page on the screen.

If you are wanting to make it a fluid site then you can use percentage for that #wrapper div but it can be a bit challenging if you are not carefully which is why I suggested using the fixed width.

3) I'm still a little unclear how to remove the padding between the images. I set the padding (top, bottom, right, left) to 0px but that didn't seem to affect it.

Your image buttons are within a unordered list ( <ul> <li>blah blah </li> </ul> ) and the <li> has some default padding and line-height.

What you should be doing first is create a framework before you apply any of the images, content, etc.

You need the following:

a header div (your header/logo graphic)

a left column div (for your left menu navigation)

a main column div (for content)

a footer div (for copyright, footer links, etc.)

It will look something like this:

</div>

Then you would start applying the css to each starting with the #wrapper in which I showed you earlier in this post)

Then you would apply:

a height to the #header;

a fixed width and float left to the #left;

a fixed width and float right to the #content; (note that the #left and #content divs' width should total no greater than the overall #wrapper div width);

a height for the #footer;

Normally I would have then done for you but since it's a school project and that you need to be able to figure things out for yourself, I gave you at least a start and I hope you will at least make the attempt to apply the widths, heights, and floats as suggested.

When you get that far, post your results via a link and ask any questions that you may have.

Edited May 30, 2010 by newseed

Andrea · May 30, 2010

What Newseed said - and also:

Right now, on your index page, you have 2 sets of body tags. That's wrong - there should only be one.

It'd also be better to use HTML 4.01 strict as a doctype.

Look through http://www.csstutorial.net/category/killer-css-tips-tricks/ - much of what you need for your site is covered.

breNTx22 · May 30, 2010

Thanks, ill try that when I get home.

breNTx22 · May 31, 2010

Thanks, this information is very helpful.

I'm running into a few small problems still.

I loaded my website in 3 different places. IE (local file), Firefox (local file), and Firefox (uploaded onto my webspace). Each of them look different. For instance, each displays the text location differently. In some displays it placed perfectly, other times it's on the banner.

I also still have that space between my images but if I load it in IE it's not as obvious.

Wickham · May 31, 2010

I've re-coded a lot of your page because you had a mixture of position: fixed; position: absolute; and position: relative; which is difficult to control. You also had lots of large negative top and left positions which should be avoided. The code below has less code and it validates, but it nay not be exactly what you want:-

CSS

@charset "utf-8";
/* CSS Document */

body 
{
background-color:#06C;
color:#FFF; 
Font-family:"Arial Black", Georgia, sans-serif;
margin: 5px;
padding: 0;
}

p 
{
text-indent:25px; 
font-size:1em;
color:#FFF; 
Font-Family:"Arial", Verdana; 
margin: 0; 
padding: 0;
position:relative;
}


h1 
{
color:#DBE3E6; 
font-size:2.5em;
position:relative;
}

h2 
{
color:#DBE3E6; 
font-size:1.875em;
position:relative;
}

h3 
{
color:#DBE3E6; 
font-size:1.875em;
position:relative;
}

a:link
{
color:#06C;
} 

a:visited
{
color:#06C;
}

a:active 
{
color:#06C;
}  



#buildorder
{
margin: 5; 
padding: 0;
position:relative;
}

#wrapper
{         
width: 990px;
margin: 0 auto;
}

#header
{
width: 600px;
height: 100px;
}

#navigation
{ 
position: relative; float: left;
width: 136px;
height: 60px;
margin:0;
padding:0;
}
#content { width: 844px; margin-left: 136px; padding: 5px; }
ul, li { margin: 0; padding: 0; list-style-type:none; }

<!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>
<link rel="stylesheet" type="text/css" 
href="brentstylesheet100531.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
</head>
<!-- Beginning of banner and links -->
<body>
<div id="wrapper">

<div id="header">
<a href="index.html"><img src="images/Banner.jpg" alt="How to Build 
a Computer"  /></a>
</div>

<div id="navigation">
<ul>
<li><a href="index.html"><img src="images/home.jpg" alt="Home" 
/></a></li>
<li><a href="shopping.html"><img src="images/shopping.jpg"
alt="shopping"  /></a></li>
<li><a href="building.html"><img src="images/building.jpg" 
alt="building" /></a></li>
</ul>
</div>

<!-- Ending of banner and links -->

<div id="content">
<p>This website was designed to be a  resource for people wishing to 
learn how to build a computer. The topics that  will be discussed are 
where to shop for parts, how much to spend, build order,  installing the 
operating system, and overclocking.
</div>

</div>
</body>
</html>

breNTx22 · May 31, 2010

Wickham -

Thank you. I can't seem to find what you changed on the index page though. I put this in and tried it and it's not really what i'm looking for. I'd like the text to the right of the navigation bar as opposed to starting below it.

What's wrong with using large negative top/left positioning? If I shouldn't use those, what should I use to get them placed there?

newseed · May 31, 2010

The way you positioned it is going to place the element at the very location point of the screen. The problem is that resolutions varies from one monitor to another which is why you should stay clear of positioning unless it is contained within a div that has position: relative;.

I prefer not to do the following:

#content { width: 844px; margin-left: 136px; padding: 5px; }

Since this div is contained within a #wrapper div, I rather float the #content div to the right and remove the margin-left.

#content { width: 844px; float: left; padding: 5px; }

Edited May 31, 2010 by newseed

breNTx22 · June 7, 2010

One thing i'm a little unclear of is how does the webpage know what <div> opening tag goes with the closing tag?

For example, how does it know that the bold goes with the bold as opposed to it associating the first </div> tag with "wrapper"?

<div id=content>

</div>

</div>

falkencreative · June 7, 2010

I believe it pairs the closing tag with the last open tag. So, in your example:

<div id=wrapper>
<div id=content>
</div>
</div>

the first </div> is paired with <div id="content"> because <div id="content"> is the last open div.

newseed · June 7, 2010

In addition to what Ben said, trying to determine which closing </div> is for what can be a little tricky especially when you have a whole bunch of them. To keep your divs organized you can do something by adding comments to the closing divs like this:

<div id=wrapper>
<div id=content>
</div><!--end content-->
</div><!--end wrapper-->

Edited June 7, 2010 by newseed

Sign In

CSS/HTML questions

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation