Foros del Web » Creando para Internet » CSS »

Tengo un problema terrieble

Estas en el tema de Tengo un problema terrieble en el foro de CSS en Foros del Web. Hace poco aprendi a entender de alguna forma los css, me hice los tutoriales de ccsya.com.ar y de javascriptya.com.ar y me empece a defender, ahora ...
  #1 (permalink)  
Antiguo 04/06/2010, 09:36
 
Fecha de Ingreso: enero-2008
Mensajes: 233
Antigüedad: 9 años, 10 meses
Puntos: 4
Tengo un problema terrieble

Hace poco aprendi a entender de alguna forma los css, me hice los tutoriales de ccsya.com.ar y de javascriptya.com.ar y me empece a defender, ahora hice esto:
Código:
@charset "utf-8";
/* CSS Document */
#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:900px;
}

#Sector01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:1px;
}

#Sector02 {
	position:absolute;
	left:0px;
	top:1px;
	width:199px;
	height:97px;
}

#Sector03 {
	position:absolute;
	left:199px;
	top:1px;
	width:564px;
	height:68px;
}

#Sector04 {
	position:absolute;
	left:199px;
	top:69px;
	width:1px;
	height:29px;
}

#Sector05 {
	position:absolute;
	left:200px;
	top:69px;
	width:600px;
	height:29px;
}

#Sector06 {
	position:absolute;
	left:0px;
	top:98px;
	width:200px;
	height:9px;
}

#Sector07 {
	position:absolute;
	left:200px;
	top:98px;
	width:600px;
	height:1px;
}

#Sector08 {
	position:absolute;
	left:200px;
	top:99px;
	width:600px;
	height:8px;
}

#Sector09 {
	position:absolute;
	left:0px;
	top:107px;
	width:9px;
	height:793px;
}

#Sector10 {
	position:absolute;
	left:9px;
	top:107px;
	width:180px;
	height:294px;
	font-family:Calibri;
	font-size:14px;
	text-align:center;
}

#Sector11 {
	position:absolute;
	left:189px;
	top:107px;
	width:11px;
	height:694px;
}

#Sector12 {
	position:absolute;
	left:200px;
	top:107px;
	width:11px;
	height:694px;
}

#Sector13 {
	position:absolute;
	left:211px;
	top:107px;
	width:389px;
	height:293px;
}

#Sector14 {
	position:absolute;
	left:600px;
	top:107px;
	width:200px;
	height:12px;
}

#Sector15 {
	position:absolute;
	left:600px;
	top:119px;
	width:8px;
	height:682px;
}

#Sector16 {
	position:absolute;
	left:608px;
	top:119px;
	width:181px;
	height:286px;
}

#Sector17 {
	position:absolute;
	left:789px;
	top:119px;
	width:11px;
	height:292px;
}

#Sector18 {
	position:absolute;
	left:211px;
	top:400px;
	width:389px;
	height:20px;
}

#Sector19 {
	position:absolute;
	left:9px;
	top:401px;
	width:180px;
	height:306px;
}

#Sector20 {
	position:absolute;
	left:608px;
	top:407px;
	width:181px;
	height:4px;
}

#Sector21 {
	position:absolute;
	left:608px;
	top:411px;
	width:182px;
	height:377px;
}

#Sector22 {
	position:absolute;
	left:790px;
	top:411px;
	width:10px;
	height:390px;
}

#Sector23 {
	position:absolute;
	left:211px;
	top:420px;
	width:4px;
	height:381px;
}

#Sector24 {
	position:absolute;
	left:215px;
	top:420px;
	width:114px;
	height:279px;
}

#Sector25 {
	position:absolute;
	left:329px;
	top:420px;
	width:121px;
	height:280px;
}

#Sector26 {
	position:absolute;
	left:450px;
	top:420px;
	width:120px;
	height:280px;
}

#Sector27 {
	position:absolute;
	left:570px;
	top:420px;
	width:30px;
	height:381px;
}

#Sector28 {
	position:absolute;
	left:215px;
	top:699px;
	width:114px;
	height:102px;
}

#Sector29 {
	position:absolute;
	left:329px;
	top:700px;
	width:241px;
	height:101px;
}

#Sector30 {
	position:absolute;
	left:9px;
	top:707px;
	width:10px;
	height:193px;
}

#Sector31 {
	position:absolute;
	left:19px;
	top:707px;
	width:161px;
	height:184px;
}

#Sector32 {
	position:absolute;
	left:180px;
	top:707px;
	width:9px;
	height:193px;
}

#Sector33 {
	position:absolute;
	left:608px;
	top:788px;
	width:182px;
	height:13px;
}

#Sector34 {
	position:absolute;
	left:189px;
	top:801px;
	width:10px;
	height:99px;
}

