I could use some help with HTML and CSS.

MiserableMirth · April 2009

A few days ago I decided I wanted to learn how to make websites. I have been reading tutorials online and looking at extremely overwhelming source pages so far.

Right now I'm just trying to make sense of all the commands. I've put together a simple web page. Here is the HTML:

<html>
<head>

<title>This is a webpage</title>

<link rel="stylesheet" type="text/css" href="test.css" />

</head>
<body>

<div class="big-box">

<div class="top"><div class="top-text"><span>You're on the Internet.</span><br /><h1 class="top-subtext">Isn't it neat?</div></div>

<div class="small-box">

<div class="left"><table class="left-table">
<tr><td>Link One</td></tr>
<tr><td>Link Two</td></tr>
<tr><td>Link Three</td></tr>
<tr><td>Link Four</td></tr>
</table></div>

<div class="right">
<table class="right-table">
<tr><td>Link One</td></tr>
<tr><td>Link Two</td></tr>
<tr><td>Link Three</td></tr>
<tr><td>Link Four</td></tr>
</table>
</div>

<div class="content">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div></div>

<div class="bottom"><br /><div class="bottom-text"><span>:[</span></div></div></div>
</body>
</html>

And the CSS:

.big-box
{
width:800px;
margin-left: auto;
margin-right: auto;
border: 3px solid black;

}

.small-box
{
width:800px;
border:0;
margin:0;
padding:0;
height:100%;
}

.top
{
background-color:blue;
width: 100%;
height: 110px;
border: 0;
margin: 0 auto;
padding: 0;
text-align: center;
color: white;
}

.top-text
{
text-align:center;
padding-top:30px;
padding-bottom: 0px;
margin-bottom: 0px;
font-size:xx-large;
}

.top-subtext
{
font-size:medium;
border: none;
padding-top: 0px;
padding: 0;
margin: 0;
}

.bottom
{
background-color:blue;
width: 100%;
height: 80px;
border: 0;

padding: 0;
text-align: center;
;
color: white;
}

.bottom-text
{
font-size:large;
border: none;
padding:0;
margin-top: 10px;
}

.left
{
float:left;
width: 100px;
height:100%;
margin:0;
background-color:gray;
padding:0;
}

.left-table
{

}

.right
{
float: right;
height:100%;
margin:0;
background-color:gray;
padding:0;
width: 100px;
}

.right-table
{

}

.content
{
width: 600px;
margin-left:100px;
padding: 10px;

}

It was going well until I added more paragraphs. I guess I don't fully understand the div command. I thought the box would expand as I added text, but obviously it doesn't. I'm not sure why. Any help, whether it pertain to this certain problem or problems in how I write the code, would be greatly appreciated.

admanb · April 2009

I don't see anything particularly wrong with the code, except there's no reason to use tables for a list of links. What happens when you add more paragraphs?

MiserableMirth · April 2009

I tried list earlier, but I couldn't get them to align with the left side of the box like I wanted. It seems like list automatically indent and they don't listen to align commands.

The paragraphs inside the .content section overlap and don't stay within it.

Aurin · April 2009

You can set lists to get rid of the indent, or you can just stick the links in paragraph tags instead of a table. I'm still working at getting divs to work right sometimes myself... but it might be that the small box div is around the content div?

And the content div will only be as wide as you set it... are the paragraphs overlapping down?

Janson · April 2009

It's been ages since I've worked on a site and I've not looked in great detail but:

Some of those divs should be ids and not classes; it won't help your current problem but it's good to learn the difference.

You haven't closed the <h1> tag in your header - is that causing problems?

Do you have an image of how you want the webpage to look that you could show us?

FightTest · April 2009

Your problem is your lack of doctype specification.

You should decide what doctype you're going to use and start learning to code with it because they each have their quirks. Without it a browser will default to "quirks mode" which basically means who the fuck knows how it will decide to render.

Slap the following at the very top of your .html file above the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This will fix your overflow issue. (Although it will also rain on your 100% height parade on your sidebars. Life is hard.)

Google doctype for more info.

edit.. also fyi you have some typos in your css. Get a decent editor (I use Scite) that will highlight text according to file context.

edit 2.. and if you're wondering about your new background issue, the general workaround is to make a width x 1px background image which you then assign as the background to the container that holds your columns.

Seguer · April 2009

Also h1 (hX where X is a number 1-6) are Headings, and should be used semantically as such (rather than a small sub-text..)

1 ->
More important ->

Afty · April 2009

Something that is a good habit to get into is that you dont need to specify the extra class sometimes on sub elements.

In your example you could lose the classes on the tables. Then target them as follows

div.right table {

}

This will apply the same styles to all tables inside of the div class="right" parent element. This is useful for keeping your html mark up cleaner

SporkAndrew · April 2009

List items automatically assign a margin and a padding. Well, actually, pretty much every html element has some amount of padding and margin automatically assigned to it by the browser. This means that even if the css is turned off if you've marked your page up semantically correct it will still read nice. One thing I always do is set the margin / padding to 0 for every html element (ul, ul li, p, h1, h2, etc) so that when I come to place these in the page it's just a case of adding whatever margin and padding I want.

You have two lists of links, just use what's already there, save yourself some code and steer clear of contracting div-itis:

[html]
<ul id="left-list">
<li><a href="" title="">blargh</a></li>
</ul>
[/html]

ul#left-list {
      float: left;
      width: 250px;
      margin: 5px;
}
ul#left-list li {
      padding: 2px 0;
}

