Comunidad de diseño web y desarrollo en internet online

no puedo posicionar div

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 11 May 2010 10:44 pm
hola amigos .. estoy haciendo una web y quiero posicionar los elementos donde yo quiera usando las capas div. pero no me resulta.
todos los elementos los tengo centrados independientemente puede ser que ahi este mi problema, quisiera tambien saber eso como puedo centrar la pagina con div y luego donde debo agregar el contenido tambien centrado.

independiente de eso aca les dejo el codigo que no me funciona y el texto me lo deja a la izquierda o tambien al lado del menu que esta en css.

apdiv {

position: absolute;
left: 300px;
top: 150px;
width: 598px;
height: 26px;
}

<div id="apdiv">
<p>bienvenidos a nuestro sitio</p>
</div>



espero su pronta respuesta.
gracias.

Por sebacure

31 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 11 May 2010 10:53 pm
¿Será que tu selector de CSS no tiene el símbolo de gato # al principio? No entiendo tu pregunta y no hay un ejemplo ni código completo para entenderlo mejor, pero podría ser eso.

Por Alan

470 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

chrome
Citar            
MensajeEscrito el 12 May 2010 01:52 am
creo que en css no es necesario usa el # .. te coloco el codigo

fijate que si hago eso el bienvenido a nuestro sitio no queda donde yo quiera .. sino que va al lado izquierdo solo.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Linux Peñaflor Chile</title>
<STYLE type="text/css">

body{
text-align:center;
margin:0 auto;
}

contenedor{
margin: 0 auto;
text-align:left;
width:70%;
}

h1 {
font-weight: bold;
text-decoration: underline;
font-size: 14 px;
color: #616161;
font-family: arial, helvetica, sans-serif;
}
p {
font-size: 12 px;
font-family: arial, helvetica, sans-serif;
}
#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}

#menuh ul, li {
list-style-type: none;
}

#menuh ul {
margin: 0;
padding: 0;
}

#menuh li {
float: left;
}

#menuh a {
text-decoration: none;
color: #white;
background: #FFFF33;
display: block;
padding: 3px 32px;
text-align: center;
border: 1px solid #FFCC66;
border-width: 1px 1px 1px 0;
}


#menuh a#primero {
border-left: 1px solid #FFCC66;

}

#menuh a:hover {
background: #FFFFFF;
}
#menuh ul
{list-style-type: none;
margin: 0 auto;
width: 600px;

}
div {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}

</style>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="sebastian">
<meta name="date" content="2010-05-11T19:04:28-0400">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<meta http-equiv="refresh" content="5; URL=http://">
</head>
<body>
<div id="contenedor">
<img src="../Imágenes/bannerq.png" border="0" alt="linux">


<div id="menuh">
<ul>
<li><a href="#menuh" id="primero">Inicio</a></li>
<li><a href="#menuh">Blog</a></li>
<li><a href="#menuh">Noticias</a></li>
<li><a href="#menuh">Contacto</a></li>
<li><a href="#menuh">Acerca de nosotros</a></li>
</ul>


</div>

<div style="position:absolute; left:300px; top200px;">
<img src="../Imágenes/LINUX.JPG.png" width="150" height="220FFFF33" border="0" alt="gnu/linux">
<p align="center">Peñaflor Linux GNU</p>

</div>

<div style="position:absolute; align:center; left100px top200px;">
<p>bienvenidos a nuestro sitio</p>
</div>


</body>
</html>

Por sebacure

31 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 12 May 2010 04:41 am

sebacure escribió:

creo que en css no es necesario usa el # .. te coloco el codigo


Sí es necesario para seleccionar elementos por su id.

"selector" selecciona <selector>
"#selector" selecciona <etiqueta id="selector">
".selector" selecciona <etiqueta class="selector">

En el código que posteaste "contenedor" está seleccionado como una etiqueta (esto no funciona), y no está el selector "apdiv" de tu código original.

Por Alan

470 de clabLevel

2 tutoriales

 

Envíale un mensaje privado     Web

chrome
Citar            
MensajeEscrito el 12 May 2010 05:31 am
me podrias indicar como seria el codigo correcto para posicionar imagenes y texto en cualquier lugar de la patalla usando DIV y tambien centrar la web sin afectar los div.

muchas gracias por corregirme .

ya me estoy iniciando en codigo a mano y en linux. gracias.

Por sebacure

31 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 14 May 2010 01:08 am
Que tal sebacure, me tome el atrevimiento de modificar tu código para tratar de acomodarlo a como quieres que se vea, ahora, analizalo un poco y también juega haciendo cambios en los valores y aumentando otras reglas css para que te vayas familiarizando y de esta manera te garantizo que aprenderás. No te preocupes todos pasamos por lo mismo "bueno en mi caso" empezamos desde cero, así que buena suerte :D .


Código HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="sebastian">
<meta name="date" content="2010-05-11T19:04:28-0400">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<!--<meta http-equiv="refresh" content="5; URL=http://">-->
<title>Linux Peñaflor Chile</title>
<STYLE type="text/css">
body{margin:0 auto;}

h1 {
   font-weight: bold;
   text-decoration:none;
   font-size: 14 px;
   color: #616161;
   font-family: arial, helvetica, sans-serif;
}

p{
   font-size: 12 px;
   font-family: arial, helvetica, sans-serif;
}

div{
   font-size: 12px;
   font-family: arial, helvetica, sans-serif;
}

/* identificadores con propiedades iguales*/
#contenedor, #banner, #menuh{width: 800px;}

#contenedor{
   margin:auto;
   text-align:left;
   background:#CCC;
}

#banner img{
   width:100%;
   height:120px;
}
/* de tu menu no modifique casi nada*/
#menuh{
   font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
   background: #FFFF33;;
   float:left;
}
#menuh ul, li {list-style-type: none;}
#menuh ul {
   margin: 0;
   padding: 0;
   background: #FFFF33;
   list-style-type: none;
}
#menuh li {   float: left;}
#menuh a {
   text-decoration: none;
   color: #white;
   background: #FFFF33;
   display: block;
   padding: 3px 32px;
   text-align: center;
   border: 1px solid #FFCC66;
   border-width: 1px 1px 1px 0;
}
#menuh a#primero {border-left: 1px solid #FFCC66;}
#menuh a:hover {background: #FFFFFF;}

/*barra de lado izquierdo*/
#barra{
   width:250px;
   height:auto;
   float:left;
   text-align:center;
}
/*barra contenido en lado derecho*/
#contenido{
   width:530px;
   height: auto;
   float:right;
   background:#CCD7FD;
   padding:10px 10px;
   text-align:justify;
}

.titulo_principal{ color:#006; margin:0; padding:0;}
</style>

</head>
<body>
<div id="contenedor">
   <div id="banner">
       <img src="http://www.darioalegre.com/images/linux/banner_linux2.jpg" border="0" alt="linux">
    </div><!--/banner-->
    <div id="menuh">
       <ul>
            <li><a href="#menuh" id="primero">Inicio</a></li>
            <li><a href="#menuh">Blog</a></li>
            <li><a href="#menuh">Noticias</a></li>
            <li><a href="#menuh">Contacto</a></li>
            <li><a href="#menuh">Acerca de nosotros</a></li>
        </ul>
    </div><!--/menuh-->
    <div id="barra">
       <h1>Bienvenido </h1>
        <a href="http://twitter.com/_nowr"><h3>@_nowr</h3></a>
       <img src="http://www.wi-net.com.ve/images/linux-broadcom-0.jpg" align="left" width="200" border="0" alt="gnu/linux">        
    </div><!--/barra-->
    <div id="contenido">
       <h1 class="titulo_principal">Maquetación web</h1>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div><!--/contenido-->
</div><!--/contenedor-->
</body>
</html>

Por _NoWr

5 de clabLevel



 

Envíale un mensaje privado    

México

firefox
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.