6 replies [Last post]
allking
allking's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-6
Joined: 2010-07-07
Posts: 4
Points: 5

Cool Hello everyone, I've been browsing this forum for quite some time and have yet to have to ask a question, but here goes:

css

@charset "utf-8";
/* CSS Document */
 
* {
    margin: 0;
    padding: 0;
}
 
html, body, #bg, #bg table, #bg td {
    height:100%;
    width:100%;
    overflow:hidden;
}
 
#bg {
    position: fixed;
	z-index: 1;
}
 
#bg div {
    height:200%;
    left:-55%;
    position:absolute;
    top:-100%;
    width:200%;
}
 
#bg td {
    text-align:center;
    vertical-align:bottom;
}
 
#bg img {
    margin:0 auto;
    max-height:100%;
    min-width:100%;
}
 
#container {
	height: 100%;
	width: 100%;
}
 
 
#video { 
 
	right: 20%;
	top:70%;
	height: 35%;
	width: 30%;
	position:absolute;
    z-index: 10;	
}
 
#title { z-index: 11;
position:absolute;
overflow:hidden;
width:100%;
 
}
 
#navabout {
 
	width: 243px;
 
	height: 37px
 
	float: left;
 
 
 
}
 
 
#navprogram {
 
	width: 243px;
 
	height: 37px
 
	float: left;
 
 
 
}
 
#navwhy {
 
	width: 243px;
 
	height: 37px
 
	float: left;
 
 
 
}
 
 
 
#navrisk {
 
	width: 243px;
 
	height: 37px
 
	float: left;
 
 
 
}
 
 
 
#navtypical{
 
	width: 243px;
 
	height: 37px
 
	float: left;
 
 
 
}
 
 
 
#navcontact {
 
	width: 243px;
 
	height: 27px
 
	float: left;
 
 
 
}

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 rel="Stylesheet" type="text/css" href="china.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
</head>
 
<body>
 
<div id="bg">
 
    <div>    
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="extsky2.gif" alt=""/>
 
                </td>               
            </tr>
        </table>
    </div>
</div>
<div id="container">
<div id="title" ><img src="NEWTITLEwhite.gif" height="10%" /</div>
 
<div id="video"> <object height="100%" width="100%" ><param name="movie" value="http://www.youtube.com/v/Ou6_MkIvKOo&amp;hl=en_US&amp;fs=1?rel=0&amp;hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Ou6_MkIvKOo&amp;hl=en_US&amp;fs=1?rel=0&amp;hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed></object></div> 
 
</div>
</body>
</html>

Summary: The site has a large background image that fills the viewport and is cut off where too large (extsky2.gif). This way it will be full screen on all resolutions. NEWTITLEwhite.gif is a 3000px wide image that is meant to be the header. I made it super long so that it can be CENTERED in the #title div and have both edges cut off as the resolution scales up or down. This will leave the content of the banner relatively stably positioned while the blank black edges adapt and are cut to size. Please note the navigation buttons aren't added yet so don't worry about the #nav(x) divs. The youtube video is just a random video. I'll place it properly once the header is aligned.

The question is, how do I get my header image to center WITHIN the div and have the overflow on both edges cut off?

It is currently snapping to the left side of the div and expanding out to the right as the browser expands. Not centered at all.

Something to do with {margin: "auto";} ??
Something to do with .imageContainer{width:50%} .imageContainer img{display:block;width:100%} ???

I am very green when it comes to creating web pages. I don't understand where to stick these things...Any help for a noobie struggling to get up and running?

If you need more info, or some files or images attached for understanding I would be happy to oblige.

Thank you soooooooo much for your insight in advance.

sae281062
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-06-20
Posts: 3
Points: 3

If you're working with

If you're working with background images then you can do it through CSS. Apply this property to whatever DIV needs your background.

div#whatever {background: background: url(NEWTITLEwhite.gif) top center no-repeat;}

allking
allking's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-6
Joined: 2010-07-07
Posts: 4
Points: 5

Ohhhh that is beautiful, we

read below for solution.

davestone
davestone's picture
Offline
Enthusiast
Last seen: 10 years 14 weeks ago
Timezone: GMT-7
Joined: 2009-05-11
Posts: 74
Points: 43

Do you have a link to the web

Do you have a link to the web page?

Also, don't position #bg with absolute. If you use margin: 0 auto; it will center.

Start with a container div like this:

#container {
margin:0 auto;
position: relative;
width: 100%;
}
 
#bg {
margin: 0 auto;
position: relative;
width: 100%;}

Then in your HTML

<div id="container">
 
<div id="bg"></div>
</div>

Without a link, I can't really make an accurate assessment. Don't use top: -100%, that's just bad. Not a specified distance in px or em.

allking
allking's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-6
Joined: 2010-07-07
Posts: 4
Points: 5

temp test location Please

allking
allking's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-6
Joined: 2010-07-07
Posts: 4
Points: 5

SOLUTION:

SOLUTION

 <div id="title" ><img src="NEWTITLEwhite.gif" width="100%" /></div>

#title { z-index: 11;
position:absolute;
width: 100%;
 
}

Thanks all.

bespy
bespy's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT+5.5
Joined: 2010-07-10
Posts: 1
Points: 1

Don't take image in that Div

Don't take image in that Div and Css . Take it separately.