ayuda con diseño html

Iniciado por young0320, 30 Enero 2012, 22:45 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1 2
Acciones del Usuario

young0320

30 Enero 2012, 22:45 PM
Buenas,

Resulta que estoy intentado hacer el diseño estático de un blog, llega un punto que he tratado de colocar una noticia principal que ocupa la mitad y la otra mitad con otras dos noticias secundarias, pero lo que me ocurre es que se me salen las noticias secundarias de la página, y no acierto a ver por qué.

El código del index.html es el siguiente

Código [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 8</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link type="text/css" rel="stylesheet" href="miblog/css/estructura.css"/>
<link type="text/css" rel="stylesheet" href="miblog/css/jMenu.jquery.css" />
<script type="text/javascript" src="miblog/js/jquery.js"></script>
<script type="text/javascript" src="miblog/js/jMenu.jquery.js"></script>
<script type="text/javascript" src="miblog/js/init.js"></script>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="menu">
    <ul id="jMenu">
<li><a class="fNiv">Category 1</a>
<ul>
<li class="arrow">&nbsp;</li>
<li><a>Category 1.1</a></li>
<li><a>Category 1.2</a></li>
<li><a>Category 1.3</a></li>
<li><a>Category 1.4</a></li>
</ul>
</li>
<li><a class="fNiv">Category 2</a>
<ul>
<li class="arrow">&nbsp;</li>
<li><a>Category 2.1</a></li>
<li><a>Category 2.2</a></li>
<li><a>Category 2.3</a></li>
<li><a>Category 2.4</a></li>
</ul>
</li>
<li><a class="fNiv">Category 3</a>
<ul>
<li class="arrow">&nbsp;</li>
<li><a>Category 3.1</a></li>
<li><a>Category 3.2</a></li>
<li><a>Category 3.3</a></li>
<li><a>Category 3.4</a></li>
</ul>
</li>
</ul>
</div>
<div id="miga">miga</div>
<div id="wrapper">
<div id="content">
<div id="not_portada1">
<div class="titulo1">
<p>Esto es el titulo de la noticia 1 </p>
</div>
</div>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>

<div class="not_portada2">
<div class="titulo2">
<p>Este va a ser el titulo de la noticia 2 </p>
</div>
<p>Aqui va el contenido de la noticia 2 sdgihsadgaísvdnvbaouvúbvsdhsñdkvabbbbbbbvdaschbhvbhñdssssssra</p>
<p>ñsdihynbgarbgtrseñfdzvafdhnmuvbaerñbauakvjbavebrkjavborejbovaervrebaojñvrbñehzñv yhrebñvouñovbuv </p>
</div>
<div class="not_portada2">
<div class="titulo2">
<p>Y este sera el titulo de la noticia 3</p>
</div>
<p>Y el contenido de la noticia 3 seria estesañgduhsjvbgañjkhsbgfvujaskbgfkjsdabgfvskhabdvhkbdvbab</p>
<p>sadfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggfds</p>
</div>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>

Y el código de estructura.css es este:

Código [Seleccionar]
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}
div#menu  {background: none repeat scroll #BDBDBD;height: 50px;width: 100%;}
div#miga{background: none repeat scroll #8FBC8F;}
html, div, map, dt, isindex, form{display: block;}
div#not_portada1{clear: left; width: 100%; margin-bottom: 40px;}
.titulo1 {font-weight: bold; font-size: large;}
.titulo2 {font-weight: bold; margin-top: 40px;}
.not_portada2 {clear: left; width: 50%; display: table-cell; padding: 0px 15px 0px 15px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:950px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 5px 150px 20px 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-950px}
div#footer{clear:left;width:100%}

Si alguien pudiese decirme algo para solucionarlo se lo agradecería mucho, pues me he quedado estancado.

Un saludo,
Muchas gracias.

Shell Root

#1
30 Enero 2012, 22:52 PM
1. No se entiende nada.
2. Deberías de poner una imagen actual y otra de como lo quieras.
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

young0320

#2
30 Enero 2012, 23:01 PM Ultima modificación: 30 Enero 2012, 23:03 PM por young0320
Disculpa mi escasa claridad, si puedes ser más específico con lo que no se entiende puedo intentar explicarlo mejor.

La tengo en webhost, no se si está permitido poner el enlace aquí para que puedan ver



alguien puede hacer el favor de informarme si esta permitido

Anteros

#3
30 Enero 2012, 23:05 PM
Hola,

De acuerdo con Shell Root, pero...

has intentado probar con un frameworkCSS para maquetar?? Podrias intentar con grid960 o con blueprint, ambos muy facil de aprender, configurar y adaptar a tus necesidades  ::). Cualquier duda nos haces saber  ;)

salu2

young0320

#4
30 Enero 2012, 23:10 PM
De acuerdo agradezco mucho la información facilitada.

Lamentablemente veo que casi lo tengo, por ello quería si fuese posible arreglarlo,

El estado lo pueden http://www.velocidadpordefecto.site88.net

Simplemente se trata de meter el texto creo que me entenderan al verlo

Shell Root

#5
30 Enero 2012, 23:39 PM
El texto de la noticia 3? y si le pones un valor de ancho para la capa?
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

young0320

#6
30 Enero 2012, 23:46 PM
Si te refieres a .titulo2 y .not_portada2, porque ya estan dentro del content al igual que la noticia 1, y la noticia 1 no se sale.

#!drvy

#7
30 Enero 2012, 23:46 PM Ultima modificación: 30 Enero 2012, 23:50 PM por drvy | BSM
Hola, en el css pon

Código (css,6,7,8) [Seleccionar]
.not_portada2 {
   clear: left;
   display: table-cell;
   padding: 0 15px;
   width: 50%;
   word-wrap: break-word; /* Que se rompan las palabras largas */
   max-width: 300px; /* maximo 300px de ancho por cada 1 */
   _width:300px; /* IE arreglo */
}

PD: Intenta no usar porcentajes para elementos específicos, porque en ningún navegador son exactos.

Saludos

Anteros

#8
30 Enero 2012, 23:55 PM Ultima modificación: 30 Enero 2012, 23:58 PM por Anteros
a mi en lo personal no me gusta "jugar" con los anchos o altos de algunos divs en las paginas poniendoles anchos (%,px,etc) hasta q encuadren xq tarde o temprano algo nos hace q ese ancho( q hasta ahora funcionaba) se tenga q volver a acomodar hasta regularlo nuevamente; por eso la recomendacion de utilizar frameworksCSS para la maquetacion... tomalo como buen consejo, veras lo facil y practico q es y te servira para tus futuros trabajos, ahorrandote mucho tiempo y dolores de cabeza en cosas como este  ::)

bueno viendo el codigo de la pagina q colgaste hice algunos cambios.

1. modifique algo del css

Código [Seleccionar]

p{margin:0 10px 10px;text-align:justify;}

.not_portada2 {
float: left;
width: 45%;
/*border:1px solid red;*/
padding: 0px 15px 0px 15px;
}


2. modifique y agrege algo de code en el html

Código [Seleccionar]

