Help with CSS styles

Discussion in 'CSS' started by piropeator, Jun 21, 2010.

0
  1. #1
    I have this css file:
    body {
margin:0; padding:0;
font-size:80%;
font-family: sans-serif;
}

#wrap{
width:900px;
margin: auto;
text-align:left;
} 

#header{
height:100px;
background: url(../img/header.jpg) no-repeat top left;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#contenedor {
width: 900px;
margin: 0;
padding:0;
display:table;
border: 1px solid black;
text-align:justify;
}

#row {
display: table-row;
}

#izquierda {
padding: 10px;
width:150px;
height:500px;
float:left;
background: #EEF;
}

#derecha{
padding: 10px;
width:150px;
height:500px;
float:left;
background:#FEE;
}

#central{
padding: 10px;
width:540px;
height:500px;
float:left;
background:yellow;
}

#pie{
clear:both;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
    HTML:
    And this is the html file:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prueba de CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="StyleSheet" href="demo_10.css" type="text/css">
</head>
<body>
  <div id=”wrap”>
     <div id=”header”><p>Título de tu página.(header)</p></div>
  </div>

  <div id=”contenedor”>
       <div id=”izquierda”>
            <h4>Col. Izq.(left)</h4>
            <p>Esta es la columna izquierda que se mostrara en el lado izquierdo de la pantalla.</p>
       </div>

       <div id=”central”>
            <h4>Col. Central (center)</h4>
            <p>Esta es la columna central que se mostrara en el centro de la pantalla y a los costados estarán las columnas laterales.</p>
       </div>

       <div id=”derecha”>
       <h4>Col. Dcha.(right)</h4>
            <p>Esta es la columna derecha que se mostrara en el lado derecho de la pantalla.</p>
            </div>
       </div>

       <div id=pie”>
            (footer)Aquí el contenido de tu pie de página.
       </div>
  </div>
</body>
</html>
    HTML:
    I want to show three columns.
    Why does not work ???
    Can anybody help me?
    Thanks.
     
    piropeator, Jun 21, 2010 IP
  2. Hoxxy

    Hoxxy Active Member

    Messages:
    155
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #2 
    
* {
margin:0;
padding:0;
}

body {
font-size:80%;
font-family: sans-serif;
}

#wrap {
width:900px;
margin: 0 auto;
} 

#header {
height:100px;
background: url(../img/header.jpg) no-repeat top left;
margin: 0 auto;
}

#contenedor {
width: 900px;
margin: 0 auto;
border: 1px solid black;
text-align:justify;
overflow:hidden;
}

#row {
display: table-row;
}

#izquierda {
padding: 10px;
width:150px;
height:500px;
float:left;
background: #EEF;
}

#derecha {
padding: 10px;
width:150px;
height:500px;
float:left;
display:inline;
background:#FEE;
}

#central {
padding: 10px;
width:540px;
height:500px;
float:left;
display:inline;
background:yellow;
}

#pie {
clear:both;
width:900px;
margin: 0 auto;
}
    Code (markup):
     
    Hoxxy, Jun 21, 2010 IP
  3. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #3
    This part of code don't need anithing?

    * {
    margin:0;
    padding:0;
    }

    Because does not work.:(
     
    piropeator, Jun 21, 2010 IP
  4. Hoxxy

    Hoxxy Active Member

    Messages:
    155
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #4 
    * {
margin:0;
padding:0;
}
    Code (markup):
    This is part of the “CSS Reset” theory which helps keep your designs consistent across browsers, though not ideal it does do what its suppost to.

    What you should use really is something like this:
    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    Code (markup):
     
    Hoxxy, Jun 26, 2010 IP