CSS Container div and header div issue

Discussion in 'HTML & Website Design' started by theshad_ow, Jul 15, 2008.

0
  1. #1
    Hi all,
    I am working on a client's website and I have this small issue. You can check the initial layout at http://owace.com/DI%20Stuff/index.html.

    My concern is that when I try to drag the browser edge to increase or decrease the window size, the header div does not move along with the containter? I am sure it's a small thing I am missing; probably something to do with float or overflow. I am in a rush and that's why seek help. Thanks in advance!

    Cheers!
     
    theshad_ow, Jul 15, 2008 IP
  2. Lime-Designs

    Lime-Designs Active Member

    Messages:
    357
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Umm can you post the header CSS
     
    Lime-Designs, Jul 15, 2008 IP
  3. theshad_ow

    theshad_ow Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can check the source of that link or here it is:

    #container {

    width: 789px;
    height: 487px;
    margin: 0 auto;
    margin-top: 100px;
    background-image: url(images/content_bg.png);


    }

    #header {


    height: 62px;
    margin-top: -470px;
    margin-left: 245px;
    background: url(images/logo.jpg);
    background-repeat: no-repeat;
    float: inherit;



    }
     
    theshad_ow, Jul 15, 2008 IP
  4. Lime-Designs

    Lime-Designs Active Member

    Messages:
    357
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #4
    WOW have you got MSN i can talk you through some errors i have noticed
     
    Lime-Designs, Jul 15, 2008 IP
  5. theshad_ow

    theshad_ow Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    how about yahoo msgR?
     
    theshad_ow, Jul 15, 2008 IP
  6. Lime-Designs

    Lime-Designs Active Member

    Messages:
    357
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #6
    Lime-Designs, Jul 15, 2008 IP
  7. Lime-Designs

    Lime-Designs Active Member

    Messages:
    357
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #7
    Ok, all i did was put the header inside teh comtainer and take away the massive margins you had.... and added small ones to make it fit nicley,

    
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::Globe-Link Sourcing Inc.::</title>
</head>
<style>
 
html, body {
	margin: 0;
	padding: 0;
	background:url(New-WEBSITE.png);
}

#container {
    
	width: 789px;
	height: 487px;
	margin: 0 auto;
	margin-top: 100px;
	background-image: url(images/content_bg.png);
	
	
}

#header  {
 
	background: url(images/logo.jpg);
	background-repeat: no-repeat;
	height: 62px;
	margin-top:15px;
	margin-left:15px;
}



</style>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
    Code (markup):
     
    Lime-Designs, Jul 15, 2008 IP
  8. theshad_ow

    theshad_ow Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    oh man I am such an idiot lol.. I didn't even close div in html..thanks!!!!!!!!!!!!!!!!!!!!!!!!
     
    theshad_ow, Jul 15, 2008 IP
  9. theshad_ow

    theshad_ow Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks again for your correction. Now it works perfect on IE but not on any version of Firefox (I have version 3). I can't seem to move the the logo by changing margins. Any suggestions?
     
    theshad_ow, Jul 15, 2008 IP
  10. Lime-Designs

    Lime-Designs Active Member

    Messages:
    357
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #10
    what doesnt work in ff what part
     
    Lime-Designs, Jul 15, 2008 IP
  11. theshad_ow

    theshad_ow Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    The logo is aligned nicely in center within the header (margin-top: 15px, margin-bottom: 15px) but only in IE and not in FF. In FF it is alined on top left corner and doesn't seem to change it's position if I change the margin. Why don't you test it? Thanks!
     
    theshad_ow, Jul 16, 2008 IP