MyCity » Web dizajn / HTML » Pomoc oko HTML-a i CSS-a

Pomoc oko HTML-a i CSS-a

Napisano na dan: 23.1.2017
1

Pomoc oko HTML-a i CSS-a
Sledeća strana Pagination

Idi na vrh

Poslao: 23 Jan 2017 07:28
Idi na vrh
offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1380

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
Idi na vrh
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; }



Poslao: 23 Jan 2017 18:07
Idi na vrh
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.

Poslao: 23 Jan 2017 18:36
Idi na vrh
offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1380

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
Idi na vrh
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]

Poslao: 23 Jan 2017 20:35
Idi na vrh
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

Poslao: 23 Jan 2017 23:25
Idi na vrh
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]

Poslao: 24 Jan 2017 01:28
Idi na vrh
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

Poslao: 24 Jan 2017 07:14
Idi na vrh
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.

Poslao: 24 Jan 2017 13:58
Idi na vrh
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.

MyCity » Web dizajn / HTML » Pomoc oko HTML-a i CSS-a

Ko je trenutno na forumu
 

Ukupno su 1295 korisnika na forumu :: 101 registrovanih, 7 sakrivenih i 1187 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 8086 - dana 18 Jan 2026 07:11

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Andrija357, ArmFPGA, Baždaranac, benne, bojank, BOXRR, branko7, bukefal, C-Gun, chichabg, Cirkon, dankisha, darkdruid72, dd201176, deLacy, dinamik, draganl, DragoslavS, dusan.l, DuškoMraz, ElvisP, Fabius, feanor, Frunze, g_g, Gall, Goran 0000, goxin, Hans Gajger, helen1, hvost, ibssa, Igritelj, jarovitt, Jester, Kajzer Soze, kaskadija, komenski, Kriglord, Kubovac, Kvazar, Lester Freamon, lord sir giga, Lotus, luka35, mainstream, marko.markovic, markolopin, mikrimaus, milbos, mile.ilic75, milenko crazy north, Misirac, mm1811, Murko, mux, mxzzz, nebidrag, nemkea71, nenad81, OtacMakarije, Pekman, Povratak1912, Prometeus, Qvazimodo, Roksi, royst33, S-lash, savaskytec, sedan, Semprini, shlauf, Singidunumac, Sir Budimir, Snorks, sombrero, sova72, Srki98, sslay, Tajpan, tajvankanasta, tmanda323, troki1971, uros, Vanderx, VanZan, vathra, Viktor Petrenko, vladaa012, volimpivuvolimrakiju, xAlex2, XBMC, Yugol33, zdrebac, zil10, Zoca, zogi036, Zoran1959, zvomar, zzapNDjuric99, Žoržo