Gå til innhold

[Løst] Litt for mye tomrom, tull med CSS?

The Stig

Av The Stig
i Programmering og webutvikling

Anbefalte innlegg

The Stig

The Stig

Skrevet
Skrevet

Howdy hepp!

 

Driver for tiden å lager en web-basert vaktliste for den lokale studentkroa. Begynte med så å si null kunnskap om web-utvikling, spesielt skorter det veldig på CSS-biten. Uansett, siden nærmer seg ferdig, men jeg sliter litt med den såkalte footeren. Jeg innrømmer glatt at jeg brukte eksempelkode som utgangspunkt, og derunder ligger nok også feilen. Som kan sees på bildet blir det alt for mye luft mellom slutten av tabellen og til footeren. Jeg har forsøkt å justere på margin, men resultatet blir forsåvidt det samme; footer kommer lenger opp, men siden blir fortsatt for "høy".

 

Legger ved bilde og CSS-fila. Setter stor pris på hjelp :)

 

HTML/PHP-biten:

 

<title><?php echo $title?></title>
       <style type="text/css">

       @import url("../stylesheet.css");
       @import url("stylesheet.css");

       </style>
   </head>

   <div style="text-align: center; background: url('header_1.png') 50% 50% no-repeat;">
       <div style="text-align: center; background: url('../header_1.png') 50% 50% no-repeat;">
       <!-- <img src="header_1.png" alt="Angry face" /> -->
       <h1><?php echo $title?></h1></div></div>

   <body>
       <div id="top"></div>

background-image:url(images/top.png
       <div id="container">

       <!-- Her kommer hele siden -->

</div>
<div id="footer">
   <p>... Tekst som ligger i footer</p>
</div>

 

CSS-fila:

 

A:link {text-decoration: none; color: black;}
A:visited {text-decoration: none; color: black;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

.textbox {color: #db0101;}



h1    {
   color:#f4f4f4;
   font-size:22px;
   font-family: Chiller;
   font-size: 50pt;
}
table
{
   margin-left: auto;
   margin-right: auto;
   text-align: center;


}

#specialtable
{
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   background: url("/vakt/tablebackground_1.png") 50% 50% repeat-y;

}

table#input
{
   color: #db0101;
   background: url("/vakt/inputtablebgr_1.png") repeat;

}

table#crewinput
{
   color: #db0101;
   background: url("/vakt/tablebackground_1.png") 50% 50% repeat-y;

}

#tableleft
{
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}


td
{
   /* background: url("/vakt/tablenudge_1.png") */
}

#tdimage {
   background: url("/vakt/tablenudge_1.png") 50% 50% repeat-x;
}

body {
   margin: 0;
   padding: 0;
   background-color: #fff;
   background: url("/vakt/background_1.png") 50% 50% repeat-y;
   text-align:center;
}

html, body {
   height: 100%;
}
#top {
   position: absolute;
}
h1, p {
   margin: 0;
   padding: 0.1em 0;
}
#container {
   min-height: 100%;
   margin-bottom: -120px;
}
* html #container {
   height: 100%;
}
/*#footer-spacer {
   height: 10px;
   display: none;
} */
#footer {
   height: 80px;
   background-color:black;	
   background: url("/vakt/footer_1.png") 50% 50% no-repeat;
   color:red;
   text-align:center;
}

 

post-44194-1288682206,1428_thumb.jpg

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
InsertNumLock

InsertNumLock

Skrevet
Skrevet (endret)

Kunne du linket direkte til siden din?

Kjører Firebug her så kan jeg knote i browseren.

 

Edit:

Fjern diven over footer

        </div>
<div id="footer">
   <p><span style="color:#ffffff;">Vaktliste for <a style="color:white;" href="http://www.kroaibo.no">Kroa i Bø.</a></br>
   Utviklet av Knut Gaute Vardenær - <a style="color:white;" href="http://www.velkos.no">Velkos Consulting @ 2010.</a></br>

   Kildekode reservert for alle rettigheter.</span></p>
</div>
   </body>
   <!-- 30.10.2010: Omsider ferdig. 1500+ linjer kode, 100 timer og like mange kopper kaffe.
   Takk til Thomas Maurstad Larsson, Ole Vardenær og Queens of the Stone Age ;P -->
</html>

 

og sett den etter sluttdiven til footer som her

 

        
<div id="footer">
   <p><span style="color:#ffffff;">Vaktliste for <a style="color:white;" href="http://www.kroaibo.no">Kroa i Bø.</a></br>
   Utviklet av Knut Gaute Vardenær - <a style="color:white;" href="http://www.velkos.no">Velkos Consulting @ 2010.</a></br>

   Kildekode reservert for alle rettigheter.</span></p>
</div>
</div>
   </body>
   <!-- 30.10.2010: Omsider ferdig. 1500+ linjer kode, 100 timer og like mange kopper kaffe.
   Takk til Thomas Maurstad Larsson, Ole Vardenær og Queens of the Stone Age ;P -->
</html>

 

 

Så kan du sette en 

margin-top: 10px;

for å lage litt avstand fra footeren og opp

 

#footer {
background:url("/vakt/footer_1.png") no-repeat scroll 50% 50% transparent;
color:red;
height:80px;
text-align:center;
margin-top:10px;
}

 

1a7d74ee25788fff9bc1f7cb1ce5e18d.PNG

Endret av Hille
Lenke til kommentar
The Stig

The Stig

Skrevet
  • Forfatter
Skrevet

Var som antatt feil med CSS, løsningen var:

 

 

#footer {

background:url("/vakt/footer_1.png") no-repeat scroll 50% 50% transparent;

color:red;

height:80px;

margin-top:100px;

position:absolute;

text-align:center;

bottom:0;

width:100%;

}

 

#container {

margin-bottom:-80px;

}

 

Stor takk til Hille.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...