(Nota: Los enlaces tienen dos w y no tres para salvar la protección)
Hola.
Soy nuevo. Abro un hilo pidiendo ayuda muy a mi pesar, porque creo que es mucha ayuda la que pido:
Tenía una web maquetada con tablas y decidí pasarla a CSS.
Estaba todo bien, hasta que probé otra resolución y vi que no funcionaba nada.
Intenté arreglarlo de mil modos: Pasando tablas a relative, a absolute, a static, poniendo divs en distinto orden etc. Incluso empecé todo de nuevo y llegué al mismo resultado.
También he usado otro código fuente, he sustituido su contenido por el mío y tampoco he conseguido lograrlo. En concreto usé el código fuente de ww.code-sucks.com/css%20layouts/css-3-column-layouts/css-3-column-layout-24/index.php.
He buscado por webs y no he encontrado solución. También he leido hasta la página 10 de este foro y nada de lo que he probado ha servido.
Captura de lo que estoy intentando, hecha con el código que pongo a continuación
wwdremin.com/uge/blog.jpg
Una dificultad son las dos barritas, la del buho y la del sol y la luna. Tuve la idea de hacerlas HR y poner los dibujitos encima, pero eso no me resolvía que unas capas se subieran sobre otras al cambiar la resolución.
Este es el código de la página (He quitado listas interminables de enlaces y demás añadidos para hacerlo más legible.)
Código:
Y esta es la hoja CSS:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="refresh" content="1200;URL=w.blogtellas.blogspot.com"> <!-- If the page is opened 20 mins, it´s reloaded --> <meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>"/> <!-- Page is coded as selected in the options´s menú. Better don´t touch --> <link rel="shortcut icon" href="ww.dremin.com/uge/blog/favicons/scopa.gif"/> <!-- The boring blogspot´s B is changed by other favicon --> <LINK HREF="hoja.css" REL="stylesheet" TYPE="text/css"> <title><$BlogTitle$></title> <!-- ClaSSes cono: It´s made to avoid some errors in some navigators which can´t read the firs classe´s line minilinks: Links under the title. tatles: Titles of tables. body: Body of posts and tables. info: Datetime of every posts. movinfo: Author, number of comments and permalink. tablelinks: Every links on the page not in posts. warn: Warn advice to everybody who entered with a permalink and want to go at the main site. datetime: err title: Main title comentts: Body of comments. a:link: Links in posts a:visited: Visited links a:active: Active links a:hover: Don´t know. Probably the links you´re touching. --> </HEAD> <BODY bgcolor="#000000"> <div id="bandeja"><!-- Capa que incluye a todo lo demás --> <!-- PARTE DE ARRIBA --> <div id="logo"><!-- Capa de logo --> <BR><IMG SRC="ww.dremin.com/uge/blog/logo.gif" WIDTH="400" HEIGHT="168" BORDER="0" ALT="Blogtella al mar para el dios de las palabrotas"></FONT> </div> <div id="misblogs"> <BR><div class="tatles">Mis otros blogs </div> <div class="body"> <A HREF="wwaqueos.blogspot.com">Aqueos</A> <HR> </div> </div> <div id="title" class="title"><!-- Capa de título --> <$BlogTitle$><br><FONT SIZE="-2">para el dios de las palabrotas</FONT> </div> <!-- FIN DE PARTE DE ARRIBA --> <!-- INICIO DE PARTE DE ABAJO --> <div id="barraizq"> <!-- barra de la izq --> <div class="tatles">Mira donde te metes </div> <div class="body"><$BlogDescription$> </div> <BR> <div class="tatles">Sobre el autor </div> <div class="body"><A HREF="<$BlogOwnerProfileUrl$>"><$BlogItemAuthorNickname$></A><BR>Saber más<BR><a href="mailto:rolandodegileadATgmailDOTcom">Contacto</a> </div> <BR> <div class="tatles">Emblogtellados </div> <div class="body"> <A HREF="ww.latabernadelcuervo.blogspot.com/"><B>La taberna del cuervo</B></A> </div> <BR> <div class="tatles">Páginas amigas </div> <div class="body"> <A HREF="ww.gamesajare.com"><IMG SRC="ww.dremin.com/uge/blog/archivos/gajare.png" BORDER="0" ALT=""></A> <HR> </div> <BR> <div class="tatles">En este blog </div> <div class="body"> <A HREF="wwblogtellas.blogspot.com">Link3</A> <HR> </div> <BR> <div class="tatles">Categorías </div> <div class="body"><A HREF="wwtechnorati.com/tag/UGE_personal">Absolutamente personal</A> <HR> </div> <BR> <div class="tatles">Archivos </div> <div class="body"><BloggerArchives> <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a> </BloggerArchives> <BR> </div> </div> <div id="barradch"><!-- Barra de la derecha --> <div class="tatles">Páginas amigas </div> <div class="body"> <A HREF="wwblogtellas.blogspot.com">Link3</A> <HR> </div> <BR> <div class="tatles">Mi blogalaxia </div> <div class="body"><a href="ww.cosasquecompartir.blogspot.com/">Algunas aclaraciones inútiles</a><br> </div> <BR> <div class="tatles">En Que viene el Cocope </div> <div class="body">loren ipsum </div> <BR> <div class="tatles">En Aqueos </div> <div class="body">loren ipsum </div> </div> <div id="botones"><!-- Capa de botones --><BR> <IMG SRC="ww.bloglines.com/images/sub_modern4.gif" WIDTH="80" HEIGHT="15" BORDER="0" ALT="Dirección RSS"> </div> <div class="minilinks" id="barraseparador"> <IMG SRC="ww.dremin.com/uge/blog/im_line.gif" WIDTH="542" HEIGHT="27" BORDER="0" ALT=""><BR> <CENTER><A HREF="ww.fuskio.deviantart.com">Galería del autor</A> Botella al mar Videos del autor</CENTER> <IMG SRC="ww.dremin.com/uge/blog/daynight.gif" WIDTH="542" HEIGHT="16" BORDER="0" ALT=""><BR> </div> <div id="barractr" > <!-- BLOGGER --><!-- ESTO ES CÓDIGO PROPIO DE BLOGSPOT --> <BLOGGER> <div class="datetime"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div> <!-- Fecha --> <div class="tatles"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><!-- Título --> <div class="body"><$BlogItemBody$> <p class="info" align="right"> <a href="<$BlogOwnerProfileUrl$>" target="blank">Postres de <span class="info"><$BlogItemAuthorNickname$></span> </p> </div> <p class="info" align="center"><BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Botellas</a> || <a href="<$BlogItemPermalinkURL$>" title="Link a este hilo">Enlace a este mensaje</a><BR> </BlogItemCommentsEnabled> <ItemPage> <!-- COMIENZO PÁGINA DE COMENTARIOS --> <BlogItemCommentsEnabled> <p class="warn" align="center">Atención: Estás en un mensaje. Para ver el blog pulsa en el título o <A HREF="wwblogtellas.blogspot.com">aquí</A></p> <p class="info" align="center">Comentarios:</p> <BlogItemComments> <p class="datetime" align="center"><$BlogCommentBody$><BR> <$BlogCommentAuthor$> a las <$BlogCommentDateTime$> <HR> </BlogItemComments> <$BlogItemCreate$></p> </BlogItemCommentsEnabled> </ItemPage> <!--FIN DEL CUERPO --> </BLOGGER><!-- ESTO ERA CÓDIGO PROPIO DE BLOGSPOT --> </div> </div><!-- fin capa bandeja --> </BODY> </HTML>
Código:
No estaré en mi casa hasta esta noche, así que quizá pregunteis algo y no pueda responderlo hasta tarde.<style>
.cono { font-family : Verdana;font-size : 09px;color:#333333;}
.minilinks { font-family : Verdana;font-size : 09px;color:#333333;}
.tatles { font-family : Verdana;font-size : 10px;color:#ffffff;font-weight: bold; background-color:#768592;}
.body { font-family : Verdana;font-size : 10px;color:#4D565D; background-color:#E4EAEE;}
.info { font-family : Verdana;font-size : 10px;color:#990000;}
.movinfo { font-family : Verdana;font-size : 10px;color:#990000;font-weight: bold;}
.tablelinks { font-family : Verdana;font-size : 9px;color:#4D565D;}
.warn { font-family : Verdana;font-size : 12px;color:#ffffff;font-weight: bold;}
.datetime { font-family : Verdana;font-size : 12px;color:#768592;font-weight: bold; text-align : right;}
.title { font-family : Verdana;font-size : 24px;color:#ffffff;font-weight: bold; text-align : left;}
.comentts { font-family : Verdana;font-size : 10px;color:#4D565D; background-color:#C0C8CD;}
a:link { font-family : Verdana;color:#4848B7; text-decoration:none; }
a:visited { font-family : Verdana;color:#4848B7; text-decoration:none; }
a:hover { font-family : Verdana;color:#990000; text-decoration:none; }
a:active { font-family : Verdana;color:#990000; text-decoration:none; }
#logo {
position: absolute;
top: 0%;
left: 30%;
width: 400px;
height: 168px;
}
#title {
position: absolute;
top: 198px;
left: 35%;
width: 258px;
height: 100%;
text-align: center;
}
#botones {
position: absolute;
top: 250px;
left: 295px;
width: 50%;
height: 30px;
}
#bandeja {
position: absolute;
top: 10px;
left: 0px;
width: 100%;
height: 100%;
}
#barraizq {
position: absolute;
top: 320px;
left: 20px;
width: 20%;
height: 100%;
}
#barradch {
position: absolute;
top:320px;
right:20px;
width: 20%;
height: 100%;
}
#barractr {
position: absolute;
left: 295px;
top:377px;
width: 42%;
z-index:42;
}
#barraseparador{
position: absolute;
top:280px;
left:230px;
height: 57px;
}
#minilinks {
position: absolute;
top:30px;
}
#misblogs {
position: absolute;
top:20%;
right:20px;
width:20%;
}
#barrabajo {
left:0px;
width:100%;
padding-top: 100%;
}
</style>
Mil millones de gracias.
