Problemas CSS

Archivado
Hola:

Estoy intentando hacer una web con diseño css y tengo varios problemillas, a ver si alguno de vosotros le ha pasado y puede decirme algo.

El tema principal son los descuadres, he probado mil configuraciones, cambiado los margenes, reglas de posicionamiento, etc y cuando parece que está todo bien, le doy a previsualizar y está todo como le viene en gana, en alguna ocasión he conseguido arreglarlo pero entonces viene otro problema, quiero añadir otra caja div, ya sea en el bottom o en el lateral y me ha pasado desde que se monte encima a que me lo descuadre todo (eso toqueteando el position absolute, fixed, etc).

¿Por qué motivo pasa eso? en teoría según el libro que estoy siguiendo y varias web que he visto por ahí si pones top 0, bottom 0, righ y left auto debería de quedarse todo centrado pero va cuando le da la gana y me tiene loco ya xD.

El otro tema es que a veces cuando pongo una imagen como fondo en una caja div, al previsualizar en el server local no aparece, pero al subir si. Porque esa es otra en ocasiones el server local me muestra una cosa y en el hosting me la muestra de otra manera y no hay dios que le saque punta.

No se si me he terminado de explicar bien, pero es que estoy ya de los nervios xD.

Gracias por adelantado y un saludo!
Qué quieres decir con "le doy a previsualizar"? Lo estás previsualizando en el Dreamweaver o similares?

Móntate un servidor virtual para hacer las pruebas y para los descuadres es mejor que nos pongas el código aquí.
Con previsualizar me refiero a pulsar F12 en el dreamweaver y que se abra en el navegador.
Tengo un server local y un hosting remoto.

Hay está el código:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unknamed</title>
<link href="stilograna.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background-image: url(images/fondofondo.jpg);
background-repeat: repeat-y;
background-position: center top;
height: auto;
width:auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
}
#apDiv1 {
position:absolute;
width:65px;
height:27px;
z-index:1;
left: 15px;
top: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#apDiv2 {
position:absolute;
width:86px;
height:27px;
z-index:1;
top: 10px;
left: 99px;
}
#apDiv3 {
position:absolute;
width:170px;
height:27px;
z-index:1;
left: 204px;
top: 10px;
}
#apDiv4 {
position:absolute;
width:35px;
height:27px;
z-index:1;
left: 389px;
top: 10px;
}
#apDiv5 {
position:absolute;
width:67px;
height:27px;
z-index:1;
left: 437px;
top: 10px;
}
#apDiv6 {
position:absolute;
width:92px;
height:27px;
z-index:1;
left: 516px;
top: 10px;
}
</style>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="caja_menu">
<div id="botones_bar">
<!-- botones -->
<div id="apDiv1"><a href="index.php"><img src="images/Inicio.gif" width="64" height="26" /></a></div>
<div id="apDiv2"><img src="images/boletos.gif" width="84" height="26" /></div>
<div id="apDiv3"><img src="images/combinaciones.gif" width="171" height="26" /></div>
<div id="apDiv4"><img src="images/qg.gif" width="35" height="32" /></div>
<div id="apDiv5"><img src="images/fondo.gif" width="65" height="25" /></div>
<div id="apDiv6"><img src="images/premios.gif" width="93" height="28" /></div>
<!-- fin botones -->
</div>
</div>

<div id="mi_cuenta"><a href="login.php">
<img src="images/micuenta.gif" width="133" height="43" /></a></div>




<div id="caja_prin"><img src="images/escrutaprueba.jpg" width="689" height="432" /></div>

<!-- noticias bar -->
<div id="noticias_bar">
<!-- panel acordeon -->

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Noticias</div>
<div class="CollapsiblePanelContent">

</div>

<!-- fin panel -->


</div>


<!-- fin noticias -->

</div>
<div id="fin_page"></div>

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>
</html>


Ahora mismo tal cual está ahí estaria cada caja para un lado :S

Y en este está todo centrado:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QuinielaGrana</title>
<link href="stilograna.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background-image: url(images/fondofondo.jpg);
background-repeat: repeat-y;
background-position: center 225px;
width: 995px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: auto;
clip: rect(0px,auto,0px,auto);
}
#apDiv1 {
position:absolute;
width:65px;
height:27px;
z-index:1;
left: 15px;
top: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#apDiv2 {
position:absolute;
width:86px;
height:27px;
z-index:1;
top: 10px;
left: 99px;
}
#apDiv3 {
position:absolute;
width:170px;
height:27px;
z-index:1;
left: 204px;
top: 10px;
}
#apDiv4 {
position:absolute;
width:35px;
height:27px;
z-index:1;
left: 389px;
top: 10px;
}
#apDiv5 {
position:absolute;
width:67px;
height:27px;
z-index:1;
left: 437px;
top: 10px;
}
#apDiv6 {
position:absolute;
width:92px;
height:27px;
z-index:1;
left: 516px;
top: 10px;
}
</style>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="caja_menu">
<div id="botones_bar">
<!-- botones -->
<div id="apDiv1"><a href="index.php"><img src="images/Inicio.gif" width="64" height="26" /></a></div>
<div id="apDiv2"><img src="images/boletos.gif" width="84" height="26" /></div>
<div id="apDiv3"><img src="images/combinaciones.gif" width="171" height="26" /></div>
<div id="apDiv4"><img src="images/qg.gif" width="35" height="32" /></div>
<div id="apDiv5"><img src="images/fondo.gif" width="65" height="25" /></div>
<div id="apDiv6"><img src="images/premios.gif" width="93" height="28" /></div>
<!-- fin botones -->
</div>
</div>

<div id="mi_cuenta"><a href="login.php">
<img src="images/micuenta.gif" width="133" height="43" /></a></div>




<div id="caja_prin">

</div>

<!-- noticias bar -->
<div id="noticias_bar">
<!-- panel acordeon -->

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Noticias</div>
<div class="CollapsiblePanelContent">

</div>

<!-- fin panel -->

</div>

<!-- fin noticias -->

</div>
<div id="fin_page"></div>

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>
</html>
2 respuestas
Archivado
Volver a General