De basis van een div gebaseerde website (3 / 7 stap)

Stap 3: Het toevoegen van een container met de berichtheader en de inhoud


Nu voegen we de container. Dit is gewoon een gecentreerde div die onze gehele website zal bevatten.
In deze container voegen we twee meer div-elementen; een inhoud div en een kop div.

Onze HTML-bestand zal nu als volgt uitzien:

< html >
< head >
< titel > test < / title >
< link rel = "stylesheet" href="style.css" >
< / head >
< body >
< div id = "container" >
< div id = "inhoud" class = "clearfix" >
Inhoud
< / div >
< div id = "header" >
Koptekst
< / div >
< / div >
< / body >
< / html >

We zullen de volgende code toevoegen aan onze css-bestand:

div #container {}
breedte: 800px;
marge: 0px-auto;
achtergrond: #FFFFFF;
padding: 0px;
}

div #content {}
breedte: 800px;
padding-top: 100px;
achtergrond: geel;
}

div #header {}
breedte: 800px;
hoogte: 100px;
achtergrond: blauw;
positie: absoluut;
boven: 0px;
}

.clearfix: nadat {inhoud: "."; display: block; hoogte: 0; duidelijk: beide; zichtbaarheid: verborgen;}
.clearfix {display: inline-block;}
/ * Verbergen van IE Mac \ * /
.clearfix {display: block;}

div #container betekent dat we een div-tag met id 'container'. We voegen sommige kleuren en een "marge: 0px-auto;" om ervoor te zorgen dat onze container in de pagina wordt gecentreerd.

We moeten geven van de inhoud een padding-top en een header van een absolute waarde met een "top: 0px" om ervoor te zorgen dat de kop is gepositioneerd boven de andere inhoud.

De lelijke kleuren het niet erg. Het is gewoon om het gemakkelijker te lezen van de kleuren en om te zien de verschillende divs.

We moeten deze rare clearfix code om ervoor te zorgen dat onze navigatie en inhoud divs (toegevoegd in de volgende stap) vallen niet uit de omliggende div.

Gerelateerde Artikelen

Hoe te installeren en aanpassen van een Drupal CMS website / / http://www.collectiveresolve.org

Hoe te installeren en aanpassen van een Drupal CMS website / / http://www.collectiveresolve.org

overzicht / / een algemeen overzicht of samenvattingDrupal open source Content managementsysteemBekijk enkele websites die gebruik maken van het Drupal CMS.Testen van een demo installatie van het Drupal CMS beheerder toegang.CollectiveResolve maakt g
Monteren van een Arduino gebaseerd rook / hitte Alarm

Monteren van een Arduino gebaseerd rook / hitte Alarm

Zoals je uit deze blog entry zien kunt ik ontwikkelde de basis voor dit project twee jaar geleden als een alarm / uitschakeling schakelaar voor de RepRap 3D Printer kit die ik had net samengesteld... en dat had gerookt!Het eerste ProjectIk heb sindsd
Maken van een enorme, knipperend, website Barkas knop

Maken van een enorme, knipperend, website Barkas knop

Op de hybris zopas we onze nieuwe wolk handel API's op yaas.io. Het hybris labs team ondersteund de openbare go-live met een koele Barkas knop. Het is een arcade-stijl grote koepel drukknop, heeft een geïntegreerde LED, zodat u knipperen laten kunt,
Camera tuig: een eenvoudige schouder tuig op basis van een stuur van de fiets

Camera tuig: een eenvoudige schouder tuig op basis van een stuur van de fiets

als een klein experiment onderzocht ik mogelijke manieren van het maken van een camera tuig uit delen van een fiets winkel.  Het is echt eenvoudig en echt goedkoop.Pros:Aluminium gebaseerd.Veelzijdig omdat de grepen kunnen worden verplaatst op basis
Bouwen van een Arduino gebaseerd thermische scanner

Bouwen van een Arduino gebaseerd thermische scanner

