Margins on different monitor sizes?

Hi folks, new to web site designing so I will appreciate any help.

My dilemma is my margins/text formatting on different monitors. It wraps awkwardly between my 3 screens, my laptop, my regular 21" monitor and on my hdtv(where I work the most here).

I can’t seem to get alignments, margin paddings (particularly left and right which is the biggest concern) etc to remain (?)static(?)

Essentially I have my main logo, which is centered, and I’m trying to make the text to display out underneath it matching its width. Most successful for me is in css I put this :
p {margin-top:0; margin-bottom:12px; margin-right:310px; margin-left:160px}

looks fine on the hdtv, but on laptop it’s a mess.

Is there something I’m missing?

Much thanks!!

Hi Boone, welcome to SitePoint! :slight_smile:

Really, it would be better if we could see the page you are working on, or at least a sample of the code you are using. Sounds like there’s a much better way of doing this.

Thanks for the welcome! :slight_smile:

Nothing has been published online yet as I’m just working on it in notepad.

Right now all I have is the logo, and text with a nav bar links to other pages not created yet.

My issue is just regular text wrapping and viewing it on different sized monitors. I’d like the text to fit neatly under the logo as opposed to the entire width of the screen. When I set margins, they appear different on different sized monitors that I own.

My logo is thus:

<p><center><img src=“logo.gif” alt=“Paint Rangers” width=“645” height=“300”/>
</center></p>

Followed by regular text <p> … </p>

Does this help/make sense?

Hi Boone,

Because there is no width assigned to these paragraphs the the browser assigns to that property a value that will make the sum of the seven properties (margin-left, border-left, padding-left, width, padding-right, border-right, margin-right) equal to the parent’s width (see http://www.css-101.org/block-level-elements).

In short, the width of these paragraphs will vary depending on the width of their parent container.

You could try this rule instead:

p {margin:0 auto 12px;width:[the width of your logo goes here]}

or you could also use a DIV as a wrapper (in which you’d include all your content) styled with margin:0 auto plus the width declaration above. Then your paragraphs could be styled like this:

p {margin-top:0; margin-bottom:12px; }

as width, margin left and right would not be necessary

That didn’t seem to work.
I am trying the wrapper but not sure if I’m putting in the code correctly for that.
I’ve put this in my css :
p {margin-top:0; margin-bottom:12px}

Yes, you’d use the above rule, but you need to include a rule for the wrapper DIV as well, for example:

#wrapper {
width:645px;
margin:0 auto;
}

Please note, I’m very new to this, so I’m not sure where to put this. :slight_smile:

I’m not really familiar with a div as a wrapper either so I don’t know the tags for that.

Maybe it’s a good idea when you post your html, you have so far!

Okay thanks

index page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Paint Rangers-Home</title>
<link rel="stylesheet" type="text/css"
href="paint_rangers_styles.css"/>
</head>

<body>
<div class="main">

<p><center><img src="logo.gif" alt="Paint Rangers" width="645" height="300"/>
</center></p>

<div align=right><div class="nav_bar">
<a href="paint_rangers_french.html">Français</a>
</div></div align>

<p>
Undetermined text here, but this is what I am working on to wrap correctly with different monitor sizes............................................................
</p>

<div class="nav_bar">

<a href="about_us.html">
<img src="blue-button.jpg" width="30" height="30" alt="About Us" />
<a href="about_us.html">About Us</a>
<br>
<a href="residential_interior.html">
<img src="red-button.jpg" width="30" height="30" alt="Residential Interior" />
<a href="residential_interior.html">Residential Interior</a>
<br>
<a href="residential_exterior.html">
<img src="yellow-button.jpg" width="30" height="30" alt="Residential Exterior" />
<a href="residential_exterior.html">Residential Exterior</a>
<br>
<a href="commercial_office.html">
<img src="blue-button.jpg" width="30" height="30" alt="Commercial &amp Office" />
<a href="commercial_office.html">Commercial &amp Office</a>
<br>
<a href="our_procedures.html">
<img src="red-button.jpg" width="30" height="30" alt="Our Procedures" />
<a href="our_procedures.html">Our Procedures</a>
<br>
<a href="testimonials.html">
<img src="yellow-button.jpg" width="30" height="30" alt="Testimonials" />
<a href="testimonials.html">Testimonials</a>
<br>
<a href="contact_us.html">
<img src="blue-button.jpg" width="30" height="30" alt="Contact Us" />
<a href="contact_us.html">Contact Us</a>

