Hola, tengo un esquema muy simple pero no funciona bien y, por mucho que lo intento, no consigo arreglarlo.
Al visualizar el código en firefox, los div RIGHTHEADER y REGISTRY salen debajo del logo en vez de a su derecha y el CONTENT aparece también con una altura muy pequeña.
Alguien es capaz de detectar el fallo o hacerme las correcciones que vea? es que es mi primer diseño y estoy un poco perdido.
GRACIAS (cualquier consejo será bien recibido)
Código 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>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<div id="header">
<div id="logo"><img src="images/logo_bonardi_varona.png"></div>
<div id="rightheader">rightheader</div>
<div id="registry">registry</div>
</div>
<div id="content">
<div id="left">content</div>
</div>
<div id="breadcrumbs">breadcrumbs</div>
<div id="footer">
<div id="address">address</div>
<div id="edigital">edigital</div>
</div>
</div>
</body></html>
Código:
@charset "UTF-8";
* {margin:0; padding:0;}
/* reset styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
/* end reset styles */
body {background: url(images/bg_BonardiVarona.png) repeat-x}
<!--left: 50%;
margin-left: -100px /*hay que restar la mitad del ancho*/-->
#container {
width: 925px;
height: 550px;
margin: 0% auto auto auto;
border:1px solid black;
}
#header {
position: relative;
width: 900px;
height: 140px;
margin: 0% auto auto auto;
border: 1px solid black;
overflow: hidden;
}
#logo {
position: relative;
width: 218px;
height: 110px;
padding: 5px 0px 0px 0px;
border: 1px solid black;
float: left;
}
#rightheader {
position: relative;
width: 500px;
height: 118px;
padding: 5px 0px 0px 0px;
border: 1px solid black;
float: right;
background: #F00;
}
#registry {
position: absolute;
width: 10em;
height: auto;
padding: 5px;
border: 1px solid black;
background: #F00;
right: 5%;
}
#content {
width: 900px;
height: 350px;
border: 1px solid black;
background: #9F3;
margin: auto;
overflow: hidden;
}
#footer {
margin: auto;
width: 900px;
height: 50px;
border: 1px solid black;
}
#address {
float: left;
margin: 0px;
height: auto;
padding: 5px 0px 0px 0px;
float: left;
background-color: #09F;
}
#edigital {
float: right;
height: auto;
padding: 5px 0px 0px 0px;
background-color: #09F;
}
#breadcrumbs {
position: absolute;
width: 200px;
height: auto;
padding: 5px 0px 0px 0px;
border: 1px solid black;
background-color: #09F;
left: 50%;
margin-left: -100px /*hay que restar la mitad del ancho*/
}