Cuadrar la estructura de la web

FRACTO · 24 Sep 2007, 18:05 · Solicitar retirada

hola a tod@s!!

despues de haber realizado mi primera web con tablas ahora me atrevo con los divs (uy que difisir!!!!!!)

estoy haciendo las capas de cada tema para estructurarlo pero me surgen algunos problemillas (seguro que los he creado yo jejeje).

mi código es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>MEDBEN-Arquitectura web oficial</title>
<META content="Web de Xavier Medina dedicada a los estudiantes de arquitectura por su contenido docente y de ayuda para la carrera. De la misma manera, hay un apartado dedicado a presentar los proyectos realizados durante la misma." name="description">
<META content="xavier, medina, benhamú, arquitectura, arquitecto, proyectos, estudios, ETSAB, badalona" name="keywords">

<link rel="stylesheet" href="plantilla.css" type="text/css" media="all">

</head>

<body>

<div id="global">

<div id="barra-logo">
<h1>aqui va el logo de la web</h1>
</div>

<br class="espaciado1">

<div id="menu-horizontal">
<div id="tema01">PORTADA|</div>
<div id="tema02">NOTICIAS|</div>
<div id="tema03">ARQUITECTO DE LA SEMANA|</div>
<div id="tema04">RECURSOS CAD|</div>
<div id="tema05">LINKS DE INTERÉS|</div>
<div id="tema06">CURRÍCULUM|</div>
</div>

<div id="menu-vertical">

<ul>

<a href="#">Elemento 1

<a href="#">Elemento 2

<a href="#">Elemento 3

<a href="#">Elemento 4

<a href="#">Elemento 5

<a href="#">Elemento 6

</div>

<div id="contenido"> Aqui irá el contenido de la web
</div>

<div id="banner-vertical"> Posible publicidad vertical
</div>

<div id="banner-horizontal">

<h1>Aqui va la publicidad en linea horizontal</h1>
</div>

<div id"pie">
<h3>Web creada por Xavier Medina / e-mail: [correo eliminado]</h3>
</div>
</div>

</body>
</html>
--------------------------------------------

y en la plantilla tengo:

* {margin: 5px; padding: 0px ; border:0px }

body {text-align: center; font-family: Arial,Verdana,Helvetica,Sans-serif; background-color: #E8E8E8}

#global {background-color: black; width:800px; margin: 2px auto}

#barra-logo {width:800px;}

#menu-horizontal {width: 800px;}
#tema01 {background-color: #EE5C42;width: 83px; border: none; float: left; margin: 0px 0px 0px 0px }
#tema02 {background-color: #EE5C42;width: 83px; border: none; float: left; margin: 0px 0px 0px 0px}
#tema03 {background-color: #EE5C42;width: 220px; border: none; float: left; margin: 0px 0px 0px 0px}
#tema04 {background-color: #EE5C42;width: 140px; border: none; float: left; margin: 0px 0px 0px 0px}
#tema05 {background-color: #EE5C42;width: 150px; border: none; float: left; margin: 0px 0px 0px 0px}
#tema06 {background-color: #BDB76B;width: 110px; border: none; float: left; margin: 0px 0px 0px 0px}

#menu-vertical {background-color: #EE5C42 ; width: 150px ; float: left}

#contenido {background-color: #EE5C42 ; width: 600px ; height: 600px; float: right}

#banner-vertical {background-color: #EE5C42 ; width: 150px ; height: 460px; float: left}
#banner-horizontal {background-color: #EE5C42; width: 780px; height: 100px; float: center}

br.espaciado1 {font-size: 7px;}
br.espaciado2 {font-size: 400px;}

h1 {font-size: 1em; color:black; font-weight: bold ; text-decoration: none ; text-align: center; }
h2 {font-size: 0.9em; color:black; font-weight: bold ; text-decoration: none ; text-align: center; }
h3 {font-size: 0.7em; color:black; font-weight: bold ; text-decoration: none ; text-align: center; }

ul {list-style: none; margin:0px 0px 0px 9px; padding: 0px 0px 0px 0px ; }
li {float: left; margin: 0px 7px 0px 0px ; }
li.sub-apartado {text-indent: 20px ;}

a {font-size: 0.9em; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red;}
a:active {color:red; }

--------------------------------------

una vez escrito el codigo, mis dudas son:

- como alinear verticalmente el menu horizontal con el menu vertical y el contenido?

- cuando paso el cursor por el espacio del contenido o del banner, se me marcan los enlaces del menu vertical. A que se puede deber eso?

- como modificar el codigo y la plantilla css para que las opciones del menu horizontal se asemeje a una pestaña?

ya teneis faena!!!!! gracias por adelantado porque seguro que en un plis-plas me lo solucionais!!! :wink:

Yaneth · 24 Sep 2007, 18:24 · Solicitar retirada

Hola

estoy checando tus codigos y te iré comentando segun le vea fallos ok?

para empezar tienes esto:

Elemento 1

<a href="#">Elemento 2

<a href="#">Elemento 3

<a href="#">Elemento 4

<a href="#">Elemento 5

<a href="#">Elemento 6

pero te falta cerrar los "<a href"">

por cada uno que abres tienes que cerrarlos

ve corrigiendo eso
mientras yo sigo checando

FRACTO · 24 Sep 2007, 18:27 · Solicitar retirada

oido cocina!!!

gracias yaneth, el primer paso ya esta listo

ya no me marca los enlaces ahi donde ponga el cursor, sino sobre ellos.

Yaneth · 24 Sep 2007, 18:30 · Solicitar retirada

sorry, pero no entiendo que quieres decier con esto:

- como alinear verticalmente el menu horizontal con el menu vertical y el contenido?

serias tan amable de explicarmelo mejor, (aunque sea con manzanas??)

saludos

FRACTO · 24 Sep 2007, 18:33 · Solicitar retirada

mmmm pues.....

tengo el menu horizontal donde pone portada, noticias...
y luego debajo tengo el menu lateral con elemento 1, elemento 2,... junto con el contenido a su lado.

me gustaria que el menu horizontal quedara alineado por un lado con el menu lateral (derecha) y por el otro con el contenido (izquierda).

ufff vaya follon jejeje

espero que ahora lo entiendas mejor

Yaneth · 24 Sep 2007, 19:11 · Solicitar retirada

OOOO

te refieres al margen??

pues veamos

sigo trabajando con tu codigo

en cuanto te tenga algo te aviso ok?

Yaneth · 24 Sep 2007, 20:04 · Solicitar retirada

para arreglar lo de la alineacion he hecho algunos cambios:

y me ha quedado asi:

#menu-horizontal {width: 780px;}

#tema01 {background-color: #EE5C42;border: none; float: left;padding: 0px 7px 0px 10px; margin:0px}
#tema02 {background-color: #EE5C42;border: none; float: left; margin:0px;padding: 0px 7px 0px 0px}
#tema03 {background-color: #EE5C42;border: none; float: left; margin:0px;padding: 0px 7px 0px 0px}
#tema04 {background-color: #EE5C42;border: none; float: left; margin:0px;padding: 0px 7px 0px 0px}
#tema05 {background-color: #EE5C42;border: none; float: left; margin:0px;padding: 0px 7px 0px 0px}
#tema06 {background-color: #EE5C42;border: none; float: left; padding: 0px 10px 0px 0px; margin:0px}

lo checas y me avisas

saludos

JorGens · 25 Sep 2007, 03:20 · Solicitar retirada

Guau....

....creo que.....

..........hemos creado un monstruo!!!

Yaneth, en poco tiempo te veo dejándo la tienda y dando conferencias sobre cómo crear una página web!!! je je je,

reparaciondepaginas.com je je je, que máquina!

Un besazo y mil gracias por tu colaboración en el foro! :wink:

FRACTO · 25 Sep 2007, 09:37 · Solicitar retirada

hola yaneth

he incorporado los cambios que me comentaste pero no surge efecto.

debe haber algo con los margin seguro jejeje