Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with web layout

    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?

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Apply this to your body.
    Code:
    background-color:#000;
    Create a container with
    Code:
    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

  • Users who have thanked Xherdas for this post:

    boomer1204 (05-31-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!!
    Code:
    <!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>
    Code:
    <!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>
    Code:
    <!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
    Code:
         
          body {
            background-color: #000;
          }
    
          #clearfix {
          border: 9px solid #56564B; 
          margin: 35px auto; 
          width:900px;
          background-color: #BBD9EE;
          }
    Last edited by boomer1204; 05-31-2012 at 06:39 PM. Reason: moved the end div for clearfix but still doesn't surround the content

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •