hand coded website questions

dubesinhower

dubesinhower

New Member
i've started making a website for my school's computer club. i've had a few questions as i go along, some of which the people at school helped answer. but i figured i might make a thread for me to ask questions.

i'm learning html and css coding, which has helped me to understand what i code. i don't know any java script atm, but as time goes on, i'll probably pick it up.

okay, so my first question. below is a link to the site i'm making. i want to make the content (the white box area) and the nav bar (the litish blue box on the left) so that they stretch to fill the entire page. so, when different people look at it on different sized screens, the background does not go under the page at all. but, if the content on the page is longer then that height, it should be able to stretch past the bottom of the page to see everything with a scroll.

i'm not really sure how/ if this is possible with only html and css, but if it is possible with java script, i would appreciate a point in the right direction.

thanks for any help, and just ask if that question was confusing lol.

www.repairandshareclub.com
 
Enjoi

Enjoi

banned
You would need to wrap the container div around all the content like you have done already, and specify its width with a percentage rather than a pixel amount.

I looked at your code briefly, it looks very clean, but there are a few things you are missing. I suggest taking the XHTML and CSS courses at this website:

http://www.w3schools.com/

They are very short, but crammed with valuable information.

I will help you more if you need it. This post was a short answer because the coffee is wearing off and I can't process a single thought right now. I will be human again sometime later and can be of more help then. :good:
 
dubesinhower

dubesinhower

New Member
lol also, if it keeps changing, that means either i'm changing it, or someone from school is. we kinda just put everything live instead of making the site work first.
 
dubesinhower

dubesinhower

New Member
still not completely 100% of the page. even by making the container and the div's 100%, there is still a gap on the bottom.\

update: nevermind. when i do 100%, it doesnt add the header or footer into the size. so the content and nav bar thinks it has to be 100% of the visible page, excluding the header and foorer.
 
Last edited:
Enjoi

Enjoi

banned
dubesinhower said:
still not completely 100% of the page. even by making the container and the div's 100%, there is still a gap on the bottom.\

update: nevermind. when i do 100%, it doesnt add the header or footer into the size. so the content and nav bar thinks it has to be 100% of the visible page, excluding the header and foorer.
Click to expand...

That's because your header is an image file. You could solve this problem by centering the image file in the header div. If you edit the header div to the following, it should adjust the footer:

#container
{
text-align: left;
width: 100%;
}
Click to expand...


You also have superfluous code in both your html and css files. Remove the "head" div, since it serves no purpose. You are using "header"


Add the following code to your html document if you want to be standards compliant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
Click to expand...


I also recommend getting into the habit of keeping everything lowercase. Some hosts are case sensitive, others are not. Make your life easy and keep everything lowercase to avoid a headache in the future.
 
Last edited:
dubesinhower

dubesinhower

New Member
Enjoi said:
I also recommend getting into the habit of keeping everything lowercase. Some hosts are case sensitive, others are not. Make your life easy and keep everything lowercase to avoid a headache in the future.
Click to expand...

i had something lowercase?

also, im still not sure what else im missing. i've set a bunch of different things to height: 100% but i keep making it longer then the visible page.
 
Last edited:
Enjoi

Enjoi

banned
dubesinhower said:
i had something lowercase?

also, im still not sure what else im missing. i've set a bunch of different things to height: 100% but i keep making it longer then the visible page.
Click to expand...

I recreated your webpage on my desktop by viewing the source and pasting it, as well as saving the images and duplicating the file structure. I did what I told you to do, and it immediately worked. I don't understand why you are having problems. Is your syntax correct?
 
dubesinhower

dubesinhower

New Member
Enjoi said:
I recreated your webpage on my desktop by viewing the source and pasting it, as well as saving the images and duplicating the file structure. I did what I told you to do, and it immediately worked. I don't understand why you are having problems. Is your syntax correct?
Click to expand...

can you make a screenshot of what you did? i don't know if we're talking about the same thing.
 
dubesinhower

dubesinhower

New Member
yea, i thought so. i didn't mean for the site to stretch horizontally, i meant for it to stretch vertically. i want it to be 800 pixels wide, and as long as the visible page.
 
Enjoi

Enjoi

banned
dubesinhower said:
yea, i thought so. i didn't mean for the site to stretch horizontally, i meant for it to stretch vertically. i want it to be 800 pixels wide, and as long as the visible page.
Click to expand...

Oh, that's even easier.

Set height on both the content and links divs to 100% - you had the container div to 100%, but the individual areas within the container had a pixel amount set for the height. CSS will always take the most specific code it gets.
 
dubesinhower

dubesinhower

New Member
Enjoi said:
Oh, that's even easier.

Set height on both the content and links divs to 100% - you had the container div to 100%, but the individual areas within the container had a pixel amount set for the height. CSS will always take the most specific code it gets.
Click to expand...

that doesnt help. using 100% in the content and link divs, it just shrinks to the size of the content. not really what i want.
 
Enjoi

Enjoi

banned
dubesinhower said:
that doesnt help. using 100% in the content and link divs, it just shrinks to the size of the content. not really what i want.
Click to expand...

Again, I plugged the code in myself and it worked instantly.

I think you need to read about the box model and css some more, because this is very, very basic stuff. You need to have a solid understanding of it before you try to do anything else.
 
dubesinhower

dubesinhower

New Member
Enjoi said:
Again, I plugged the code in myself and it worked instantly.

I think you need to read about the box model and css some more, because this is very, very basic stuff. You need to have a solid understanding of it before you try to do anything else.
Click to expand...

can you take another screenshot lol. im sorry im being bothersome, but i understand what things do. i'm pretty sure im just misstyping something.
 
dubesinhower

dubesinhower

New Member
bump for great justice. i'm pretty sure i need java script to do what i'm trying to accomplish. div's just don't want to work.
 
You must log in or register to reply here.
Top