- This topic is empty.
-
AuthorPosts
-
February 3, 2010 at 9:16 pm #27866Alex.MartinezParticipant
Hello guys, first of all i want to say thank for the help if you’ll give me if not, thanks for read.
Here is my trouble, i have my page i’m testing how to make a website this is my first try.
So, i was reading the articles of Chris and i decided to start.
Well, i have my HTML code i don’t know if it was coded wrong
But in my stylesheet i have all the divs in the correct position, but below the footer i have a big white space that i
don’t know where it come from, i was trying changing many things but it doesn’t work, i hope you can help, here i leave my CSS and my HTML code.Code:And the CSS
Code:body {
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}img {
border:none;
}#menu {
background-image:url(imagenes/menubg.jpg);
background-repeat: no-repeat;
height:47px;
margin: 0 auto;
padding:0;
width:800px;
}#menu ul, li {
list-style-type: none;
}.nav {
float:left;
margin:0 auto;
position:relative;
}.nav ul {
padding:0;
margin: 0;
}.nav li {
float:left;}
.nav li a {
color:#FFFFFF;
display: block;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
padding: 17px 40px;
text-decoration:none;
}.nav li a:hover {
background-color:#ccb479;
}#header {
height: 127px;
margin: 0 auto;
padding: 10px;
width: 785px;
}#bienvenidos {
margin:0 auto;
width:600px;
}#sanfco {
background-color:#f0f0f0;
border: 1px solid #cecfd0;
height:420px;
margin:0 auto;
position:relative;
right:140px;
width:400px;
}.contenido img{
padding-left:47px;
padding-top:22px;
margin:0 auto;
width:300px;
}#productos {
margin:0 auto;
width:100px;
position:relative;
bottom:475px;
left:200px;
}#galeria {
margin:0 auto;
position:relative;
bottom:475px;
left:180px;
width:100px;
}#fotos {
padding:0px;
background-color:#f0f0f0;
border: 1px solid #cecfd0;
height:480px;
width:200px;
}#fotos img {
padding:10px;
}#galeria p {
position:absolute;
left:80px;
width:100px;
bottom:0px;
}#galeria a {
color:#5eac35;
text-decoration:none;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
}#galeria a:hover {
text-decoration:underline;
}
#pieindex {
width:785px;
margin: 0 auto;
height:auto;
position:relative;
bottom:450px;
}
#pieindex p {
font-weight:bold;
border-top: 1px solid #cecfd0;
padding-top:15px;
text-align:center;
}#pie {
margin: 0 auto;
width:785px;
}#pieindex span {
color:#5eac35;
font-weight:bold;
}#pieindex a {
color:#004385;
font-weight:bold;
text-decoration:none;
}#pieindex a:hover {
text-decoration:underline;
}#pie p {
font-weight:bold;
border-top: 1px solid #cecfd0;
padding-top:15px;
text-align:center;}
#pie span {
color:#5eac35;
font-weight:bold;
}#pie a {
color:#004385;
font-weight:bold;
text-decoration:none;
}#pie a:hover {
text-decoration:underline;
}/* Nosotros */
#nosotros {
height:180px;
margin: 0 auto;
width:800px;
}.noscont h2 {
color:#58cd38;
font-family:Georgia, “Times New Roman”, Times, serif;
text-align:center;
}.noscont {
border:1px solid #cecfd0;
margin-top:50px;
padding:20px;
width:400px;
}.noscont p {
text-align:justify;
}#nosimg {
margin:0 auto;
padding:0;
position:absolute;
width:800px;
}.imgnos {
float:right;
}/* Productos */
#nuestrosproductos {
height:50px;
margin: 0 auto;
width:600px;
}.religiosos {
padding-top:30px;
}/* Contacto */
#contacto {
margin: 0 auto;
width:800px;
padding:0;
height:230px;
}#contacto h2{
background:url(imagenes/formulario.jpg)no-repeat;
position:relative;
padding:10px;
text-indent:-9999px;
}
#contactolista li {
padding-top:20px;
list-style-image:url(imagenes/flama.png);
}.formulario input {
padding:4px;
}.nombre {
margin-left:10px;
}.telefono {
margin-left:8px;
}.email {
margin-left:20px;
}.comentarios {
margin-left:63px;
margin-top:-12px;
}.enviar {
background-color:#6e6141;
color:#FFFFFF;
font-weight:bold;
font-family:Tahoma, Geneva, sans-serif;
padding:7px;
margin-left:90px;
}.reset {
background-color:#6e6141;
color:#FFFFFF;
font-weight:bold;
font-family:Tahoma, Geneva, sans-serif;
padding:7px;
}#infocontacto {
height:180px;
width:300px;
margin: 0 auto;
padding:10px;
position:relative;
bottom:165px;
left:180px;
}#contactanos {
border: 1px solid #cecfd0;
height:265px;
}#contactanos p {
padding:10px;
position:relative;
bottom:100px;
text-align:left;
font-family:georgia;
font-size:13px;
}#contactanos h2{
background-image:url(imagenes/contactanos.jpg);
background-repeat: no-repeat;
height:80px;
position:relative;
left:50px;
bottom:85px;
text-indent:-9999px;
}If i’m doing somethin’ wrong you can tell me, i learn from my mistakes.
Greatings.Alejandro.-
February 3, 2010 at 10:07 pm #70472wongpkMemberI see that in .pieindex you have a bottom: 450px on it…? Also, try to use float: left/right and wrap everything in a #container…
Hope that help…
February 4, 2010 at 7:22 pm #70502Alex.MartinezParticipantThanks for read and the help…
But that "bottom" that i got there is because if i don’t use that bottom my "pieindex" is on the floor, so it is just a small fixed.
Maybe you can advice me how to float an element or how to position an element in the right side, because i just used a position:relative; and move it with "top" and "left", but i don’t think that it is the best option.
Thanks for the help.Greattings.
Alex.-
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.