I some some help with page width, links

casho · #1 Nov 29th, 2007, 18:14

Hi, I just started learning HTML and CSS and I have a few issues. For start I have set a page width but the window still expands and detracts when I move the window also I can't change link colour of any of the states.
HTML

HTML: Select all

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

<html>

<head>
    <title>Home | PlayNes</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
    
</head>

<body>

<div id="body">
<div id="menu">
<p>

    <a href="a.html">A</a>
    <a href="b.html">B</a>
    <a href="c.html">C</a> 
    <a href="d.html">D</a> 
    E 
    F 
    <a href="g.html">G</a> 
    H 
    I 
    J 
    <a href="k.html">K</a> 
    <a href="l.html">L</a> 
    <a href="m.html">M</a> 
    O 
    P 
    Q 
    R 
    <a href="s.html">S</a>
    T 
    U 
    V 
    X 
    Y 
    <a href="z.html">Z</a>
 </p>
 </div>

<div id="content">
<p>
    I post Videos of me playing NES games
    <br /> that I find. So far I haven't
    <br /> got many but more will come.
</p>

<p>
    You can email me if you want me for
    <br /> me to play a specific game and
    <br /> I will see if I can find it for you.
    <br />cat.casho@gmail.com
</p>
</div>

<div id="videos">

<a href="http://screencast.com/t/kf0j6iSp">
    <img src="images/snoopyGame.png" alt="Snoopy Game" width="150" height="150" />
</a>
    <br />Snoopy


<div class="home">
    <a href="http://screencast.com/t/XHay5x8M">
    <img src="images/SnoopyRiverJump.png" alt="Snoopy River Jump" width="150" height="150" />
</a>
    <br />Snoopy River Jump
</div>


<div class="home">
    <a href="http://screencast.com/t/sKNmq2akJ">
    <img src="images/DonkeyKong3.png" alt="Donkey Kong 3" width="150" height="151" />
</a>
    <br />Donkey Kong 3
</div>

<div class=
<a href="http://screencast.com/t/LrRVnC84">
    <img src="images/cybernoid.png" alt="Cybernoid" width="150" height="150" />
</a>
    <br />Cybernoid

</div>

<div id="footer">
</div>

</div>
</body>

</html>

CSS

Code: Select all

body{
background-color: #5E5E5E;

}

#body{
    width: 850;
    color: #A3A3A3;
    background-color: #212121;
    border-style: solid;
    padding: 1em;
    border-width: 4pt;
    border-color: red;
    font-family: "Helvetica Neue", Arial, verdana;
}

#content{
float: right;
}

#menu{
    width: 100%;
    
}

#videos{
    width: 200;
}

#footer{
width: 100%;
clear: both;
}

.home{
    
}

a:link {
    text-decoration: none
    color: #BEBEBE;
}

a:visited {
    text-decoration: none
    color: #FF7F00;
}

a:active {
    text-decoration: none
    color: #FF2400;
}

a:hover {
    text-decoration: none;
    color: #EE0;
}

http://detabeta.com/home.html

karinne · #2 Nov 29th, 2007, 18:21

You forgot to add units to your #body width

Code: Select all

#body{
    width: 850px;
    color: #A3A3A3;
....

casho · #3 Nov 29th, 2007, 18:23

Ah thanks, why didn't I see that. Now the links.

karinne · #4 Nov 29th, 2007, 18:29

What's wrong with the links? Which links?

casho · #5 Nov 29th, 2007, 18:36

The A to Z there not the colour I want them to be.

karinne · #6 Nov 29th, 2007, 18:39

Probably because you haven't defined any colors for the links.

Check the CSS Beginner FAQ sticky to learn how to change the color of links

casho · #7 Nov 29th, 2007, 18:40

I've done that. But it doesn't change.

karinne · #8 Nov 29th, 2007, 18:46

I don't see it anywhere in your css

casho · #9 Nov 29th, 2007, 18:49

down at the bottom. of the css code.

karinne · #10 Nov 29th, 2007, 19:06

This?

Code: Select all

a.:link {
	color: #BEBEBE;
}

a.snowman:visited {
	color: #FF7F00;
}

a.snowman:active {
	color: #FF2400;
}

a.snowman:hover {
	text-decoration: none;
	color: #EE0;
	background-color: none;
}

First of all ... a.:link should be a:link unless you wanted to add a.snowman:link

Then in your HTML you need to add the snowman class to all you links

HTML: Select all

<a href="..." class="snowman">....</a>

Or you could instead do

Code: Select all

#menu a:link {
	color: #BEBEBE;
}

#menu a:visited {
	color: #FF7F00;
}

#menu a:active {
	color: #FF2400;
}

#menu a:hover {
	text-decoration: none;
	color: #EE0;
	background-color: none;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
links page	littlebilly	Starting Out	7	Jul 25th, 2007 20:22
? about table width - printing page = content cut off	Love2Java	Web Page Design	6	Feb 20th, 2007 12:42
Web Page To Fit Screen Width	vikaspa	JavaScript Forum	3	Nov 4th, 2006 16:31
Fluid HTML Page with one fixed column width problem	melc26	Web Page Design	1	Aug 24th, 2005 21:46

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
I some some help with page width, links