#Sector35 {
	position:absolute;
	left:199px;
	top:801px;
	width:601px;
	height:99px;
}

#Sector36 {
	position:absolute;
	left:19px;
	top:891px;
	width:161px;
	height:9px;
}
y el index es este:
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/estilos.css" type="text/css" />
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Sin título-2) -->
<div id="Tabla_01">
<div id="Sector01">
<img scr="img/sector02.png" width="600" height="8" alt="">
</div>
<div id="Sector02">
<img scr="img/sector01.png" width="600" height="8" alt="">
</div>
<div id="Sector04">
<jdoc:include type="modules" name="menu" style="xhtml" />
</div>
<div id="Sector05"></div>
<div id="Sector07">
<img width="600" height="1" alt="">
</div>
<div id="Sector08">
<img width="600" height="8" alt=""> </div>
<div id="Sector09">
<jdoc:include type="modules" name="sidebar1izq" style="xhtml" />
<div/>
<div id="Sector10">
<img width="180" height="294" alt=""> </div>
<div id="Sector11">
<img width="11" height="694" alt=""> </div>
<div id="Sector12">
<jdoc:include type="component" />
</div>
<div id="Sector13">
<img width="389" height="293" alt="">
</div>
<div id="Sector14">
<img width="200" height="12" alt=""> </div>
<div id="Sector15">
<jdoc:include type="modules" name="sidebar1der" style="xhtml" />
</div>
<div id="Sector16">
<img width="181" height="286" alt=""> </div>
<div id="Sector17">
<img width="11" height="292" alt=""> </div>
<div id="Sector18">
<jdoc:include type="modules" name="sidebar2izq" style="xhtml" />
</div>
<div id="Sector19">
<img width="180" height="306" alt=""> </div>
<div id="Sector20">
<jdoc:include type="modules" name="sidebar2der" style="xhtml" />
</div>
<div id="Sector21">
<img width="182" height="377" alt=""> </div>
<div id="Sector22">
<img width="10" height="390" alt=""> </div>
<div id="Sector23">
<jdoc:include type="modules" name="columna1" style="xhtml" />
</div>
<div id="Sector24">
<jdoc:include type="modules" name="columna2" style="xhtml" />
</div>
<div id="Sector25">
<jdoc:include type="modules" name="columna3" style="xhtml" />
</div>
<div id="Sector26">
<img width="120" height="280" alt=""> </div>
<div id="Sector27">
<img width="30" height="381" alt=""> </div>
<div id="Sector28">
<jdoc:include type="modules" name="colchica" style="xhtml" />
</div>
<div id="Sector29">
<img width="241" height="101" alt=""> </div>
<div id="Sector30">
<jdoc:include type="modules" name="cuadradoabajoizq" style="xhtml" /> </div>
<div id="Sector31">
<img width="161" height="184" alt=""> </div>
<div id="Sector32">
<img width="9" height="193" alt=""> </div>
<div id="Sector33">
<img width="182" height="13" alt=""> </div>
<div id="Sector34">
<jdoc:include type="modules" name="footer" style="xhtml" /> </div>
<div id="Sector35">
<img width="601" height="99" alt=""> </div>
<div id="Sector36">
<img width="161" height="9" alt=""> </div>
<div align="right"><img src="Imágenes/Sector02.png" width="604" height="71"></div>
</div>

</body>
</html>
pero mi problema es a simple vista: vean www.eljusticialistadepunilla.com
y muchas gracias por leer mi duda.
Saludos
Si alguien me pudiera dar un ejemplo corto aunque sea y explicarmelo, creo que mi problema es que mezcle los % con los px. y alguna otra cosa que halla hecho mal.
  #2 (permalink)  
Antiguo 05/06/2010, 10:11
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 9 años, 4 meses
Puntos: 103
Respuesta: Tengo un problema terrieble

mira te explico, el problema tuyo es que no entiendes que el html utiliza contenedores
utilizas muchos "sectores" o como los llames, para hacer simples cosas, el body deberia ser asi
Código PHP:
<div id="arriba"><div id="buscador"><----html buscador----></div></div>
<
div id="menu">
<
ul>
<
li>link</li>
<
li>link</li>
<
li>link</li>
<
li>link</li>
</
ul>
</
div>
<
div id="contenido"><---- contenido de la pagina ----></div
y luego con el css logras , por ejemplo la imagen de logo usando la propiedad background en el div arriba, luego en el div buscador le pones la posicion con margin que debe tener el buscador, luego le agregas a menu un float:left, para que flote a la izquierda, y un ancho pequeño, le agregas efecto hover al li, y al contenido le agregas un float:right.

Saludos, ojala me hubieras entendido

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 19:15.