Forums

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!

[Deleted User]

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:;
}

[Deleted User]

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;
}

treehouse : what would you like to learn today?

Forums

Positioning Issue