amitte Posted January 6, 2009 Report Share Posted January 6, 2009 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 6, 2009 Report Share Posted January 6, 2009 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 Home Page ul#navlist li a {..} applies a style like text color inside the link to the "a" tag text Home Page 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" Home Page Quote Link to comment Share on other sites More sharing options...
amitte Posted January 6, 2009 Author Report Share Posted January 6, 2009 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 Quote Link to comment Share on other sites More sharing options...
lm Posted January 6, 2009 Report Share Posted January 6, 2009 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. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 6, 2009 Report Share Posted January 6, 2009 If you are into books, I can't recommend CSS Web Design For Dummies enough. VERY easy to understand. Quote Link to comment Share on other sites More sharing options...
lm Posted January 6, 2009 Report Share Posted January 6, 2009 CSS book from 2005? isnt it a bit oldy? Quote Link to comment Share on other sites More sharing options...
youngros Posted January 6, 2009 Report Share Posted January 6, 2009 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. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 6, 2009 Report Share Posted January 6, 2009 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. Quote Link to comment Share on other sites More sharing options...
lm Posted January 7, 2009 Report Share Posted January 7, 2009 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. Quote Link to comment Share on other sites More sharing options...
amitte Posted January 7, 2009 Author Report Share Posted January 7, 2009 ok... first of all... i used your suggestions... i feel now that i know so much more about css... it's incredible!!!! 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 Quote Link to comment Share on other sites More sharing options...
tpattison Posted January 7, 2009 Report Share Posted January 7, 2009 a:before { content: " >> "; } This means that the specified content " >> " will be added at the beginning of the element. It's not well supported though, IE6 definitely doesn't, not sure about IE7 though. Firefox does support it though. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 7, 2009 Report Share Posted January 7, 2009 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... Quote Link to comment Share on other sites More sharing options...
amitte Posted January 7, 2009 Author Report Share Posted January 7, 2009 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? Quote Link to comment Share on other sites More sharing options...
lm Posted January 8, 2009 Report Share Posted January 8, 2009 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. Quote Link to comment Share on other sites More sharing options...
amitte Posted January 8, 2009 Author Report Share Posted January 8, 2009 ok.. i'll try to explain my self.. indid i was not understandable... 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... thanks Quote Link to comment Share on other sites More sharing options...
lm Posted January 9, 2009 Report Share Posted January 9, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.