A ver nos han pedido maquetar una web para un trabajo de clase y me estoy encontrando con varios problemas. Nos piden que lo hagamos para IE9.
Imagen de como sera
Actualmente -> http://css.driverlandia.com/diu/index.html
El primer problema que tengo, es que necesito hacer que el buscador se vaya a la derecha del todo del header. El codigo que tiene actualmente es este.
CSS
spoiler
#wrapper {
width: 980px;
height: auto;
margin: 0 auto;
}
/* CABECERA */
#header {
width: 100%;
clear: both;
}
#htop {
width: 100%;
height: 30px;
background-color: #3A3A3A;
}
#hmid {
background:url('../imgs/site/bannersuperior.png');
background-size: 100% 100%;
width: 100%;
height: 100px;
}
#hmid-logo {
background:url('../imgs/site/logo.png');
width: 225px;
height: 74px;
position: relative;
top: 10px;;
left: 30px;
}
#hmid-search {
width: 300px;
position: relative;
top: 0px;
right: 0px;;
border: 1px solid #000;
}
#hmid-search-text {
width: 200px;
height: 18px;
font-size: 15px;
padding-left: 10px;
padding-right: 5px;
}
#hmid-search-send {
width: 18px;
height: 18px;
background:url('../imgs/icons/search.png');
background-size: 100% 100%;
border: 0px;
}
HTML
spoiler
<!DOCTYPE html>
<html>
<head>
<title>SpikeLand | Inicio</title>
<!--
Estilo
Lo ponemos el primero para que lo primero que vea
el usuario sea una web bien estructurada.
-->
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="">
<!--
Metatags
-->
<meta charset="utf-8">
<meta name="description" content="SpikeLand, encuentra ofertas y viajes a bajos precios!">
<meta name="keywords" content="ofertas, viajes, bajos precios, spikeland">
<meta http-equiv="Content-Language" content="es" />
<!-- OJO ELIMINAR DEL DISEÑO FINAL!!! SOLO ESTA PARA PROGRAMAR -->
<meta http-equiv="refresh" content="3; url=index.html">
<!-- JScripts
Ponemos los JavaScripts
-->
</head>
<body>
<div id="wrapper"> <!-- Capa que nos limitara el ancho y centrara la pagina web -->
<div id="header"> <!-- Capa contenedora del header -->
<div id="htop"></div>
<div id="hmid">
<div id="hmid-logo"></div>
<div id="hmid-search">
<form method="post">
<input id="hmid-search-text" type="text" maxlength="5"></input>
<input id="hmid-search-send" type="submit" value=""></input>
</form>
</div>
</div>
....
</body>
</html>
Tambien tengo problemillas con el LI del footer. Le quiero quitar los puntos del li, y en el caso de las redes sociales hacerlo que este horizontal.
CSS
/* FOOTER */
#footer {
margin: 0 auto;
background:url('../imgs/site/bannerinferior.png');
background-size: 100% 100%;
width: 960px;
height: 91px;
border: 1px thin;
}
#fot-logo {
background:url('../imgs/site/logo.png');
width: 225px;
height: 74px;
position: relative;
top: 10px;;
left: 30px;
}
#fot-links1 {
}
#fot-links2 {
}
#fot-links3 {
}
.fot-links-title{
color: #000;
font-family: Calibri;
font-size: 24px;
font-weight: bold;
}
.fot-links-title li {
text-decoration: none;
}
.fot-links-links {
}
.social {
display: inline;
}HTML
spoiler
<div id="footer"> <!-- Capa contenedora del footer -->
<div id="fot-logo"></div>
<div id="fot-links1">
<div class="fot-links-title">SpikeLand</div>
<div class="fot-links-links">
<ul>
<li>¿Quienes somos?</li>
<li>¿Donde estamos?</li>
<li>Contacta</li>
</ul>
</div>
</div>
<div id="fot-links2">
<div class="fot-links-title">Otros</div>
<div class="fot-links-links">
<ul>
<li>¿Quienes somos?</li>
<li>¿Donde estamos?</li>
<li>Contacta</li>
</ul>
</div>
</div>
<div id="fot-links3">
<div class="fot-links-title">Social</div>
<div class="fot-links-links social">
<ul>
<li><img src="imgs/social/facebook.png" alt="Visita SpikeLand en Facebook"></li>
<li><img src="imgs/social/twitter.png" alt="Visita SpikeLand en Twitter"></li>
<li><img src="imgs/social/googleplus.png" alt="Visita SpikeLand en Google+"></li>
</ul>
</div>
</div>
</div> Pero como veis no le hace ni caso.
