MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación > Webmasters - Diseño Web - Programación - Diseño gráfico

Ayuda con el CSS

(1/1)

luis15155:
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:


--- Código: ---#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;
}
--- Fin del código ---

Ahora viene el problema.... que cuando lo cargo a la pagina... asi:


--- Código: ---<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>
--- Fin del código ---

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.

WillyN:
Aquí veo un fallito,

--- Código: ---#contenedor {
margin-top: 0px;
margin-botoom: 0px;
margin-left: auto;
margin-right: auto;
width: 760px;
}
--- Fin del código ---
bottoom debe ser bottom.

De todas formas, en vez de todas esas margenes lo puedes resumir así:

--- Código: ---#contenedor {
margin: 0px auto;
width: 760px;
}
--- Fin del código ---

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.


--- Código: ---<!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>
--- Fin del código ---

Navegación

[0] Índice de Mensajes

Ir a la versión completa