Positioning Issue

[Chris Enloe]

I am having a slight positioning issue, I want it to do what the first picture is showing, but when I do what needs to be done in the html, what happens is shown in picture two.

http://i512.photobucket.com/albums/t328/Chris_Enloe/newsite2.jpg

http://i512.photobucket.com/albums/t328/Chris_Enloe/siteproblem-1.jpg

The css:

/*



By: Chris Enloe

http://www.chrisenloe.com



*/



* {

margin: 0;

padding: 0;

}



body {

background: url(../images/texture.jpg) repeat;

}



@font-face {

font-family: Bebas;

src: local("Bebas"), url("fonts/bebas.ttf") format("truetype");

font-weight: normal;

font-style: normal;

}



h2 {

font-family: Bebas, Arial, sans-serif;

font-size: 28px;

color: #4d4b4b;

}



.clear {

clear: both;

}



#header {

background: url(../images/header-bg.png) repeat-x;

height: 115px;

}



#nav {

margin: 0 0 0 600px;

}



#nav li {

font-family: Bebas, Arial, sans-serif;

font-size: 30px;

color: #ffffff;

float: left;

margin-right: 25px;

margin-top: 10px;

list-style: none;

}

#nav li a {

color: #ffffff;

text-decoration: none;

font-weight: bold;

}



#nav li a:hover {

border-bottom: solid 3px #ffffff;

}



#page-wrap {

margin: -125px auto;

background: #dfdfe0;

width: 930px;

min-height: 950px;

-moz-box-shadow: 0px 0px 25px #000;

-webkit-box-shadow: 0px 0px 8px #000;

box-shadow: 0px 0px 8px #000;

}

[virtual]

It’s difficult to tell what is going on without seeing the html code. Even better a link to your site, it’s much easier to debug using Firebug.

[Chris Enloe]

http://atest1.vistapanel.net/chrispersonal2/

Try that, hopefully I can get this issue resolved soon!

[Chris Coyier]

This Worked For Me.

/*



By: Chris Enloe

http://www.chrisenloe.com



*/



* {

margin: 0;

padding: 0;

}



body {

width: 930px;

background: url(../images/texture.jpg) repeat;

margin: 0 auto;



}



@font-face {

font-family: Bebas;

src: local("Bebas"), url("fonts/bebas.ttf") format("truetype");

font-weight: normal;

font-style: normal;

}



h2 {

font-family: Bebas, Arial, sans-serif;

font-size: 28px;

margin-top: 20px;

color: #4d4b4b;

}



.clear {

clear: both;

}



#header {

background: url(../images/header-bg.png) repeat-x;

height: 115px;

}



#nav {

width: 930px;

margin: 0 0 0 495px;

}



#nav li {

display: block;

font-family: Bebas, Arial, sans-serif;

font-size: 30px;

color: #ffffff;

float: left;

margin-right: 10px;

margin-top: 20px;

margin-bottom: 40px;

list-style: none;

}

#nav li a {

color: #ffffff;

text-decoration: none;

font-weight: bold;

}



#nav li a:hover {

border-bottom: solid 3px #ffffff;

}



#page-wrap {

margin: -125px auto;

background: #dfdfe0;

width: 930px;

min-height: 950px;

-moz-box-shadow: 0px 0px 25px #000;

-webkit-box-shadow: 0px 0px 8px #000;

box-shadow: 0px 0px 8px #000;

border:;

}

[Chris Coyier]

Its 5:15am. If your code works but you want the black header to go over top of the main section..you can use photoshop to do that. Where the triangles are in the black header, fill that in with the main section color. If you need help i’ll be back on around 2 or 3pm est. Hopefully that code works for you. Good luck.

[virtual]

You can also add this in your code

html{

background: url(http://atest1.vistapanel.net/chrispersonal2/images/texture.jpg) repeat;

}

body {

background: url(http://atest1.vistapanel.net/chrispersonal2/images/header-bg.png) repeat-x;

}

However this won’t always line up correctly with the same image in the header as Chris Enloe has put it. It’s just a quick and nasty fix.

[Chris Enloe]

I fixed it by just using one image. It works, but I am not totally satisfied with using images, instead of purely css.

[kylewiedman]

I was able to fix it in my browser (Chrome) using your markup with this styling…

#nav {

height: 100px;

margin: 0px;

padding-right: 200px;

clear: both;

}



#nav li {

float: right;

}



#header {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

}



#page-wrap {

margin-top: 50px;

padding: 50px 2em 0;

}

[Author]

Posts