Relatief geplaatste DIV's maken in Adobe Dreamweaver CS6 - dummy's

De precisie en de pixel positionering van AP (Absolute gepositioneerde) divs in Adobe Dreamweaver CS6 kan vrij bevrijdend zijn voor ontwerpers, vooral degenen die van de flexibiliteit van op afdrukken gebaseerde lay-outs houden.

Soms wilt u echter dat vakken in lijn met andere inhoud op de pagina vloeien. AP Div's drijven boven andere elementen, dus het verschuiven van andere pagina-inhoud heeft geen effect op hun positie, wat een goede of een slechte zaak kan zijn.

Voor meer traditioneel inline gedrag, kunt u DIV's maken die relatieve positionering gebruiken. Hierdoor kan een element worden verschoven samen met de inhoud eromheen, wat zorgt voor een meer vloeibare lay-out. Dit type positionering is belangrijk voor geneste inhoud of elke situatie waarin items in overeenstemming moeten zijn met de inhoud van andere pagina's.

Gebruik voor deze taak het hulpmiddel Div Tag invoegen, dat u kunt vinden in de categorieën Common en Layout van het deelvenster Invoegen.

Volg deze stappen om een ​​relatief geplaatste DIV te maken:

1. Klik op uw pagina om de cursor in een bestaand AP Div-element te plaatsen en klik vervolgens op het hulpmiddel Div Tag invoegen in het deelvenster Common en Layout van het deelvenster categorieën.

2. Wanneer het dialoogvenster Div Tag invoegen wordt weergegeven, stelt u de locatie van uw nieuwe DIV nauwkeurig in door een locatie te selecteren in de vervolgkeuzelijst Invoegen.

   Kies bijvoorbeeld After Start of Tag om het in een bestaande DIV-tag op uw pagina te plaatsen.

   U kunt ook de vervolgkeuzelijst Diviatags invoegen gebruiken om de DIV vóór, na of in bestaande elementen op de pagina te plaatsen. Laat de vervolgkeuzelijst Invoegen ingesteld op Op invoegpunt om het vak te verlaten waar u het tekende of kies een andere locatie waar u de DIV wilt maken.

   

3. Als u een bestaande klasse-selector heeft die u wilt toepassen, selecteert u deze in de vervolgkeuzelijst Klasse; anders laat u het leeg.

4. Als een bestaande ID niet beschikbaar is, voert u een nieuwe naam in het veld ID in en klikt u op de knop Nieuwe CSS-regel om er een te maken.

5. Wanneer het dialoogvenster Nieuwe CSS-regel verschijnt, zorgt u ervoor dat uw nieuwe selector is ingesteld op ID en dat de naam een ​​hekje (#) ervoor heeft. Klik OK.

6. Wanneer het dialoogvenster CSS-regeldefinitie wordt weergegeven, klikt u op en selecteert u Positionering in de lijst Categorie aan de linkerkant om CSS-positioneringseigenschappen te bekijken.

7. Selecteer in het gebied Positiebepaling Relatief in het menu Positie, voer een waarde voor breedte en hoogte in in de tekstvakken Breedte en Hoogte en voer een waarde voor Boven en links in onder de eigenschappen Positionering.Klik OK.

8. Klik op OK om het dialoogvenster Div Tag invoegen te sluiten.

   Er verschijnt een nieuwe, relatief gepositioneerde DIV met tekst voor de plaatsaanduiding.

   

De waarden voor Boven en Links gedragen zich iets anders voor absolute versus relatief gepositioneerde DIV's. In het geval van relatieve positionering geven deze waarden een verschuiving van de omringende inhoud aan, in tegenstelling tot een ingestelde positie binnen de pagina.