[CSS] 'Sticky Footer' achtergrond loopt niet door - Softwareontwikkeling

woensdag 20 februari 2008 12:06

Acties:

Topicstarter

Ik ben bezig met mijn site en wil graag een "sticky footer" en heb de oplossing van Ryan Fait gevonden. Op zich ben ik helemaal tevreden met deze oplossing alleen het enige wat ik graag anders zou willen is dat het witte vlak in het midden tussen de content en de footer helemaal doorloopt naar beneden. Iemand een idee hoe ik dit voor mekaar kan krijgen. Ben zelf nog maar net bezig met CSS en kom er niet uit. Heb een paar dagen geleden al een mailtje gestuurd naar die Ryan maar hij geeft geen reactie.

CSS:

code:

/* 
STICKER - A valid, easy to use CSS sticky footer by Ryan Fait
This is the basic CSS you need along with the one extra empty
div and the wrapper required to achieve the effect. I suggest
that you leave the * { margin: 0; } code in while testing and
building your site because margins do have a tendency to mess
things up a bit. Have fun!
Copyright (c) 2006-2007 Ryan Fait
*/
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -28px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 28px; /* .push must be the same height as .footer */
}
/*
TROUBLESHOOTING
I've received a few comments about vertical margins causing a
few problems with the layout. If you want space between
paragraphs or headers, use padding instead of margin. It's as
simple as that.
*/

HTML:

code:

<body background="images/tekst.gif"
    onload="MM_preloadImages('images/button_red_home.gif''images/button_red_port.gif')">


<div class="wrapper">

            <div class="header">
                <h1><img src="images/top.gif" alt="" height="58" width="600" border="0" /></h1>
            </div>
    <div class="body">
                <h2><a title="Desk Top Publisher" href="http://en.wikipedia.org/wiki/Desktop_publishing" target="_blank">Desk Top Publisher</a> - <a title="Graphic Designer" href="http://en.wikipedia.org/wiki/Graphic_design" target="_blank">Graphic Designer</a> - <a title="System operator" href="http://en.wikipedia.org/wiki/Sysop" target="_blank">System operator</a></h2>

                <p><img src="images/merijnkleuter.jpg" alt="" height="416" width="570" border="0" /></p>
                <p>Spelen totdat ik er bij neerviel doe ik eigenlijk nog steeds alleen hebben de speelgoed auto's plaats gemaakt voor computers.</p>
                <p>| <a title="Apple" href="http://www.apple.com/nl/" target="_blank">Apple</a> | <a title="Microsoft" href="http://www.microsoft.com/nl/nl/default.aspx" target="_blank">Microsoft</a> | <a title="Photoshop" href="http://www.adobe.com/nl/products/photoshop/photoshop/" target="_blank">Photoshop</a> | <a title="Xpress" href="http://www.quark.com/" target="_blank">Xpress</a> | <a title="InDesign" href="http://www.adobe.com/nl/products/indesign/?promoid=BPBWW" target="_blank">InDesign</a> | <a title="Illustrator" href="http://www.adobe.com/nl/products/illustrator/?promoid=BPBWS" target="_blank">Illustrator</a> | <a title="Acrobat" href="http://www.adobe.com/nl/products/acrobat/?promoid=BPBVM" target="_blank">Acrobat</a> | <a title="GoLive" href="http://www.adobe.com/nl/products/golive/" target="_blank">GoLive</a> | <a title="Dreamweaver" href="http://www.adobe.com/uk/products/dreamweaver/?ogn=NL-gntray_prod_dreamweaver_home_nl" target="_blank">Dreamweaver</a> |</p>

            </div>
          </div>
        <div class="footer">
<img src="images/button_left.gif" alt="" height="28" width="90" border="0" /><a title="home" href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/button_red_home.gif',1)" target="_self"><img src="images/button_gray_home.gif" alt="home" width="69" height="28" border="0" id="Image1" /></a><a title="portfolio" href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/button_red_port.gif',1)" target="_self"><img src="images/button_trans_port.gif" alt="port folio" width="81" height="28" border="0" id="Image2" /></a><a title="curriculum vitae" href="cv.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/button_red_cv.gif',1)" target="_self"><img src="images/button_trans_cv.gif" alt="curriculum vitae" width="134" height="28" border="0" id="Image3" /></a><a title="links" href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/button_red_links.gif',1)" target="_self"><img src="images/button_trans_links.gif" alt="links" width="54" height="28" border="0" id="Image4" /></a><a title="contact" href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/button_red_contact.gif',1)" target="_self"><img src="images/button_trans_contact.gif" alt="contact" width="82" height="28" border="0" id="Image5" /></a><img src="images/button_right.gif" alt="" height="28" width="90" border="0" /></div>
</body>

woensdag 20 februari 2008 12:07

Acties:

disjfa

be

* disjfa ruikt

Jep. Zoek maar eens naar faux columns

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 21 februari 2008 04:43

Acties:

f.v.b

disjfa schreef op woensdag 20 februari 2008 @ 12:07:
* disjfa ruikt

Jep. Zoek maar eens naar faux columns

Dat gaat hier niet zo gemakkelijk lukken vanwege de ronde hoekjes aan het witte vlak.

Als je die ronde hoekjes kan opofferen dan is onderstande css voldoende:

Cascading Stylesheet:

.wrapper
{
  background-color: white;
}

Don't erase all files?
[Yes] [No]

donderdag 21 februari 2008 09:27

Acties:

TeeDee

CQB 241

Hoezo? De ronde hoekjes kan je toch gewoon als complete background van je footer oid neerzetten?

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 21 februari 2008 11:52

Acties:

f.v.b

TeeDee schreef op donderdag 21 februari 2008 @ 09:27:
Hoezo? De ronde hoekjes kan je toch gewoon als complete background van je footer oid neerzetten?

De achtergrond achter de ronde hoekjes sluit naadloos aan op de achtergrond aan de linker en rechterkant. Aan de bovenkant is dat geen probleem maar aan de onderkant wordt dat toch wel lastig.

Don't erase all files?
[Yes] [No]

donderdag 21 februari 2008 12:00

Acties:

TeeDee

CQB 241

Jij hebt het over opofferen, ik indirect ook

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 21 februari 2008 13:35

Acties:

Merijn70

Topicstarter

Het gaat me er juist om dat ik die ronde hoekjes wil en de transparantie in de buttons (het zijn gifjes waarbij de tekst is uitgespaard). Door straks verschillende achtergronden te gebruiken met subtiele kleur verschillen geeft dat volgens mij een mooi effect. Als je de pagina shaalt zie je de tekst steeds van kleur veranderen. Ik wil dus juist het liefst NIET dat idee opofferen maar zoek een manier om dit technisch voor mekaar te krijgen.

donderdag 21 februari 2008 14:43

Acties:

Savantas

Hee, leuk, Variexoeps, broertje Triplex zie je niet veel...

Ik zie niet helemaal welke buttons transparant zijn, maar waarom gebruik je daarvoor gifjes? Kan je niet beter png's gebruiken, ondersteunt meteen mooiere transparantie! Eventueel voor IE6 gebruikers met een png-hack,.htt of js.
Maar aangezien je een vaste breedte voor de content hebt zou ik gewoon een achtergrond maken welke heel breed is met in het midden het witte vlak. Dan hoef je alleen voor boven en onderaan afbeeldingen te plakken waarin de 'echte' achtergrond te zien is.
Eventuele transparante buttons kan je weer daarboven laten zweven.
Nadeel hiervan is dat je niet alleen de achtergrond in andere kleuren moet maken, maar ook de kop en voet.

P.S. Desk Top hoort aan elkaar

En ik zou voor consistentie zou ik System Operator ook met Camelcase doen

[ Voor 28% gewijzigd door Savantas op 21-02-2008 19:45 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

donderdag 21 februari 2008 16:36

Acties:

Merijn70

Topicstarter

Savantas schreef op donderdag 21 februari 2008 @ 14:43:
Hee, leuk, Variex zie je niet veel...
Ik zie niet helemaal welke buttons transparant zijn, maar waarom gebruik je daarvoor gifjes? Kan je niet beter png's gebruiken, ondersteunt meteen mooiere transparantie! Eventueel voor IE6 gebruikers met een png-hack,.htt of js.
Maar aangezien je een vaste breedte voor de content hebt zou ik gewoon een achtergrond maken welke heel breed is met in het midden het witte vlak. Dan hoef je alleen voor boven en onderaan afbeeldingen te plakken waarin de 'echte' achtergrond te zien is.
Eventuele transparante buttons kan je weer daarboven laten zweven.
Nadeel hiervan is dat je niet alleen de achtergrond in andere kleuren moet maken, maar ook de kop en voet.

P.S. Desk Top hoort aan elkaar En ik zou voor consistentie zou ik System Operator ook met Camelcase doen

Offtopic: Bedoel je met Variex het gebruikte font? Dat klopt dan niet want ik heb de Triplex gebruikt.
Ik zal er inderdaad maar Desktop van maken al is de afkorting wel DTP. Camelcase is voor mij nieuw, bedoel je dan SystemOperator? Dank voor het attenderen overigens.

Ontopic: Alle buttons zijn in rust toestand transparant. Ik wil als achtergrond echt een grote foto hebben die zelfs een 24" scherm vult, deze dan wel sterk comprimeren en vervagen zodat het niet te zwaar wordt. Het lijkt me nou juist een heel erg leuk effect dat je dan in de buttons de achtergrond ziet bewegen als je de pagina verschaald. Als dit technisch gezien niet mogelijk is met behulp van CSS begrijp ik wel dat ik het dan op een andere manier moet oplossen. Ik zou evt. zelfs met tabellen kunnen werken. Maar dit moet toch kunnen met CSS?

donderdag 21 februari 2008 19:48

Acties:

Savantas

Moet kunnen, maar helaas dus niet met een footer en dus doorloop tot onderaan de pagina. (Correct me if i'm wrong) Er zijn dacht ik wel javascripts die dit steeds kunnen corrigeren (lezen steeds de grootte van je browservenster af), maar daarin zit altijd een vertraging.

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

vrijdag 22 februari 2008 15:17

Acties:

Merijn70

Topicstarter

Ik heb m'n ontwerp er maar wat op aangepast. Plaatjes niet meer trasparant en de wrapper een witte achtergrond gegeven. CSS heeft dus ook nog z'n beperkingen... Ga me nu eerst maar bezig houden met de content op mijn site. En een keer stoeien met MySql.