Jump to content

[SOLVED] new to CSS - div help needed.

spires

By spires
in CSS Help

 Share

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.