Jump to content
Cuéntanos cómo lo haces (participa en la Portada) ×

problemas y dudas div en html

donnetto017

By donnetto017,
in Tejedores de webs

 Share Followers 0

Recommended Posts

donnetto017

donnetto017 0

Posted
Posted

Hola buenas tardes. Es mi primer comentario en este foro y ya voy a empezar a saco..

os presento mi web:

 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">

.auto-style1 {
	background-color:LightSalmon;
	background-repeat: no-repeat;
}	.auto-style2 {
	background-color:Gainsboro;
	background-repeat: no-repeat;
}	.auto-style3{
	background-color: aqua;
	background-repeat: repeat;
}
}

		
</style>
</head>


<body style="background-color:Pink;background-attachment:fixed;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;">


	<div id="fijos" style="margin-left:auto;margin-right:auto;width:998px;margin-bottom:0px;top:0px">
		
		<div id="banner" style="position:fixed; margin-left: auto; margin-right: auto; width: 998px; height: 200px; z-index: 4;top: 0px;" class="auto-style1"></div>
		<div id="taskbar" style="position:fixed; margin-left: auto; margin-right: auto;width: 998px; height: 40px; z-index: 4;top: 200px;" class="auto-style2"></div>
		<div id="entrelinea" style="position:fixed;margin-left:auto;margin-right:auto;width:998px; height:10px;"></div>
		</div>
				
<div id="mov" style="margin-left:auto;margin-right:auto;width:998px;height:850px;margin-top:250px;z-index:2;">
	<div id="contenido" style="width:998px;height:auto; background-color:honeydew;">
							<br>Este es un texto de pruebaEste es un texto 
							de pruebaEste es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de prueba<br>
							Este es un texto de prueba<br>Este 
							es un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de prueba<br>
							Este es un texto de prueba<br>Este 
							es un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de prueba<br>
							Este es un texto de prueba<br>Este 
							es un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de prueba<br>
							Este es un texto de prueba<br>Este 
							es un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de 
							pruebaEste es un texto de prueba<br>Este es 
							un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de prueba<br>Este 
							es un texto de prueba<br>Este es un texto de 
							prueba<br>Este es un texto de pruebaEste es 
							un texto de pruebaEste es un texto de 
							pruebaEste es un texto de pruebaEste es un 
							texto de pruebaEste es un texto de prueba<br>
						</div>
	</div>
</div>
</body>

</html>

 

De momento esta con colores, para saber donde está cada cosa, antes de rellenar.

Mi cosa es, me gustaria añadir dos <div></div> a cada lado del contenido, ocupando "margin-top:0px;margin-bottom:0px;" y que sean de width fijo, para poder insertar imagenes verticales (logicamente). Cuando intento ponerlas, id=banner e id=taskbar desaparecen, o se ponen en el margen izquierdo...

 

Otra cosa es que el id=mov, me gustaria que desapareciera 10px mas abajo del taskbar, para que me entendais lo que me refiero es que no quiero que el scroll legue hasta el margen superior, sino hasta 10px debajo del taskbar, sobre unos 250px serian..

 

Luego.. mi ultima pregunta es, que me aconsejais para que detecte con que dispositivo me conecto? ejemplo:

Lo conecto con un pc, resolución 1440x900 o superior (windows y mac), enviara a un .html con el codigo que habeis visto arriba. si la resolucion es como la tablet android y ipad), mandara a otro .html adaptado para su tamaño, y lo mismo para smarthphones.

 

Alguien podria ayudar? ya que con java y css no tengo mucha experiencia.

Gracias, saludos

Link to post
Share on other sites
Mr_Joker

Mr_Joker 0

Posted
Posted (edited)

Otra cosa es que el id=mov, me gustaria que desapareciera 10px mas abajo del taskbar, para que me entendais lo que me refiero es que no quiero que el scroll legue hasta el margen superior, sino hasta 10px debajo del taskbar, sobre unos 250px serian..

 

Para eso en id="entrelinea" deberías colocar esto:

position:fixed;
margin-left:auto;
margin-right:auto;
width:998px;
height:10px;
background:pink;
margin-top:-10px;

 

