Cuestion para expertos. Como poner cosas a derecha e izquierda del body

Copirally · 6 Abr 2011, 21:43 · Solicitar retirada

hola esta es mi web http://wolowolo.sportsontheweb.net/
como podria poner cosas en la zona blanca? me gustaria poner imagenes de los patrocinadores

Gracias!

Copirally · 6 Abr 2011, 21:45 · Solicitar retirada

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Maitti Racing Elkartea</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="transmenuC.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">

<div id="global">

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/dibujo.gif" width="400" height="200"
alt="Hemen klik egin hasierara itzultzeko"></a></div>
</div>
<div id="curva-superior"></div>
<div id="navegacion">
<ul><li><a title="Elkarteari buruzko informazioa" href=" index.html">Maitti Racing Elkartea</a></li><li><a title="Elkarteak antolatutako ekitaldiak" href=" ekitaldiak.html">Ekitaldiak</a></li><li><a id="desplegable3" href="#">Babesleak</a></li><li><a id="desplegable1" href="#">Multimedia</a></li><li><a id="desplegable2" href="#">Maitti Racing Rally Taldea</a></li><li><a href="index-e.html"><img alt="Español" src="objetos/espana.gif" height="17" width="25" /></a></li>
</ul>
</div>

<div id="contenido3">


<title>Maitti Racing Elkartea</title>
<p></p>
<p>Maitti Racing Elkartea 2010eko Abenduan sortu zen Galdakaon. </p>
<p>Elkartearen helburua automobilismoarekin zerikusia duten ekintzak prestatzea eta Galdakoztarrak eta inguruko biztanleak automobilismo munduari hurbiltzea da.</p>
<p></p>
<p></p>
<p>Maitti Racing Taldeak ibilgailu klasikoen kontzentrazioa antolatu du<p>
<p></p>
<p>klick egin informazio gehiagorako</p>
<p></p>
<p><a href="ekitaldiak.html"><img alt="Click" src="objetos/kartela.jpg" height="360" width="269"/></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

<div id="pie">

<div id="piedos">Los contenidos incluidos en esta web pertenecen a sus autores, por tanto queda prohibida su reproducción en otros medios sin consentimiento específico del </p><img src="objetos/ikurrina.gif" height="17" width="25" /> administrador. On-Line desde: 18/03/2011 Resolución recomendada: 1024x768 <img src="objetos/ikurrina.gif" height="17" width="25" /></div>

</div>

<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>

Hoja de estilos:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color: black ; font-weight: bold ; text-decoration: none ; text-align: center;padding-bottom:5px}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
h3 {font-size: 1.2em; color: white ; font-weight: bold ; text-decoration: none ; text-align: left;padding-bottom:5px}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superiore.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
#cabecera { background-color: white; height: 200px}
#logotipo { float:left; margin-left:200px}
#navegacion {background-color:#CD0000; height:20px ; border-left: black 1px solid ; border-right: black 1px solid; border-bottom: black 1px solid}
#navegacion li {float: left ; list-style:none ; margin: 0px 16px 0px 16px }
#navegacion ul { margin-left: 40px }
#contenido {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: left }
#contenido2 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido2 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: right }
#contenido3 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido3 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: center }
#contenido4 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido4 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: justify }

#menu { width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ;padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie { border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 35px ;}
#pie li {list-style: none ; font-size: 12px }
#piedos {font-size:12px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px; overflow: hidden }
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

.izquierda {text-align:left}
.derecha {text-align:right}
.centrado {text-align:center;}
.justificado {text-align:justify}

lantiga · 6 Abr 2011, 21:54 · Solicitar retirada

a que te refieres con la zona blanca al fondo ?

Copirally · 6 Abr 2011, 22:21 · Solicitar retirada

¿as visto la pagina como queda? todo el fondo lo tengo blanco, la cabecera y el resto que no es el body y eso me gustaria saber si en esa zona puedo poner cosas. dejar el diseño asi pero en la zona blanca poner cosas tambien

lantiga · 6 Abr 2011, 22:39 · Solicitar retirada

En la zona blanca que pertenece a cabecera puedes poner cosa eso si editando las y en lo que seria el global también

Copirally · 6 Abr 2011, 22:40 · Solicitar retirada

me podeis poner un ejemplo como hacerlo? es que soy muy nulo.

lantiga · 6 Abr 2011, 22:42 · Solicitar retirada

La parte blanca de tu cabecera:

<div id="cabecera"> 
  <div id="logotipo"><a href="index.html"><img src="objetos/dibujo.gif" width="400" height="200"
     alt="Hemen klik egin hasierara itzultzeko"></a></div> 
</div>

lantiga · 6 Abr 2011, 22:46 · Solicitar retirada

Ahora solo tienes que crear uno o dos divs o capas para que puedas poner a los esponsors ahí:

ejemplo:
<div id="esponsor-izquierda"></div>

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/dibujo.gif" width="400" height="200"
alt="Hemen klik egin hasierara itzultzeko"></a></div>

<div id="esponsor-derecha"></div>

</div>
(también ahí que definir el estilo en CSS)

Yaneth · 6 Abr 2011, 22:51 · Solicitar retirada

hola

body es el 100 % de tu web, zona blanca y de color (en este caso global)

tu definiste global con 800px de ancho, y dentro el contenido de tu web
bien
si tu quieres dejar la web como está, unicamente ocupar los exedentes con color
pues lo defines en css

body {background-color:blue}

pero si lo que quieres es ponerle contenido, entonces
pon un div que te ocupe el 100% de ancho por ejemplo en el css

#total {width:1000px} (estamos apliando a mil pixeles de ancho, pudieras ponerle 100% pero entonces, deberás modificar toooda la web, ya que la tienes a pixeles no a porcentajes

en el html, antes de abrir global, abres <div id="total"> y lo cierras despues de que cierres global...

ahora tienes 200px mas con los que puedes trabajar
definiendo sus divs

<div id="total">

<div id="izquierdo">
contenido
<div>

<div id="global">
todo lo que tienes actualmente
</div>
<div id="derecho">
contenido
</div>

</div> (estoy cerrando total)

y en el css tienes que definir los divs derecho e izquierdo poniendoles de ancho
los 100px a cada uno que te sobran yo siempre prefiero poner unos 2 px de menos para que quede holgadito jeje

saludos

Copirally · 6 Abr 2011, 23:08 · Solicitar retirada

hola latinga. Lo que pasa es que hay me lo pone junto a la cabecera y a mi me gustaria ponerlo a la derecha e izquierda del body. se puede? como?

Copirally · 6 Abr 2011, 23:12 · Solicitar retirada

ups he contestado sin leer lo tuyo yaneth. jajaja. aber lo intento y te digo. gracias de todos modos a TODOS

Copirally · 6 Abr 2011, 23:24 · Solicitar retirada

la verdad me ha salido un churro. jajaja. lo que queria es mantener la anchura de lo de color tal y como esta ahora y en la zona blanca añadirle los esponsors. aber si se puede hacer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Maitti Racing Elkartea</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="transmenuC.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">

<div id="total">

<div id="izquierdo">
contenido
<div>
<div id="global">

<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/dibujo.gif" width="400" height="200"
alt="Hemen klik egin hasierara itzultzeko"></a></div>
</div>
<div id="curva-superior"></div>
<div id="navegacion">
<ul><li><a title="Elkarteari buruzko informazioa" href=" index.html">Maitti Racing Elkartea</a></li><li><a title="Elkarteak antolatutako ekitaldiak" href=" ekitaldiak.html">Ekitaldiak</a></li><li><a id="desplegable3" href="#">Babesleak</a></li><li><a id="desplegable1" href="#">Multimedia</a></li><li><a id="desplegable2" href="#">Maitti Racing Rally Taldea</a></li><li><a href="index-e.html"><img alt="Español" src="objetos/espana.gif" height="17" width="25" /></a></li>
</ul>
</div>

<div id="contenido3">


<title>Maitti Racing Elkartea</title>
<p></p>
<p>Maitti Racing Elkartea 2010eko Abenduan sortu zen Galdakaon. </p>
<p>Elkartearen helburua automobilismoarekin zerikusia duten ekintzak prestatzea eta Galdakoztarrak eta inguruko biztanleak automobilismo munduari hurbiltzea da.</p>
<p></p>
<p></p>
<p>Maitti Racing Taldeak ibilgailu klasikoen kontzentrazioa antolatu du<p>
<p></p>
<p>klick egin informazio gehiagorako</p>
<p></p>
<p><a href="ekitaldiak.html"><img alt="Click" src="objetos/kartela.jpg" height="360" width="269"/></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div id="derecho">
contenido
</div>
</div>

<div id="pie">

<div id="piedos">Los contenidos incluidos en esta web pertenecen a sus autores, por tanto queda prohibida su reproducción en otros medios sin consentimiento específico del </p><img src="objetos/ikurrina.gif" height="17" width="25" /> administrador. On-Line desde: 18/03/2011 Resolución recomendada: 1024x768 <img src="objetos/ikurrina.gif" height="17" width="25" /></div>

</div>

<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>

hoja de estilos

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color: black ; font-weight: bold ; text-decoration: none ; text-align: center;padding-bottom:5px}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
h3 {font-size: 1.2em; color: white ; font-weight: bold ; text-decoration: none ; text-align: left;padding-bottom:5px}
body {text-align: center }
#global {width:1000px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superiore.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
#cabecera { background-color: white; height: 200px}
#logotipo { float:left; margin-left:200px}
#izquierdo {float:left; height:98px}
#derecho {float:right; height:98px}
#navegacion {background-color:#CD0000; height:20px ; border-left: black 1px solid ; border-right: black 1px solid; border-bottom: black 1px solid}
#navegacion li {float: left ; list-style:none ; margin: 0px 16px 0px 16px }
#navegacion ul { margin-left: 40px }
#contenido {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: left }
#contenido2 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido2 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: right }
#contenido3 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido3 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: center }
#contenido4 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
#contenido4 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: justify }

#menu { width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ;padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie { border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 35px ;}
#pie li {list-style: none ; font-size: 12px }
#piedos {font-size:12px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px; overflow: hidden }
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

.izquierda {text-align:left}
.derecha {text-align:right}
.centrado {text-align:center;}
.justificado {text-align:justify}

Yaneth · 7 Abr 2011, 00:16 · Solicitar retirada

siii
es que.... va de nuevo

body es toooodo el ancho de tu web....
al poner global con un ancho de 800px y meter dentro de ella tu web, estás limitando el body a ese tamaño
lo que tu vez blanco no es otra cosa que lo que te "sobra" pero no puedes escribir nada ahi, porque es fuera de global...
me estoy explicando????

lo que debes hacer es.... crear otro contenedor mas ancho, para que puedas escribir fuera de global

si ya lo intentaste, subelo para verlo

(si no quieres arruinar lo que tienes en la red, crea otro documento, copia fiel de lo que tienes ahorita, y le llamas ayuda.html)

lo subes y me lo muestras

salduos

JorGens · 7 Abr 2011, 01:19 · Solicitar retirada

y con alguna capa flotante y usando el position? no lo he probado pero me da que podrias sacar la capa de la web, quedando en esa zona blanca (hablo de cabeza...)

Agur Copi!

Copirally · 7 Abr 2011, 09:22 · Solicitar retirada

http://wolowolo.sportsontheweb.net/ asi me a quedado

olukarak · 7 Abr 2011, 14:53 · Solicitar retirada

Las curvas son mas estrechas que el contenido. Puedes aumentarlas con copy/paste en el Paint.

Copirally · 7 Abr 2011, 15:02 · Solicitar retirada

ya pero la cosa es que no quiero conseguir esto. jejeje. gracias de todos modos olukarak

Yaneth · 7 Abr 2011, 17:58 · Solicitar retirada

hola

es que le pusiste el ancho de 1000px a global,
y eso no debias tocarlo, ya que el contenido de tu web depende de los 800px que ya tenias

bueno,..... en vista que con divs se complica, lo intentaremos con tablas jeje
y para ahorrarte algo de trabajo, lo he hecho yo
miralo aqui y dime que te parece

http://unpocodemucho.atwebpages.com/ayuda.html

saludos

Copirally · 7 Abr 2011, 20:48 · Solicitar retirada

me gusta. jajajaj. se podra poner las curvas tb no? y los menus desplegables se mantienen?

Yaneth · 7 Abr 2011, 21:02 · Solicitar retirada

claro,

yo lo que hice fué copiar tus codigos y pasarlos a mi pc
la curva no se mira, porque yo no la tengo, ni el archivo de los desplegables

pero si copias el codigo fuente y lo pegas en tu pc, verás que es tu mismo código
solo debes sacar tambien el css
ayuda.css

saludos