|
Poslao: 23 Jan 2017 07:28
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1272
|
Pozdrav!
Imam sledeci problem. Kako da namestim ovaj crveni deo da ide skroz do gornje ivice, a ne da ostavlja neki prostor izmedju? Evo slika:
Evo HTML kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="header">
<h1>milos</h1>
<h2>tralala</h2>
</div>
</div>
</header>
</body>
</html>
Evo CSS kod:
body {
background: #3b414a;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
}
header {
background: red;
text-align: center;
color: white;
height: 260px;
margin: 0;
}
Hvala na pomoci.
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 23 Jan 2017 09:41
|
offline
- MinerFull
- Ugledni građanin
- Pridružio: 01 Jan 2012
- Poruke: 392
|
Dodaj
* {
padding: 0;
margin: 0;
}
Konacan CSS
* {
padding: 0;
margin: 0;
}
body {
background: #3b414a;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: red;
text-align: center;
color: white;
height: 260px;
margin: 0;
}
|
|
|
|
|
|
|
Poslao: 23 Jan 2017 18:07
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
MinerFull ::Dodaj
* {
padding: 0;
margin: 0;
}
Losiji savet nisi mogao da das. Em si pobio margine i padding na SVIM elementima (pa moras naknadno za svaki da ih definises), koriscenje ovoliko sirokog selektora (SVEEEEEE) je ubistveno za browser i u krajnjoj liniji CPU jer mora da se primeni na svaki element u DOM-u. Ukratko - NEMOJ TO DA RADIS NIKAD. Bukvalno koristis kalasnjikov da ubijes muvu.
Inace, taj razmak je u stvari margin-top od h1 elementa, koja je "izasla napolje" (cudan ali jako poznat problem) jer header nema overflow: hidden; - tako da cim to dodas u stil od headera, bice "zalepljen" crveni deo za vrh, a margina ce biti unutar crvenog dela, tamo gde i treba da bude.
Odnosno ovako: ovo je tvoj originalni kod, a ovo resenje problema.
|
|
|
|
|
|
|
Poslao: 23 Jan 2017 18:36
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1272
|
Napisano: 23 Jan 2017 18:33
Probao sam ovako:
body {
background: #3b414a;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
}
header {
background: red;
text-align: center;
color: white;
height: 260px;
margin: 0;
}
header h1 {
margin: 0;
}
Rezultat je isti.
Dopuna: 23 Jan 2017 18:36
Jos jedno pitanje. Da li postoji u CSS komanda da neki text, u ovom slucaju "Milos" bude na sredini ne samo sa leve i desne strane, vec i odozgo i odozdo?
|
|
|
|
|
|
|
Poslao: 23 Jan 2017 19:50
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Sto se prvog pitanja tice, resenje ti je dao Rastafari, a sto se tice horzontalnog i vertikalnog centriranja imas ovde primer pa primeni u tvom slucaju:
http://jsfiddle.net/47x60k4w/
|
|
|
|
|
|
|
Poslao: 23 Jan 2017 20:35
|
offline
- MinerFull
- Ugledni građanin
- Pridružio: 01 Jan 2012
- Poruke: 392
|
Rastafarii ::MinerFull ::Dodaj
* {
padding: 0;
margin: 0;
}
Losiji savet nisi mogao da das. Em si pobio margine i padding na SVIM elementima (pa moras naknadno za svaki da ih definises), koriscenje ovoliko sirokog selektora (SVEEEEEE) je ubistveno za browser i u krajnjoj liniji CPU jer mora da se primeni na svaki element u DOM-u. Ukratko - NEMOJ TO DA RADIS NIKAD. Bukvalno koristis kalasnjikov da ubijes muvu.
Inace, taj razmak je u stvari margin-top od h1 elementa, koja je "izasla napolje" (cudan ali jako poznat problem) jer header nema overflow: hidden; - tako da cim to dodas u stil od headera, bice "zalepljen" crveni deo za vrh, a margina ce biti unutar crvenog dela, tamo gde i treba da bude.
Odnosno ovako: ovo je tvoj originalni kod, a ovo resenje problema.
Dao sam savet isti kao sto su meni dali kad sam naisao na ovaj problem kao pocetnik.. Ipak slazem se da je bolja i pravilnija solucija ta sto si ti rekao 
|
|
|
|
|
|
|
|
|
Poslao: 24 Jan 2017 01:28
|
offline
- Saleee2008
- Zaslužni građanin
- Pridružio: 04 Avg 2008
- Poruke: 505
|
@Milos za - koristi "inspect elements" u chromu ili firefoxu za pregledanje elemenata pojedinacno.Tako ces najlakse i najbrze da otkrijes koji element ima marginu ili padding i zasto se desavavaju neke stvari.
@Rastafari - Ja uvek gasim sve default-ne margine i padding-e.Odnosno radim css reset jer hocu punu kontrolu razmaka.Nije mi nikad palo na pamet da to moze da optereti cpu,nisam primetio nikakav lag ili sporo ucitavanje cak i na slabijim procesorima 
|
|
|
|
|
|
|
Poslao: 24 Jan 2017 07:14
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
CSS reset je prevazidjena praksa, pogotovo sto se ne radi sa * selektorom, nego se definisu svi tagovi (ili bar vecina). Probaj normalize.css - a najvece razlike mozes da procitas ovde i ovde.
|
|
|
|
|
|
|
Poslao: 24 Jan 2017 13:58
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Rastafarii ::@m4rk0: lepo je to, samo neupotrebljivo u vecini slucajeva. Kada imas samo jedan element na stranici, onda moze, ali se to skoro nikad ne desava. Mnogo lakse je da koristis flex: http://jsfiddle.net/47x60k4w/655/
Daj neki konkretan primer gde je problematicno korstiti centriranje sa ovog primera http://jsfiddle.net/47x60k4w/ Ja ga uz odredjene izmene koristim uvek i odradjuje mi posao.
|
|
|
|
|
|
