SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS doubt

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS doubt

    Hi...im relatively new to css and kind of was wondering how i'd go about splitting content on a footer...i basically want to have some text on the left, some text on the middle and some on the right.

    i'd usually do this with a table but im trying to make this layout table-less.

    im attaching the index.html and the 2 css im using... if someone would be kind enough to point me on what's the correct or best way of going to have that footer content divided in three, i'd really appreciate it.

    also...if i look at the html using IE, there's a small glitch between the two divs in the header...but its not there in firefox. does anyone know how to fix that?

    any help is greatly appreciated...thanks in advance.

    Gabriel

    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    </head>
    <body bgcolor="#FFFFFF">
    
    <div class="contenedor">
    
    
    <div id="top" style="width:100%;background-color:yellow;">
    	<div id="logo" style="height:158px;background-color:red;width:288px;float:left;"></div>
    	<div id="topright" style="height:158px;background-color:green;">
    		<div id="menu"></div>
    		<div id="fotos" style="background-color: black; height: 107px;">
    		hola
    		</div>
    	</div>
    </div> <!-- top -->
    
    <p class="texto">
    hello <a href="http://www.hotmail.com">whatever</a>
    </p>
    
    
    <div class="push"></div>
    
    </div> <!-- Contenedor -->
    
    <div class="footer">
    whateva
    </div>
    
    </body>
    </html>
    Code css:
    * {
    	margin: 0;
    }
    html, body {
    	height: 100%;
    }
    .contenedor {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
    }
    .push {
    	height: 4em; /* .push must be the same height as .footer */
    }
    .footer {
    	height: 4em; /* .push must be the same height as .footer */
    	background-color: blue;
    }
    #menu
    {
    	height: 51px;
    }
     
    .bgMenu
    {
    	background-color:3775be;
    }
    .footer
    {
    background-color: #3775be;
    color: White;
    }
     
    #menu
    {
    background-color: #3775be;
    }
     
    .texto
    {
    	color: 646464;
    }
    .texto a
    {
    	color: #3775be;
    }

  2. #2
    SitePoint Zealot Enzyme Online's Avatar
    Join Date
    Jun 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could have one type of divider and have three of them in the footer for each of your sections you want. in the css...
    have the divs float left. in each div, you could have some padding to seperate the objects inside the divs

    hope this helped
    Now up and running!
    Enzyme Online | Professional and Affordable Web Design

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get yourself off on the right foot, too. You have no doctype which will put IE into quirks mode. Also, you are using xhtml end tags so I assume you want to use xhtml (reason?) but bgcolor does not technically exist in xhtml.


Bookmarks

Posting Permissions

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