Luego.. mi ultima pregunta es, que me aconsejais para que detecte con que dispositivo me conecto? ejemplo: Lo conecto con un pc, resolución 1440x900 o superior (windows y mac), enviara a un .html con el codigo que habeis visto arriba. si la resolucion es como la tablet android y ipad), mandara a otro .html adaptado para su tamaño, y lo mismo para smarthphones.

 

Con una pequeña búsqueda puedes encontrarlo: link

 

Mi cosa es, me gustaria añadir dos <div></div> a cada lado del contenido, ocupando "margin-top:0px;margin-bottom:0px;" y que sean de width fijo, para poder insertar imagenes verticales (logicamente). Cuando intento ponerlas, id=banner e id=taskbar desaparecen, o se ponen en el margen izquierdo...

 

Según entiendo es a modo de banners laterales ¿no? Mantener la estructura como está y añadir en los dos laterales unos baners verticales?

Si es eso deberías colocar 3 divs en línea. Flota los 3 divs manteniéndolos en una sola línea (float:left).

Luego creas un div que contenga a los 3 divs (como contenedor) y lo centras con 

margin: 0 auto;

 

Cerrando después de los 3 divs con: 

<div style="clear:both"></div>

 

 

De esta manera los tendrás centrados y en línea. Si quieres que los 2 divs de los laterales tengan "width" específico y "height" el que sea colócale "height: auto;"

 

Espero que te haya servido.

Un saludo y bienvenido al foro

Edited by Mr_Joker
Link to post
Share on other sites
  • 2 weeks later...
donnetto017

donnetto017 0

Posted
  • Author
Posted (edited)

Gracias por tu respuesta y a la vez disculpa por mi retraso en responder.

He estado probando lo que decias del dema hacer tres divs dentro de un contenedor, pero el resultado no es el deseado.

 

Si que habia pensado hacer un div contenedor donde este todo (no podria ser eso el body?) y estructurar de esta manera:<br><br><br>-

-id="contenedor" style="width:1240px; height:(por definir);margenes:centrado en general;(fijo o movil aun por determinar);"
-id="bannerizquierdo" style="width:121px;height:(por definir);margenes:izquierda(sobre contenedor);posicion:(aun por determinar);"
-id="bloqueweb" style="width:998px;height:(por definir);margenes:centrado(sobre contenedor);posicion:fijo;" <--aqui dentro estaría el 
banner y taskbar fijos tambien, y el contenido/texto, movil.
-id="bannerderecho" style="width:121px;height:(por definir);margenes:derecha(sobre contenedor);(fijo o movil aun por determinar);"

 

sino lo que habia pensado era que el body fuera el contenedor, banners verticales igual, y bloqueweb llamarle contenedor.

 

Saludos y espero haberme expresado bien ejje (esta vez contestare mas rapido)

Gracias!

 

 

 

Mr_Joker
Edited by donnetto017
Link to post
Share on other sites
a_martin01

a_martin01 0

Posted
Posted

No, aparte del body, dentro de él, tienes que hacer otro div que contenga los tres div's que tienen que ir juntos(banner, contenido, banner) y darles float:left como te a dicho Mr_Jocker y se colocarán automáticamente uno al lado del otro.

Link to post
Share on other sites
donnetto017

donnetto017 0

Posted
  • Author
Posted

No, aparte del body, dentro de él, tienes que hacer otro div que contenga los tres div's que tienen que ir juntos(banner, contenido, banner) y darles float:left como te a dicho Mr_Jocker y se colocarán automáticamente uno al lado del otro.

 

 

por eso decia, ya que he probado eso y no me ha salido nada bueno.. aun asi no dejo de intentarlo.

pocierto eso del "clear:both" para que es, o donde se pondria exactamente?

 

Gracias por contestar

Link to post
Share on other sites
donnetto017

donnetto017 0

Posted
  • Author
Posted

Despues de unos cuantos intentos he visto porque no me salia bien.

ahora que lo he conseguido el codigo queda tal que así:

 

<!DOCTYPE html>
<html>

<head>
</head>

<body style="background-color:red;background-attachment:fixed;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;">

