Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] los div para una web

 Estas en el tema de los div para una web en el foro de CSS en Foros del Web. hola, me gustaria q me corrijan o expliquen si esta bien la manera q uso para crear maquete (o como se llama?) de la pagina ...
  #1 (permalink)  
Antiguo 25/03/2013, 10:35
 
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid
Mensajes: 79
Antigüedad: 15 años, 7 meses
Puntos: 2
los div para una web
hola,

me gustaria q me corrijan o expliquen si esta bien la manera q uso para crear maquete (o como se llama?) de la pagina web.

quiero hacerlo con los div y css.

el codigo es asi:

<head>

<title>PAGINA WEB</title>

<meta charset="utf-8" />
<meta name="keywords" content="html, css, creacion paginas web" />
<meta name="description" content="Es una pagina web de muestra" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="laptop_icon.ico" />

<style type="text/css">
*{margin:0px; padding:0px;}

body {
background-color: #252525;
}
</style>

</head>

<body>

<div style="width:777px; margin-left: auto; margin-right: auto; margin-top:10px; margin-bottom:10px;"> <!-- for Opera and Firefox -->
<div style="text-align:center"> <!-- for IE6 -->

<div style="background:#FAFFAF; width:777px; height: 27px; float:left;"></div>
<div style="background:#0080C0; width:777px; height: 31px; float:left; "></div>
<div style="background:#80FF00; width:777px; height: 21px; float:left;"></div>

<div style="background:#9A911D; width:225px; height: 90px; float:left;"></div>
<div style="background:#9080C0; width:552px; height: 90px; float:left; "></div>

<div style="background:#C99990; width:777px; height: 24px; float:left;"></div>
<div style="background:#9A911D; width:777px; height: 450px; float:left;"></div>
<div style="background:#9080C0; width:777px; height: 25px; float:left; "></div>

<div style="background:#899990; width:506px; height: 348px; float:left;"></div>
<div style="background:#Ff9990; width:7px; height: 348px; float:left;"></div>
<div style="background:#899990; width:264px; height: 348px; float:left;"></div>
<div style="background:#9080C0; width:777px; height: 25px; float:left; "></div>

<div style="background:#9A911D; width:777px; height: 438px; float:left;"></div>

</div>
</div>

</body>
</html>


Como se hacen estos espacios entre bloques? Como una div vacia transparente, tal como lo escribi en el codigo?

Aqui tiene la imagen de la web tal como la quise hacer.



GRACIAS
  #2 (permalink)  
Antiguo 25/03/2013, 11:10
Avatar de temerariomalaga  
Fecha de Ingreso: marzo-2013
Ubicación: Londres
Mensajes: 156
Antigüedad: 11 años, 1 mes
Puntos: 9
Respuesta: los div para una web
Buenas, para el espaciado de los div juega con el padding-bottom. Yo creo que así debería salirte bien el espaciado. Entre los dos div del servicio técnico pues igual, pero usa padding-right si vas a asignarle esa propiedad al div de la izquierda o padding-left si se lo vas a añadir al div de la derecha.
Espero haberte aclarado tu duda. Un saludo
__________________
Málaga Club de Fútbol: Memoria, Compromiso, Fe
  #3 (permalink)  
Antiguo 25/03/2013, 11:19
 
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid
Mensajes: 79
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: los div para una web
temerariomalaga, gracias. si, se puede usar padding, no se me ocurrio pensarlo
  #4 (permalink)  
Antiguo 26/03/2013, 08:52
 
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid
Mensajes: 79
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: los div para una web
Hola de nuevo.

Lo hice tal como me lo habias aconsejado. Esta muy bien.
Mi version del codigo generaba mas lineas inutiles.

Código: 
<div style="background:#252525; width:777px; height: 31px; float:left; padding-top: 27px; padding-bottom: 25px;">
	<div align="right"><img src="img/youtube.jpg" alt="youtube" longdesc="mirenos en youtube">
						<img src="img/facebook.jpg" alt="facebook" longdesc="siguenos en facebook">
						<img src="img/mail.jpg" alt="mail" longdesc="contactenos">
	</div>
</div>
  #5 (permalink)  
