Solved

css layout question

Posted on 2012-03-22
5
188 Views
Last Modified: 2012-03-23
Hi Guys,

I downloaded a template to use in visual web developer 2010 express.
In the header there is the logo on the left, and the copyright section to the right.
I created a new <div>="TESTAREA" and the goal is to put the box in the middle, same height, as the logo and copyright section.  I cant seem to center this between the right and left, any suggestions?

thanks



	<div id="header">
		<div id="logo">
			<h1><a href="#">Big Business</a></h1>
		</div>

        <div id=TESTAREA">
  
        <h1>this is my new area</h1>
        
            </div>





		<div id="slogan">
			<h2>Template design by Free CSS Templates</h2>
		</div>
	</div>

Open in new window



#header {
	height: 75px;
	position: relative;
	background: #6E6E6E url(images/img03.jpg) top left no-repeat;
	padding: 45px;
	color: #FFFFFF;
	width: 888px;
	border: solid 1px #7E7E7E;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}

#logo {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	top: 0;
	left: 45px;
    width: 279px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
	font-size: 3.25em;
}

#slogan {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	right: 45px;
	top: 0;
}

#slogan h2 {
	color: #BEBEBE;
	font-size: 1.25em;
	text-shadow: 0 1px 1px #3E3E3E;
}

#TESTAREA {
    line-height: 160px;
    height:160px;
    padding: 5px 0 0 0;
    position:absolute;
    top:0;
    
}

Open in new window

0
Comment
Question by:solarissf
  • 3
  • 2
5 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37754176
You already have position:absolute in the TEXTAREA div so just add left:330px to push the div left as far as you need it. Adjust top as desired.
0
 

Author Comment

by:solarissf
ID: 37754200
added, but doesnt move at all????
#TESTAREA {
    line-height: 160px;
    height:160px;
    padding: 5px 0 0 0;
    position:absolute;
    left:700px;
    top:0;
   
}


nevermind... it did move... other than moving it visually , is there a way to center it?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37754204
Your div is missing a quote around TEXTAREA.
0
 

Author Comment

by:solarissf
ID: 37754366
thanks,  is there a way to actually center it between other 2 elements?
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 37754464
Sure. You could remove all the position:absolute, top, right, and left then add float:left and margin:auto to the slogan, logo and TEXTAREA.
#header {
      height: 75px;
      position: relative;
      background: #6E6E6E url(images/img03.jpg) top left no-repeat;
      color: #FFFFFF;
      padding:45px;
      width: 888px;
      border: solid 1px #7E7E7E;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      overflow: hidden;
}

#logo {
      line-height: 60px;
      height: 160px;
      padding: 5px 0 0 0;
    width: 279px;
    float:left;
    margin:auto
}

#logo a {
      text-decoration: none;
      color: #FFFFFF;
      text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
      font-size: 3.25em;
}

#slogan {
      line-height: 60px;
      height: 160px;
      padding: 5px 0 0 0;
      float:left;
    margin:auto
}

#slogan h2 {
      color: #BEBEBE;
      font-size: 1.25em;
      text-shadow: 0 1px 1px #3E3E3E;
}

#TESTAREA {
    line-height: 60px;
    height:160px;
    padding: 5px 0 0 0;
    left:330px;
    float:left;
    margin:auto
   
}

I also reduced the line-height to 60px. I'm not even sure why that's there to begin with.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now