homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Something strange on my website
lisamariexo



 
Msg#: 4482871 posted 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

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4482871 posted 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



 
Msg#: 4482871 posted 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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4482871 posted 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



 
Msg#: 4482871 posted 12:41 pm on Aug 8, 2012 (gmt 0)

made those changes, still no luck? :(

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4482871 posted 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



 
Msg#: 4482871 posted 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

WebmasterWorld Administrator incredibill us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4482871 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved