15/01/2013, 10:25
|
 | | | Fecha de Ingreso: enero-2008
Mensajes: 77
Antigüedad: 17 años Puntos: 0 | |
| Respuesta: Posicionamiento
Ya he cambiado el width de las dos ultimas columnas y nada. tambien he creado un div que tubiese contenida las dos ultimas columnas y nada de nada.
Aqui te dejo mi codigo completo, igual es otro fallo que yo no veo. Código HTML: <!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Práctica final - Creativa</title>
<link rel="stylesheet" type="text/css" media="all" href="estilos/style.css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<header class="principal">
<div class="fila">
<a href="#" class="logo_principal">Logo</a>
<div class="conectar">
<a href="#" class="social" target="_blank">
<img src="img/facebook.png"/>
<img class="rollover" src="img/facebook_hover.png"/>
</a>
<a href="#" class="social" target="_blank">
<img class="rollout" src="img/rss.png"/>
<img class="rollover" src="img/rss_hover.png"/>
</a>
<a href="#" class="social" target="_blank">
<img class="rollout" src="img/twitter.png"/>
<img class="rollover" src="img/twitter_hover.png"/>
</a>
</div>
<nav class="navegacion_principal">
<ul>
<li><a href="#">Opcion</a></li>
<li><a href="#">Opcion</a></li>
<li><a href="#">Opcion</a></li>
<li><a href="#">Opcion</a></li>
</ul>
</nav>
</div>
</header>
<div class="cuerpo">
<div class="sec1">
<ul>
<li><a href="#">opcion</a></li>
<ul>
<li><a href="#">opcion</a></li>
</ul>
<ul>
<li><a href="#">opcion</a></li>
</ul>
<li><a href="#">opcion</a></li>
<ul>
<li><a href="#">opcion</a></li>
</ul>
<li><a href="#">opcion</a></li>
<ul>
<li><a href="#">opcion</a></li>
</ul>
</ul>
</div>
<div class="sec2">
<label for="busqueda2">Búscar</label>
<input type="search" name="busqueda2" id="busqueda2" results="5"/>
</div>
<div class="sec3">
<p>texto
</p>
</div>
</div>
<div class="noticias">
<section>
<article class="noticia_primera">
<p>texto</p>
</article>
<div class="prueba">
<article class="noticia_segunda">
<p>texto</p>
</article>
<article class="noticia_tercera">
<p>texto</p>
</article>
</div>
</section>
</div>
<footer>
<div class="drch">
<div class="direccion">
<a class="logo_inferior" href="#">Práctica final - Diseño Web</a><br />
<p>55555 Calle online <br />
Numero 555-555
Mi casa España 22222</p>
</div>
<div class="tel">(951) 555-555</div>
</div>
</footer>
</body>
</html>
Código:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ul, li, article, footer, header, nav, section
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, footer, header, nav, section
{
display: block;
}
body
{
font: 25px sans-serif; *font-size:small;
}
html
{
width: 100%;
background: #D9D9D9 scroll;
overflow-y: scroll;
z-index: 500;
}
a, a:hover, a:active
{
outline: none;
}
ul
{
margin-left: 2em;
}
nav ul, nav li
{
margin: 0;
list-style:none;
list-style-image: none;
}
a:link
{
-webkit-tap-highlight-color: #a7dbd8;
}
body
{
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
font-style: normal;
font-size:15px;
line-height:21px;
color:#0A242D;
}
h1, h2, h3, h4, h5, h6
{
font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif
}
a, a:active, a:visited
{
color: #3299bb;
text-decoration:none;
}
a:hover
{
color: #000054;
text-decoration:underline;
}
/** Header**/
.fila
{
width: 100%;
margin: 0;
overflow: hidden;
}
header.principal
{
background:url(../img/1.jpg) repeat;
max-width: 100%;
width: 88;
height:90px;
border:thin solid #fff;
border-width:0 0 1px;
margin:30px 30px 30px 30px;
padding:20px;
z-index:200;
position: center;
}
.fondo
{
width: 800px;
height: auto;
z-index: 999;
}
a.logo_principal
{
width:259px;
height:50px;
float:left;
background:transparent url(../img/logo.png) no-repeat 0 0;
cursor:pointer;
text-indent:-9999px;
line-height:0;font-size:0;
text-decoration:none;
margin:0;
padding:0 50px 0 0;
}
nav.navegacion_principal
{
clear: both;
height:50px;
float:left;
font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
font-size:20px;
color:#0A242D;
line-height:42px;
font-weight:400;
margin:15px 0 0 -22px;
}
nav.navegacion_principal ul li
{
clear:right;
float:left;
margin:0 0 0 30px;
}
nav.navegacion_principal ul li a
{
text-decoration:none;
color:#0A242D;
}
nav.navegacion_principal ul li a:hover
{
color:#0000F0;
text-decoration:none;
}
.conectar
{
padding:0;
float:right;
margin:20px 0 0;
clear:none;
}
.conectar a.social
{
float:right;
font-size:0;
text-decoration:none;
text-indent:-9999px;
margin:0 10px 0 0;
outline:none;
display:block;
position:relative;
padding:0;
}
.conectar a:hover
{
background-color: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.conectar img
{
width:100%;
height: auto;
display:block;
}
.conectar img.rollover
{
position:absolute;
top:0;
left:0;
opacity:0;
}
.conectar a:hover img.rollover
{
opacity:1;
}
.conectar a:hover img.rollout
{
opacity:0;
}
/** Izquierda **/
.cuerpo
{
clear: left;
float: left;
border: 1px solid red;
width: 190px;
height: 100%;
margin: 0 30px 0;
}
.sec1 ul li
{
list-style-image: url(../img/kuran.png);
width: 100%
}
/* * Contenido **/
.noticias
{
margin-left: 220px;
width: 80%;
height: 920px;
}
.noticia_primera
{
float: left;
width: 25%;
height: auto;
height: 920px;
}
.noticia_segunda
{
float: left;
width: 20%;
height: 460px;
margin-left: 10px;
}
.noticia_tercera
{
float: left;
width: 20%;
height: 460px;
margin-left: 10px;
}
|