Position Graphic Elements in A header PLEASE HELP!

[tordavis]

Hello guys! I first want to say that this site has saved my life and is the CSS pandora’s box for me. I’m really starting to get it and just started diving into building my new site from a Photoshop image. Starting with the header, things were going good until I couldn’t position the graphic elements the way I wanted to.

Here’s the site:

http://www.stfuandplay.com/test/

Here’s the HTML so far:

Here’s the CSS:

body {

margin:0px;

padding:0px;

background-color:#ffffff;



}



/* Header Section */



#header {

margin:0 auto;

background-color:#e2e2e2;

width:1024px;

height:123px;

}



#header-logo {

position:relative;

float:left;

width:248px;

height:85px;

background-image:url(images/stfuandplaylogo.gif);

background-repeat:no-repeat;

top:5px;

left:28px;





}

#youtube-ico {

position:relative;

width:41px;

height:41px;

top:6px;

left:299px;





}

The only way to get the Youtube logo to go where I want is to use a negative Top position. I matching the positioning in my psd doc to the site but because I don’t completely understand the CSS, it’s forced me to use negative positioning to get that first icon in there. Maybe I’m doing the right thing but I’m not sure. I’d like to see how you guys would do something like this. I’ve included a pic of my header so you can see what I’m trying to accomplish.

Thanks!

Torrence

My header: http://www.stfuandplay.com/test/stfumock.jpg

[JPC776]

Add

float:left;

to #youtube-ico.

Then change you top & left to position it where you would like.

I think that is what you are trying to do.

[tordavis]

Yeah, it’s working. I’m an overthinker and it kills me sometimes. Things are lining up perfectly. If anyone sees anything out of wack in the above code, please feel free to post your ideas.

Thanks!

Torrence

BTW, floating it doesn’t work and wasn’t necessary. When I float it, it disappears into the nether.

[EDIT] I’m almost there but can’t quite get that last button to position properly.

[JPC776]

Do you have an updated link?

[tordavis]

Here you go:

New CSS:

@charset "utf-8";

/* CSS Document */



body {

margin:0px;

padding:0px;

background-color:#ffffff;



}



/* Header Section */



#header {

margin:0 auto;

background-color:#e2e2e2;

width:1024px;

height:123px;

}



#header-logo {

position:relative;

float:left;

width:248px;

height:85px;

background-image:url(images/stfuandplaylogo.gif);

background-repeat:no-repeat;

top:5px;

left:28px;

}



#youtube-ico {

position:relative;

width:41px;

height:41px;

top:-80px;

left:299px;

}



#facebook-ico {

position:relative;

width:41px;

height:41px;

top:-80px;

left:340px;

}



#twitter-ico {

position:relative;

width:41px;

height:41px;

top:-39px;

left:299px;

}



#stumble-ico {

Position:relative;

width:41px;

height:41px;

top:-77px;

left:340px;

}

New HTML:

Same link: http://www.stfuandplay.com/test/

floating it for me screws everything up. Can you post your code to make sure it’s the same? Thanks!

[EDIT]

As you can see from the link, I got the last button in the way I wanted. I had to do totally different position numbers than the others. It’s confusing but I want to know what i’m doing and not depend on trial and error.

Thanks again!

Let’s see if I can get the rest of this header done!

[JPC776]

.

[Senff]

I would use two DIVs — one for the logo and one for the social icons. Don’t use all that positing stuff (relative or absolute), but just assign float:left; to the logo DIV and float:right; to the social icons DIV.

Within the social icons DIV you can then place the 4 icons.

A bit like this: http://jsfiddle.net/senff/YyXMf/3/

[JPC776]

Good idea…something like this maybe?

HTML

CSS

/* Header Section */



#header {

margin:0 auto;

background-color:#e2e2e2;

width:1024px;

height:123px;

}



#header-logo {

float:left;

width:248px;

height:85px;

background-image:url(images/stfuandplaylogo.gif);

background-repeat:no-repeat;

margin:15px 10px;

}



#social {

width:100px;

height:100px;

float:left;

margin-top:10px;

}



.ico {

float:left;

padding:3px;



}

[tordavis]

Thanks to both of you! I’ve got this to work two different ways but JPC776 made more sense. HOWEVER, when you use absolute positioning, you can’t change the size of the browser window without everything getting screwy.

I ended up going with my code for now. I’m just trying to make sense of all this but I guess half of the learning curve is trial and error.

T

[EDIT]I just saw that last bit of code you posted. I want to try it. Thanks!

[EDIT2] Just used that code and it was PERFECT! You contained all the icons in their own div so you could better control the positioning. Slick!

That works great!

Thanks!

[Senff]

@JPC776: in your example, the id “ICO” appears four times. This should obviously be classes instead of ids.

@tordavis: I understand the learning curve, but I’m not sure if you really learned to code more efficiently if you say “thanks for your solutions but I’m going to use my own code anyway“. But if it works for you, then great.

[JPC776]

Hope that works out for you.

I just took Senff’s idea and used your code to make it a little easier for you. From all of the post that I’ve read on here, I think Senff has forgotten more than I have ever learned about CSS.

Edit: @Senff You are correct. I had just left what tordavis had there and erased the first part to leave the ICO and in just flying through it I forgot to change to classes.

Thanks

@tordavis I edited the above code and changed the ID’s to classes.

[Senff]

@JPC776: “I think Senff has forgotten more than I have ever learned about CSS.“

Heuu? What did I forget? *confoosed*

[tordavis]

You guys are AWESOME!!!!!!! I actually learned something here today!

[Author]

Posts