Css

TreyeMe · 09-22-2006, 09:47 PM

ok so i played around in some CSS for the first time everyone im not to sure of how it fully works yet but it doesnt seem to be very complicated considering i only really picked it up say 2-3 hours ago...im done with it for now...theres a couple noticable errors on the page i cant seem to figure out though...anyone wanna throw me a tip

http://eveotto.com/again.html

PEACE
~TreyeMe~

**DJ-Zep** · 09-23-2006, 08:59 AM

I'm just wondering...Did you slice everything correctly?

TreyeMe · 09-23-2006, 09:29 AM

probably not i think that might be the problem im running into now that im thinking about it a little more...i really dont understand i guess how to get things to line up horizontal and vertically when i want to...i just pieced it together one by one till it came out the way it did....

when you open a div and want something directly under it do you close it and open a new one...or do you leave it open add the new div then close them both....

same questionwith laying it horzontal with each other....

**DJ-Zep** · 09-23-2006, 02:24 PM

To answer your question, you should close the div tag. Closing one div and starting a new one starts a new line, so you don't have to nest them differently. Unless you use a table for your layout, the same rule applies for your second question.

TreyeMe · 09-24-2006, 08:04 AM

thanks for clearing that up for me DJ

TreyeMe · 09-24-2006, 10:22 PM

i think im even farther from any understanding of how making a style sheet out of css accually works...i mean i more understand the values of what the code does but i still dont understand how it lays out....im mroe of a visual person i guess and because i cant see how the lines for the div are laying out when i put the code into it i dont really understand how to put the tags in the correct order....

if anyone would be kind enough to type up a very simple piece of code making each div a different background color and set me up a link so i can read the code and figure how it was set up to do what it does....just like two rows and two columns so i grasp te understanding of how the cells of whatever they are callled lay out i would realy apprieciate it...thank you

Wonderboy_001 · 10-02-2006, 02:23 AM

Right ok, presuming you know the basic html to start up style sheet here is some simple stuff for you.

Start you <body> with a <div id="banner"></div>

By using id, it gives your div an identification. Making you able to syle it.

When styling your banner you use:

#banner {
background:#000000;
width:780px;
height:150px
}

That will make your banner black, 780px wide, 150px high.

Now lets add a navigation. Add <div id="navigation"></div>. Again we give our div an id so that we can stylise it.

Go back into your css and add the following code:

#navigation {
background:#cccccc;
width:200px;
height:200px;
float:left
}

Here we have added a grey background, a width of 200px a height of 200px and floated it left. Using float alows you to position you div. This will position it to the left.

Lets now add a content area. Add this to your html. <div id="content"></div>

Now go back into your css and add this.

#content {
background:#dedede;
width:580px;
height:200px;
float:left;
}

This adds a width of 580px, height of 200px and also floats it left. Floating that left will position it next to the navigation.

There you go you have a basic page. Hope this helps

**gamerman0203** · 10-02-2006, 07:02 AM

Quote:

Originally Posted by Wonderboy_001

Right ok, presuming you know the basic html to start up style sheet here is some simple stuff for you.

Start you <body> with a <div id="banner"></div>

By using id, it gives your div an identification. Making you able to syle it.

When styling your banner you use:

#banner {
background:#000000;
width:780px;
height:150px;
background-color: #0000FF;
position: absolute;
top: 10px;
left: 10px;
}
The above blue text is how to add a background color. That is the hexidecimal value for blue, but you can also just type "blue". Click here for a list of CSS color value's and their names.

The above text also states another way of positioning. By setting the position, top and left attributes, you can position the <div> anywhere you want to. That div, for instance, will be positioned 10 pixels from the top and 10 pixels from the left.
That will make your banner black, 780px wide, 150px high.

Now lets add a navigation. Add <div id="navigation"></div>. Again we give our div an id so that we can stylise it.

Go back into your css and add the following code:

#navigation {
background:#cccccc;
width:200px;
height:200px;
float:left
}

Here we have added a grey background, a width of 200px a height of 200px and floated it left. Using float alows you to position you div. This will position it to the left.

