Pomoc oko HTML-a i CSS-a

1

Pomoc oko HTML-a i CSS-a

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 897
  • Gde živiš: Srbija / Zajecar

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: 3608
  • 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
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 897
  • Gde živiš: Srbija / Zajecar

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:

http://jsfiddle.net/47x60k4w/

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: 3608
  • 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: http://jsfiddle.net/47x60k4w/655/

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: 3608
  • 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: 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.

Ko je trenutno na forumu
 

Ukupno su 596 korisnika na forumu :: 46 registrovanih, 8 sakrivenih i 542 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3028 - dana 22 Nov 2019 07:47

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 8u47, alkatraz080, amstel2, Arhiv, bato, Belac91, bobanrakidjic, BSD, bulovic, comi_pfc, Cvijo_ue, darkstar101, doom83, Duh sa sekirom, dule10savic, Faki-Valjevo, Gama, gile58, GreenMan, ibssa, ILGromovnik, ivance95, kolateralnasteta, Kruger2, kybonacci, Levi2, majorgaspar, Markoni29, milekNS, miodrag, nuke92, Profica2, RJ, rovac, sakota79, saputnik plavetnila, spektorsky, SsssssNOVI, stalker2, Taso, vasa.93, vathra, Voja1978, voja64, yrraf, |_MeD_|