I'm currrently coding my first site: [blog=leonfassbender.com][/blog]

 

If you go to that site you'll see my simple and modest logo on the left top of the page...

 

I positioned that logo by using the below style rules:

 

#p1 {

font-family: arial; Times; Verdana;

font-size: 60px;

color: white;

padding-top: 10px;

padding-left: 50px;

padding-bottom: 50px;

}

 

Basically I want to have that logo positioned some 20 px to the right of the left margin but exactly centered in the middle of the gray area...

 

Thanks fr yr help,

 

Cheers

 

As you can see I played around a bit with the style rules. Is there a better/ easier way to achieve this?

 

Thanks

try

 

#p1 {
width: auto;
font-family: arial; Times; Verdana;
font-size: 60px;
color: white;
margin: 0 auto; /*adds an auto margin to left and right to center the element*/
}

Yeah just remove the padding attributes and add margin: 0 auto and you should be fine

 

Oh and the width ofc

Edited January 12, 201115 yr by Beer Huntor

Thanks guys!! Well, I tried something else that worked perfectly: I used the "position" element, allowing me to precisely position my p1 <DIV>. (not uploaded yet).

 

#p1 {

font-family: arial; Times; Verdana;

font-size: 60px;

color: white;

position: absolute;

top: -30px;

left: 20px;

right:0px;

bottom:0px;

}

The only problem with using absolute positioning, is that it could disfigure your site when viewed in different screen sizes, browssers and resolutions. My website i am doing now (my first also) i used everything inline styles and used position:absolute divs and found that it would only look right on the computer that i built it, so had to re code it all lol.. but yeah, i would test it on different screen sizes and browsers just to make sure its what you want it to look like.

Thanks Beer Huntor, yeah I will need to check that and change if necessary.....

 

Curious to see your site now....:-)

 

cheers