Tengo un problema terrieble

eltin_vcp · #1 (**permalink**) 04/06/2010, 08:36

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;">

<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.

chwc · #2 (**permalink**) 05/06/2010, 09:11

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