Pomoc oko HTML-a i CSS-a

1

Pomoc oko HTML-a i CSS-a

offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1387

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.
offline
  • 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; }



offline
  • PHP developer
  • 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.

offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1387

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?

offline
  • m4rk0  Male
  • 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:

[Link mogu videti samo ulogovani korisnici]

offline
  • 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 Ziveli

offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3760
  • Gde živiš: 127.0.0.1

@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: [Link mogu videti samo ulogovani korisnici]

offline
  • 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 Question

offline
  • PHP developer
  • 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.

offline
  • m4rk0  Male
  • 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: [Link mogu videti samo ulogovani korisnici]

Daj neki konkretan primer gde je problematicno korstiti centriranje sa ovog primera [Link mogu videti samo ulogovani korisnici] Ja ga uz odredjene izmene koristim uvek i odradjuje mi posao.

Ko je trenutno na forumu
 

Ukupno su 1343 korisnika na forumu :: 119 registrovanih, 7 sakrivenih i 1217 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 15694 - dana 01 Feb 2026 12:23

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 100jan, 357magnum, Ahilius, Aleksandar Šljivar, AleksandarV, Alen-Delon-u-boji, amonsrb, Arahne, ArchaBasha, Barista, Ben Roj, Bobrock1, Bojcca, Boris90, bpvl, BraneS, C-Gun, Centauro, CikaKURE, Civa, Clouseau, dankisha, darkkran, deki1001, dexteroza, Djokislav, Djuza, doloress, Dr.Strangelove, Draganeli, draganl, DrNeoCortex, Dvojac005, ekipo26, ElGenius, Fulcrum-A, galerija, Georgius, Gosha101980, goxsys, GT, immicro, istokzapad, ivan1973, Jomini, jon istvan, Kenanjoz, Khalid ibn al-Walid, KizJ, Kobrim, kovacicbozo, kreker, Kriglord, Kružić, kunktator, Leonov, lord sir giga, markolopin, mercedesamg, Mig 29, milanpb, Mile14, mile33, MiljanXD, milos.cbr, Miloš.90, milutin134, mino bosanac, mir juzni, Mićko, mladen.zovko, mocnijogurt, mrm, Muki 123, nenad81, nenooo, Niki1995, Nikolajevic, nisamBot, novator, opt1, Orc, OrestSand, Papadubi, pein, perunnurep, Petrusci, pisac12, Posmatrac77OKB, prasinar, RJ, royst33, Sale0501, Sass Drake, Silvertooth, Singidunumac, sony771, Srle993, sspp, stagezin, stegonosa, StepskiVuk, Stoorb, TheDictator, Tila Painen, Toper, TripleMMM, tuf, v0idmp3, v82, vathra, Vica1958, Walkers, zemljanin, zixmix, Zjmc, Zmajac, zoran-ruma, Šule