1 Replies - 462 Views - Last Post: 25 September 2012 - 02:00 PM

#1 sturpon711  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-September 12

Question with keeping a header at the top

Posted 25 September 2012 - 12:36 PM

Hey all.

I'm just learning we design and I was hoping I could get some help. Im trying to achieve the look in the picture I attached. The top piece is labeled header in my code, and the other one is center. I tried to center the #center and use margin and padding to position it but I was unable. In addition, when I did use those. The area opaque layer around my text greatly increased in size and shifted down, which confused me. I don't want to use relative positioning because it does not scale nicely. Here is the code I am working with.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

* {
	margin:0px;
	padding:0px;
}

#header
{
	padding:5%;
	width:90%;
	color:black;
	position:relative;
	background-color:white;
	float:left;
	opacity:0.6;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-moz-box-shadow: 3px 6px 4px #000;
	-webkit-box-shadow: 6px 3px 4px #000;
	box-shadow: 3px 6px 4px #000;
}

#header2
{
	padding:20px;
	width:100%;
	color:#FFFFFF;
	position:relative;
	float:left;
	margin-left:20px;
	overflow:hidden;
}

#header2 .transparency
{
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	background-color:#000000;
	width:340px;
	height:1500px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
}

#center
{
	
	
	padding:25%;
	width:50%;
	height:20%;
	color:black;
	background-color:white;
	float:center;
	opacity:0.6;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-moz-box-shadow: 3px 6px 4px #000;
	-webkit-box-shadow: 6px 3px 4px #000;
	box-shadow: 3px 6px 4px #000;
}

#center2
{
	padding:20px;
	width:50%;
	color:#FFFFFF;
	position:;
	float:center;
	margin-left:20px;
	overflow:hidden;
}

#center2 .transparency
{
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	background-color:#000000;
	width:200px;
	height:500px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
}

.content
{
	position:relative;
}

.content, .shadow {
  position: relative;
  bottom: 4px;
  right: 4px;
}



html { 
	background: url(assets/img/swap/kayaks_2.png) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

}

</style>
</head>


<!-- container one starts -->
<div id="header">

    <h1>Children inherit the opacity</h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.

</div>

<body>
<!-- container one ends -->
<div id="center">

    <h1>Center Piece</h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.

</div>
</body>
</html>


The page is also live at http://nathansass.com/page_3.html

thanks,
Nathan

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Question with keeping a header at the top

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Question with keeping a header at the top

Posted 25 September 2012 - 02:00 PM

- there is no such thing as float: center
- you may have issues because the header <div> is outside the <body> (which is invalid)
- paddings do not count against the width/height. a padding of 25% plus a width of 50% account for 100% occupied space.
- floating the header takes it out of the normal element flow.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1