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: 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.
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: 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?

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 758 korisnika na forumu :: 98 registrovanih, 13 sakrivenih i 647 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: 33 bren, acov34, alberto, Apok, avijacija, Bane san, bane1910, Bobrock1, Bosnjo, bpvl, BtR-45, C-Gun, cole77, Colt D, cyprus, dankisha, darionis, debeli, Djokislav, Dovla 1980, draganca, Drugsparrow, dushan, Dzigy, Fulcrum-A, gale48, GH69, Hans Gajger, Igor Antonic, ikan, IvanM1984, jalos, jon istvan, Jonbonjovi, Još malo pa deda, jugoslav.70, Khalid ibn al-Walid, kolle.the.kid, kovinacc, kretino, kunktator, ljuba.b, Makarid, markoskjk, mayorlany, Mi lao shu, milan124, milenko crazy north, MiljanXD, MILO-VAN, mrmjtvc, Naj-Turs, Narwall Htar1, Natuzzi, nebidrag, nekdo, nenad81, Pantelejmon, Papadubi, Pero Petković, Primus17, proka89, redstar011, Resnica, RJ, royst33, ruma, S-lash, SamoGledam, sasovsky, Sass Drake, sevenino, Sharpshooter, Sirius, SpaDej, Srle993, sspp, Stanlio, stefan95, stegonosa, strn, suputboy, tamno.nebo, Teodor60, tm, Topaz9, vathra, VBoss, Velibor Radoja, Veljko™, vensla, Vlada78, Vojkan Petrovic, Wehicle, yorov, yrraf, Zeljo980, Zoran1959