Jump to content
Stef's Coding Community
amitte

i want to really!! learn CSS...

Recommended Posts

i took Web design 1...

 

i read a lot of your posts... and i learn a lot...

 

u'v been halping me with a lot of good advices and links to sites that really help with certain issues...

 

and i thank u all for that.. really :)

 

BUT...

 

i want to realy learn CSS..

 

take for example this code - http://css.maxdesign.com.au/listamatic/vertical13.htm

 

part1-

 

 

#navcontainer
{
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

 

why this div is in the center of the page? its not written in here!..

 

what is text-transform?

 

and realy.. this is simple Q...

 

i'm realy talking about the basics like-

 

u can see that the "id" of the "ul" is "navlist"... so why in the CSS its written "ul#navlist"

 

*******what is the difference between "ul#navlist" and "#navlist ul"

 

*******and what about that- "ul#navlist li"???? what does it mean?

 

*******and after it this- "ul#navlist li a"?

 

*******why there are so many definitions?

 

*******"#navcontainer>ul#navlist li a " - this is realy out of my league...

 

can u understand what my Q really are about? i can follow those examples and plant the

 

code in my works... but i want to realy understand it before.. i want to be able to change it...

 

help me :/ pleas :D

Share this post


Link to post
Share on other sites

why this div is in the center of the page? its not written in here!..

width: 30%; margin: 0 auto;

width: 30% is a "fixed" (percentage) width and margin: auto; makes the two side margins equal but flexible, so the 30% centers.

 

what is text-transform?

It transforms text from lower case to upper case or the other way depending on the default setting.

 

what is the difference between "ul#navlist {..}" and "#navlist ul {..}"

ul#navlist {..} would apply to html markup like this

but #navlist ul {..} would apply to html markup like this:-

so it's the order of the id in the markup which matters.

 

ul#navlist li {..}

applies a style like a size or background-color to the li tag around the link

 

ul#navlist li a {..}

applies a style like text color inside the link to the "a" tag text Home Page

 

#navcontainer ul#navlist li a {..}

this applies a style to the html markup for the text in the "a" tag link ONLY where the list and link is inside an element like a div which has the id="navcontainer"

Share this post


Link to post
Share on other sites

so what u r saying in general that

it's the order of the id in the markup which matters

 

do u know a good site or an article that summarize the subjuct??

 

although i have to say that your anwers are very understandable.. thanks :)

Share this post


Link to post
Share on other sites

you can try Selectorial from the same maxdesign website:

Selectorial.

It goes with the whole CSS layout creating in the end ("Selectors in action") to clear things up.

Share this post


Link to post
Share on other sites

I'm not keen on the "Dummies" series, having seen non validating code in one of their HTML books. My choice would be one of Sitepoint's books.

Share this post


Link to post
Share on other sites
CSS book from 2005? isnt it a bit oldy?

 

 

Yeah maybe. But were not talking about reinventing the wheel here... All of the things the book goes over are still valid. They haven't changed the structure of CSS that much in 4 years. :)

Share this post


Link to post
Share on other sites
All of the things the book goes over are still valid. They haven't changed the structure of CSS that much in 4 years.

Could be, but with CSS - if you went through w3schools for basics of CSS and maxdesign for semantic mark up and styling, all you need is - practicing with test CSS templates keeping in mind modern ( as of 2009) browsers charts: in 4 years we "happily" got IE7 which now pushing away IE6 (with some revolutionary efforts of some designers:D). All use of CSS based on browsers support, bugs and all that.

So in all, don't buy this old book on CSS, there are plenty of new ones.

Share this post


Link to post
Share on other sites

ok... first of all... i used your suggestions... i feel now that i know so much more about css...

 

it's incredible!!!! :D

 

and a little Q..

 

what are this selectors stand for???-

 

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

 

and specific =

a:before 

 

i never saw "a:before" anywhere...

 

and about the declaration

{ content: " >> "; }

 