That'll make the left list sit at the left hand side of the page, have a 5px margin around it and have the text line up along with any border you give the list.

I know this doesn't help with your original problem but as a commercial web developer I fucking hate it when I see sites that have <div class=""> everywhere and use <span class="header">.

Seguer · April 2009

SporkAndrew wrote: »
List items automatically assign a margin and a padding. Well, actually, pretty much every html element has some amount of padding and margin automatically assigned to it by the browser. This means that even if the css is turned off if you've marked your page up semantically correct it will still read nice. One thing I always do is set the margin / padding to 0 for every html element (ul, ul li, p, h1, h2, etc) so that when I come to place these in the page it's just a case of adding whatever margin and padding I want.

You have two lists of links, just use what's already there, save yourself some code and steer clear of contracting div-itis:

[html]
<ul id="left-list">
<li><a href="" title="">blargh</a></li>
</ul>
[/html]
ul#left-list {
      float: left;
      width: 250px;
      margin: 5px;
}
ul#left-list li {
      padding: 2px 0;
}
That'll make the left list sit at the left hand side of the page, have a 5px margin around it and have the text line up along with any border you give the list.

I know this doesn't help with your original problem but as a commercial web developer I fucking hate it when I see sites that have <div class=""> everywhere and use <span class="header">.

Google css-reset, there are pretty comprehensive stylesheets to reset the attributes of different elements, and then in your own stylesheet you add only what you want/need.

SporkAndrew · April 2009

Seguer wrote: »

Google css-reset, there are pretty comprehensive stylesheets to reset the attributes of different elements, and then in your own stylesheet you add only what you want/need.

Dang, that's great. Has a whole bunch of stuff that my standard import doesn't cover, thanks!

MiserableMirth · April 2009

Thanks for help with the list guys. I was trying to text-align them and they were telling me to fuck off.

FightTest wrote: »

Your problem is your lack of doctype specification.

You should decide what doctype you're going to use and start learning to code with it because they each have their quirks. Without it a browser will default to "quirks mode" which basically means who the fuck knows how it will decide to render.

Slap the following at the very top of your .html file above the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This will fix your overflow issue. (Although it will also rain on your 100% height parade on your sidebars. Life is hard.)

Google doctype for more info.

edit.. also fyi you have some typos in your css. Get a decent editor (I use Scite) that will highlight text according to file context.

edit 2.. and if you're wondering about your new background issue, the general workaround is to make a width x 1px background image which you then assign as the background to the container that holds your columns.

I remember reading about DOCTYPEs but I must not been paying much attention because I thought it was simply information. I didn't know it had an impact on the page.

Yes, it seems setting height to 100% was the problem. I removed them all. I thought it would set the length of whatever element to the entire length of the div section it was placed but it just seems to do whatever.

As for an editor, I have also heard of wordpress. I think they are both free. Does anyone have experience with them both?

I think I got it like I originally wanted it now:

Right now I'm just trying to refine my skills at this. I was wondering if there were practice problems are something I could use? Like a problem where it gives you a written set of criteria of a webpage and then has a finished example so you can check your work maybe.

Thanks again for everyone's help! :]

Seguer · April 2009

What do you mean by editor? Wordpress is a blog/half cms system that won't really help you learn how to "make" websites or teach you.

What you want is something that will give you syntax highlighting and/or code popups (I can never remember that this is called)

I use phpEd but it is a commerical program and is geared towards the more heavy duty developer, but I've heard others rave about Notepad++

MiserableMirth · April 2009

Something that shows you mistakes in your syntax is what I meant by editor. I guess that isn't the correct term. I thought wordpress was something similar to those, but you're right about it catering more to blogs. I downloaded Scite but haven't given it a try yet.

FightTest · April 2009

As a heads-up with Scite if you start a new file it doesn't highlight anything until you save it as the appropriate file type. Also choosing Options/Global Options will allow you to change settings. I change tabsize and indent.size to 3 and use.tabs to 0. Also in the source.files I add *.css and *.php so they show up by default when you try to open a file.

Penny Arcade

Quick Links

I could use some help with HTML and CSS.

Posts