Kako napraviti lijepo zaglavlje u css-u. Zaglavlje stranice

Zdravo. Provjerio statistiku danas upiti za pretraživanje, pomoću koje su ljudi otišli na blog i otkrili da postoji nekoliko koji uopće nisu relevantni. Ne, ne blog, već članci.

Jedan od njih kako popraviti zaglavlje web stranice? Odmah sam odlučio da ispravim situaciju i napišem članak, jer je tema relevantna, a ima i pitanja u ovoj oblasti.

Općenito, postoji nekoliko načina za pomicanje stranice. Možete koristiti javascript, ali ja nisam baš jak u ovoj temi i samo je učim. Stoga ćemo za sada raditi sa css-om. Hvala bogu, popraviti zaglavlje stranice(i ne samo šešir, već bilo koji drugi element), možete "malo krvi" :)

Zapravo, način popravljanja elementa prilikom pomicanja stranice je vrlo jednostavan, a iznenadit ćete se koliko je ovaj problem lako riješiti.

Popravljanje zaglavlja prilikom pomeranja stranice

Da biste popravili zaglavlje, morat ćete kreirati dva bloka. Jedan je da možete centrirati zaglavlje. I ima dijete, koje će biti popravljeno. Počnimo...

#headerMain ( width:920px; visina: 195px; margin:0px auto; z-index:0; ) #header ( width:920px; visina: 195px; background: url(../img/bg-header.jpg) ne -ponavljanje; pozicija: fiksna; z-indeks: 9999; )

Sada će zaglavlje biti fiksirano na vrhu ekrana i neće se pomicati prilikom pomicanja.

U prošlom članku jesmo okvir našeg Template HTML koji je spreman za popunjavanje i obradu. Danas ću reći kako napraviti zaglavlje web stranice (gornji dio) i jednostavan meni. Također danas ćemo napraviti neke promjene u stilovima drugih blokova.

Html, tijelo (visina:100%; boja: #000; pozadina: #FFFFFF; word-wrap: break-word; font-size: 12px; porodica fontova: Verdana, Arial, Sans-Serif; ) #wrapper (visina :auto !important; visina:100%; min-height:100%; ) #header (visina:100px; ) #container (min-width:800px; ) #center ( margin:0px 200px 0px 200px; ) #left ( float:left; width:200px; ) #right (float:right; width:200px; ) #footer (visina:100px; margin-top:-100px; ) .clear (clear:oth; ) #space (visina:100px ;)

#wrapper (visina:auto !važno; visina:100%; min-visina:100%; širina: 1024px; margina: 0 auto; poravnanje teksta: lijevo; )

Postavio sam fiksnu širinu - širinu bloka, veličine 1024 piksela, poravnao sam blok sa središtem, a tekst u njemu lijevo koristeći text-align:left. Blok možemo poravnati u sredini koristeći stil margine, postavljajući uvlačenje iznad i ispod 0, a širina je automatska. Nažalost, ovo ne funkcionira uvijek Internet Explorer 6, tako da sam u tijelu napisao text-align: center; i zato sam morao da poravnam tekst u okviru za premotavanje i podnožju sa leve strane. Također sam naveo margin:0 u tijelu, postavljajući tako margine od ivica na 0 piksela. Kao rezultat toga, Body ima sljedeće stilove:

Html, tijelo (visina:100%; boja: #000; pozadina: #FFFFFF; word-wrap: break-word; font-size: 12px; porodica fontova: Verdana, Arial, Sans-Serif; margina: 0; tekst -align:center; )

#footer ( širina: 1024px; margina: 0 auto; text-align: lijevo; visina:100px; margin-top:-100px; pozadina: #4a90d9; )

Ovdje je sve slično bloku omotača: postavite širinu na 1024px, poravnajte blok sa središtem, a tekst lijevo. Također sam dodao margin-top: 20px u kontejner. i uklonili minimalnu širinu, pošto imamo fiksna širina enveloping.

Pa, pripremili smo šablon, vrijeme je da pređemo na zaglavlje stranice. Stilovi će biti ovakvi:

Visina bloka je 140px, pozadina je bijela, a padding od gornje ivice je 40px. To su sve promjene u stilovima zaglavlja.
Šta? Ovo je sve? Postoji li cijeli članak nazvan po ovome?
Naravno da ne. Zaglavlje stranice će se sastojati od ostalih elemenata: logotipa i menija, koji će biti posebno dizajnirani.

Hajde da upišemo predložak HTML koda Unutar bloka zaglavlja nalazi se ovaj red:
U osnovi, ovo je link ka početna stranica bez teksta, ali s obzirom na klasu class="logo". Sada morate to urediti css stilovi.

Logo (prikaz:blok; visina: 104px; širina: 390px; pozadina: url("image/logo.png") bez ponavljanja; )

Napravio sam element blok elementom, dao mu širinu i visinu, a takođe sam napravio sliku logotipa kao pozadinu, koju sam stavio u direktorij slika. Ovaj direktorij će sadržavati sve slike šablona. Veličina slike je 388*100 piksela, zašto je onda veličina bloka malo drugačija? Visinu sam napravio 104 piksela tako da je između budućeg menija i logotipa bilo uvlačenje sa slike logotipa, a širinu sam uzeo za dva piksela više za svaki slučaj, jer sam par puta naišao da je Mozilla pogrešno odredila veličinu slike i malo je izrezao. Sve je završeno sa logom. Meni u

Izgled stranice je proces razvoja strukture html dokumenta čiji je rezultat web stranica. Struktura web stranice određena je odgovarajućim html tagovima. Oznake - pravokutni blokovi kontejnera za sadržaj - se ne pojavljuju u prozoru pretraživača. Oni obavještavaju pretraživač o vrsti sadržaja, a pretraživač na osnovu tih informacija prikazuje njihov sadržaj na ekranu – tekstualne ili medijske datoteke.

Kako kreirati strukturu stranice koristeći blokove (izgled bloka)

1. Kako podijeliti izgled stranice na dijelove

Da biste kreirali izgled stranice, potrebno je odabrati glavne odjeljke (odjeljke) dokumenta. Više o elementima presjeka možete pročitati u članku.