<div id="contenedor" style="width:1240px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:black;">
<div id="bannerder" style="width:121px;height:1000px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:auto;background-color:white;float:left;"></div>
<div id="contenido" style="width:998px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:green;float:left;"></div>
<div id="bannerizq" style="width:121px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:0px;background-color:white;float:left;"></div>
</div>
</body>

</html>

 

Ahora pondre el banner superior y el taskbar dentro del contenido:

 

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.auto-style1 {
background-color: blue;
background-repeat: no-repeat;
}
.auto-style2 {
background-color: DarkRed;
background-repeat: no-repeat;
}   
</style>
</head>

<body style="background-color:red;background-attachment:fixed;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;">

<div id="contenedor" style="width:1240px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:black;">
<div id="bannerder" style="width:121px;height:1000px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:auto;background-color:white;float:left;"></div>
<div id="contenido" style="width:998px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:green;float:left;">
<div id="bannersup" style="position:fixed; margin-left: auto; margin-right: auto; width: 998px; height: 200px; z-index: 4;top: 0px;" class="auto-style1">
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;
</div>
<div id="taskbar" style="position:fixed; margin-left: auto; margin-right: auto;width: 998px; height: 40px; z-index: 4;top: 200px;" class="auto-style2"></div>
</div>
<div id="bannerizq" style="width:121px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:0px;background-color:white;float:left;"></div>
</div>
</body>

</html>

 

Aquí, si lo probais vereis que si reducis el tamaño del explorador, o bajais la resolución de pantalla, vereis que el bannersuperior (azul) y taskbar (rojo oscuro) se quedan 121px a la derecha (el tamaño del banner lateral). La idea es que cuando yo haga scroll izquierda o derecha, ellos tambien sigan.

 

 

Ahora incluyo la "zona" donde ira el texto de la web:

 

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.auto-style1 {
background-color: blue;
background-repeat: no-repeat;
}
.auto-style2 {
background-color: DarkRed;
background-repeat: no-repeat;
}   
</style>
</head>

<body style="background-color:red;background-attachment:fixed;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;">

<div id="contenedor" style="width:1240px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:black;">
<div id="bannerder" style="width:121px;height:1000px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:auto;background-color:white;float:left;"></div>
<div id="contenido" style="width:998px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;background-color:green;float:left;">
<div id="bannersup" style="position:fixed; margin-left: auto; margin-right: auto; width: 998px; height: 200px; z-index: 4;top: 0px;" class="auto-style1">
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;<br>
Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo; Texto orientativo;
</div>
<div id="taskbar" style="position:fixed; margin-left: auto; margin-right: auto;width: 998px; height: 40px; z-index: 4;top: 200px;" class="auto-style2"></div>
<div id="texto" style="width:998px;height:980px;top:250px;float:left;z-index:1;">
Texto01<br>
Texto02<br>
Texto03<br>
Texto04<br>
Texto05<br>
Texto06<br>
Texto07<br>
Texto08<br>
Texto09<br>
Texto10<br>
Texto11<br>
Texto12<br>
Texto13<br>
Texto14<br>
Texto15<br>
Texto16<br>
Texto17<br>
Texto18<br>
Texto19<br>
Texto20<br>
Texto21<br>
Texto22<br>
Texto23<br>
</div>
</div>

<div id="bannerizq" style="width:121px;height:1000px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:0px;background-color:white;float:left;"></div>
</div>
</body>

</html>

 

Aunque le digo que quiero que este a 250px del top, este baja hasta los 0px, si os fijais sobre el texto14, los demas hacia abajo estan tapados.

 

He estado horas dando vueltas pero no consigo resolver esos problemas. Ahora os explico el funcionamiento correcto de la web.

 

 

 

-El contenido (donde va la info, etc.) mide 998px, está centrado.

-Justo en el top (del contenido) debe haber un banner y taskbar, que deben quedar fijos cuando hago el scroll vertical.

-Debajo del banner y taskbar, esta el texto (info,etc.) a 250px del top, la idea era que cuando yo hacia scroll, la web desapareciera a 250px sin pasar por debajo del banner y taskbar

-Cuando llego al footer (banner inferior, deberia parar. (en los que yo he hecho, si el texto no era largo, este seguia subiendo)

 

Saludos y gracias por su atención

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Followers 0
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept