Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: luis15155 en 16 de Marzo de 2008, 06:59:01 am
-
Ya estoy aprendiendo a manejar las hojas de estilos... por ejemplo explicare q es lo q hago y haber si me dicen donde esta el problema... Ok.
Definiendo los ID:
#contenedor {
margin-top: 0px;
margin-botoom: 0px;
margin-left: auto;
margin-right: auto;
width: 760px;
}
#head {
height: 120px;
width: 760px;
text-align: center;
}
#contenido {
width: 760px;
}
#cont_left {
width: 168px;
float: left;
}
#mi_menu {
(Aca hago los para los menus tipo: #menuv; #menuv a; #menuv ul, li; etc...)
}
#mi_contenido {
width: 592px; //la diferencia de los 760-168
padding: 4px;
}
#foot {
width: 760px;
height: 50px;
}
Ahora viene el problema.... que cuando lo cargo a la pagina... asi:
<div id=contenedor>
<div id=head >Aca mi encabezado</div>
<div id=contenido>
<div id=mi_menu ></div><div id=mi_contenido ></div>
</div>
<div id=foot >Aca va el pie de pagina...</div>
</div>
El problema q como mi menu hago q se repita... varias veces... esto hace q se mueva el ID foot hacia un lado y no se como fijarlo y q no se mueva al lado del ID contenido. Alguien me da una manita... y de los codgios q he puesto, hay algo q hago mal??? O esta bien... pregunto por q todo esto lo he aprendido empiricamente....
Muchas Gracias... Luis.
-
Aquí veo un fallito,
#contenedor {
margin-top: 0px;
margin-botoom: 0px;
margin-left: auto;
margin-right: auto;
width: 760px;
}bottoom debe ser bottom.
De todas formas, en vez de todas esas margenes lo puedes resumir así:
#contenedor {
margin: 0px auto;
width: 760px;
}
Como con el ejemplo que has puesto apenas se puede ver lo que quieres hacer pero me hace entender que quieres tener un diseño con una columna a la izquierda te pongo un ejemplo de una base para ir trabajando. Es un ejemplo hecho por un amigo que es un profesional en esto.
Tiene una cabecera, una parte central, una columna a la izquierda y un pie de página.
Cópialo, guárdalo como un archivo .html, ábrelo en un navegador y en un editor de texto y échale un vistazo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Left Column test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#header_n_content {
margin-left:12em;
}
.wrapper {
width:100%;
float:right;
background:#FCC;
}
h1 {
padding:0.25em;
background:#FFC;
}
#content {
padding:0.5em;
}
#sidebar {
float:left;
width:11em;
padding:0.5em;
background:#CCF;
}
#footer {
clear:both;
background:#CFC;
text-align:center;
padding:8px;
}
a,
a span {
display:block;
height:24px;
width:128px;
}
a {
color:#FFF;
background:#888;
font:normal 16px/24px arial,helvetica,sans-serif;
}
a span {
position:relative;
margin-top:-24px;
background:url(images/button.png) 0 0 no-repeat;
}
a:active span,
a:focus span,
a:hover span{
background-position:0 -24px;
}
</style>
</head><body>
<div id="header_n_content">
<div class="wrapper">
<h1>Logo goes here<span></span></h1>
<div id="content">
<h2>Un título</h2>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
</div>
</div>
</div>
<div id="sidebar">
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
<p>Some test content</p>
</div>
<div id="footer">
Test footer
<a href="#">Home<span></span></a>
</div>
</body></html>