what is this????

 

the full page is in here http://css.maxdesign.com.au/listamatic2/horizontal04.htm

 

note- i do understand the rest of the code...

 

thanks :)

Share this post


Link to post
Share on other sites
All of the things the book goes over are still valid. They haven't changed the structure of CSS that much in 4 years.

Could be, but with CSS - if you went through w3schools for basics of CSS and maxdesign for semantic mark up and styling, all you need is - practicing with test CSS templates keeping in mind modern ( as of 2009) browsers charts: in 4 years we "happily" got IE7 which now pushing away IE6 (with some revolutionary efforts of some designers:D). All use of CSS based on browsers support, bugs and all that.

So in all, don't buy this old book on CSS, there are plenty of new ones.

 

 

Thats a fair assessment. :)

 

I digest... :P

Share this post


Link to post
Share on other sites

hy...

 

about the code in http://css.maxdesign.com.au/listamatic2/horizontal04.htm

 

.... i tryed to play with every thing in the code...

 

but when still i failed to hide the subnavlist

 

and then in the hover state make it visible again ..... this is my relevent code-

 


ul#navlist {

width: 100%;

height: 50px;

background-color: rgb(207,67,7);

padding: 10px;

}

.active {

padding-top: 10px;

padding-left: 10px;

padding-bottom: 20px;

padding-right: 10px;

}

ul#navlist li a {

text-decoration: none;

color: rgb(237,228,201);

background-image: url(img/iH.jpg);

background-repeat: no-repeat;

border: 2px solid rgb(237,228,201);

margin-right: 2px;

padding-right: 40px;

padding-left: 6px;

padding-top: 8px;

padding-bottom: 15px;

}

ul#navlist li {

float: right;

}


ul#navlist li a:hover {

color: rgb(207,67,7);

background-image: url(img/iH.jpg);

background-repeat: no-repeat;

background-color: rgb(237,228,201);

border: 2px solid rgb(237,228,201);

}



/* the last part!!!the last part!!!the last part!!! */

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }

 

 

tha last part is from the MaxDesign website..... what is wrong there?

 

any idea's? anyone?

Share this post


Link to post
Share on other sites

not sure what are you trying to do, so can you post a link to your test page and tell us what to you mean by:

but when still i failed to hide the subnavlist

 

and then in the hover state make it visible again

The reason we always ask for url for your test page is that it always necessary to take into acount all your CSS, not just part of it.

Also a tip: when you read maxdesign tutorials - while in Firefox, always look into full source code of a page you are on for exact CSS of each example. The same you can do with your test page. Open it in Firefox ( have you got a developer bar plugin installed?) . If you got it, click CSS on this bar and then Edit CSS ( or view CSS if you want to just view CSS file) - now you can edit CSS properties and see the result.

Share this post


Link to post
Share on other sites

ok.. i'll try to explain my self.. indid i was not understandable... :rolleyes:

 

ok.. so, first, i cant send u the URL because mysite is not on the web.. its on my computer..

 

seconed-

 

i'm tring to style a Horizontal Navbar... like in Maxdesign..

 

in this Navbar i try to achive a Hover state in which one of the Buttens will open up to a

 

Sublist...

 

now... i manged to make one of the Buttens open up that way.. i have a little truble in style

 

the Sublist... but i'm sure i can get over that..

 

the major problem is when the Sublist opened (when i hover the specific butten in the navbar)

 

its closed right away- when i hover the butten on the elements in the Sublist...

 

so...

 

i realize that maybe know one can understand this without the code and the URL...

 

but anyway.. if u have any ideas of how to make such Navbar= horizontal with the Hover

 

state and all...

 

let me know... :D

 

thanks

Share this post


Link to post
Share on other sites

well, you can open an account on any free hosting and upload your test page. It will spare us a time to help you fix your code right away.

I have an account on freewebs but if you just make old forum search you'll find a few other good ones.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...