Antiguo 26/03/2013, 09:50
 
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid
Mensajes: 79
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: los div para una web
Tengo algunas dudas.
Ciertas div no pude hacer con padding, porque entonces la imagen del fondo de dicha div la llena toda y yo quisiera dejar padding del mismo color q el fondo de la pagina.

Cita:
<!DOCTYPE html>

<html>

<head>

<title>PAGINA WEB</title>

<meta charset="utf-8" />
<meta name="keywords" content="html, css, creacion paginas web" />
<meta name="description" content="Es una pagina web de muestra" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="laptop_icon.ico" />


<!-- CSS -->

<style type="text/css">
*{margin:0px; padding:0px;}

body {
background-color: #252525;
}
.Menu-Bar-Style {
font-size: 13px;
color: #FFFFFF;
font-family: "Tahoma";
text-shadow: 1px 1px #000000;
}
.Estilo1 {
color: #132335;
font-weight: bold;
}
</style>



</head>




<body>


<!-- THE PRINCIPAL DIV -->

<div style="width:777px; margin-left: auto; margin-right: auto; margin-top:10px; margin-bottom:10px;"> <!-- for Opera and Firefox -->
<div style="text-align:center"> <!-- for IE6 -->



<!-- UPPER DIV WITH SOCIAL RED ICONS -->

<div style="background:#252525; width:777px; height: 31px; float:left; padding-top: 25px; padding-bottom: 25px;">
<div align="right"><img src="img/youtube.jpg" alt="youtube" longdesc="mirenos en youtube">
<img src="img/facebook.jpg" alt="facebook" longdesc="siguenos en facebook">
<img src="img/mail.jpg" alt="mail" longdesc="contactenos">
</div>
</div>


<!-- LOGO DIV -->

<div style="background:#252525; width:225px; height: 90px; float:left;">
<img src="img/logo.jpg" alt="logo" longdesc="nuetro logo">
</div>


<!-- MENU BAR WITH BUTTONS -->

<div style="background-image: url(img/menu-red-bar.jpg); background-repeat: no; width:552px; height: 90px; float:left;">
<div class="Menu-Bar-Style" style="background:#DB3801; width:98px; height:35px; float:left; margin-top: 27px;">QUIENES <br> SOMOS</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:100px; height:35px; float:left; margin-top: 27px;">COMPRA <br> VENTA</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:104px; height:35px; float:left; margin-top: 27px;">SERVICIO <br> TECNICO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:114px; height:35px; float:left; margin-top: 27px;">RECICLADO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:136px; height:35px; float:left; margin-top: 27px;">COMPONENTES</div>
</div>


<!-- GALLERY DIV -->

<div style="background:#252525; width:777px; height: 450px; float:left; padding-top: 25px; padding-bottom: 25px;">
<img src="img/photo.jpg">
</div>



<!-- 1-ST CONTENT INFO DIV -->

<div style="background-image: url(img/bg-orange.jpg); background-repeat: repeat-x; width:506px; height: 348px; float:left;"></div>



<!-- SPACE BETWEEN CONTENT INFO DIV -->

<div style="background:#252525; width:7px; height: 348px; float:left;"></div>



<!-- 2-ND CONTENT INFO DIV -->

<div style="background-image: url(img/bg-red.jpg); background-repeat: repeat-x; width:264px; height: 348px; float:left;"></div>



<!-- FOOTER WITH MAP AND CONTACT FORM -->

<div style="background:#252525; width:777px; height: 25px; float:left; "></div>

<div style="background:#CCCCCC; width:777px; height: 438px; float:left;"></div>

</div>
</div>

</body>
</html>
Por ejemplo no me ayuda ponerle padding-right a la div del contenido, como hago en este caso?


GRACIAS
  #6 (permalink)  
Antiguo 26/03/2013, 10:10
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: los div para una web
¿Y por qué no usas un margen? Para eso están los márgenes, para separar unos elementos de otros.

Código CSS: 
Ver original
  1. margin-bottom: 2.5em;
  #7 (permalink)  
