35 replies [Last post]
Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

This is the website so far:

http://www.mosken.com/webdesigncss2.html

I would like to use CSS instead of tables..but get the same result..

http://www.mosken.com/webdesign.html

But I am stuck...tables are so much more easy to understand. I just make a mess out of the CSS codes...I have read books and websites..to no help. I am doing something wrong! Among else with the div at the bottom and I can't get borders to work...

My Style sheet codes:

/* CSS Document */

.font1 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #585458;
}
body {
background-color: #585458;
text-align:center;


}

#container {
text-align:center;
margin: 35px auto;
width: 800px;
border: 4;
}

#header {
width: auto;
}

#content {
float: right;
background-color:#FFFFFF;
width: 625px;
}

#sidebar {
float: left;
background-color:#D6AB38;
width: 175px;
}

.navigation {
}

.centered {
margin: 0 auto 0 auto;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFF4C1;
}

.h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color:#585458;

border-left-color:#585458;
}

a:link {
color: #585458;
}
a:visited {
color: #585458;
}
a:hover {
color: #585458#3366CC;
}
a:active {
color: #585458;
}

td.leftpad { padding-left: 15px; }

#footer {

}

-->

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Have a look at this

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 32 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

> But I am stuck...tables

> But I am stuck...tables are so much more easy to understand.

Nonsense! Tables for layout are much harder to understand, but they used to be the only way to do things so you bit the bullet and learned them. Of course something you already understand will be easier than something you don't yet understand!

The hardest step is the first one, and that's to forget, for the time being not forever, what you think you know about tables and layout. If you can do that you are on your way.

So first, forget what you know about tables, and about layout in general. Start with an open mind. Then understand the concept of the separation of concerns, and the concept of semantic markup.

Once you do that and have learned how to write valid semantic html (and more important learned why)then start working on CSS and after you understand the basics of CSS decoration move on to the concept of a "float" for positioning.

Yes, it will take some time, but once you've learned it you'll never want to return to the byzantine world of tables for layout. The "difficulty" of learning CSS is it's simplicity and logic.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Thank you!

Thanks for responding!

I have been to a couple of those articles already, but they didn't help.

Actually I didn't learn to do tables until this winter. I decided to learn tables and CSS layout at the same time. Maybe it is more easy to learn tables because there are more websites and books out there teaching tables.

Could you give me an idea where I am going wrong?

Root
Offline
Enthusiast
Brighton UK
Last seen: 13 years 26 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Once an error creeps in in

Once an error creeps in in the CSS it can cause unrelated cascading errors.

eg a border needs to be in the form:

element {border: 3px solid #fff }

That may not fix your issue but it will start the process.

No class, little style and a lotta division.

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Thanks!

Hmm..I finally understood I should have all the divs in the container..lol..also, thank you for the border tip!

Looks a bit more together now..

http://www.mosken.com/fall.html

Is it possible to combine a jahva script like I did with the other site for the sidebar?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You're still using tables,

You're still using tables, which is unnecessary, and numerous DIVs.

Have another read through my divitis article and see if you can get rid of those DIVs, and replace them with structural markup instead.

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Thanks..

I have read your article several times. Hmm...didn't make me any wiser. Eh..I know I cheated on the top menu, but other than that..no tables. I thought I had very few divs??

When I figure out how to make menu's without tables, I will make them..lolol. I am sorry, but none of those articles gave me any ideas about menu bars, sidebars and so on. I think the main problem is most books and websites are about tables. At least the good websites. The sites about CSS are really not very clear. Helpful explaining the point about CSS, but I am passed that some time ago.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Verket wrote:I thought I had

Verket wrote:
I thought I had very few divs??

My point is, you still have too many - you'd really only need 2 or 3 in that layout.

webdesignfall

Fall is a beautiful time in Norway!

Why? What's wrong with:

webdesignfall
Fall is a beautiful time in Norway!

Quote:
When I figure out how to make menu's without tables, I will make them.

Google for "listamatic"

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

I don't understand...

Do you mean what is wrong with not using Div's...I thought the divs made boxes...

All I have is...

container
image
main
content
sidebar
image

Should I drop the divs around the images? I guess I have to read your article again! lolol I am lost..just learned about divs and now I am supposed to do fine without them!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You don't need to surround

You don't need to surround everything in a div. Your images DEFINITELY don't need to be Smile

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Hehehe..thanks..

I read your article again and understood a bit more!

What you say reminds me of my first webpage ever..I had never heard of table or divs....lolol..although they sneaked in ...

http://www.mosken.com/sit.html

Ok, this is fun! I am running in circles...back to start!
Thank you..I have a lot to learn!

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

How to keep my sidebar at the side..lol

I was trying to make a gallery, but then my sidebar moves all over. I need to pin it...keep it where it is supposed to be, but no codes I have tried helps. http://www.mosken.com/fall2.html

My original layout was like this; http://www.mosken.com/fall.html

Now with less divs!

My CSS is for fall2:

/* CSS Document */

.font1 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #585458;
}
body {
background-color: #585458;
text-align:center;
}


