Vlad Merzjevitsj
De vloeiende lay-out met drie kolommen is misschien wel de meest flexibele en aanpasbare lay-out die beschikbaar is. Dankzij de combinatie van percentages en pixels om de breedte van de kolommen te specificeren, kunt u verschillende lay-outs maken en deze naar eigen wens kiezen. In afb. 5.17 toont opties voor lay-outs met drie kolommen; deze zijn voor het gemak genummerd.
Rijst. 5.17. Drie kolomindelingen
Hier betekent het percentagesymbool (%) dat de kolombreedte wordt gespecificeerd als een percentage van de lay-outbreedte, px - de kolombreedte wordt gespecificeerd in pixels, en het oneindigheidsteken (∞) dat de kolom de resterende ruimte in beslag neemt. Ondanks de overvloed aan verschillende lay-outs blijven de principes van hun constructie hetzelfde en omvatten ze twee hoofdmethoden: positionering en zwevende elementen. U kunt tabellen ook gebruiken om kolommen van gelijke hoogte te maken.
Positionering gebruikenOm de positie van lagen ten opzichte van te regelen ouderelement noodzakelijk voor de ouders om in te stellen positie eigendom met de waarde relatief , en kind elementen, die de kolommen vormen, is de waarde absoluut . De codestructuur voor de eerste vier lay-outs zal hetzelfde zijn en wordt weergegeven in voorbeeld 5.13.
Voorbeeld 5.13. Twee kolommen in pixels of drie in percentages
Drie kolommen Sitekop Kolom 1 Kolom 2 Kolom 3
Hier zijn de kolommen op volgorde genummerd, d.w.z. Kolom 1 bevindt zich aan de linkerkant, kolom 2 bevindt zich in het midden en kolom 3 bevindt zich aan de rechterkant.
Positionering heeft een bepaald nadeel dat het gebruik van deze methode beperkt: bij het toevoegen van een voettekst wordt deze verborgen onder de kolommen. Dit komt omdat de lay-outlaag als zodanig geen hoogte heeft, waardoor de voettekstlaag niet naar beneden wordt gedrukt. Als een voettekst absoluut vereist is op een pagina, moet u een kolomconstructiemethode gebruiken op basis van zwevende elementen. Deze methode werkt ook niet in IE6 vanwege bugs erin.
Voor lay-out nr. 1, waarbij de breedte van de eerste kolom van rubber is en de rest vast is, zal de stijl als volgt zijn (voorbeeld 5.14).
Voorbeeld 5.14. Indeling nr. 1
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; /* Relatieve positionering */ ) .layout DIV ( positie: absoluut; /* Absolute positionering */ ) .col1 ( achtergrond: #C7E3E4; /* Achtergrondkleur * / links: 0; /* Linkerrandpositie */ rechts: 300px;* Rechterrandpositie */ .col2 ( achtergrond: #E0D2C7; breedte: 200px; /* Kolombreedte */ rechts: 100px; /* Naar links verschuiven kolombreedte 3 */ ) .col3 (achtergrond: #ECD5DE; breedte: 100px; rechts: 0; )
Kolommen met een bepaalde breedte hebben een breedte-eigenschap, en hun positie aan de linker- of rechterkant wordt respectievelijk gespecificeerd door de eigenschap left of right. De rubberbreedte van de resterende kolom wordt geconstrueerd door gelijktijdig links en rechts toe te voegen, waarvan de waarden hetzelfde zijn als de breedte van de vaste kolommen.
Lay-outs nr. 2 (voorbeeld 5.15) en nr. 3 (voorbeeld 5.16) zijn op hetzelfde principe gebouwd.
Voorbeeld 5.15. Indeling nr. 2
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; breedte: 100px; ) .col2 ( achtergrond: #E0D2C7; links: 100px; rechts: 200px;).col3 ( achtergrond: #ECD5DE; breedte: 200px; rechts: 0; )
Voorbeeld 5.16. Indeling nr. 3
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; breedte: 100px; ) .col2 ( achtergrond: #E0D2C7; breedte: 200px; links: 100px; .col3 (achtergrond: #ECD5DE; links: 300px; rechts: 0; )
Lay-out nr. 4, waarin de breedte van alle kolommen als percentage is ingesteld, heeft enkele nuances. Als dezelfde breedte van alle kolommen vereist is, kan dit fractioneel worden ingesteld (33,33%), maar Opera-browser kan niet werken met fractionele percentagewaarden, dus er zullen “gaten” verschijnen tussen de kolommen (Fig. 5.18).
Rijst. 5.18. Kolombreedte gespecificeerd in fractionele percentages
In dergelijke situaties moet u overstappen op ongelijke aandelen, bijvoorbeeld 33%, 34%, 33%, zoals weergegeven in voorbeeld 5.17.
Voorbeeld 5.17. Indeling nr. 4
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; breedte: 33%; ) .col2 ( achtergrond: #E0D2C7; links: 33 %; breedte: 34%; ) .col3 ( achtergrond: #ECD5DE; rechts: 0; breedte: 33%; )
In sommige browsers kan er een kleine opening tussen de kolommen verschijnen. Het kan worden opgelost door fractionele waarden te gebruiken in plaats van hele procentuele waarden, d.w.z. 33,3% in plaats van 33%.
De overige lay-outs, waarin twee van de drie kolommen van rubber zijn, vertegenwoordigen speciale groep, omdat ze op verschillende manieren geïnterpreteerd kunnen worden. Zo wordt de breedte van de ene kolom aangegeven in pixels, de andere als een percentage van de lay-outbreedte, en wordt de breedte van de resterende kolom automatisch berekend. In afb. Figuur 5.19 toont verschillende benaderingen voor het berekenen van de breedte van kolommen met behulp van het voorbeeld van lay-out nr. 5.
Rijst. 5.19. Breedte van twee rubberen kolommen
In de eerste optie wordt de breedte van de eerste kolom ingesteld als een percentage van de lay-outbreedte, wordt de breedte van de tweede kolom automatisch berekend en heeft de derde kolom een vaste breedte in pixels. Bij de tweede optie veranderen de kolommen onderling en wordt de breedte van de eerste kolom automatisch berekend. Bij de derde optie wordt ervan uitgegaan dat de totale breedte van de rubberen kolommen 100% is en dat de breedte van de eerste en tweede kolom daaruit wordt berekend.
De eerste en tweede optie kunnen eenvoudig worden geïmplementeerd, op dezelfde manier als de code met twee kolommen in pixels. Alleen in plaats van breedte in px geven we % aan. Voorbeeld 5.18 toont lay-outstijl nr. 5, waarbij de eerste kolom is ingesteld op een percentage.
Voorbeeld 5.18. Lay-out nr. 5. De breedte van de tweede kolom wordt berekend
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; breedte: 50%; ) .col2 ( achtergrond: #E0D2C7; links: 50 %; rechts: 200px; .col3 (achtergrond: #ECD5DE; rechts: 0; breedte: 200px; )
Lay-outstijl #5 met een berekende eerste kolom wordt getoond in Voorbeeld 5.19.
Voorbeeld 5.19. Lay-out nr. 5. De breedte van de eerste kolom wordt berekend
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; links: 0; rechts: 200px; marge-rechts: 50%; ). col2 ( achtergrond: #E0D2C7; breedte: 50%; rechts: 200px; ) .col3 ( achtergrond: #ECD5DE; breedte: 200px; rechts: 0; )
De eerste kolom kan niet via de juiste eigenschap naar rechts worden ingesteld, omdat de waarde 50%+200px zal zijn. CSS2 beschikt niet over dergelijke berekende waarden. Daarom zullen we de focus toepassen - we zullen de eerste laag aan de rechterkant beperken tot een breedte van 200px tot en met rechts en deze naar links verplaatsen met de breedte van de tweede kolom 50% met behulp van margin-right . Onze laag is absoluut gepositioneerd, dus dergelijke manipulaties hebben op geen enkele manier invloed op de breedte.
De derde optie met twee rubberen kolommen vereist de aanwezigheid van een extra laag, laten we het rubber noemen, ten opzichte waarvan de breedte van de kolommen wordt ingesteld (voorbeeld 5.20).
Voorbeeld 5.20. Indeling #5: percentagebreedte van twee kolommen
Drie kolommen .header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .rubber ( links: 0; rechts: 200px; ) .col1 ( achtergrond: #C7E3E4; breedte: 60% ) .col2 ( achtergrond: #E0D2C7; breedte: 40%; links: 60%; ) .col3 ( achtergrond: #ECD5DE; breedte: 200px; rechts: 0; ) Sitekop Kolom 1 Kolom 2 Kolom 3;
De constructie van baan nr. 6 is vergelijkbaar met baan nr. 5, dus daar gaan we niet verder op in. Wat lay-out nr. 7 betreft, er is een optie die voor problemen kan zorgen. Dit is van toepassing op het geval waarin u de breedte van de linker- en rechterkolom berekend en aan elkaar gelijk wilt maken. Om dit te doen, moet de breedte van de eerste en derde kolom gelijk worden gemaakt aan 50% (Fig. 5.20).
Rijst. 5.20. Indeling nr. 7 met kolommen van gelijke breedte
Om ruimte te laten voor de tweede kolom, gebruiken we de eigenschap margin-right voor de eerste kolom en margin-left voor de derde. De waarde van deze eigenschappen is de helft van de breedte van de tweede kolom. Dus als het gelijk is aan 200px, dan is het resultaat marge-rechts: 100px (voorbeeld 5.21).
Voorbeeld 5.21. Indeling nr. 7. De breedte van de rubberen kolommen is hetzelfde
Header ( achtergrond: #D5BAE4; ) .layout ( positie: relatief; ) .layout DIV ( positie: absoluut; ) .col1 ( achtergrond: #C7E3E4; links: 0; rechts: 50%; marge-rechts: 100px; ). col2 ( achtergrond: #E0D2C7; breedte: 200px; links: 50%; marge-links: -100px; ) .col3 ( achtergrond: #ECD5DE; links: 50%; rechts: 0; marge-links: 100px; )
De eigenschap width kan niet rechtstreeks worden gebruikt, omdat het toevoegen van een marge de breedte alleen maar vergroot en niet verkleint, zoals we nodig hebben. Daarom wordt de breedte tegelijkertijd gevormd door de opgegeven breedte eigendommen over en gelijk. Met de positionering van de tweede kolom zijn er problemen bij het specificeren van de linker- of rechterwaarde, omdat deze gelijk zal zijn aan 50% -200px. We stellen dus de linkermargepositie in op 50% ( left : 50% ) en verplaatsen vervolgens de hele kolom met de helft van de breedte naar links met behulp van de eigenschap margin-left (margin-left : -100px ).
Omdat de breedte van sommige kolommen automatisch wordt berekend, wordt aanbevolen om de minimale lay-outbreedte te beperken door een eigenschap min-with toe te voegen aan de BODY-selector. Dan neemt de breedte van de kolommen niet af als de opgegeven limiet wordt bereikt.
BODY ( min. breedte: 800px; /* Minimale lay-outbreedte */ )
De minimale breedtewaarde is afhankelijk van de lay-out en inhoud van de pagina en wordt meestal bepaald door ervaring.
Zwevende elementen gebruikenDrijvende elementen zijn er nog een universele methode het bouwen van een verscheidenheid aan lay-outs met drie kolommen. In tegenstelling tot positionering hoeft u zich geen zorgen te maken over het kelderprobleem, omdat de kelder zich altijd op zijn plaats onder de hoogste kolom bevindt.
Kolommen worden geconstrueerd met behulp van de eigenschap float in combinatie met de eigenschappen marge en breedte. Afhankelijk van de gekozen lay-out verandert ook de volgorde van de kolommen in de code; lagen komen altijd op de eerste plaats, waaraan float wordt toegevoegd.
Indeling nr. 1. Rubberen eerste kolom
De breedte van de tweede en derde kolom wordt gespecificeerd in pixels, en hun positie wordt gespecificeerd via de eigenschap float met de waarde rechts . Voor de eerste kolom moet u ook de eigenschap margin-right instellen op een waarde die gelijk is aan de totale breedte van de overige kolommen (voorbeeld 5.22).
Voorbeeld 5.22. Indeling nr. 1
Layout 1 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; /* Uitpakken */ ) .col1 ( achtergrond: #C7E3E4; /* Achtergrondkleur */ marge-rechts: 300px; /* Shift links door de breedte van kolommen 2 en 3 */ .col2 ( achtergrond: #E0D2C7; breedte: 200px; zwevend: rechts; /* Wrap links */ ) .col3 ( achtergrond: #ECD5DE; breedte: 100px; zwevend: rechts; /* Links doorlopen */ ) Sitekop Kolom 3 Kolom 2 Kolom 1 Voettekst
Indeling nr. 2. Rubberen middenkolom
De breedte van de eerste en derde kolom wordt gespecificeerd in pixels, en hun positie wordt gespecificeerd via de float-eigenschap met de waarde links voor de eerste kolom en rechts voor de derde. De middelste kolom bevat, zodat deze zijn uiterlijk behoudt, een universele eigendomsmarge, die de linker- en rechtermarge instelt (voorbeeld 5.23).
Voorbeeld 5.23. Indeling nr. 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 2 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .col1 ( achtergrond: #C7E3E4; float: links; breedte: 200px; ) .col2 ( achtergrond: #E0D2C7; marge: 0 100px 0 200px; /* Rechter- en linkervulling */ .col3 ( achtergrond: #ECD5DE; breedte: 100px; zwevend: rechts; ) Sitekop Kolom 1 Kolom 3 Kolom 2 Voettekst
Indeling nr. 3. Rubberen derde kolom
De positie van de eerste en tweede kolom wordt aangegeven via de float eigenschap met de waarde left , voor de derde kolom moet je de linkermarge (margin-left ) instellen op de totale breedte van de overige kolommen (bijvoorbeeld 5.24).
Voorbeeld 5.24. Indeling nr. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 3 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .col1 ( achtergrond: #C7E3E4; float: links; breedte: 100px; ) .col2 ( achtergrond: #E0D2C7; float: links ; breedte: 200px; ) .col3 ( achtergrond: #ECD5DE; marge-links: 300px; /* Linkermarge tot de breedte van kolommen 1 en 2 */ ) Sitekop Kolom 1 Kolom 2 Kolom 3 Voettekst
Lay-out nr. 4. De breedte van alle kolommen is ingesteld als een percentage
Om deze lay-out te bouwen zijn veel opties geschikt, gebaseerd op eerdere lay-outs, maar in plaats van pixels moet u percentages opgeven. Een andere methode wordt getoond in voorbeeld 5.25, waarbij alleen de eigenschappen float en width worden gebruikt.
Voorbeeld 5.25. Indeling nr. 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 4 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .layout DIV ( zwevend: links; ) .col1 ( achtergrond: #C7E3E4; breedte: 20%; ) .col2 ( achtergrond: #E0D2C7; breedte: 60%; ) .col3 (achtergrond: #ECD5DE; breedte: 20%; ) Sitekop Kolom 1 Kolom 2 Kolom 3 Voettekst
Indeling nr. 5. De breedte van twee rubberen kolommenIn afb. 5.19 werd aangetoond dat lay-out nr. 5, die twee rubberen kolommen heeft, op verschillende manieren kan worden geïnterpreteerd.
Hier wordt de breedte van de eerste kolom gespecificeerd als een percentage, en de positie ervan wordt gespecificeerd via de float-eigenschap met de waarde left , voor de derde kolom wordt de breedte gespecificeerd in pixels en de waarde van de float-eigenschap wordt ingesteld op right . Voor de middelste kolom hoeft u alleen nog maar de linker- en rechtermarge in te stellen op de breedte van de kolommen (voorbeeld 5.26).
Voorbeeld 5.26. Indeling 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Lay-out 5.1 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .col1 ( achtergrond: #C7E3E4; breedte: 40%; zwevend: links; ) .col2 ( achtergrond: #E0D2C7; marge: 0 200px 0 40%; ) .col3 (achtergrond: #ECD5DE; breedte: 200px; zwevend: rechts; ) Sitekop Kolom 1 Kolom 3 Kolom 2 Voettekst
De eerste kolombreedte wordt berekend
Dit is de lastigste indeling omdat de breedte van de eerste kolom niet direct is opgegeven. Maar om de inhoud te beperken, moet u een waarde opgeven die percentages en pixels combineert voor de eigenschap Marge-rechts. In CSS2 kan dit, zoals al vermeld, niet worden ingesteld, dus laten we nog een laag toevoegen binnen de col1-laag genaamd wrap en een opvulling toevoegen aan elk van deze lagen. De één in percentage, de ander in pixels (voorbeeld 5.27).
Voorbeeld 5.27. Indeling 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Lay-out 5.2 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .col1 ( marge-rechts: 40%; ) .col1 .wrap ( marge-rechts: 200px; achtergrond: #C7E3E4; ) .col2 ( achtergrond: #E0D2C7; breedte: 40%; zwevend: rechts; ) .col3 ( achtergrond: #ECD5DE; breedte: 200px; zwevend: rechts; ) Sitekop Kolom 3 Kolom 2 Kolom 1 Voettekst
Breedte van twee kolommen in percentage
In deze lay-out wordt de totale breedte van de rubberen kolommen op 100% gesteld, dus we hebben een extra laag nodig waartegen de breedte van de interne kolommen wordt gemeten. Deze laag, genaamd rubber, werkt met laag col3 als een lay-out met twee kolommen, en de binnenste lagen col1 en col2 worden horizontaal uitgelijnd met behulp van de eigenschap float (voorbeeld 5.28).
Voorbeeld 5.28. Indeling 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Lay-out 5.3 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .rubber ( marge-rechts: 200px; ) .col1 ( achtergrond: #C7E3E4; breedte: 60%; zwevend: links; ) .col2 ( achtergrond: #E0D2C7; breedte: 40%; zwevend: links; ) .col3 ( achtergrond: #ECD5DE; breedte: 200px; zwevend: rechts; ) Sitekop Kolom 3 Kolom 2 Kolom 1 Voettekst
Lay-outs 6, 7 en hun variaties zijn gebouwd op hetzelfde principe als lay-out nr. 5, met uitzondering van lay-out nr. 7, waarin de breedte van de linker- en rechterkolom rubber is en gelijk aan elkaar.
Eerst bereiden we de basis voor en geven we de volgorde van de lagen in de HTML-code aan.
Kolom 1 Kolom 3 Kolom 2
Col1 ( breedte: 50%; zwevend: links; ) .col2 ( breedte: 200px; zwevend: links; ) .col3 ( breedte: 50%; zwevend: rechts; )
Dat is nog niet alles, de lagen vormen nog geen kolommen en zijn gerangschikt op een manier die totaal ongepast is voor ons. U moet de tweede kolom met de helft van de breedte naar links verplaatsen (margin-left : -100px ) en de derde kolom op zijn plaats forceren. Om dit te doen, moet u de breedte ervan vergroten, zodat deze gelijk is aan of groter is dan 50%+100px (de helft van de tweede kolom). Het beste kunt u de eigenschap margin-left gebruiken met een negatieve waarde, waarna de kolommen worden aangemaakt. Er zijn nog enkele nuances. De buitenste kolommen zijn met elkaar verbonden, wat duidelijk zichtbaar is wanneer hun hoogte groter is dan de hoogte van de middelste kolom (Fig. 5.21).
Rijst. 5.21. Gedockte luidsprekers
Bovendien staat in de linkerkolom de tekst rechts en in rechter kolom de tekst aan de linkerkant is verborgen onder de achtergrond van de middelste kolom. Dit zal niet merkbaar zijn als de hoogte van deze kolom groot is, maar dit is niet altijd mogelijk. Om te overwinnen de aangegeven nadelen, moet je nog een laag in de buitenste kolommen plaatsen (in het voorbeeld heet dit wrap ) en de achtergrondkleur van de kolom ervoor instellen, verplichte velden en streepjes. Laatste code wordt gegeven in voorbeeld 5.29.
Voorbeeld 5.29. Indeling nr. 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Lay-out 7 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( overflow: verborgen; ) .col1 ( breedte: 50%; zwevend: links; ) .col1 .wrap ( achtergrond: #C7E3E4; marge-rechts: 100px ; /* Verschuiving naar links met de helft van de breedte van kolom 2 */ opvulling: 10px; /* Marges rond tekst */ ) .col2 ( achtergrond: #E0D2C7; breedte: 200px; zwevend: links; marge-links: -100px; ) .col3 ( breedte: 50%; zwevend: rechts; marge-links: -100px; ) .col3 .wrap ( achtergrond: #ECD5DE; marge-links: 100px; /* Verschuif naar rechts met de helft van de breedte van kolom 2 */ opvulling : 10px ) Sitekoptekst Kolom 1 Kolom 3 Kolom 2 Voettekst
Marges en randen in een lay-out met drie kolommenDe eigenschap opvulling is bewust niet toegevoegd aan de gegeven voorbeeldlay-outs, omdat de code alleen als basis voor de lay-out dient en u in specifieke gevallen moet beslissen of u marges in de kolommen nodig heeft of niet. Het toevoegen van marges en randen aan een blokelement vergroot de breedte, waarmee bij de lay-out rekening moet worden gehouden. De breedte neemt echter alleen toe als de laag is ingesteld op breedte waarde. Laten we een paar voorbeelden bekijken waarbij de breedte zal veranderen en waar niet.
Div ( /* opvulling heeft invloed op de breedte */ breedte: 200px; opvulling: 10px; ) div ( /* opvulling heeft geen invloed op de breedte */ positie: absoluut; links: 20px; rechts: 20px; opvulling: 10px; ) div ( / * opvulling heeft invloed op de breedte */ float: left; opvulling: 10px; ) div ( /* opvulling heeft geen invloed op de breedte */ margin-right: 50%; opvulling: 10px; )
In die kolommen waar opvulling of rand vereist is, maar het toevoegen ervan zal leiden tot het "verbreken" van de lay-out, kunt u een geneste laag gebruiken en daarvoor de nodige eigenschappen instellen.
Kolom
In dit voorbeeld verandert de laagbreedte die is ingesteld op 200 pixels niet, maar worden de marges en rand toegevoegd.
Tabel als kolommenDe tafel is handig in gebruik voor eenvoudige en snelle creatie kolommen van dezelfde hoogte. Deze snelheid wordt door verschillende dingen bereikt. Ten eerste blijft de codestructuur voor elke lay-out hetzelfde; zoals in het geval van float, verandert de volgorde nooit. Ten tweede wordt de breedte van de cellen automatisch berekend op basis van hun inhoud, dus geef gewoon de breedte op benodigde luidsprekers, en de overige passen zich aan de totale breedte van de tafel aan. Voorbeeld 5.30 toont layout nr. 1 gemaakt op een tafel.
Voorbeeld 5.30. Indeling nr. 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 1 .header, .footer ( achtergrond: #D5BAE4; ) .layout ( breedte: 100%; /* Tabelbreedte */ ) .layout TD ( opvulling: 5px; /* Celmarges */ verticaal uitgelijnd: bovenaan; / * Bovenaan uitlijnen */ .col1 ( achtergrond: #C7E3E4; ) .col2 ( achtergrond: #E0D2C7; breedte: 200px; ) .col3 ( achtergrond: #ECD5DE; breedte: 100px; ) Sitekop
| Kolom 1 | Kolom 2 | Kolom 3 |
Het toevoegen van een opvullingseigenschap aan een TD-selector overschrijft het cellpadding-attribuut van de tag
 |
Hij stond onder een boom en wachtte, Eén-twee, één-twee! Het gras brandt, het zwaard snijdt, schreeuwt, Lewis Carroll, vertaling door Dina Orlova, tekeningen door John Tenniel |
 |
Het resultaat van het voorbeeld wordt getoond in Fig. 5.22.
Rijst. 5.22. Kolom in het midden van de lay-out
Van de auteur: groeten lieve lezers van mijn blog! Velen van jullie hebben vast al de legendes gehoord over draken, de Kerstman en een onbegrijpelijk beest genaamd rubberen webontwerp, dat in staat is van vorm te veranderen. De manuscripten van John Tolkien vertellen je over het eerste personage, de ouders vertellen je over het tweede, maar ik neem de informatie over het derde op mij. Hoe vreemd het ook mag klinken, in dit artikel zal ik proberen op rubberwebontwerp te kauwen en de voor- en nadelen ervan te bespreken.
Bij het ontwikkelen van een website moet een webmaster zich allereerst laten leiden door de doelstellingen van het project. Als het voor de klant belangrijk is dat de webpagina op ieder beeldscherm kan worden aangepast, dan hier hulp zal komen rubberen (adaptief) ontwerp.
Dit formaat heeft zijn naam te danken aan het feit dat de breedte niet in pixels is ingesteld, maar als een percentage. Met zijn hulp wordt de pagina geopend op het volledige beeldscherm, ongeacht de resolutie.
Om je carrière als webontwerper snel te laten ontwikkelen, is het absoluut noodzakelijk om deze richting te bestuderen. Veel klanten met een reeds opgebouwde loyale klantenbasis zijn op dit moment bijzonder veeleisend, omdat ze hun gebruikers maximaal gemak willen bieden.
De geboorte van vloeiend webdesignAls een interessante observatie kunnen we opmerken dat specialisten in ons land eerder dan in het Westen 'rubber' webdesign vanuit een positief perspectief begonnen te beschouwen. Feit is dat het bij de geboorte van de webrichting op dit gebied kwam groot aantal bekrompen drukkers.
Buitenlandse experts realiseerden zich eenvoudigweg niet de mogelijkheid om niet-vast te creëren grafische ontwikkelingen. Maar de concepten 'web' en 'design' kwamen bijna gelijk naar ons toe, waardoor een dergelijke visuele flexibiliteit van het beeld door ontwikkelaars werd gezien als gewone creatieve vrijheid.
Zijn vloeiend en responsief webdesign hetzelfde?Mensen verwarren deze twee concepten vaak, maar het zijn geen pure synoniemen voor elkaar. Bij responsive webdesign wordt gewerkt met verschillende website-indelingen om zo een maximaal gebruiksgemak te creëren op alle soorten apparaten, waarbij rekening wordt gehouden met allerlei schermresoluties.
Het past het algehele beeld “redelijk” aan het scherm aan, afhankelijk van de grootte van het display op het apparaat. Welnu, het rubberen ontwerp is in feite een van de elementen responsief webdesign. Het brengt op zijn beurt alleen wijzigingen aan in de verhoudingen van de webpagina.
We kunnen dus tot de conclusie komen dat responsief webontwerp een combinatie is van rubber en andere progressieve verbeteringen. Hoewel er door sympathieke definities soms verwarring kan ontstaan. Het is vooral onaangenaam als er hierover meningsverschillen ontstaan met de klant, dus wees voorzichtig en maak altijd duidelijk wat de klant bedoelde als hij het had over het rubberen ontwerp van de site.
Voordelen van vloeiend webdesignMet rubber css-ontwerp heb je de mogelijkheid om een webpagina te ontwerpen die alles vult vrije ruimte browser, ongeacht de schermgrootte. Als er wijzigingen plaatsvinden in de toestemmingsgerelateerde instellingen, wordt de gehele sitestructuur opnieuw aangepast aan de bijgewerkte voorwaarden. Wonderen en magie, nietwaar?
Deze functie zorgt ervoor dat de webpagina het browservenster volledig in beslag neemt, ongeacht of de foto op een kleine HTC of op een 20-inch scherm wordt weergegeven. breedbeeldmonitor. Dit is precies het belangrijkste voordeel van het rubberen ontwerp.
De gebruikers die kleine monitoren hebben, ondervinden daar geen problemen mee horizontale strepen scrollen, maar eigenaren van grote breedbeeldformaten storen zich soms. Deze laatste zal in dit opzicht dus ten volle van het beeld kunnen genieten, omdat het volledige weergavegebied effectief wordt gebruikt.
Als we nadenken over de vraag voor welke sites rubber webdesign geschikt is, dan hangt alles weer af van de doelen van de klant. Deze visuele flexibiliteit zal goed tot zijn recht komen op sites waar plaatsing op één webpagina prioriteit heeft maximale hoeveelheid inhoud en esthetische normen verdwijnen naar de achtergrond.
Het is op deze basis dat rubberwebontwerp op grote schaal wordt gebruikt bij het creëren nieuwsportals, blogs, maar ook allerlei informatiesites. In deze gevallen is het gebruik ervan het meest geschikt.
Huidige trends en benaderingen in webontwikkeling
Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites
Nadelen van vloeiend webontwerpDaarnaast positieve punten heeft dergelijk webdesign ook enkele specifieke nadelen. Een daarvan is dat het uiteindelijke resultaat van het automatisch aanpassen van de pagina aan bepaalde schermresolutieomstandigheden onvoorspelbaar is. Sommige grafische elementen op de site bevinden zich misschien plotseling op een andere plek, omdat ze zijn verdreven door naburige collega's.
Een ander nadeel van dergelijk "rubber" is het feit dat het laden van een pagina ermee 2-3 keer kan toenemen in vergelijking met de standaardduur. Dit gebeurt omdat sommige browsers kieskeurig zijn over pagina-indelingen. van dit formaat. Ze hebben moeite met het weergeven van elementen met variabele breedte, wat ook het risico op visuele fouten vergroot.
Voorbeelden van vloeiend en responsief webdesignVoor de duidelijkheid wil ik er een paar laten zien succesvolle voorbeelden rubber en adaptieve ontwerpen van genoeg succesvolle ontwikkelaars.
1. http://www.simplebits.com/Laten we eerst eens kijken naar de rubbersite van een Amerikaanse blogger die tegelijkertijd betrokken is bij webontwikkeling. Volledige versie website:
Mobiele versie website:
Zoals u kunt zien, wordt de afbeelding in dit geval alleen aangepast aan de grootte van het apparaat, en algemene structuur website blijft ongewijzigd.
2. http://www.fork-cms.com/Nu stel ik voor dat u vertrouwd raakt met een website die zich aanpast aan specifiek apparaat en bouwt, afhankelijk van de grootte, zijn eigen structuur volledig opnieuw op. Volledige versie van de site:
Mobiele versie van de site:
Dat is het. Ik hoop dat het materiaal van vandaag interessant was en dat je je tijd niet hebt verspild. Zo ja, laat dan opmerkingen over deze kwestie achter en deel uw eigen mening. Ik waardeer zowel positieve feedback als deskundige meningen van webdesign 2.0-masters. Abonneer u op de blog om geen verdere interessante en nuttige informatie.
Dat is alles voor mij, tot snel!
Moderne trends en benaderingen in webontwikkeling
Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites
Ik heet u welkom bij de volgende les, die vandaag zal worden gewijd CSS-taal. En we zullen samen met u een rubberen lay-out met drie kolommen voor de site implementeren. In de toekomst kunt u dit frame eenvoudig kopiëren en beginnen met het maken van een website. De lay-out zal bestaan uit blokken zoals: sitekop, linkerzijbalk, rechterzijbalk, inhoudsgebied en voettekst. Niets ingewikkelds, een eenvoudig, vrij eenvoudig sjabloon. Welnu, het is tijd om het te implementeren. Laten we om te beginnen schrijven volgende structuur html-code:
Wij hebben de structuur geïmplementeerd. Het is tijd om stijlen toe te passen, waardoor we een lay-out met drie kolommen zullen implementeren.
Nu we klaar zijn met de schrijfstijlen, laten we er een beetje naar kijken.
Als basis hebben we het blok genomen waarin we alle andere blokken plaatsen, en daarvoor de maximale breedte, middenuitlijning en een breedte gelijk aan honderd procent ingesteld (dit is niet verplicht, maar het is ook niet overbodig) .
Er werd een titel in het blok geplaatst dat verantwoordelijk was voor de sitekop, en het blok zelf kreeg een achtergrondkleur en gecentreerde tekstuitlijning. Daarna gingen we verder met het belangrijkste onderdeel, onze rubberen luidsprekers.
Voor de linkerzijbalk stellen we een achtergrondkleur en een vaste hoogte in, zodat we kunnen visualiseren hoe de site er in de toekomst uit zal zien. We hebben de breedte ingesteld op twintig procent en ook de stroom van de elementen naar links ingesteld.
De situatie met de rechterzijbalk is vergelijkbaar, alleen wij verzenden dit element V rechterkant scherm, waarbij de stroom van elementen aan de rechterkant wordt ingesteld. Na deze methode wordt de inhoud automatisch gecentreerd op het scherm tussen deze twee zijbalken.
Maar voor de inhoud stellen we ook de achtergrondkleur, hoogte, linker- en rechtermarges in, die gelijk zijn aan 21 procent, en dienovereenkomstig de breedte op 58 procent. Je vraagt je misschien af waarom 58 procent. Gebaseerd op een breedte gelijk aan honderd procent, trekken we de opvulling af van links en rechterkant, die gelijk zijn aan 21 procent, totaal 100 - 21 - 21 = 58. Dat is waar dit cijfer. Alle, rubberen blokken klaar, het enige dat overblijft is het implementeren van de voettekst.
Het is geïmplementeerd volgens het principe van de sitekop, we maken ook een blok met een kop erin, stellen de achtergrond, tekstkleur en gecentreerde tekstuitlijning in.
Als we naar het resultaat kijken, kunnen we zeggen dat alles vrij eenvoudig is en dat de site tot het uiterste wordt gecomprimeerd en wordt uitgerekt tot de maximale breedte die door ons is opgegeven. Als u wilt, kunt u de minimale breedte opgeven waarnaar uw site zal krimpen. Aangegeven dit pand voor het blok met id container , omdat dit de ouder is van de andere blokken. Dus jij en ik hebben de mogelijkheid overwogen om een driekoloms rubberwebsite te maken, hiermee neem ik afscheid van je. Het allerbeste voor jou, succes!
Rubberen website-indeling. Rubberen webdesign. Wat en waar gaan we stretchen?Kenmerken, voordelen en nadelen
Een van de meest populaire soorten website-indeling is de rubberen lay-out. Belangrijkste kenmerk Vloeiende lay-out is de mogelijkheid om zich aan te passen aan verschillende schermresoluties en browservenstergroottes.
Van allemaal html-typen Website-indelingen kunnen worden onderverdeeld in drie hoofdindelingen: vast, vloeiend en adaptief.
Kenmerken van rubberen lay-out
In tegenstelling tot een vaste lay-out maakt de vloeiende lay-out veranderingen in de grootte van het browservenster mogelijk en is deze ontworpen voor verschillende schermresoluties. Feit is dat met modern snelle ontwikkeling technologieën en de voortdurende opkomst van steeds geavanceerdere technologie, ontstaat er een probleem met de lay-out van de website. De gebruikelijke vaste indeling reageert niet meer op iedereen noodzakelijke eisen en raakte langzamerhand achterhaald. Nu is het gebruik van oude methoden eerder uitzondering dan regel, en dat is heel natuurlijk.
Stelt u zich eens zo'n eenvoudig voorbeeld voor: een gebruiker reed in een metro, kwam van zijn werk naar huis en kwam met uw site naar uw site mobiele telefoon, waarvan de schermresolutie 320x480 pixels is, ging hij mee naar huis desktopcomputer en uw site bekeken op een 24″ diagonale monitor met een resolutie van 1920x1200 pixels (en dit is verre van de limiet). De vraag is hoe je een vaste lay-out kunt gebruiken om dezelfde resultaten te bereiken op een smartphone en daarop grote monitor(als we automatische schaling opzij zetten). Dat wil zeggen, met andere woorden, het is noodzakelijk dat het niet op de telefoon verschijnt horizontaal scrollen en tegelijkertijd zag de plek er op de monitor niet uit als een ongelukkige smalle streep midden in het wit leeg scherm. Het antwoord is nee.
En hier komt de rubberen lay-out ons te hulp, die de taak gemakkelijk aankan. Op een grote monitor is het geen zonde om de site over het hele scherm uit te rekken, of jezelf te beperken tot een bepaalde templatebreedte, bijvoorbeeld 75% van de schermbreedte. Er zijn geweldige voor deze taak CSS-eigenschappen maximale breedte En min-breedte, waarmee u de breedte van de site binnen bepaalde grenzen kunt houden, wat de meest correcte en esthetische oplossing is.
Voor- en nadelen van rubberen lay-outHet belangrijkste voordeel van een vloeiende lay-out is de veelzijdigheid ervan bij het wijzigen van de grootte van het browservenster en op monitoren met verschillende schermresoluties, waarvan het verschil behoorlijk kan variëren. Een goed ontworpen website ziet er geweldig uit op een grote monitor en neemt voldoende schermruimte in beslag, maar het is de moeite waard eraan te denken dat een persoon niet te veel waarneemt lange rijen tekst en bereken de breedte van de site verstandig en binnen redelijke grenzen. Welnu, het feit dat een te smalle website er op een groot beeldscherm miserabel uitziet, is voor niemand een geheim en moet altijd worden vermeden.
Er zijn niet veel nadelen aan de rubberen lay-out, vandaar de populariteit en alomtegenwoordigheid ervan. Het grootste nadeel is dat het veel moeilijker is om een flexibele website te maken dan een vaste website. In het geval van grote afbeeldingen of achtergronden moet u zoeken naar plaatsen in de afbeeldingen die kunnen worden uitgerekt terwijl de geschiktheid van de afbeelding behouden blijft. Bijna alle afmetingen in de lay-out moeten in procenten worden aangegeven, die uiteraard verstandig moeten worden berekend. En als de originele afbeelding te klein is, dan bij het schalen grote kant het zal veel kwaliteit verliezen.
Aan de andere kant, als je ook neemt groot beeld met een reserve, dan weegt het te veel en zullen gebruikers die de site bezoeken vanaf mobiele apparaten met een zwak internet te veel extra bytes downloaden.
Bij het opzetten van een rubberen website wordt veel tijd besteed aan het controleren van het resultaat bij verschillende schermresoluties, en bovendien vereist dit een monitor met een redelijk behoorlijke diagonaal, hoe je dit anders kunt controleren. Maar al deze nadelen zijn niets vergeleken met de voordelen van een rubberen website-indeling. HTML-opmaak is een echte kunst, die niet elke lay-outontwerper begrijpt. Elk type lay-out moet worden gebruikt waar dat passend is, en niet zomaar ergens.
HTML-indeling
Voorbeeld - rubberPagina 1
Voorbeelden van rubbers met voldoende hoge weerstand tegen herhaaldelijk buigen, die difenylguanidine bevatten, worden in de tabel gegeven. 4.15. Bij elke waarde van de modulus of mate van verknoping vertoonden de DPG-rubbers de grootste weerstand tegen vermoeidheid.
Door rubber voor de zijwanden van banden als voorbeeld te gebruiken, wordt aangetoond dat de DSC- en DTG-methoden bij het ontleden van monsters in een stikstofomgeving de beste resultaten opleveren bij het identificeren van samenstellingen van NC, SBR, EPDM en halobutylrubber.
Bij ontbinding in een zuurstofomgeving zijn de curven niet zo informatief, maar komen ze overeen met de curven verkregen in een stikstofomgeving.
Laten we deze effecten eens bekijken aan de hand van het voorbeeld van rubbers op basis van kristalliserende rubbers, waar ze zich het duidelijkst manifesteren.
In het werk van K.A. Kerimov (1965), waarbij het voorbeeld van rubber en polyvinyl werd gebruikt, werd aangetoond dat dynamische spanning-rek-curven, dichtbij rechte lijnen, boven statische lijnen liggen, en in het gebied van spanningen die bijna nul zijn, restvervormingen optreden. van dynamische belastingen kan drie keer zo hoog zijn als statisch.
De invloed van vocht op chemische reacties tijdens het kraken van ozon zou zich in gelijke mate moeten hebben gemanifesteerd op rubbers gemaakt van rubbers met een vergelijkbare chemische structuur, maar dit wordt niet waargenomen, zoals te zien is in het voorbeeld van rubbers van NK en SKI.
Adaptieve website-indeling, les één. Indeling van de startpaginaDe resultaten verkregen door P.A. Rebinder en V.V. Margaritov over de invloed van de aard van het oppervlak van vulkorrels op het versterkende effect ervan zijn van groot fundamenteel belang. Met rubber als voorbeeld lieten ze zien dat vulstoffen in drie groepen kunnen worden verdeeld, afhankelijk van de moleculaire aard van de oppervlakken.
Er zijn verschillende eisen aan rubber. Laten we als voorbeeld rubber nemen dat wordt gebruikt in boor- en olieveldapparatuur.
De verschillende aard van de intermoleculaire krachten van interactie tussen het polymeer en oplosmiddelen kan echter leiden tot een volledig verschillende zwelling van het polymeer bij vergelijkbare waarden van oplosbaarheidsparameters voor deze media. Dit probleem is tot in detail bestudeerd aan de hand van het voorbeeld van rubber.
Onzuiverheden en vulstoffen kunnen een aanzienlijk deel van het totale gewicht uitmaken en vaak zelfs het gewicht van het rubber zelf overschrijden. Hoe divers en complex de onzuiverheden die aan ruw rubber worden toegevoegd kunnen zijn, kunt u zien in het voorbeeld van rubber auto banden.
Om de weerstand van polymeren tegen chemicaliën te vergroten actieve media cross-links moeten bestand zijn tegen deze omgevingen. De meest resistente van de momenteel gebruikte verbindingen zijn verknopingen type S-S, zoals weergegeven in het voorbeeld van fluorrubber en chloropreenrubber (zie hfdst.
Een belangrijk kenmerk van het slijtageproces van meeglijdend rubber metalen oppervlak Met hoge snelheden, is kritische temperatuur de vernietiging ervan door wrijving. Wanneer rubber onder omstandigheden over een metalen oppervlak glijdt hoge temperaturen blootstelling (200 - 400 C), de volgende hoofdtypen van vernietiging zijn mogelijk: het verschijnen van scheuren op het wrijvingsoppervlak, de vorming van rubberen omhullende lagen op beide contactoppervlakken van het wrijvingspaar en het optreden van een catastrofaal slijtageproces. Met rubber op basis van butadieen-nitril en ethyleen-propyleenrubber als voorbeeld zullen we de redenen analyseren die de vernietiging van deze materialen veroorzaken.
De introductie van vulstoffen vergroot het rubberverzachtende effect. De conclusie dat het verzachtende effect groter is in de aanwezigheid van een vulstof ligt voor de hand en houdt alleen verband met het feit dat de vergelijking van rubbers wordt uitgevoerd bij verschillende daadwerkelijke vervormingen van de rubberfase. privé karakter. Deze conclusie is gebaseerd op uitgebreid materiaal verzameld tijdens het onderzoek naar NC-rubbers. Een meer gedetailleerde analyse met voorbeelden van rubber uit andere rubbers laat echter iets anders zien.
Pagina's: 1
Op op dit moment hoe je zelf een website kunt maken is geen extreme fantasie en vertegenwoordigt niet iets ingewikkelds, zoals begin jaren 2000.
Om uw wonder op internet te creëren, kunt u uiteraard kant-en-klare en gratis motoren voor websites en programma's (websitebouwers) waarmee u, zonder zelfs maar basiskennis van html en css, in een mum van tijd op professionele basis een website helemaal opnieuw kunt maken op het gebied van optimalisatie en SEO.
Of je kunt een andere, correctere manier kiezen: studeren programmacode html- en styling elementen op css. In deze richting kunt u een website van elk ontwerp maken en deze een uniek uiterlijk geven.
ONLINE HTML-TRAINING
Ik raad je ten zeerste aan om wat tijd te besteden en te beginnen met het leren van de basisprincipes van html en css, want zonder deze dingen te weten, zul je nooit in staat zijn om de fragmenten zelf te corrigeren, zoals je zou willen, en nog minder om er iets nieuws aan toe te voegen. binnen de sjabloon.
computerwetenschappelijke laboratoria, examenEn er is veel educatief materiaal over dit onderwerp op internet.
ELEMENTEN VOOR DE SITE
Om een website te maken, moet je weten hoe je moet embedden html-pagina's css-menu, links, afbeeldingen en video's, de site goed kunnen optimaliseren en metatags correct kunnen instellen. Het zal nuttig zijn om te leren waar en hoe u een website op internet kunt plaatsen en welke naam u moet bedenken voor een nieuw portaal, hoe u met hulp een website kunt maken diverse programma's en gereedschap.
Waarom is het nodig? responsief ontwerp? Ik begin met statistieken. U kunt TNS-gegevens voor maart 2013 bekijken op de onderstaande dia.
Zoals je kunt zien, komt ongeveer een derde van het publiek van smartphones en tablets. En dit op voorwaarde dat het percentage elke maand alleen maar groeit. Zoals je begrijpt, is het beter om je neus tegen de wind te houden!)
Omdat CSS alleen duidelijk niet voldoende is om het probleem op te lossen (niet alleen de stijlen moeten worden gewijzigd, maar ook de structuur en inhoud van de blokken), zullen we jQuery gebruiken. Vaak bestaat een website uit verschillende blokken: het hoofdblok en de zijbalken. Als u de site aanpast aan mobiele apparaten, dan is dit maximaal 2 blokken (links en rechts).
Hieronder ziet u een voorbeeld van adaptieve lay-outcode. Het bevat de basisprincipes - u kunt de rest naar eigen goeddunken toevoegen. En vergeet niet om aan te sluiten jQuery-bibliotheek! (zie Hoe kan ik de jQuery-bibliotheek opnemen?)
JS-code (jQuery)
$(document).ready(functie() (
var w = $(venster).breedte(); // Vensterbreedte
var h = $(venster).height(); // Raamhoogte. Wij gebruiken het niet. Ter referentie
als(w
