Jump to content

[SOLVED] new to CSS - div help needed.

spires

By spires
in CSS Help

Recommended Posts

spires Advanced Member

spires

Posted
Posted

Hi

 

I am just starting build my first full CSS website. http://www.smartmac.co.uk/template.php

I have managed to put the header together so far, but am having problems with the three columns within he main section.

 

I have removed the left and right column for the moment to make my life easier.

But I can't seem to be able to get the center column to react in the way I want it to.

 

The div does not seem to acting as if it's inside of the outer div.

 

This section of the code:

<div id="outerBodyColumn">
<div id="titles">
<H1>Pay Per Click (PPC)</H1>
<H2>Increase Your Sales! Get Your Business Onto The Front Page Of Google Using Pay-Per-Click Advertising. It's Now Fast & Easy</H2>
</div> <!-- titles -->
</div>

 

Is in the center of the page, even though the CSS left: 0;

Also, the main background (white) is not sitting around the background, it's only around the navigation.

 

 

CSS Code:

/* CSS Document */
body {
	background-color:#ebebeb;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#222;
	line-height:16px;
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	font-size:18px;
	color:#26a7e0;
	font-weight:normal;
	line-height:22px;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	font-size:16px;
	color:#333;
	font-weight:normal;
	line-height:20px;
}

img {
border:none;
}

p {
	margin: 1ex 0;
}

p.first {
	text-indent: 2em;
}

h1.first {
	color:#333;
	text-indent: 2em;
}


/* ======   Class Selector  ====== */
.first {
	text-indent: 2em;
}

.highlights {
			font-weight:bold;
			background-image:url(images/wrapper/navi_selected.jpg);
}





/* ======   Out Wrappers  ====== */
div#outerHead {
	position: relative;
	background-image:url(images/wrapper/head.jpg);
	height:19px;
	width:1062px;
}
div#outerBody {
	position: relative;
	background-image:url(images/wrapper/bg.jpg);
	background-repeat:repeat-y;
	width:1062px;
}
div#outerBottom {
	position: relative;
	background-image:url(images/wrapper/bottom.jpg);
	height:17px;
	width:1062px;
}


/* ======   Header & Navi  ====== */
#header {
	position: relative;
	height:136px;
	width:1062px;
}

#logo {
  position: absolute;
	background-image:url(images/wrapper/logo.jpg);
	background-repeat:no-repeat;
	width:212px;
	height:115px;
	margin:0;
	top:15px;
	left:30px;
}
#headTextLeft {
  position: absolute;
	width:300px;
	height:115px;
	top:15px;
	left:252px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	font-size:16px;
	color:#333;
	font-weight:normal;
	line-height:20px;
}
#headTextRight {
  position: absolute;
	width:348px;
	height:115px;
	top:15px;
	left:562px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	font-size:16px;
	color:#333;
	font-weight:normal;
	line-height:20px;
}
#headSecondImg {
  position: absolute;
	background-image:url(images/wrapper/header_image.jpg);
	background-repeat:no-repeat;
	width:112px;
	height:123px;
	margin:0;
	top:15px;
	left:920px;
}



/* ======   Main Menu  ====== */
#header #mainNavi {
	position: absolute;
	background-image:url(images/wrapper/main_navi.jpg);
	background-repeat:no-repeat;
	padding-left:24px;
	left:30px;
 top: 140px;
	height:38px;
	width:979px;
	z-index:1;
}
#mainNavi ul {
	line-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#mainNavi li {
  float:left;
	margin-left:0;
	padding: 0;
}
#mainNavi li a:link, #mainNavi li a:visited {
  font-family:Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding: 0 17px 0 17px;
	margin:0;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	line-height:38px;
	background-image:url(images/wrapper/navi_bg.jpg);
	background-repeat:no-repeat;
	border:none;
}
#mainNavi li a:hover, #mainNavi li a:active {
	background-image:url(images/wrapper/navi_rollOver.jpg);
	background-repeat:no-repeat;
	border:none;
}
#mainNavi li a.current {
	background-image:url(images/wrapper/navi_selected.jpg);
	background-repeat:repeat-x;
	border:none;
}
#mainNavi li a.current:hover {
	cursor:default;
}
.verticalLineMain {
	padding: 0;
	margin:0;
	font-size:20px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	line-height:28px;
	vertical-align:sub;
}




