Lay-outopties gebruiken in het CSS eigenschappenpaneel van Dreamweaver - dummies

Bovenaan in het venster CSS Designer-eigenschappen vindt u de CSS-eigenschappen die gewoonlijk worden gebruikt gebruikt om paginalay-outs te maken. U gebruikt deze opties om hoogte, breedte, uitlijning, positionering en spatiëring te specificeren. Deze instellingen zijn ideaal voor het maken van paginalay-outs met klasse- en ID-stijlen om dingen uit te voeren, zoals afbeeldingen en positietags uitlijnen om meerkleurige lay-outs te maken.

U kunt de opties Lay-out in het deelvenster CSS-eigenschap gebruiken om deze waarden in te stellen:

• Breedte: Geef een breedte op voor elk element waarvan de afmetingen kunnen worden opgegeven, zoals een tag. Grootte-opties zijn pixel (px), punt (pt), pica (pc), procent (%), em, rem, ex en ch.

• Hoogte: Geef een hoogte op voor elk element waarvoor de afmetingen kunnen worden opgegeven.

  • Min en Max Breedte: Geef minimum- en maximumbreedten op voor tags en andere blokelementen. Deze opties zijn handig wanneer u de breedte opgeeft als een percentage van het browservenster. U kunt bijvoorbeeld de ontwerpbreedte instellen op 80 procent van het browservenster en vervolgens een maximale breedte van 1000 px instellen om te voorkomen dat uw lay-out breder wordt dan 1000 pixels.

  • Min en Max Hoogte: Geef minimum- en maximumhoogten op voor tags en andere blokelementen.

  • Marge: Stel de hoeveelheid ruimte rond een element in. Marges kunnen worden gebruikt om ruimte te creëren tussen de rand van een element en andere elementen op de pagina, zoals tussen een afbeelding en tekst of tussen twee tags. U kunt de marge afzonderlijk instellen voor de bovenkant, rechts, onder en links. Opvulling wordt gemeten in pixels, punten, inches, centimeters, millimeters, picas, ems, exs en percentages.

  • Opvulling: Hiermee stelt u de hoeveelheid ruimte binnen de randen van een element in. U kunt bijvoorbeeld opvulling gebruiken om ruimte te creëren tussen de randen van een tag en de inhoud ervan. U kunt opvulling afzonderlijk instellen voor de boven-, rechter-, onder- en linkerkant. Opvulling wordt gemeten in pixels, punten, inches, centimeters, millimeters, picas, ems, exs en percentages.

    Het instellen van opvulling en marges kan lastig zijn. Wanneer u marge en opvulling aan een element toevoegt, zoals een afbeelding of tag, vergroot u de totale grootte van dat element en de hoeveelheid ruimte die het in de lay-out nodig heeft.

• Positie: De optie Positie, beschikbaar vanaf het onderste gedeelte van het gedeelte Lay-out van het venster Eigenschappen, wijzigt de manier waarop elementen op een pagina worden geplaatst. Positionering kan de manier wijzigen waarop elementen op blokniveau (zoals tabel, lijst, koptekst, alinea en tags) in een browser worden weergegeven.

  • Overnemen: u hoeft deze standaardoptie niet op te geven. Tenzij een andere optie is geselecteerd, erft elk element de positionering van het bovenliggende element.

  • Statisch: Plaats de inhoud op zijn locatie binnen de stroom van het document. Standaard zijn alle HTML-elementen die kunnen zijn gepositioneerd, statisch.

  • Absoluut: Gebruik de coördinaten boven en links om de positie van een element te bepalen ten opzichte van de linkerbovenhoek van het browservenster of de linkerbovenhoek van een element dat het element bevat.

  • Opgelost: Plaats een element ten opzichte van de linkerbovenhoek van de browser. De inhoud van een element met een vaste positionering blijft constant, zelfs als de gebruiker naar beneden of over de pagina scrolt.

  • Relatief: gebruik een positie ten opzichte van het punt waar u het element in de pagina invoegt of ten opzichte van de container.

    

  • Zweven: Lijn elementen, zoals afbeeldingen en labels, uit naar links of rechts van een pagina of een andere container waardoor tekst of andere elementen eromheen wikkelen. Klik op de pictogrammen in het veld Zweven om de volgende vier opties op te geven: Overnemen, Rechts, Links of Geen.

  • Wissen: Voorkomen dat zwevende inhoud een gebied links of rechts overlapt, of aan beide zijden van een element. Deze optie is handig wanneer een zwevend element, zoals een -tag dat wordt gebruikt om een ​​zijbalk te maken, overlapt met een ander blokniveau-element, zoals een tag die wordt gebruikt om de voettekst van een pagina te maken.

  • Overflow-x en -y: Vertel de browser hoe de inhoud van een element kan worden weergegeven als de container, zoals een tag, niet op de volledige hoogte of breedte van het element past. Overloopopties zijn

  • Zichtbaar: Inhoud, zoals een afbeelding of tekst, zichtbaar houden, ook als deze groter is dan de gedefinieerde hoogte of breedte van een container.

  • Verborgen: De inhoud afsnijden als deze groter is dan de inhoud van de container. Deze optie biedt geen schuifbalken.

  • Bladeren: Voeg schuifbalken toe aan de container, ongeacht of de inhoud de grootte van het element overschrijdt.

  • Auto: Laat schuifbalken alleen verschijnen als de inhoud van een container de grenzen overschrijdt.

• Weergave: Geef aan of, of hoe, een element in een browser te renderen. U kunt bijvoorbeeld de positionering van een niet-geordende lijst wijzigen van horizontaal in verticaal door Inline te kiezen of een element te verbergen, het onzichtbaar te maken, door Geen te kiezen. U kunt de optie Weergave gebruiken met een scripttaal om de weergave van elementen dynamisch te wijzigen.

• Zichtbaarheid: Hiermee bepaalt u of de browser een element weergeeft. De zichtbaarheidsopties zijn

  • Overnemen: Het element heeft de zichtbaarheid van het element waarin het zich bevindt (de standaardinstelling).

  • Zichtbaar: Het element wordt weergegeven.

  • Verborgen: Het element wordt niet weergegeven.

  • Collapse: Voor gebruik met HTML-tabellen. Samenvouwen kan worden gebruikt om een ​​kolom of rij te verwijderen zonder de rest van de tabellay-out te beïnvloeden.

• Z-index: Bepaal de positie van een element op de Z-coördinaat, die de stapelvolgorde van elementen ten opzichte van elkaar regelt.Hogere elementen overlappen elementen met een lager nummer.

• Dekking: Regel het dekkingsniveau voor een element van 0. 0 (volledig transparant) tot 1. 0 (volledig ondoorzichtig). Bijvoorbeeld als u invoert. 5 in het veld 'Opacity' wordt de dekking van een element teruggebracht tot 50 procent.