Something strange on my website

Forum Moderators: open

Message Too Old, No Replies

Something strange on my website

lisamariexo

11:25 am on Aug 8, 2012 (gmt 0)

Ok so i'm creating a website for my photography portfolio. even though when it's on full screen the footer and the header stretch the width of the window (i have a large resolution monitor as well)when the window is made smaller the footer and header just end and the content div sticks out. can anyone help me?

[edited by: engine at 11:44 am (utc) on Aug 8, 2012]
[edit reason] see TOS [/edit]

topr8

11:45 am on Aug 8, 2012 (gmt 0)

you need to paste the relevant html and any css code here! in order to have any help :)

lisamariexo

12:02 pm on Aug 8, 2012 (gmt 0)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<?php include("includes/header.php")?>
<body>

<div id="content_wrap">
<div id="content">
<div class="top_image"></div>

<div class="project_content">
<div class="project_text"><b>Lisa Marie Carter's Photography Portfolio</b></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar felis at erat bibendum semper.</p>
<div class="read_more"><a href="#">Read More</a></div>
</div>

<div id="content_area">
<div id="content_width">
<div class="welcome">Welcome to my portfolio</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl velit, pulvinar quis interdum interdum, molestie at nisi. Morbi aliquam porttitor purus, sit amet ultrices tellus rhoncus id. Curabitur tortor eros, varius nec auctor at, pellentesque non mi. Maecenas mi nibh, tincidunt sed venenatis ac, interdum id neque. Suspendisse a felis in nisi luctus iaculis vel vel lacus. In nec scelerisque nunc. Donec sed dui leo, quis fringilla augue. In a ultricies dolor.</p>
<ul class="list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam dapibus magna at augue commodo blandit.</li>
</ul>
</div>

<div id="news_container">
<div class="news">News and Events</div>

<div class="news_section">
<div class="square"></div>
<div class="news_content">
<div class="text_content">header</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cleaner"></div>
</div>

<div class="news_section">
<div class="square2"></div>
<div class="news_content">
<div class="text_content">header</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cleaner"></div>
</div>

<div class="news_section">
<div class="square3"></div>
<div class="news_content">
<div class="text_content">header</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="cleaner"></div>
</div>
</div>

<div class="cleaner"></div>

</div>
</div>
</div>

</body>
</html>
<?php include("includes/footer.php")?>

CSS:

html { overflow-y: scroll;}

body {
margin:0px;
padding:0px;
background:#CCC;
}

#header_wrap {
width:100%;
height:114px;
margin:0px;
background:url(images/header-background.jpg) repeat-x;
}

#header {
width:980px;
margin:0 auto;
}

#site_logo {
width:388px;
height:80px;
background:url(images/trans-logo.png) no-repeat;
}

#menu_wrap {
width:100%;
height:41px;
background:url(images/menu-bg.jpg) repeat-x;
}

#menu {
width:980px;
height:41px;
margin:0 auto;
}

#menu ul {
margin:0 0 0 28px;
padding:0px;
list-style:none
}

#menu li {
margin:0px;
padding:0px;
display:inline;
}

#menu a {
float:left;
display:block;
height:22px;
width:128px;
padding:13px 0 0 0;
background:url(images/menu.png) bottom no-repeat;
text-align:center;
font-size:14px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-weight:bold;
outline:none;
}

#menu a:hover {
color:#000000;
background:url(images/menu_hover.png) bottom no-repeat;
}

#menu .current {
color:#000000;
background:url(images/menu_hover.png) bottom no-repeat;
}

#content_wrap {
width:980px;
margin:0 auto;
}

#content {
width:900px;
margin:30px;
padding:9px;
border:1px solid #c3c4c5;
background:#CCC
}

.top_image {
float:left;
width:610px;
height:260px;
padding:0px;
background:url(images/banner.jpg);
}

.project_content {
float:right;
width:250px;
height:180px;
padding:40px 20px;
background:#000;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}

.read_more a:hover {
color:#000000;
background:url(images/read-more-hover.gif) no-repeat;
}

.read_more a {
display:block;
width:104px;
height:25px;
padding-top:5px;
background:url(images/read-more.gif) no-repeat;
color:#FFF;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-decoration:none;
}

#content_area {
width:898px;
background:#666;
}

#content_width {
float:left;
width:510px;
padding:40px 48px 20px 50px;
background:#FFF
}

.cleaner {
clear:both;
width:100%
}

.welcome {
font-size:22px;
padding-bottom:20px;
margin-bottom:15px;
letter-spacing:2px;
color:#000;
background:url(images/line.png) left bottom no-repeat;
}

#content_width p {
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:20px;
}

.list {
padding:0px;
list-style:none;
}

.list li {
margin:0 0 10px 0;
padding:0 0 0 30px;
background:url(images/le_thumb.png) left top no-repeat;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:20px;
}

.list li:hover {
color:#000000;
background:url(images/le_thumb_hover.png) no-repeat;
}

#news_container {
float:right;
width:290px;
background:#FFF;
padding-top:2px;
padding-right:opx;
padding-bottom:20px;
padding-left:0px;
}

.news {
clear:both;
font-size:18px;
letter-spacing:2px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
height:20px;
padding:10px 20px;
background:#999
}

.news_section {
margin:0 20px 20px 20px

}

.news_section .square {
float:left;
width:70px;
height:70px;
background:url(images/project_pic.png) no-repeat
}

.news_section .square2 {
float:left;
width:70px;
height:70px;
background:url(images/project_pic2.png) no-repeat
}

.news_section .square3 {
float:left;
width:70px;
height:70px;
background:url(images/project_pic3.png) no-repeat
}

.news_content {
float:right;
width:160px;
}

.text_content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000;
}

p {
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

#footer {
width:100%;
height:114px;
margin:0px;
background:url(images/footerimage.png) repeat-x;
}

swa66

12:13 pm on Aug 8, 2012 (gmt 0)

First get your html to validate.

e.g.:

</head>
<?php include("includes/header.php")?>
<body>

whatever it is including: it's not going to be in the right place as nothing is allowed between the head and the body ...

dito for:

</body>
</html>
<?php include("includes/footer.php")?>

Nothing is allowed after the </html> ... (nor between the </body> and </html> ) .

lisamariexo

12:41 pm on Aug 8, 2012 (gmt 0)

made those changes, still no luck? :(

topr8

1:31 pm on Aug 8, 2012 (gmt 0)

well your content is set to a width of 900

however as you haven't shown the html that is in either the header or the footer, it is hard to say why they display at the different width!

(you have shown the include file call, but not the html that the inclusde file contains!

lisamariexo

2:16 pm on Aug 8, 2012 (gmt 0)

ooh yeah, sorry!
Header:
<div id="header_wrap">
<div id="header">
<div id="site_logo"></div>
</div>
</div>

<div id="menu_wrap">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

Footer:
<div id="footer">
</div>

incrediBILL

11:37 pm on Aug 8, 2012 (gmt 0)

The header is also set to 980:

#header {
width:980px;
margin:0 auto;
}

Using specific widths the layout won't dynamically resize.

Unless I'm misunderstanding the problem, you probably want something like this:

width:95%;
max-width:980px

Which would scale down but not larger than 980px.