Setting default padding and margin for all elements, css help |
Setting default padding and margin for all elements, css help |
TBERGER |
Sep 29 2014, 01:51 PM
Post
#1
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
To set all elements to have a padding and margin space of 0px this is what I did. Is this correct as I am not sure.
/* set the default page element styles */ body * { margin: 0px; padding: 0px; } The asterisk is used to set everything within the body element correct? |
pandy |
Sep 29 2014, 02:34 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Yes, the asterisk is called the universal selector and means any element. The contextual selector you've constructed means just what you said and matches any element inside BODY.
http://www.w3.org/TR/CSS2/selector.html#universal-selector http://www.w3.org/TR/CSS2/selector.html#descendant-selectors |
Christian J |
Sep 29 2014, 06:08 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
FWIW, here are three rather long articles on various CSS resets and wether you should use them or not: http://sixrevisions.com/css/the-history-of-css-resets/
BTW, there used to be problems with SELECT(?) menus when using CSS resets, but I can't replicate it in my current browsers. Which one(s) where affected? |
pandy |
Sep 29 2014, 06:46 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I didn't know about that. I never use global resets, so I haven't taken an interest, I guess. I don't like the concept.
|
TBERGER |
Sep 29 2014, 06:57 PM
Post
#5
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
FWIW, here are three rather long articles on various CSS resets and wether you should use them or not: http://sixrevisions.com/css/the-history-of-css-resets/ BTW, there used to be problems with SELECT(?) menus when using CSS resets, but I can't replicate it in my current browsers. Which one(s) where affected? speaking of resets for the practice problem I did we created a reset sheet, linked it to the HTM sheet. and placed this in it: /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* set the default page element styles */ body * { font-family: Verdana, Geneva, sans-serif; font-size: 100%; font-weight: inherit; line-height: 1.2em; list-style: none; margin: 0px; padding: 0px; vertical-align: baseline; } So for the practice problem we were working with three sheets one being a reset.css sheet the other a styles.css sheet and the htm sheet. For this project (my homework) we are only working with two sheets. History.css and Lincoln.htm. maybe where i am confused is, is it ok to put what I have above in the history.css sheet as the question tells you to put style rules in that sheet. This is what I have so far and I know some of it is wrong as when I open it in my browser, some of the elements are in the wrong place and I was wondering if it was because I set the padding and margin wrong. For the header it asks to define a style rule to set the background color to the value 51 51 51 center the contents of the header element, set the width to 55em; set the height of the inline image within the header to 4 em? float the navigation list on the left page margin setting the width to 15em and the background color to the value 51 51 51 that is just a start I have some other areas that I am trying to figure out and will probably be asking about them soon /* Display HTML5 structural elements as blocks */ header, section, nav { display: block; } /* set the default page element styles */ body * { margin: 0px; padding: 0px; } /* styles for the page header */ header { background-color: rgb(51, 51, 51); position: relative; image-height: 4em; width: 55em; } /* General Navigation list styles */ nav a { text-decoration: none; } /* Vertical Navigation List */ nav.verticalNAV { background-color: (51, 51, 51); float: left; width: 15em; } /* Speech section styles */ #speech { background-color: rgb(212, 212, 212); float: left; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 0.9em; margin: 1em; width: 40em; } #speech h1 { background-color rgb(51, 51, 51); font-size: 2em; text-align: center; text-color: rgb(212, 212, 212); } img { clear: right; float: right; image-height: 4em; margin-top: 0px; margin-bottom: 0px; } |
Christian J |
Sep 30 2014, 04:51 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I didn't know about that. I never use global resets, so I haven't taken an interest, I guess. I don't like the concept. I think it was you that mentioned broken SELECT(?) menus long time ago when resets where new. I recall confirming it myself then, in some earlier Firefox version perhaps? Never use resets myself, too much work for little benefit. |
Christian J |
Sep 30 2014, 05:29 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
For this project (my homework) we are only working with two sheets. History.css and Lincoln.htm. FWIW, an HTML document is not called a sheet (though it may contain an embedded stylesheet), that terminology is used for stylesheets only. QUOTE is it ok to put what I have above in the history.css sheet as the question tells you to put style rules in that sheet. You mean if it's OK to put reset styles in history.css? Technically, yes. But I don't see the need for it, and if your homework project doesn't require it maybe it's best not to complicate things... QUOTE some of the elements are in the wrong place and I was wondering if it was because I set the padding and margin wrong. If the homework assignment didn't specify any margin or padding (not even to use default values) it shouldn't matter what you set them to (in theory at least). But there are some real errors that are more likely to cause trouble (see below). QUOTE background color to the value 51 51 51 FWIW that value could be in either RGB or hexadecimal notation, resulting in different colors: CODE rgb(51,51,51); #515151; See also http://www.w3.org/TR/CSS21/syndata.html#color-units QUOTE image-height: 4em; That should be "height", not "image-height". Since it's incorrect browser ignores it. See http://www.w3.org/TR/CSS21/propidx.html and http://meiert.com/en/indices/css-properties/ for lists of CSS2.1 and -3 properties. QUOTE background-color rgb(51, 51, 51); Missing colon between the property and its value. You might use http://jigsaw.w3.org/css-validator/ to check for CSS syntax errors. QUOTE text-color: rgb(212, 212, 212); That should be "color", not "text-color". |
TBERGER |
Sep 30 2014, 06:39 AM
Post
#8
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
I did not make a third sheet as that was my thought why complicate it. Also yes I know I am referring to the HTML document as a sheet sorry if I confused anyone though I probably just confused myself.
Using an imbedded style you would put in the html document. Say like if you wanted to use a drop cap and the first line as caps this is what I put in the html sheet: <style type="text/css"> section > p:first-of-type:first-line { text-transform: uppercase; } section > p:first-of-type:first-letter { font-size: 4em; line-height: 0.8em; margin-right: 0.3em; padding-right: 0.2em; padding-bottom: 0.2em; } I need to set a border around the right/bottom of the letter this I could not find how to do. I am still searching for that answer but anyway I fixed these errors noted and it helped. Just have a few more issues to work out. But thanks for the clarification and help. |
pandy |
Sep 30 2014, 07:36 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I didn't know about that. I never use global resets, so I haven't taken an interest, I guess. I don't like the concept. I think it was you that mentioned broken SELECT(?) menus long time ago when resets where new. I recall confirming it myself then, in some earlier Firefox version perhaps? Really? Could be, I guess. I still kept up with mailing lists back then. Probably forgot about it since it doesn't concern me. QUOTE Never use resets myself, too much work for little benefit. Yeah, pretty pointless. It's much easier to "reset" specific elements when needed. Gives better control too. I think the global resets are mostly used by people that may later be surprised by some of their effects and maybe they don't understand that it's the reset they put there two years ago that causes the problem... |
Frederiek |
Sep 30 2014, 04:35 PM
Post
#10
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
I've always used Eric Meyer's reset and it always worked like a charm. It's better than the universal selector *.
As for the border, just add a border-bottom and a border-right to section > p:first-of-type:first-letter. [edit] typo This post has been edited by Frederiek: Sep 30 2014, 04:35 PM |
TBERGER |
Sep 30 2014, 05:04 PM
Post
#11
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
I tried that and it did not work. Here is the rule I used and this is on the HTML document.
Oh and it should be a solid black border. <style type="text/css"> section > p:first-of-type:first-line { text-transform: uppercase; } section > p:first-of-type:first-letter { border-bottom: 0.02em; border-right: 0.02em; font-size: 4em; line-height: 0.8em; margin-right: 0.3em; padding-right: 0.2em; padding-bottom: 0.2em; } </style> Anyway this- http://books.google.com/books?id=rABtsWJjV...oln&f=false is the picture in the book that it should look like and what I have is not like that the section with the speech and picture of Lincoln looks right minus the border on the first letter and that I can not get it to go to the right posistion mine is farther down on the page. I also can not get the navigation list right. I am sure I have something messed up somewhere in the style rules. this is what i have so far for that: /* Display HTML5 structural elements as blocks */ header, section, nav { display: block; } /* set the default page element styles */ body * { margin: 0px; padding: 0px; } /* styles for the page header */ header { background-color: rgb(51, 51, 51); height: 4em; position: relative; width: 55em; } /* General Navigation list styles */ nav a { text-decoration: none; } /* Vertical Navigation List */ nav.verticalNAV a { background-color: rgb(51, 51, 51); float: left; width: 15em; } nav.verticalNAV a { color: rgb(212, 212, 212); display: block; font-family:'Century Gothic', sans-serif; font-size: 0.7em; line-height: 1.4em; margin-left: 1em; margin-bottom: 1.2em; } nav.verticalNAV a:hover { color: white; } /* Speech section styles */ #speech { background-color: rgb(212, 212, 212); clear: right; float: right; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 0.9em; margin: 1em; width: 40em; } #speech h1 { background-color: rgb(51, 51, 51); color: rgb(212, 212, 212); font-size: 2em; text-align: center; } img { clear: right; float: right; height: 4em; } As always any help is most appreciated. |
Christian J |
Sep 30 2014, 06:38 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Like http://www.w3.org/TR/CSS21/box.html#border-style-properties says (tucked away at the end, where it's hard to find ), "Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set."
|
pandy |
Sep 30 2014, 07:50 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
And that's why the correct way to remove a border is setting the border style to none, not setting it's width to 0. Not that anyone asked.
I kinda like the stuff at the end. Easy to find without having to read everything above. |
Frederiek |
Oct 1 2014, 03:27 AM
Post
#14
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
See
http://css-tricks.com/three-sided-border/ (just use the two you need) http://css-tricks.com/snippets/css/drop-caps/ And it would help if you post the URL of what you have so far, so we can take a look. |
TBERGER |
Oct 1 2014, 07:08 AM
Post
#15
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
OK I got the borders to appear but it is wrong. Purely from a mistake somewhere else in my code I assume. As like stated earlier my stuff is all over the place here are the sheets hopefully you can access it. Let me know if I need anything else for you to look at it.
I should also point out I am using Moz browser. I have not checked this in any other browsers yet. This post has been edited by TBERGER: Oct 1 2014, 07:19 AM Attached File(s) history.css ( 1.65k ) Number of downloads: 165 lincoln.htm ( 4.88k ) Number of downloads: 196 |
Frederiek |
Oct 1 2014, 08:40 AM
Post
#16
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You haven't done what is asked in point 6, in particular adding a float to nav. Then the section will move up.
There are other rules you didn't apply either, such as the float of the drop cap (12a) and section (9b). I'd say you should put all CSS rules in the css file, to have everything together in one place. AFAICS, that's what they ask you to do anyway. |
TBERGER |
Oct 1 2014, 01:43 PM
Post
#17
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
You haven't done what is asked in point 6, in particular adding a float to nav. Then the section will move up. There are other rules you didn't apply either, such as the float of the drop cap (12a) and section (9b). I'd say you should put all CSS rules in the css file, to have everything together in one place. AFAICS, that's what they ask you to do anyway. OK I have the border correct around the first letter I added float: left; to the pseudo- element in the HTML page. Is it wrong to make it an imbedded style in the HTML sheet? I could take that and just put that in the css sheet? Second question- Even if you were going to make all sections that are similar have the same setting like all paragraphs to have the drop cap and first line in caps then you would make that an imbedded style on the HTML or always good idea to have it on the CSS sheet? Still having trouble with the nav list. nav.verticalNAV { background-color: rgb(51, 51, 51); float: left; width: 15em; } do I need to specify left margin then as well? Am I marking the rule wrong do I need to have it like this nav.verticalNAV li a {..... |
Frederiek |
Oct 1 2014, 04:54 PM
Post
#18
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
No, it's not wrong to embed styles, it's only better to have all CSS in one place. Sometimes, it can come in handy to start out with an embedded style, just to see what it does. But if you make multiple pages, you can reuse the same external stylesheet for all of them.
The class of the nav element isn't .verticalNAV, it's just .vertical. You have set a height: 4em; to header, section and nav in combined selectors, but that was only asked for the img in header. Though it would have been more logic to apply the height to header. They talk about the list at point 7. and about the links inside at point 8. Besides, you have 3 occurrences that access the A in nav: "nav a" and "nav.vertical a" twice. Reread point 7 and 8. BTW, I think the padding and/or margin around the drop cap are too big compared to the picture and your page (I added the float too). BTW: Are you doing this as an exercise for yourself or is this a school assignment, in a course where this book is used? This post has been edited by Frederiek: Oct 1 2014, 05:04 PM |
TBERGER |
Oct 1 2014, 08:46 PM
Post
#19
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
No, it's not wrong to embed styles, it's only better to have all CSS in one place. Sometimes, it can come in handy to start out with an embedded style, just to see what it does. But if you make multiple pages, you can reuse the same external stylesheet for all of them. The class of the nav element isn't .verticalNAV, it's just .vertical. You have set a height: 4em; to header, section and nav in combined selectors, but that was only asked for the img in header. Though it would have been more logic to apply the height to header. They talk about the list at point 7. and about the links inside at point 8. Besides, you have 3 occurrences that access the A in nav: "nav a" and "nav.vertical a" twice. Reread point 7 and 8. BTW, I think the padding and/or margin around the drop cap are too big compared to the picture and your page (I added the float too). BTW: Are you doing this as an exercise for yourself or is this a school assignment, in a course where this book is used? An assignment in the book. I went back to re-read the sections and have thoroughly confused myself. The book states to write it that way nav.verticalNAV also had it that way for a horizontal list as well. I took out the NAV and it looks right now. So to speak its not all together yet.. but it is only nav.vertical because the class was specified as just nav class ="vertical"? I think that what i have now with the speech section and Lincoln picture, once I get that moved up and left and it should be bigger the whole section I think that will stretch out the speech part moving the letters closer to that border. However I can get it to move left or right when I need it to go up and maybe over to the right a bit. I have to fix something in the speech styles section just not sure what to mess with here. Just for nothing this assignment is already late and now i really don't care what score I get on it I just want to make sure I am understanding my mistakes and you have helped with that a lot and I thank you for it. Now I will attach what I have and you can see where the speech is. Where am I going wrong ? I assume in the speech section? This post has been edited by TBERGER: Oct 1 2014, 08:51 PM Attached File(s) history.css ( 1.69k ) Number of downloads: 147 lincoln.htm ( 4.91k ) Number of downloads: 151 |
Frederiek |
Oct 2 2014, 04:44 AM
Post
#20
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
CSS selectors must indeed match class or id values given in an HTML element (or tag).
So yes, because it's <nav class="vertical">…</nav>, the selector in the CSS must be .vertical too. You are mixing up what is asked in those points. Execute them one by one. You've tried to clear floats by adding the clear property at arbitrary points. Personally, I prefer to use Nicolas Gallagher's micro clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ . And you can find more on floats and lists at http://css.maxdesign.com.au/index.htm . |
Lo-Fi Version | Time is now: 29th March 2024 - 04:32 AM |