<div class="not_portada2">
         <div class="titulo2">
           <p>Este va a ser el titulo de la noticia 2 </p>
         </div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae rutrum nisi. Curabitur quis erat libero, eu euismod ligula. Quisque malesuada mauris sed arcu placerat sed consectetur nisi luctus. Mauris ac lorem quam, ac dictum nunc. Nullam eu purus et leo rutrum hendrerit vel et diam. Pellentesque scelerisque, metus at blandit pharetra, turpis leo sagittis dolor, id malesuada est quam eget neque. Proin ante turpis, hendrerit id mattis ac, aliquet sed felis. Praesent vestibulum, nulla ut interdum ultricies, nisl felis fringilla magna, tristique porta odio nunc vitae tellus. Mauris quis tellus tellus, id euismod nisl. Nam accumsan lacus at massa mollis eu fringilla purus vulputate. Nulla posuere augue arcu, nec pellentesque libero. Donec auctor ligula sed lectus vehicula elementum. Etiam volutpat porta nibh, ut tempus felis bibendum id. Pellentesque condimentum congue urna quis consequat.
           
           Maecenas scelerisque, felis et dapibus lobortis, neque orci cursus sapien, et sagittis dui ipsum non sapien. Phasellus varius sem sit amet mauris accumsan lacinia. Proin id porttitor lectus. Duis vehicula nisl accumsan justo varius tristique. Praesent venenatis nulla vel dui fringilla nec lacinia nisi ultrices. Etiam a mi nec felis scelerisque tempor. Phasellus semper, metus vel cursus ullamcorper, arcu nunc placerat nulla, vitae placerat justo felis in purus. Pellentesque aliquet congue sapien et elementum. Nullam pellentesque metus et ante dignissim nec feugiat velit rutrum. Suspendisse pulvinar gravida nisl, eu sollicitudin ligula fringilla non. Pellentesque porta scelerisque metus vel ultrices. Donec fringilla ullamcorper est. Vivamus fringilla ullamcorper elit, eu consequat risus bibendum quis. Suspendisse id dui et sem congue pellentesque.
           
           Aliquam rhoncus lectus quis augue pellentesque consectetur. Sed dignissim mi faucibus elit consectetur pharetra. Proin tincidunt condimentum hendrerit. Nam nec mi elementum sem facilisis ultrices eu vitae mauris. Nunc aliquam mattis elementum. Cras vel pharetra erat. Sed blandit felis sed ipsum scelerisque auctor. </p>
       </div>
       <div class="not_portada2">
         <div class="titulo2">
           <p>Y este sera el titulo de la noticia 3</p>
         </div>
         <p>Integer non sem sapien, eu elementum felis. Pellentesque quis mollis nibh. Vestibulum in auctor nibh. Aenean eu diam eu ante dictum suscipit vel eget magna. Etiam eu dui in magna laoreet elementum. Quisque urna risus, malesuada et eleifend ut, dapibus eget magna. Nullam rutrum ultricies sapien vel posuere. Pellentesque interdum mattis tempus. Nunc metus lectus, blandit sed malesuada nec, adipiscing eu diam. Fusce commodo enim nec leo faucibus mattis. Quisque aliquam, turpis id porttitor fringilla, massa turpis feugiat massa, eu vulputate odio nisl ac elit. Aenean id magna arcu, quis ullamcorper magna.
           
           Vivamus ornare feugiat dui, nec auctor tortor congue eu. Sed faucibus mollis libero, vel tincidunt nisl condimentum aliquet. Maecenas in augue augue. Mauris eu orci nulla. Cras fermentum rhoncus erat, vel viverra purus mollis congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, nulla ut fermentum volutpat, urna lorem tempus diam, sit amet auctor nisl ipsum et tellus. Sed porttitor sapien bibendum sapien dictum porta. Nam nec augue vitae justo venenatis volutpat. Maecenas aliquet, lorem vitae feugiat placerat, nisl orci convallis arcu, ac cursus diam felis quis augue. Proin iaculis dignissim egestas. Ut dignissim lorem vel enim luctus eu pulvinar massa euismod. Suspendisse purus urna, scelerisque ut posuere id, consequat quis dolor. Integer non nisl metus. Maecenas nunc sapien, viverra sed suscipit et, varius quis lorem. </p>
       </div>
       <div style="clear:both"></div>


3. en el ejemplo q pusiste no existen palabras tan grandes al menos en castellano  :P (entiendase palabra com una sucesion de letras continuas sin espacio en blanco). Recuerda q los espacios en blanco limitan los textos dentro de un <p>

Como veras puse un texto grande (lorem ipsum) a cada noticia y encaja a la perfeccion.

Te dejo una imagen para q veas el resultado



young0320

#9
31 Enero 2012, 00:05 AM
Ya veo, ambas soluciones funcionan perfectamente, os lo agradezco mucho, mil gracias por la información y por la disposición que mostráis para ayudar a los demás.

Saludos
Imprimir
Ir Arriba Páginas1 2
Acciones del Usuario