Foros del Web » Creando para Internet » CSS »

Alinear div junto a logo

Estas en el tema de Alinear div junto a logo en el foro de CSS en Foros del Web. Buenas, pués resulta que estoy intentando hacer algo que no consigo... Lo que quiero es alinear el div "contenedor_acceso" justo al lado del logo y ...
  #1 (permalink)  
Antiguo 28/02/2011, 12:55
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Alinear div junto a logo

Buenas, pués resulta que estoy intentando hacer algo que no consigo... Lo que quiero es alinear el div "contenedor_acceso" justo al lado del logo y en la parte de arriba.. He probado con float e incluso a meterlo en el mismo div en el que está el logo pero nadda... ¿Alguien sabe?

Código:
Cita:
<!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>Documento sin título</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#contenedor {
background-color: #FFF;
width: 990px;
}
#header {
width: 990px;
}
#contenedor_menu {
width: 448px;
float: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F7C943;
padding-left: 15px;
}
.menu_header {
float: left;
margin-right: 10px;
}
.menu_header a {
float: left;
padding-top: 7px;
padding-bottom: 4px;
padding-left: 7px;
padding-right: 7px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-image: url(bgmenu.png);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
}
.menu_header a:hover {
background-image: url(bgmenusubs.png);
}
#contenedor_contenido {
width: 990px;
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#contenedor_noticias {
width: 745px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
background-image: url(bgnewsheader.png);
height: 25px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-left: 5px;
padding-top: 7px;
text-shadow: 0.1em 0.1em #333;
}
.noticias_contenido {
width: 740px;
margin-right: auto;
margin-left: auto;
background-image: url(bgnoticias.png);
padding-left: 5px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
padding-right: 5px;
}
#noticias_footer {
background-image: url(bgfooternews.png);
height: 31px;
width: 750px;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
}
#footer {
width: 990px;
background-image: url(footer.png);
height: 177px;
color: #333;
}
#contenedor_acceso {
width: 400px;
float: right;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="header"><img src="header.png" width="430" height="151" />
<div id="contenedor_acceso">Colocar aquí el contenido para id "contenedor_acceso"</div>
</div>
<div id="contenedor_menu">
<div class="menu_header"><a href="#">Noticias</a></div>
<div class="menu_header"><a href="#">Descargas</a></div>
<div class="menu_header"><a href="#">Eventos</a></div>
<div class="menu_header"><a href="#">Comunidad</a></div>
<div class="menu_header"><a href="#">Chat</a></div>
</div>
<div id="contenedor_contenido">
<div id="contenedor_noticias">Noticia Nº1 #Acceso a la web, code:3598x0</div>
<div class="noticias_contenido">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
<div id="noticias_footer"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Saludos y gracias.
  #2 (permalink)  
Antiguo 28/02/2011, 13:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alinear div junto a logo

Pues hágale un sitio además de flotarlos.
Cita:
#contenedor {
width: 990px;
}
#header {
width: 990px;
}
#contenedor_acceso {
width: 400px;
}
¿Cómo quiere colocar adyacentes dos elementos si el primero de ellos (header) es tan ancho como su contenedor?
  #3 (permalink)  
Antiguo 28/02/2011, 13:43
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Alinear div junto a logo

El ancho del header lo había modificado previamente y seguía sin funcionar así que opté por ponerlo igual de ancho que el contenedor y dentro del mismo el contenedor_acceso, pero sigue sin funcionar :s

Etiquetas: alinear, logo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:50.