HELP with positioning and unordered lists

[dominick1]

hello i am having trouble with two of my unordered lists. the first one is my social media icons in the top right corner. the other is my main nav menu which is centered. they are both in their own divs and both in a header div which is in the main wrap div. when i expand the window size of my browser or make it smaller they both move and do not stay where the should. everything else in the site is perfect but these two elements will just not stay and i am going crazy. PLEASE HELP ME!!!!!!!

[Paulie_D]

Can you mock it up on Codepen or provide a link to a live site?

[Kitty Giraudel]

Seconded. Please make a reduced test case on CodePen, JSFiddle, Dabblet or whatever. Hard to help without any code.

[dominick1]

*css

.stack {
position:relative;
width:32px;
height:32px;
}
.stack img {
position:absolute;
left:0;
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.stack img.top:hover {
filter: alpha(opacity=0);
opacity: 0;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;

#mainwrap {
height:1410px;
width:2520px;

#social {
float: right;
}

*html

• 
• 

[dominick1]

im sorry idk why that did that…the html is just an unordered list nothin crazy can sombody please help me figure out how to keep it in its own spot regardless if the browser window sizze changes or not. thank you

[Paulie_D]

Please put your HTML/CSS in Codepen….it will be much easier for us.

[dominick1]

http://codepen.io/anon/full/uhJiD <---link to the code pen

[dominick1]

when you make the browser window smaller they dont go with it and stay in their proper place..

[Paulie_D]

You have fixed width on your mainwrap and absolute positioned images…so nothing will move.

You images aren’t showing up because they have not been linked to a live webserver.

You have a lot of negative margins in there as well which seems odd.

If you want your site to be responsive you are going to have to start using percentages.

[dominick1]

ok your right i shouldnt be using negative margins..im a rookie to web coding…i am a graphic designer and trying to learn…so what do i need to do to make the main wrap and everything so it stays in the right spot?

[dominick1]

even when i make the mainwrap relative positioning it doesnt do anything…what am i doing wrong

[dominick1]

like what would be the correct way to code this?

[Paulie_D]

We’d need to see a mockup…just generally, of what it is you are trying to achieve before being able to help more.

Do you have an image of what the site is supposed to look like?

[dominick1]

no i dont..i am just trying to set the menu in the center and the social media images in the right hand corner and when i move the browser window they stay where they are supposed to stay like when the website opens on a larger screen not be alll out of place…i know this is probably a stupid easy thing to accomplish but i am having alot of trouble with it…

[Paulie_D]

Are the social media sections supposed to stay at the top if you scroll down?

[Author]

Posts