Antiguo 26/03/2013, 10:50
 
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid
Mensajes: 79
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: los div para una web
Uf.. Soy una tonta..
Es raro q miras tutorial, entiendes todo, pero empiezas hacerlo y te propiezas en cada linea..
Te dan las soluciones y piensas q "y como q no se me ocurrio antes?"

Parece q la unica manera aprender es hacerlo mal, pero hacer, y despues pedir q lo corrijan..

GRACIAS...

Cita:
<!DOCTYPE html>

<html>

<head>

<title>PAGINA WEB</title>

<meta charset="utf-8" />
<meta name="keywords" content="html, css, creacion paginas web" />
<meta name="description" content="Es una pagina web de muestra" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="laptop_icon.ico" />


<!-- CSS -->

<style type="text/css">
*{margin:0px; padding:0px;}

body {
background-color: #252525;
}
.Menu-Bar-Style {
font-size: 13px;
color: #FFFFFF;
font-family: "Tahoma";
text-shadow: 1px 1px #000000;
}
.Estilo1 {
color: #132335;
font-weight: bold;
}
</style>



</head>




<body>


<!-- THE PRINCIPAL DIV -->

<div style="width:777px; margin-left: auto; margin-right: auto; margin-top:10px; margin-bottom:10px;"> <!-- for Opera and Firefox -->
<div style="text-align:center"> <!-- for IE6 -->



<!-- UPPER DIV WITH SOCIAL RED ICONS -->

<div style="background:#252525; width:777px; height: 31px; float:left; padding-top: 25px; padding-bottom: 25px;">
<div align="right"><img src="img/youtube.jpg" alt="youtube" longdesc="mirenos en youtube">
<img src="img/facebook.jpg" alt="facebook" longdesc="siguenos en facebook">
<img src="img/mail.jpg" alt="mail" longdesc="contactenos">
</div>
</div>


<!-- LOGO DIV -->

<div style="background:#252525; width:225px; height: 90px; float:left;">
<img src="img/logo.jpg" alt="logo" longdesc="nuetro logo">
</div>


<!-- MENU BAR WITH BUTTONS -->

<div style="background-image: url(img/menu-red-bar.jpg); background-repeat: no; width:552px; height: 90px; float:left;">
<div class="Menu-Bar-Style" style="background:#DB3801; width:98px; height:35px; float:left; margin-top: 27px;">QUIENES <br> SOMOS</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:100px; height:35px; float:left; margin-top: 27px;">COMPRA <br> VENTA</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:104px; height:35px; float:left; margin-top: 27px;">SERVICIO <br> TECNICO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:114px; height:35px; float:left; margin-top: 27px;">RECICLADO</div>
<div class="Menu-Bar-Style" style="background:#DB3801; width:136px; height:35px; float:left; margin-top: 27px;">COMPONENTES</div>
</div>


<!-- GALLERY DIV -->

<div style="background:#252525; width:777px; height: 450px; float:left; padding-top: 25px; padding-bottom: 25px;">
<img src="img/photo.jpg">
</div>



<!-- 1-ST CONTENT INFO DIV -->

<div style="background:#F2F2F2; background-image: url(img/bg-orange.jpg); background-repeat: repeat-x; width:506px; height: 348px; float:left; margin-right:7px;"></div>



<!-- 2-ND CONTENT INFO DIV -->

<div style="background:#F2F2F2; background-image: url(img/bg-red.jpg); background-repeat: repeat-x; width:264px; height: 348px; float:left;"></div>



<!-- FOOTER WITH MAP AND CONTACT FORM -->

<div style="background:#F2F2F2; background-image: url(img/bg-green.jpg); background-repeat: repeat-x; width:777px; height: 438px; float:left; margin-top: 25px;"></div>

</div>
</div>

</body>
</html>
Última edición por snorkel; 26/03/2013 a las 11:07
  #8 (permalink)  
Antiguo 26/03/2013, 11:19
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: los div para una web
Cita:
Iniciado por snorkel Ver Mensaje
Es raro q miras tutorial, entiendes todo, pero empiezas hacerlo y te propiezas en cada linea..
Cuantos más problemas te de algo una vez, menos te darán luego. Por algo dicen que en la práctica aprendes más que en la teoría.

Así que te deseo muchos problemas.

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:40.