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.
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.
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.
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}
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.
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.
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
<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!
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.
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?
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).
