css for dummies


Senior Advisor
10,426 posts

Hiya thepoz,

Please post your post in only one thread, if someone has an answer they will do so no matter which thread so please just post in the one thread that makes the most sense for your question. This keeps those of us chasing the most recently posted in threads from having to open threads with the same questions in them multiple times. Thanks :)
Jo Ann

http://elementsinwebdesign.com

Some websites created by Elements in Webdesign:
http://cattownrescue.org - A friends site I created to help raise awareness to help stray cats in her area.
http://northbaldwinliteracycouncil.org - the local Literacy Council in my city.
http://lalookssalon.com - one of the local hair dressers in my town.
http://gregmaisfund.com - Dedicated to a friend who recently passed away from Lung Cancer.



Ambassador
1,058 posts

thepoz wrote:
It works great in all browsers, but I can not find away to keep someone from steeling the background image in IE or Firefox.


Correct. There's nothing you can do to prevent that, and the images can be saved through Safari and Chrome as well.


Registered User
7 posts

Jo Ann,
Sorry about the multiple threads.

Cary,
I didn't think so but I was hoping!
Thanks!


The Poz


Senior Advisor
10,426 posts

no worries thepoz, you won't be the first or the last to do that lol :)
Jo Ann

http://elementsinwebdesign.com

Some websites created by Elements in Webdesign:
http://cattownrescue.org - A friends site I created to help raise awareness to help stray cats in her area.
http://northbaldwinliteracycouncil.org - the local Literacy Council in my city.
http://lalookssalon.com - one of the local hair dressers in my town.
http://gregmaisfund.com - Dedicated to a friend who recently passed away from Lung Cancer.



Registered User
35 posts

I have been struggling to learn basic css to make this website for a friend, working mostly with the w3schools tutorials. For the moment it is on my hosting until I get it working properly.
http://artofnow.org/elisabeth/index.html

To take out the "font" formating instructions in the html page I have to be able to format those rules in the h1, h2, p ..... syntax....
but ...

Whenever I put in a h1, h2, p .... it adds some implicit formating .... forcing a break and line spacing.

How can I remove these implicit rules ... and force what I want?
I suspect I have to put this in the rules for the h1, h2, p ... etc but cannot find the way to do it

Thanks for any suggestions
I don't know anything. I'm just doing my best to humbly listen to guidance from the greater wisdom.

www.artofnow.org


Temporary User
5,410 posts

If you don't state margin and padding property values in your css styles, the browser will default to use its own rules. Specifically state these rules in your divs and selectors.

Play with the margin and padding in this code and see how things move around when margin and padding values are changed.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
#div1
{
padding: 100px;
margin: 50px;
background-color: yellow;
}
p {
font-size:11pt;
margin:50px;
}
</style>
</head>
<body>
<div id="div1">
<p>hello world</p>
<p>hello world</p>
</div>
</body>
</html>
CoffeeCup... Yeah, they are the best!


Registered User
35 posts

Here below is my current external css with margine and padding defines in the divs


<!-- Style Sheet created with the CoffeeCup StyleSheet Maker++ -->
<!-- http://www.coffeecup.com -->
<STYLE type=text/css>
<!--
body,td,th {
}
body {
background-color: #f77900;
font-size: 100%; font-family: Andalus, Sans-serif;
text-decoration: none;
}
h1 {font-size:2.0em; color: #042dde;
text-decoration: none; clear: both;}
h2 {font-size:0.875em; color: #ffe5c1;
text-decoration: none; clear: both;}
h3 {font-size:0.8em; color: #042dde;
text-decoration: none; clear: both;}

p {font-size:0.8em; text-decoration: none; clear: both;}

a {color:c4abff; font-family:Verdana,Arial; font-size:12; text-decoration: none;}
a:link {text-decoration: none; }
a:visited {text-decoration: none; }
a:hover {color: #3366ff; text-decoration: none;}
a:active {color: #ea7510; text-decoration: none;}


div.block
{
width:955px;
height:710px;
padding:0px;
color: #042dde; background: #ff8a24;
margin-left:auto;
margin-right:auto;
margin-top:30px;
text-decoration: none;;
}

div.title
{
width:935px;
height:90px;
padding:10px;
color: #042dde; background: #ff8d29;
text-decoration: none;
}
div.main
{
width:935px;
height:540px;
padding:10px;
color: #042dde; background: #ff8a24;
text-decoration: none;
}
div.bottom
{
width:935px;
height:20px;
padding:10px;
color: #042dde; background: #ff8a24;
text-decoration: none;
}
div.mainx
{
width:935px;
height:580px;
padding:10px;
color: #042dde; background: #ff8a24;
text-decoration: none;
}
-->
</STYLE>

I don't know anything. I'm just doing my best to humbly listen to guidance from the greater wisdom.

www.artofnow.org


Ambassador
1,058 posts

You can start off your style sheet with the code from the following page:
http://meyerweb.com/eric/thoughts/2008/ … ing-again/

It removes default margins, padding, etc. from various elements.


Registered User
35 posts

Thanks Cary and The Joker

I have included Eric's intro from the meyerweb.com page and:
- now on my index (home) page put the h2 header around the active top menu items
- it still moves the menu down (though I think now less than it previously did)
- the other top menu pages are without any "h" or "p" definition and stay where I put them

http://artofnow.org/elisabeth/index.html
I don't know anything. I'm just doing my best to humbly listen to guidance from the greater wisdom.

www.artofnow.org


Senior Advisor
2,038 posts

I am a fan of using the negative margin technique. Here is the basics.

If for example you have a "h1" (first level heading), and you think it puts too much space in between the heading and your first line of content, you would do this:

h1{margin-bottom:-5px;}

This would move your content section upward toward your heading.

Now you can only use negative values on margins, but not padding. Also, only use the negative margin as a way to streamline. What I mean is, if you believe that all of your h1 headings will have the same problem on all of your pages, then just use the negative margin technique. If you think that all or most of your h1 values will differ from page to page, then do something different.

The negative margin technique can be used for any element. Say for instance your entire menu needs to be moved up:

ul{margin-top:-20px;}

This will bring your menu up 20px's.

hope this helps.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.