The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Setting default padding and margin for all elements, css help
TBERGER
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. smile.gif

http://www.w3.org/TR/CSS2/selector.html#universal-selector
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post Sep 29 2014, 06:57 PM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 19-September 14
Member No.: 21,569



QUOTE(Christian J @ Sep 29 2014, 07:08 PM) *

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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 30 2014, 04:51 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Sep 30 2014, 01:46 AM) *

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? unsure.gif

Never use resets myself, too much work for little benefit.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 30 2014, 05:29 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(TBERGER @ Sep 30 2014, 01:57 AM) *

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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 30 2014, 07:36 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Sep 30 2014, 11:51 AM) *

QUOTE(pandy @ Sep 30 2014, 01:46 AM) *

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? unsure.gif


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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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 dry.gif ), "Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set."
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. happy.gif

I kinda like the stuff at the end. Easy to find without having to read everything above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post 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)
Attached File  history.css ( 1.65k ) Number of downloads: 165
Attached File  lincoln.htm ( 4.88k ) Number of downloads: 196
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post Oct 1 2014, 01:43 PM
Post #17


Newbie
*

Group: Members
Posts: 16
Joined: 19-September 14
Member No.: 21,569



QUOTE(Frederiek @ Oct 1 2014, 09:40 AM) *

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 {.....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post Oct 1 2014, 08:46 PM
Post #19


Newbie
*

Group: Members
Posts: 16
Joined: 19-September 14
Member No.: 21,569



QUOTE(Frederiek @ Oct 1 2014, 05:54 PM) *

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)
Attached File  history.css ( 1.69k ) Number of downloads: 147
Attached File  lincoln.htm ( 4.91k ) Number of downloads: 151
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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 .

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:32 AM