</div>

</div>
</body>
</html>

CSS page:

body {background: #FFFFFF;
font-family: Arial, "Arial Black", "Times New Roman", sans-serif, Calibri}

a:link, a:visited {color: #00A8EC}
a:focus, a:hover, a:active {color: #00A8EC, text-decoration:none; font-weight:bold}

p {margin-top:0; margin-bottom:12px}

I do not see the rule for your wrapper DIV in there (#main). Including that rule should help :slight_smile:

As a side note, you are using deprecated markup. You should get rid of

<center>

and

align="right"

as well (use the float property for this).

And you have a typo in one of the closing DIV:

</div align>

Add this to your styles sheet, once you’ve corrected the typo I pointed out.


.main {
  width:645px;
  margin:0 auto;
}

Also, you should use an unordered list for your menu, to contain all the links in list items.

It’s not clear exactly how you want this page laid out (esp the menu) but here is something you could start with:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Boone</title>
	
<style type="text/css" media="all">
	body {background: #FFFFFF;font-family: Arial, "Arial Black", "Times New Roman", sans-serif, Calibri}
	
	#main {width:645px; margin:0 auto 12px;}
	
	img {border: none;}
	
	.nav_bar1 {text-align: right;}
	
	.nav_bar2 ul {list-style: none; margin: 0; padding: 0;}
	
	li img {vertical-align: middle;}
	
	a:link, a:visited {color: #00A8EC}
	
	a:focus, a:hover, a:active {color: #00A8EC, text-decoration:none; font-weight:bold}
	
	p {margin-top:0; margin-bottom:12px}
	
	p#logo {text-align: center;}
</style>
</head>

<body>
<div id="main">

	<p id="logo"><img src="logo.gif" alt="Paint Rangers" width="645" height="300"></p>

	<div class="nav_bar1">
		<a href="paint_rangers_french.html">Français</a>
	</div>

	<p>Undetermined text here, but this is what I am working on to wrap correctly with different monitor sizes............................................................</p>

	<div class="nav_bar2">
	<ul>
		<li><a href="about_us.html"><img src="blue-button.jpg" width="30" height="30" alt="About Us"></a></li>
		<li><a href="residential_interior.html"><img src="red-button.jpg" width="30" height="30" alt="Residential Interior"></a></li>
		<li><a href="residential_exterior.html"><img src="yellow-button.jpg" width="30" height="30" alt="Residential Exterior"></a></li>
		<li><a href="commercial_office.html"><img src="blue-button.jpg" width="30" height="30" alt="Commercial &amp Office"></a></li>
		<li><a href="our_procedures.html"><img src="red-button.jpg" width="30" height="30" alt="Our Procedures"></a></li>
		<li><a href="testimonials.html"><img src="yellow-button.jpg" width="30" height="30" alt="Testimonials"></a></li>
		<li><a href="contact_us.html"><img src="blue-button.jpg" width="30" height="30" alt="Contact Us"></a></li>
	</ul>
	</div>
</div>
</body>
</html>

Save that as a .html page and open it in your browser.

A couple more suggestions.

  1. Use a HTML 4.01 strict doctype - the transitional one is for existing HTML 3.2 pages that still haven’t finished being upgraded to HTML 4 and there is no reason to use any HTML 3.2 code in a new web site.

  2. Make sure your HTML is valid before you start worrying too much about how to style it with the CSS as invalid HTML can break the CSS.

Thanks all!!

Reading the thread a few times and using ralph.m’s code I understand it a little bit more. I’m using a rather basic book so at first I was unfamiliar with what some of you have been saying, but copying/paste that example and seeing the result and playing around to see what does what helped me understand a bit.

Thank you all for the help. Great forum here and I will definitely be sticking around and reading threads, etc. so I can learn more, and perhaps one day help others :slight_smile:

Yes, it’s a great way to learn. Most of what I “know” has been learned from hanging around here. :slight_smile:

<style type="text/css" media="all">
	body {background: #FFFFFF;font-family: Arial, "Arial Black", "Times New Roman", sans-serif, Calibri}
	
	#main {width:645px; margin:0 auto 12px;}
	
	img {border: none;}
	
	.nav_bar1 {text-align: right;}
	
	.nav_bar2 ul {list-style: none; margin: 0; padding: 0;}
	
	li img {vertical-align: middle;}
	
	a:link, a:visited {color: #00A8EC}
	
	a:focus, a:hover, a:active {color: #00A8EC, text-decoration:none; font-weight:bold}
	
	p {margin-top:0; margin-bottom:12px}
	
	p#logo {text-align: center;}
</style>

I was curious how I can add an image to the body background? I can do it in basic code <body background=pic.jpg> but I think the above stunts that option? Thanks!

Like this:

body {
  [COLOR="Blue"]background: #FFFFFF url(/images/pic.jpg) no-repeat 50% 0;[/COLOR]
  font-family: Arial, "Arial Black", "Times New Roman", sans-serif, Calibri
}

There’s some guesswork in url(/images/pic.jpg) no-repeat 50% 0.

The url assumes the pic in in the /images/ folder. No-repeat assumes you don’t want the image to repeat (or tile), but it can if you want. 50% means center it in the middle (horizontally), but you may not want that either. The final 0 means it starts from the top f the screen.

Your coding is completely different from the books that I have followed. :slight_smile:

So you’ll have to bear with me.

I keep my images in the same folder as my html texts, so I created a folder ‘images’ and put the jpg in there and copied your code ‘url(/images/pic.jpg)’ exact but I didn’t get anything. Something I missed?

O dear. :rolleyes:

Sounds like you did the right thing. Can you post your code so we can have a look, just to make sure? Make sure the image is uploaded, of course. And url(/images/pic.jpg) assumes that the /images/ folder is in the root folder of your site. If you had a folder in your root folder, such as /files/ then the /images/ folder in that, the code would be url(/files/image/pic.jpg).

Okay, though I’m sure by your standards it may look um disastrous, but I’m trying :slight_smile:

Oh just realized, It’s not launched yet, I’m just looking at it through my own browser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>The Health and Body Revolution - Health, Nutrition & Training - A True Lifestyle Change
for a better life.
</title>

<style type="text/css" media="all">
	body {background: #FFFFFF; url (/images/sky3.jpg) no-repeat 50% 0;
 font-family: Arial, "Arial Black", "Times New Roman", sans-serif, Calibri}
	
	#main {width:645px; margin:0 auto 12px;}
	
	img {border: none;}
	
	.nav_bar1 {text-align: right;}
	
	.nav_bar2 ul {list-style: none; margin: 0; padding: 0;}
	
	li img {vertical-align: middle;}
	
	a:link, a:visited {color: #00A8EC}
	
	a:focus, a:hover, a:active {color: #00A8EC, text-decoration:none; font-weight:bold}
	
	p {margin-top:0; margin-bottom:12px}
	
	p#logo {text-align: center;}
</style>

</head>

<div class="main">

<center><img src="logo.jpg" alt="The Health and Body Revolution" width="995" height="180" /></br>
</center> 

Rest is text and a nav bar.