Welkom bij mijn eerste instructable!Hier vindt u alle informatie over het bouwen van een automatische thermische imager gebruik van off-the-shelf delen. Dit project kan u helpen identificeren van statische gebieden die nodig isolatie tegen koude weer
Stalen maskers op basis van een 3D gezicht scan

Stalen maskers op basis van een 3D gezicht scan

Ik heb een heleboel de laatste jaar experimenteren met een proces om mozaïek stalen formulieren met behulp van 3D-modellen en waterjet snijden/etsen te maken. (Meer details gegeven hier en hier). I 'm gonna snel opgeschaald in sommige openbare kunst
Nuttige componenten in de basis van een burn-out CFL gloeilamp.

Nuttige componenten in de basis van een burn-out CFL gloeilamp.

A burn-out CFL gloeilamp huis biedt een mooie kleine easter egg voor de elektronica hobbyist.Gewoon te wrikken uit de base met een jacknife ingevoegd in de naad, en het komt gemakkelijk uit elkaar.De circulaire PC bord bevat een heleboel nuttige onde
Maken van een microcontroller gebaseerde boost converter

Maken van een microcontroller gebaseerde boost converter

Ik moest voor een recent project, verhoging van de productie van een USB-poort van de (hoog ampage opladen) van 5V tot 18V voor het aandrijven van een versterkte luidspreker. Ik besliste te proberen mijn eigen boost converter rollen (vooral omdat spe
Een pannenlap maken op basis van een oud T-Shirt

Een pannenlap maken op basis van een oud T-Shirt

laten sommige upcycling door het draaien van een ongewenste item in iets nieuwe en nuttige. Hier is het garen bal dat we van een oud T-shirt gemaakt. Afval niet, wil niet, dat hebben we besloten om te recycleren in een pot-houder.U kunt maken wat je
Tetraëder maken op basis van een kubus in uitvinder

Tetraëder maken op basis van een kubus in uitvinder

Unidirectioneel om te maken een tetraëder in een solide modeler is snijden van een kubus. Een regelmatige tetraëder kan worden gemaakt door te snijden langs de diagonalen van een kubus, zoals te zien in de video. Dit instructable zal eerst een kubus
Een schroef benaderd papier op basis van een N-diagonaal Matrix

Een schroef benaderd papier op basis van een N-diagonaal Matrix

Tijdens mijn studie leerde ik hoe te denken op een abstracte manier, zonder het gezien de hele details.Visueel de n-diagonaal matrix iets bekend voor mij was, was het fascinerende patroon, dat deed me aan de windingen van een schroef of een spiraal f
Instellen van een computer gebaseerd DVR (met Mythtv voor linux).

Instellen van een computer gebaseerd DVR (met Mythtv voor linux).

In verschillende instructables, ik heb gesproken over Mythtv een computergebaseerde dvr (digitale videorecorder). Deed zien geen enkele reden waarom ik een huurprijs betalen moet wanneer er is goedkope computerapparatuur hetzelfde te doen. Niet allee
Maken van een weerstand gebaseerd toetsenbord & Interface met Arduino!

Maken van een weerstand gebaseerd toetsenbord & Interface met Arduino!

Hoi allemaal!Ik voorkeur altijd weerstand scheidingslijn/ladder gebaseerd toetsenborden over matrix toetsenborden. Als je slim, alles wat je nodig hebt is een analoge poort van uw microcontroller met zoveel knoppen als u wilt. Tuurlijk, het vereist e
Lage hoogte milieubewaking met een Arduino gebaseerd weer Instrument en Remote Sensing Platform van Aeropod

Lage hoogte milieubewaking met een Arduino gebaseerd weer Instrument en Remote Sensing Platform van Aeropod

ProjectoverzichtStudenten op New Lothrop High School in Michigan hebben samengewerkt om te bouwen van een lage hoogte remote sensing platform genaamd een "Aeropod" en het uitgerust met een "Arduino" gebaseerd weer instrument om sfeervo