Cum să plasați sigla site-ului din stânga și sloganul din dreapta
Dacă ați realizat vreodată un aspect al paginii utilizând tabele, atunci sunteți bine conștient de cât de ușor este să obțineți imaginea din Fig. 9.10 efect. Este suficient să aliniați conținutul celulei din stânga a mesei, format din două coloane, în partea stângă, iar cel din dreapta în dreapta. Din fericire, același rezultat poate fi obținut cu ajutorul CSS.
Fig. 9.10. Locația logo-ului din stânga și sloganul din dreapta cu CSS
Soluția
Pentru a poziționa elementele în acest fel, puteți utiliza proprietatea float:
discuție
Folosind proprietatea float, puteți alinia elementele "cap" de pe ambele părți. Înainte de a adăuga această proprietate, elementele vor fi afișate unul lângă celălalt, așa cum se arată în Fig. 9.11.
Această poziționare a elementelor se datorează marcării HTML, care nu conține nici o indicație a amplasării acestora. De aceea pur și simplu urmează unul pe celălalt.
Fig. 9.11. Locația elementului implicit
Luați în considerare codul HTML care controlează locația sloganului:
Folosind proprietatea float, puteți plasa clasa de logo-uri în stânga și elementele clasei de slogan pe dreapta. În plus, am adăugat o regulă pentru a alinia textul la sloganul dreapta, fără de care ar fi presat pe marginea din stânga a deschiderii elementului ce conține, care este aliniat la dreapta! Rezultatul acțiunilor efectuate este prezentat în Fig. 9.12.
Fig. 9.12. Folosind proprietatea float pentru a poziționa elementele
Pentru a crea un spațiu gol suplimentar în jurul elementelor, adăugăm o margine exterioară în partea de sus și din stânga a siglei și în partea de sus și din dreapta a sloganului:
Atunci când folosiți această abordare, trebuie să luați în considerare următoarele: dacă faceți toate elementele dintr-un recipient plutitor, atunci nimic nu obligă recipientul să rămână deschis și înălțimea acestuia scade la zero, așa cum se arată în Fig. 9.13.
Fig. 9.13. Când specificați proprietatea float pentru copiii "capacelor", se prăbușește complet
Pentru o mai mare claritate, am adăugat un cadru pe sigla și containerul de slogan. În Fig. 9.14. Forma containerului este afișată înainte ca proprietatea float să fie atribuită elementelor copil.
Fig. 9.14. Mărimea "capacelor" înainte de a atribui proprietății float elementelor copil
După atribuirea proprietății flotante elementelor copilului, înălțimea containerului este redusă la zero, deoarece acestea sunt acum îndepărtate din fluxul general de elemente din document, ca urmare a faptului că cadrul containerului sa transformat într-o linie roșie solidă, așa cum se vede în Fig. 9.13.
Pentru a evita această situație, puteți seta înălțimea blocului utilizând proprietatea înălțime:
Acum, blocul ocupă aria paginii alocate, așa cum se arată în Fig. 9.15.
Fig. 9.15. După setarea proprietății înălțimii pentru div cu "capacul", pagina este afișată perfect normal
Dacă selectați valoarea proprietății înălțime în această situație, trebuie să luați în considerare posibilele modificări ale documentului, deoarece utilizatorul crește dimensiunea fontului. Ca unități de măsură, este mai bine să le folosiți, deoarece înălțimea elementului va crește în funcție de mărimea textului și poate încă să o găzduiască fără a "împinge" elementele plutitoare.
Dacă volumul textului din acest container nu era cunoscut, atunci ar trebui să folosim proprietatea clară, despre care am vorbit puțin mai devreme.
Trimiteți-le prietenilor: