Webdesigners implementeren pagina en site stijlen met HTML en CSS-opmaakmodellen. Alle elementen in een webpagina kunnen worden gestyled via CSS, met inbegrip van inhoud, kop- en voetteksten. Met behulp van een ontwerp dat bevat een aantal van dezelfde elementen op dezelfde positie op elke pagina--bijvoorbeeld met paginavoetteksten--maakt een consistent uiterlijk binnen een site en uiteindelijk maakt het meer bruikbaar. Positionering van een voettekst met behulp van CSS is meestal een eenvoudige activiteit, zelfs voor beginners.
Maak uw HTML-pagina. Open een nieuw bestand in een teksteditor en voeg de volgende code markup, die een koppeling naar een extern opmaakmodel en sommige HTML-elementen bevat, met inbegrip van de voettekst:
KoptekstInhoud van de HoofdpaginaEen typische Web-pagina lay-out houdt met een gebied voor koptekst loopt langs de bovenkant en een voettekst langs de onderkant, met de pagina-inhoud in tussen.
Maak uw CSS-bestand. Open een nieuw bestand in een teksteditor en sla het "sitestyle.css" zodat deze overeenkomen met de link in de head-sectie van uw HTML. Als u wilt uw voettekst element effectief, moet u eerst om de stijl van het bovenliggende element, de container "div."
Voer de volgende code:
container {}breedte: 80%;
marge: auto;
background-color: #CCCCCC;}
Dit geeft de totale paginabreedte zoals het "containerelement" alle van de pagina-inhoud houdt. Uw koptekst, inhoud en voettekst krijgt stijleigenschappen ten opzichte van deze. De achtergrondkleur is opgenomen, zuiver, zodat u de grenzen van elk element zien kunt tijdens het ontwikkelen van uw pagina.
Opmaakregels voor uw voettekst-element toevoegen. Voer de volgende gegevens, definiëren de positie van uw voettekst:
voettekst {}breedte: 90%;
marge: auto;
text-align: Midden;
Clear: both;
background-color: #FFFFCC;}
De voettekst wordt gedefinieerd als een percentage van het bovenliggende element, met de marge-eigenschap verklaren dat het zou moeten liggen in het midden van de bovenliggende bezetten. De tekst in de voettekst is ook gecentreerd, die zal, op zijn beurt, eventuele andere elementen zoals afbeeldingen binnen het centrum. Het element is ingesteld voor het wissen van beide kanten, wat betekent dat er geen andere elementen op dezelfde horizontale lijn als het zal verschijnen. Uw bestanden opslaan en weergeven van de pagina in een webbrowser.
Stijl van de rest van uw pagina-elementen en zorg ervoor dat uw voettekst is nog steeds de manier waarop die u het nodig om te worden opgemaakt. Wanneer u CSS-regels maakt, kan je soms vinden dat zij hebben onverwachte "Domino"-effect, schokkend styling u eerder hebt gemaakt. De volgende voorbeeldcode dicteert de stijl voor de secties van de berichtheader en de inhoud van de pagina:
kop, #content {}breedte: 90%;
marge: auto;
Clear: both;
background-color: #FFCCFF;}
Sla de wijzigingen op en uw pagina weergeeft in een browser.
Experimenteren met de CSS-regels te bereiken de positie u wilt uw voettekst wilt hebben. Webbrowsers kunnen notoir worden gevarieerd, wanneer het gaat om CSS stijl renderen inhoud, dus u idealiter uw pagina in zoveel browsers mogelijk testen moet. Merkt u wellicht dat u moet toevoegen of wijzigen van de CSS-regels als u wilt afdwingen van uw ontwerp in alle browsers, met name oudere versies van Internet Explorer.
- Met behulp van "automatisch" als de eigenschap margin in CSS kan alleen een element centreren als haar moedermaatschappij een opgegeven breedte heeft.
- Nooit aannemen dat alle gebruikers zal zitten kundig voor zien uw pagina's de manier waarop die u doen, aangezien dit afhangt volledig op welke browser ze gebruiken.