CSS/DIV Layout Help

Page 1 of 1

4 Replies - 640 Views - Last Post: 27 July 2011 - 01:33 AM

#1 Kaizc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 25-April 08

CSS/DIV Layout Help

Posted 25 July 2011 - 03:20 AM

I am trying to design a simple webpage for my church and having a little difficulty with the layout using CSS and div. I want to have 3 columns in the main section under the header but don't know how to put the columns on each side of the main section with div tags. Here is my code:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Western Community Alliance Church</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id= "wrap">

<div id= "header">
<center>
  <img src="wcaclogo.jpg" width="500" height="100" alt="wcaclogo" />
</center>
  
<br  />
<center>
<ul id="nav">
<b>
	<li><a href= "#">Home</a></li>
    <li><a href= "#">About</a></li>
    <li><a href= "#">Bible Study</a></li>
    <li><a href= "#">Youth Aflame</a></li>
    <li><a href= "#">Women</a></li>
    <li><a href= "#">Contact</a></li>
</b>
</ul>
</center>

</div>

<div id= "main">
<center><h1>Welcome to Our Website</h1></center>
<p />
<p>The Western Community Alliance Church is a local church in the Western Suburbs of Melbourne, Australia and is part of the Christian & Missionary Alliance of Australia. </p>

<center>
<h2>WCAC NEWS </h2>
        <p><iframe width="350" height="270" src="http://www.youtube.com/watch?v=5Y_ibWnncLA" frameborder="0" allowfullscreen></iframe></p>
</ center> 
<br />
<br />
</div>


<div id="footer">
		<p><span>&copy; 2011 WCAC Media<a href="#"></a></span><br />
		</p>
	</div>
    

</div>

</body>
</html>



CSS
@charset "utf-8";
/* CSS Document */

body {background:#f4f4f4 url(img/bg.gif) top center repeat-y; color:#404040; font:76% Verdana,Tahoma,Arial,sans-serif; margin:0 auto; padding:0;}
#wrap {background:#fff; color:#404040; margin:0 auto; width: 800px;}

#header {
	height: 120px;
	padding: 15px;
	border-bottom: groove 5px; 
}

#main {
	margin-right: 150px;
	margin-left: 150px;
}

ul { padding: 0px; }

li {
	list-style: none;
	margin: 10px 0;
}

ul#nav {
	list-style-type:: none;
	margin: 0px;
	padding: 0px;
}

ul#nav li {
	display: inline;
}

ul#nav li a {
	padding: 5px 20px;
	margin: 0px 2px;
	border-right: 1px solid #00F;
	border-left: 1px solid #00F;
	text-decoration: underline;
	text-align: center;
	color: #00F
}

#footer {background:#fff; border-top:2px solid #e0e0e0; clear:both; color:gray; margin:0 auto; padding:10px 0; text-align:center; width:760px; line-height:1.5em; font-size:0.9em;}
#footer p {margin:0; padding:0;}
#footer a {background-color:#fff; color:gray; font-weight:400; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#footer span {font-size:1.2em;}


Is This A Good Question/Topic? 0
  • +

Replies To: CSS/DIV Layout Help

#2 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1112
  • View blog
  • Posts: 3,061
  • Joined: 28-November 09

Re: CSS/DIV Layout Help

Posted 25 July 2011 - 04:51 AM

Your html is atrocious. Delete every center tab, b, strong, and any other tag of that nature. That needs to be done in css using font-weight and alignment.

Why do you have spans inside of divs? That's wasted code.

delete the odd self-closing p tag, that's invalid markup.

The br tag is not to be used, learn how to properly use the box model: margin and padding.

Your font size is in different units (% shouldn't be used) and your color should be one consistent style (name, hex, rgba)

Don't use a 3 column layout unless you're sure you can use all of that space effectively. The 3 column also makes working under the rule of thirds and golden ratio rather difficult.

Learn CSS floats for layout methods.

Be careful of patchy coding techniques like this, it'll cause you some real problems later.
Was This Post Helpful? 1
  • +
  • -

#3 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS/DIV Layout Help

Posted 25 July 2011 - 08:08 AM

View PostLemur, on 25 July 2011 - 05:51 AM, said:

Why do you have spans inside of divs? That's wasted code.


spans inside of divs are fine - can be useful. But not the way you are using it, the span inside the paragraph inside the div with a <br/> ? Thats just ridiculous, try this: http://www.html.net/

View PostLemur, on 25 July 2011 - 05:51 AM, said:

Your font size is in different units (% shouldn't be used) and your color should be one consistent style (name, hex, rgba)


This is more a question for Lemur. If I set the font size in an html definition in my css file why is it inappropriate to use percentages from then on out?
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1112
  • View blog
  • Posts: 3,061
  • Joined: 28-November 09

Re: CSS/DIV Layout Help

Posted 25 July 2011 - 12:19 PM

EM and EX are typographical units, I forget whether or not pica is used. That's like using inches to lay out your site design, it works but there are better units.
Was This Post Helpful? 0
  • +
  • -

#5 Kaizc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 25-April 08

Re: CSS/DIV Layout Help

Posted 27 July 2011 - 01:33 AM

Most of the code is from a layout I found on the net which I just changed around a bit. Thanks for that site, I'll definately be checking it out.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1