Lets now add a content area. Add this to your html. <div id="content"></div>

Now go back into your css and add this.

#content {
background:#dedede;
width:580px;
height:200px;
float:left;
}

This adds a width of 580px, height of 200px and also floats it left. Floating that left will position it next to the navigation.

There you go you have a basic page. Hope this helps

Wonderboy_001 · 10-02-2006, 07:08 AM

Thanks for editing my post :) Instead of positioning it the way you did, you could also keep it the may i did and use a margin-left:10px; margin-right:10px

09-22-2006, 09:47 PM	#1 (permalink)
TreyeMe Registered User Join Date: Jul 2006 Location: NY Posts: 83 OS: VISTA	Css ok so i played around in some CSS for the first time everyone im not to sure of how it fully works yet but it doesnt seem to be very complicated considering i only really picked it up say 2-3 hours ago...im done with it for now...theres a couple noticable errors on the page i cant seem to figure out though...anyone wanna throw me a tip http://eveotto.com/again.html PEACE ~TreyeMe~

09-23-2006, 08:59 AM	#2 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	I'm just wondering...Did you slice everything correctly? __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

09-23-2006, 02:24 PM	#4 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	To answer your question, you should close the div tag. Closing one div and starting a new one starts a new line, so you don't have to nest them differently. Unless you use a table for your layout, the same rule applies for your second question. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

09-23-2006, 09:29 AM	#3 (permalink)
TreyeMe Registered User Join Date: Jul 2006 Location: NY Posts: 83 OS: VISTA	probably not i think that might be the problem im running into now that im thinking about it a little more...i really dont understand i guess how to get things to line up horizontal and vertically when i want to...i just pieced it together one by one till it came out the way it did.... when you open a div and want something directly under it do you close it and open a new one...or do you leave it open add the new div then close them both.... same questionwith laying it horzontal with each other....

09-24-2006, 08:04 AM	#5 (permalink)
TreyeMe Registered User Join Date: Jul 2006 Location: NY Posts: 83 OS: VISTA	thanks for clearing that up for me DJ

09-24-2006, 10:22 PM	#6 (permalink)
TreyeMe Registered User Join Date: Jul 2006 Location: NY Posts: 83 OS: VISTA	i think im even farther from any understanding of how making a style sheet out of css accually works...i mean i more understand the values of what the code does but i still dont understand how it lays out....im mroe of a visual person i guess and because i cant see how the lines for the div are laying out when i put the code into it i dont really understand how to put the tags in the correct order.... if anyone would be kind enough to type up a very simple piece of code making each div a different background color and set me up a link so i can read the code and figure how it was set up to do what it does....just like two rows and two columns so i grasp te understanding of how the cells of whatever they are callled lay out i would realy apprieciate it...thank you

10-02-2006, 02:23 AM	#7 (permalink)
Wonderboy_001 Registered User Join Date: Aug 2006 Posts: 22 OS: WinXP	Right ok, presuming you know the basic html to start up style sheet here is some simple stuff for you. Start you <body> with a <div id="banner"></div> By using id, it gives your div an identification. Making you able to syle it. When styling your banner you use: #banner { background:#000000; width:780px; height:150px } That will make your banner black, 780px wide, 150px high. Now lets add a navigation. Add <div id="navigation"></div>. Again we give our div an id so that we can stylise it. Go back into your css and add the following code: #navigation { background:#cccccc; width:200px; height:200px; float:left } Here we have added a grey background, a width of 200px a height of 200px and floated it left. Using float alows you to position you div. This will position it to the left. Lets now add a content area. Add this to your html. <div id="content"></div> Now go back into your css and add this. #content { background:#dedede; width:580px; height:200px; float:left; } This adds a width of 580px, height of 200px and also floats it left. Floating that left will position it next to the navigation. There you go you have a basic page. Hope this helps

10-02-2006, 07:08 AM	#9 (permalink)
Wonderboy_001 Registered User Join Date: Aug 2006 Posts: 22 OS: WinXP	Thanks for editing my post :) Instead of positioning it the way you did, you could also keep it the may i did and use a margin-left:10px; margin-right:10px