#container {
text-align:center;
margin: 35px auto;
width: 800px;
border: 3px solid #fff;
}

#header {
width: auto;
}

#content {
float: right;
background-color:#FFFFFF;
width: 625px;
}

#sidebar {
float: left;
position: fixed;
background-color:#D6AB38;

top: 0px;
width: 175px;
margin-left: 20px;
}

.navigation {
}

.centered {
margin: 0 auto 0 auto;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFF4C1;
}

.h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color:#585458;

border-left-color:#585458;
}

a:link {
color: #585458;
}
a:visited {
color: #585458;
}
a:hover {
color: #585458#3366CC;
}
a:active {
color: #585458;
}

td.leftpad { padding-left: 15px; }

#footer {
background-image: url(imagedesign/fallbar2.jpg);
}

-->

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Nmind the sidebar moving around...

I discovered I had an end div too many. The sidebar is almost the place it should be now. Still I have not been able to make a gallery like I wanted to. Like I made here...

http://www.mosken.com/page5.html

Or like the site that is posted here several places..

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Gallery

This is what I really would like...pluss a sidebar..like I have with the tables.

http://www.cssplay.co.uk/menu/gallery.html

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Something different

Decided to do something different...

http://www.mosken.com/spring.html

Still not able to get rid of the tables though. I am blaming the books...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You're getting there though,

You're getting there though, aren't you?

Let me help you get rid of that last table. You'll use a list.

This:

About me

|

Norsk webforum
|
Photography review

|
Teddy

|
Webaperture

|

Photo site





is to become this:

#nav {
width: 100%;
background: #fff;
color: #000;
}

#nav ul, #nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav li {
float: left;
}

Try it out and see what happens.

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Hello there!

Hello and thanks! I thought I was talking to myself in here! I guess you had given me up! Hehehe..

I tried your li and ul coding..but nope..I must be doing something wrong..

http://www.mosken.com/spring2.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First of all, add overflow:

First of all, add

overflow: auto;

to #container, to enclose the floats.

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Ok, tx

Ok, I will try that..in the meantime, I did this:

http://www.mosken.com/spring3.html

At least the sidebar is without tables now. I admit it was so much less work! Still I am soo far from understanding this....Thanks for hanging in there with me!

The blue buttons is not staying..either less blue or yellow.

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

hmmm...

Interesting results..

http://www.mosken.com/spring2.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Let's clear that footer, as

Let's clear that footer, as well:

add

clear: both;

to #footer

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

hmmmmm...

Those codes added scrollbars...

Thanks for being so patient with me! Still, I think you lost me now..lolol

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Verket wrote:Those codes

Verket wrote:
Those codes added scrollbars...

Thanks for being so patient with me! Still, I think you lost me now..lolol

I know, we'll get to the scrollbars, first you have to get the floats cleared.

Have you updated one of your online pages with the new code?

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Good afternoon!

Here is the one with scrollbars:

http://www.mosken.com/spring2.html

Having your code on that one:

#container {
text-align:center;
margin: 35px auto;
width: 900px;
border: 2px solid #369;
overflow: auto;

The original site:
http://www.mosken.com/spring.html

And one working on buttons..

http://www.mosken.com/spring3.html

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

This works

Go figure...why does this work?

http://www.mosken.com/spring7.html

The buttons should be same size though. But at least it worked right away.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Same size? Same as what?

Same size? Same as what?

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

I am sorry..

Sorry for being unclear. I meant maybe the top buttons (don't remember the English word) navigation should all be the same size?

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Finally getting some where..

http://www.mosken.com/spring.html

This looks better in my opinion...

SEOfan - spambot
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-02-23
Posts: 1
Points: 0

Hi all

spam baleeted - tph

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

What spam?

Do you mean my thread is spam??

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

No, not you, a spammer

No, not you, a spammer posted in your topic and I deleted it.

Which is the latest version of your page, for us to have a look at?

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Oh thanks!

That is a really good question!

http://www.mosken.com/spring.html

That is the one I going forward with. Right now I am reading everything I can find about float layouts and the need to clear them..like you mentioned! I have got rid of all tables, haven't I?
This is very exciting.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Better, but you still have

Better, but you still have superfluous divs.

<div id="main"> isn't needed. Apply the styles (if any) directly to the H1 tag.

<div class="shadetabs"> again isn't needed, apply the styles to the UL.

Same with:

<div class="navigation">
<ul class="sidebarmenu">

Just apply the styles to the UL Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

You are fast..

Sorry, I had linked to wrong CSS sheet, but you got the main points anyway.

At least I understood the clearing of the footer now. Not bad. Footer is cleared. Now back to study my number of divs again...lol

Thanks for pushing me in the right direction!!!

Verket
Offline
Regular
Last seen: 11 years 48 weeks ago
Joined: 2007-02-06
Posts: 34
Points: 0

Got rid of some divs

Managed to get rid of several divs, but only 2 of those you mentioned. Thanks!

http://www.mosken.com/spring.html

I have also read your article about divs again! Understanding a bit more every time I read it!