/* ======   Sub Navi  ====== */
#header #subNavi {
	position: absolute;
	left:30px;
 top: 178px;
	background-image:url(images/wrapper/navi_2nd.jpg);
	background-repeat:no-repeat;
	padding-left:20px;
	height:28px;
	width:983px;
	z-index:1;
}
#subNavi ul {
	line-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#subNavi li {
  float:left;
	margin-left:0;
	padding: 0;
}
#subNavi li a:link, #subNavi li a:visited {
  font-family:Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding: 0 8px 0 8px;
	margin:0;
	font-size:10px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	line-height:28px;
}
#subNavi li a:hover, #subNavi li a:active {
	color:#CCC;
}
.verticalLine {
	padding: 0;
	margin:0;
	font-size:10px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	line-height:28px;
	vertical-align:middle;
}






/* ======   3 Columns  ====== */

div#outerBodyColumn {
	position: relative;
	width:598px;
	top:100px;
	left:0;
}




/* ======   Main Body Content   ====== */
#outerBodyColumn div#titles {
		float:left;
		width:598px;
		margin:0;
		padding:0;
}

#titles {
 font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#222;
	line-height:16px;

}


/* ======   Banners   ====== */






/* ======  Classes  ====== */
.2ndColour15 {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	text-align:left;
	font-size:16px;
	color:#26a7e0;
	font-weight:normal;
	line-height:20px;
}




/* ======  Miscellaneous Styles  ====== */
.clear { clear:both; }

 

 

HTML Code:

<div id="outerHead"></div>
<div id="outerBody">

<div id="header" align="center">
<div id="logo"></div>
<div id="headTextLeft"><br />Online Marketing Experts<br /> For Businesses That Want The Best</div>
<div id="headTextRight"><br />We're PPC Experts<br />Free Quote - Call Today On: <span class="2ndColour15">0208 9085088</span></div>
<div id="headSecondImg"></div>


<div id="mainNavi">
<ul>
<li><a href="#">What We Do</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#" class="current">Pay Per Click</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Online Videos</a></li>
<li><a href="#">Training Courses</a></li>
<li><a href="#">Why Choose Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>

<div id="subNavi">
<ul>
<li><a href="#">Pay Per Click Management</a></li>
<li class="verticalLine">|</li>
<li><a href="#">Advanced PPC Campaigns</a></li>
<li class="verticalLine">|</li>
<li><a href="#">What is Pay Per Click</a></li>
<li class="verticalLine">|</li>
<li><a href="#">How Does PPC Wprk</a></li>
<li class="verticalLine">|</li>
<li><a href="#">Benefits Of PPC Campaigns</a></li>
<li class="verticalLine">|</li>
<li><a href="#">Why Choose Us</a></li>
<li class="verticalLine">|</li>
<li><a href="#">Training & Consultancy</a></li>
</ul>
</div>

</div> <!-- hreader -->





<div id="outerBodyColumn">
<div id="titles">
<H1>Pay Per Click (PPC)</H1>
<H2>Increase Your Sales! Get Your Business Onto The Front Page Of Google Using Pay-Per-Click Advertising. It's Now Fast & Easy</H2>
</div> <!-- titles -->
</div> 


<P class="clear">		
</div> <!-- outerBody -->


<div id="outerBottom"></div>

 

 

Any help would be much appreciated.

Link to comment
https://forums.phpfreaks.com/topic/175211-solved-new-to-css-div-help-needed/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.