Se me rompe todo todito,por más que le doy vueltas y miro ejemplos en otras web y comentarios en otros sitios no lo consigo,no se como hacerlo,alguien me hecha un cable?
En internet explorer más o menos se ve bien,pero en firefox es un desastre,asi no acabo la web en un año que llevo ya por lo menos,jjaa
Pongo el codigo porque no me deja poner enlaces
http://www.uluwatumultimedia.com/pruebas/index.html
http://www.uluwatumultimedia.com/pruebas/css.css
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>Diseño Paginas Web Valencia</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="apDiv1">Diseñamos su página web.<br />
Css,Xhtml,Php,Action Script.</div>
<div id="apDiv2">
<h2><img src="img/header_gr.png" width="11" height="10" /> Nunca fue tan <span class="header_gr">fácil</span> actualizar una <span class="header_gr">página web</span>.<br />
<img src="img/header_blue.png" width="11" height="10" /> En <span class="header_bl">cualquier</span> lugar,<span class="header_bl">rápido</span> y <span class="header_bl">comodo</span>.</h2>
</div>
</div>
<div id="middle">
<div id="middle1">
<div id="middle11"><img src="img/middle_izq.png" width="125" height="42" /></div>
<div id="middle12">
<div id="apDiv3"><a href="index.html"><img src="img/middle_icon.png" width="19" height="19" /></a> Ud. se encuentra en //..<span class="encuentro">INICIO</span></div>
</div>
</div>
<div id="middle2"><a href="index.html"><img src="img/button_inicio.png" alt="Ir a página de inicio" width="65" height="42" /></a><a href="trabajos.html"><img src="img/button_trabajos.png" alt="Nuestros trabajos realizados" width="97" height="42" /></a><a href="paginaweb.html"><img src="img/button_servicios.png" alt="Que ofrecemos" width="95" height="42" /></a><a href="servidores.html"><img src="img/button_servidores.png" alt="Aloje su web en nuestros servidores" width="110" height="42" /></a><a href="presupuesto.html"><img src="img/button_presupuesto.png" alt="Pida su presupuesto sin compromiso" width="127" height="42" /></a><a href="contacto.html"><img src="img/button_contacto.png" alt="Contacte con nosotros" width="94" height="42" /></a></div>
</div>
<div id="middle_down">
<div id="middle_down1"></div>
<div id="middle_down2"></div>
</div>
<div id="down">
<div id="down1"><img src="img/botton_izq.png" width="130" height="111" /></div>
<div id="down2"></div>
</div>
<div id="prefooter"></div>
<div id="footer">
<div id="footer_content">
<div id="footer_1"><span class="footer_gr">Uluwatu Multimedia</span> <span class="footer_nr">-</span> <span class="footer_bl">NIF: 24359209R</span><br />
<span class="footer_nr">C/Pedro Cabanes nº59 - Bajo C - 46019 - Valencia</span><br />
<br />
<img src="img/contacto_footer.jpg" alt="Información de contacto" width="264" height="22" /><br /></div>
<div id="footer_2"><span class="footer_nr">Copyright 2008</span> <span class="footer_gr">Uluwatu Multimedia</span><br />
<span class="footer_bl">www.uluwatumultimedia.com - www.4webs.es</span><br />
<span class="footer_nr">All right reserved</span><br />
<a href="#" target="_blank"><img src="img/rss_footer.jpg" alt="Novedades" width="16" height="17" /></a><span class="footer_rss">RSS</span> <img src="img/ok_footer.jpg" width="16" height="17" /><span class="footer_xhtml">XHTML</span> <img src="img/ok_footer.jpg" width="16" height="17" /><span class="footer_css">CSS</span><br />
</div>
</div>
</div>
</body>
</html>
Código:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #1A1A1A;
font-size: 12px;
margin: 0px;
}
#footer #footer_content {
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#footer #footer_content #footer_1 {
width: 400px;
text-align: left;
float: left;
margin-top: 15px;
}
#footer #footer_content #footer_2 {
width: 400px;
float: right;
text-align: right;
margin-top: 15px;
}
.footer_gr {
color: #80b020;
font-size: 10px;
}
.footer_bl {
font-size: 10px;
color: #424242;
}
.footer_nr {
font-size: 10px;
}
.footer_rss {
color: #80b020;
font-size: 10px;
font-weight: bold;
}
.footer_xhtml {
color: #ff6600;
font-size: 10px;
font-weight: bold;
}
#middle {
width: 1142px;
margin-right: auto;
margin-left: auto;
position: relative;
height: 42px;
}
#down {
width: 1142px;
margin-right: auto;
margin-left: auto;
position: relative;
height: 111px;
background-position: right;
}
#down #down1 {
width: 130px;
float: left;
margin-left: 6px;
}
#down #down2 {
float: right;
width: 900px;
background-image: url(img/down_bg.png);
background-repeat: repeat-x;
height: 111px;
margin-right: 106px;
}
#middle_down {
width: 1142px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#prueba {
background-color: #00FF00;
margin-top: 150px;
}
#middle_down #middle_down1 {
width: 42px;
background-color: #FFFFFF;
margin-left: 81px;
float: left;
height: 400px;
}
#middle_down #middle_down2 {
width: 905px;
float: right;
background-color: #FF0000;
margin-right: 105px;
height: 400px;
}
#middle #middle1 {
width: 438px;
float: left;
height: 42px;
}
#middle #middle2 {
width: 704px;
float: right;
height: 42px;
}
#middle #middle1 #middle11 {
width: 125px;
float: left;
height: 42px;
}
#middle #middle1 #middle12 {
float: right;
width: 313px;
height: 42px;
background-image: url(img/middle_bg.png);
background-repeat: repeat-x;
}
#middle #middle1 #middle12 #apDiv3 {
color: #FFFFFF;
position:absolute;
left:148px;
top:7px;
width:282px;
height:24px;
z-index:1;
}
.encuentro {
color: #c7ff58;
}
h2 {
font-size: 14px;
color: #212121;
margin: 0px;
font-weight: normal;
}
#prefooter {
background-image: url(img/footer_backgroundpre.jpg);
height: 26px;
position: relative;
left: 297px;
width: 1142px;
margin-right: auto;
margin-left: auto;
background-position: center;
}
#prefooter2 {
background-image: url(img/footer_boxs.jpg);
height: 199px;
width: 955px;
margin-right: auto;
margin-left: auto;
}
.footer_rss {
color: #80b020;
}
img {
margin: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.footer_css {
color: #008aff;
font-size: 10px;
font-weight: bold;
}
#footer {
background-image: url(img/footer_background.jpg);
background-repeat: repeat-x;
height: 98px;
background-color: #1A1A1A;
}
#header {
width: 1142px;
margin-right: auto;
margin-left: auto;
background-image: url(img/header.png);
height: 256px;
position: relative;
}
#header #apDiv1 {
font-size: 10px;
position:absolute;
left:857px;
top:69px;
width:169px;
height:53px;
z-index:1;
}
#header #apDiv2 {
color: #212121;
position:absolute;
left:633px;
top:147px;
width:368px;
height:50px;
z-index:1;
text-align: right;
}
.header_gr {
color: #80b020;
}
.header_bl {
color: #1b78cf;
}
El problema es que ya me estoy empezando a liar con las relativas y las absolutas,digamos que no he tenido problemas hasta que he llegado al final de menu a partir de ahi,todo malamente.La idea era que la parte en rojo fuera elastica para meter ahi el contenido y el resto fijo