...

View Full Version : Help with web layout



boomer1204
05-30-2012, 06:44 PM
Hey guys,

I'm creating a website for my family's non profit organization. What I'm curious about is I found a design layout I really like and was looking through the html and css with firebug and can't figure out what they are using to give this look. If you guys could help me with what they used so I can research how to use that css or html (whichever it is). It looks like they might have used the :after selector but I don't completely understand. Thank you

http://www.bigandlittlebadgers.com/index.cfm?fa=welcome


The design that I like is how it looks like it has a background of just black but then there is the box with all of the information. How do I create that box and have my website in that container?

Xherdas
05-30-2012, 10:55 PM
Apply this to your body.
background-color:#000;
Create a container with
border: 9px solid #56564B; margin: 35px auto; width:900px;
Put your content in that container.

If you need more help, feel free to ask.
Those were basic direct line...

Good luck

boomer1204
05-31-2012, 04:54 PM
So really it is all styling with css there really wasn't a "trick" persay?? Thank you very much for the help and are there any css books that you might suggest, I have a basic understanding of css but am still learning the "layout" stuff. Now I did as you suggest and a couple of the pages that have a picture or an iFrame, the container does not go completely around the objects. Here is the code with the iFrame then i'll post the two with the picture that is still not surrounding it with the two after that. The other pages work fine and I thank you for that very much!!


<!DOCTYPE html>
<html>
<head>
<meta http-equiv = 'Content-type' content = 'text/html; charset = utf - 8'>
<link rel = 'stylesheet' type = 'text/css' href = 'style1.css' />
</head>
<body>
<div id = 'header'>
<h1>Phamily Phun Run</h1>
</div> <!-- end of header div -->
<div id='clearfix'>
<div id="navbar">
<ul>
<li><a href="../trial/index.html" title="Link 1" /><span>Home</span></a></li>
<li><a href="../trial/about.html" title="Link 2" /><span>About</span></a></li>
<li><a href="../trial/events.html"><span>Events</span></a></li>
<li><a href="../trial/contact.html"><span>Contact</span></a></li>
<li><a href="../trial/team.html"><span>Team</span></a>
</li>
</ul>
<div id='mascot'>
<img src="../PhunRun/img/mascot.png"/>
</div>
</div><!-- end of navbar div -->
</div><!-- end of clearfix -->
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<meta http-equiv = 'Content-type' content = 'text/html; charset = utf - 8'>
<link rel = 'stylesheet' type = 'text/css' href = 'style1.css' />
</head>
<body>
<div id = 'header'>
<h1>Phamily Phun Run</h1>
</div> <!-- end of header div -->
<div id='clearfix'>
<div id="navbar">
<ul>
<li><a href="../trial/index.html" title="Link 1" /><span>Home</span></a></li>
<li><a href="../trial/about.html" title="Link 2" /><span>About</span></a></li>
<li><a href="../trial/events.html"><span>Events</span></a></li>
<li><a href="../trial/contact.html"><span>Contact</span></a></li>
<li><a href="../trial/team.html"><span>Team</span></a>
</li>
</ul>
</div><!-- end of navbar div -->
</div><!-- end of clearfix -->
<div id='mascot'>
<img src="../PhunRun/img/mascot.png"/>
</div>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<meta http-equiv = 'Content-type' content = 'text/html; charset = utf - 8'>
<link rel = 'stylesheet' type = 'text/css' href = 'style1.css' />
</head>
<body>
<div id = 'header'>
<h1>Phamily Phun Run</h1>
</div> <!-- end of header div -->
<div id='clearfix'>
<div id="navbar">
<ul>
<li><a href="../trial/index.html" title="Link 1" /><span>Home</span></a></li>
<li><a href="../trial/about.html" title="Link 2" /><span>About</span></a></li>
<li><a href="../trial/events.html"><span>Events</span></a></li>
<li><a href="../trial/contact.html"><span>Contact</span></a></li>
<li><a href="../trial/team.html"><span>Team</span></a>
</li>
</ul>
</div><!-- end of navbar div -->
<div id='papa'>
<span><a href="../trial/team/papa.html">Jesse</a></span>
</div>
<div id='nana'>
<span><a href="../trial/team/nana.html">Norma</a></span>
</div>
<div id="mom">
<span><a href="../trial/team/susan.html">Susan</a></span>
</div>
<div id='deb'>
<span><a href="../trial/team/deb.html">Deb</a></span>
</div>
<div id='betsy'>
<span><a href="../trial/team/betsy.html">Betsy</a></span>
</div>
<div id='dan'>
<span><a href="../trial/team/dan.html">Dan</a></span>
</div>
<div id='nicole'>
<span><a href="../trial/team/nicole.html">Nicole</a></span>
</div>
<div id='boomer'>
<span><a href="../trial/team/boomer.html">Boomer</a></span>
</div>
<!--
<div id="team-left">
<ul>
<li><a href="../PhunRun/team/papa.html">Jesse</a></li>
<li><a href="../PhunRun/team/nana.html">Norma</a></li>
<li><a href='../PhunRun/team/susan.html'>Susan</a></li>
<li><a href="../PhunRun/team/deb.html">Deb</a></li>
</ul>
</div>
<div id='team-right'>
<ul>
<li><a href="../PhunRun/team/betsy.html">Betsy</a></li>
<li><a href="../PhunRun/team/dan.html">Dan</a></li>
<li><a href='../PhunRun/team/nicole.html'>Nicole</a></li>
<li><a href="../PhunRun/team/boomer.html">Boomer</a></li>
</ul>
</div>-->
<div id = "teampic">
<h2>The PhunRun Team!!</h2>
<img src = '../PhunRun/img/team.jpg' alt = 'The PhunRun Team!!' height="450" width="450" />
</div>
</div><!-- end of clearfix -->
</body>
</html>


here is the css code



body {
background-color: #000;
}

#clearfix {
border: 9px solid #56564B;
margin: 35px auto;
width:900px;
background-color: #BBD9EE;
}

boomer1204
05-31-2012, 11:16 PM
Ok guys I was playing around and set the height of my clearfix div (the container) and its working exactly how I wanted it too. My question about all this is why did my clearfix container automatically go around my 2 pages that only had <p> to contain, but when I had a picture or my iframe why did it not automatically do the same thing? This is strictly a learning question because I want my container the same size for every page so the height and width structure is clearly what I am shooting for.

Thanks for all the help in advance guys.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum