Toasted Cheese Sandwich Posted July 15, 2008 Author Share Posted July 15, 2008 Give padding to the parent element, give margin to the element you want moved down. Example:HTML<div class="box1">Some text moved down a few lines</div>CSS.box1 { padding-top: 8em; }Thought there must be an easier way, thanks again Ingolme. Link to comment Share on other sites More sharing options...
aquatsr Posted July 15, 2008 Share Posted July 15, 2008 How do you mean? One general style sheet for all pages and separate ones for each individual html page?No. A stylesheet is used to control how each page looks. The content on the page is determined within the HTML file. From your remarks I'm (re)assuming that you only need one stylesheet.Give padding to the parent element, give margin to the element you want moved down. Example:HTML<div class="box1">Some text moved down a few lines</div>CSS.box1 { padding-top: 8em; }Isn't em rendered differently on each browser? Link to comment Share on other sites More sharing options...
Ingolme Posted July 15, 2008 Share Posted July 15, 2008 Isn't em rendered differently on each browser?So is the <br>. In fact, the <br> should be the exact same size as 1em if the font size for the element is already set.You can use pixel values if you like, but a top padding of 5em is basically like five <br> tags in a row. Link to comment Share on other sites More sharing options...
Synook Posted July 15, 2008 Share Posted July 15, 2008 Isn't em rendered differently on each browser?Ems technically can be rendered differently on different browsers if the default font size is different. If you specify a fixed font size (e.g. 13px) for the parent (.e.g the body), however, everything would be in relation to that and it should look the same across all browsers. Link to comment Share on other sites More sharing options...
aquatsr Posted July 15, 2008 Share Posted July 15, 2008 So is the <br>. In fact, the <br> should be the exact same size as 1em if the font size for the element is already set.You can use pixel values if you like, but a top padding of 5em is basically like five <br> tags in a row. Ems technically can be rendered differently on different browsers if the default font size is different. If you specify a fixed font size (e.g. 13px) for the parent (.e.g the body), however, everything would be in relation to that and it should look the same across all browsers.OK. Good to know. Link to comment Share on other sites More sharing options...
boen_robot Posted July 16, 2008 Share Posted July 16, 2008 How do you mean? One general style sheet for all pages and separate ones for each individual html page?Yes. Example:CSS 1 (common.css)body {background-color:#00F;color:#0F0;} CSS2 (specificToHTML2.css) body {color:#F00;} HTML 1 (common.html) <html> <head> <title>CSS/HTML Test Page (common)</title> <link rel="stylesheet" type="text/css" href="common.css" /> </head> <body> <hr> <h1>CSS/HTML Test Page</h1> <hr> </body></html> HTML 2 (commonAndSpecific.html) <html> <head> <title>CSS/HTML Test Page (common)</title> <link rel="stylesheet" type="text/css" href="common.css" /> <link rel="stylesheet" type="text/css" href="specificToHTML2.css" /> </head> <body> <hr> <h1>Another, more specific CSS/HTML Test Page</h1> <hr> </body></html> Notice how both pages have a blue background, but only commonAndSpecific.html has red text. Doing background images per page is done in the exact same fashion. If you wanted to apply a background image on the body of commonAndSpecific.html, you'd simply add the following to specificToHTML2.css: body {background-image: url(image.png)} and if you wanted that background image to appear at all places, you'd add that into common.css. If you wanted to have a common background image and have certain pages with other background images, you'd do as I did with the (text) colors above: specify in common.css, override in specificToHTML2.css. Link to comment Share on other sites More sharing options...
Toasted Cheese Sandwich Posted July 16, 2008 Author Share Posted July 16, 2008 OK, thanks Boen I'll give it a try.On another note, why isn't... <a href="http://www.w3schools.com/html/" target="_blank" align="center">Click Here</a> ... centered? When I put it in a paragraph attribute it works. <p align="center"> <a href="http://www.w3schools.com/html/" target="_blank">Click Here</a></p> I was under the impression I could put several attributes together, I assume I've missed something.Also, is there a quick reference list somewhere of HTML font names. Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2008 Share Posted July 16, 2008 align only works on block level elements. <a> is an inline element.To center an inline element you use the CSS text-align: center on the parent element. And without CSS there's the <center> tag. Like always, I really discourage the use of presentational HTML. Link to comment Share on other sites More sharing options...
jeffman Posted July 16, 2008 Share Posted July 16, 2008 Also, is there a quick reference list somewhere of HTML font names.Probably. For now, here are some "sets" that my old GoLive recommends:Courier New, Courier, Monaco, monospaceGeorgia, Times New Roman, Times, serifHelvetica, Geneva, Arial, SunSans-Regular, sans-serifTrebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serifVerdana, Arial, Helvetica, sans-serifZapf Chancery, Comic Sans MS, cursive Link to comment Share on other sites More sharing options...
Toasted Cheese Sandwich Posted July 16, 2008 Author Share Posted July 16, 2008 align only works on block level elements. <a> is an inline element.To center an inline element you use the CSS text-align: center on the parent element. And without CSS there's the <center> tag. Like always, I really discourage the use of presentational HTML.Hmm... So what's the best way to do that, do I have to put the link in a <p>?Probably. For now, here are some "sets" that my old GoLive recommends:Courier New, Courier, Monaco, monospaceGeorgia, Times New Roman, Times, serifHelvetica, Geneva, Arial, SunSans-Regular, sans-serifTrebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serifVerdana, Arial, Helvetica, sans-serifZapf Chancery, Comic Sans MS, cursiveThanks DD. Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2008 Share Posted July 16, 2008 What element is the link under at the moment? Is it in an <li> element or something else? Whichever the element is, give the element a centered text-align CSS property. Link to comment Share on other sites More sharing options...
danm68 Posted July 17, 2008 Share Posted July 17, 2008 Also, is there a quick reference list somewhere of HTML font names.You can use whatever fonts you have installed on your computer, in the 'C:/Windows/Font' folder (assuming your using windows.) The only drawback is, if you downloaded an unusual font, most people would not have it installed on their computers, so their browser wouldn't display the correct font to use. Which is why general fonts that most people have installed are better to use because everyone can see them and it will look how you want it to look. you can also set several different "font-family(s)" so that if one person doesn't have it, the browser will select the next one in line. Hopefully I didn't confuse you too much, if I did then don't go to pains to understand this, its not that important.This was just in case you wanted to view different fonts with your site, you just download the font, copy and paste it into the font folder and then something like:body{font-family: 'downloaded_font_name_here';} Yeah but remember if you want the font viewable to everyone, then your best go is making an image, or choosing a font that is very..widespread..or popular you might say Link to comment Share on other sites More sharing options...
Synook Posted July 17, 2008 Share Posted July 17, 2008 You can also specify an alternative font. For example, Verdana is a very popular font for the web but many Linux OSs don't ship with Verdana installed, so you will have to provide an alternative. Luckily, Linux (at least most modern versions of Linux) have a default sans-serif font that is very similar to Verdana (Bitstream Vera Sans) so you can just say font-family:verdana, sans-serif; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.