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

Pomoc oko HTML-a i CSS-a

Napisano na dan: 23.1.2017
2

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

Idi na vrh

Poslao: 24 Jan 2017 15:34
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3760
  • Gde živiš: 127.0.0.1

Da ne navodim nista komplikovanije: [Link mogu videti samo ulogovani korisnici]



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 24 Jan 2017 21:10
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)

[Link mogu videti samo ulogovani korisnici] Smile



Poslao: 24 Jan 2017 21:43
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3760
  • Gde živiš: 127.0.0.1

Teoretski jeste ok, ali sa svakom izmenom moras da prilagodjavas kod, dodajes elemente i peglas css. Procitaj malo o flexu, zacudices se. Ja sam zadnji put bio toliko odusevljen kad je umro IE6.

Poslao: 25 Jan 2017 10:10
Idi na vrh
offline
  • Srđan Tot
  • Am I evil? I am man, yes I am.
  • Pridružio: 12 Jul 2005
  • Poruke: 2483
  • Gde živiš: Ljubljana

Bilo bi zanimljivo videti razlike u performansama i zauzeću procesora i memorije za ova dva načina centriranja, za neke jednostavne slučajeve, kao i za neke komplikovanije.

Poslao: 26 Jan 2017 15:55
Idi na vrh
offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1300

Pozdrav!
Imam problem. Kako da namestim text u menu (tamo gde pise Airplanes, Contact i ostalo) bude na sredini menia?
Evo slika:



Evo kod HTML:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Document</title>
  6.    <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9.  
  10.       <header>
  11.      <div class="header">
  12.          <br>
  13.          <br>
  14.          <br>
  15.          <h1>AirSerbia</h1>
  16.          <h2>Our company is the best in Serbia.</h2>
  17.      </div>
  18.    </header>
  19.  
  20.  
  21.    <div class="container">
  22.        
  23.         <ul class="menu">
  24.            
  25.             <li>
  26.                 <a href="#">Airplanes</a>
  27.                 <ul>
  28.                     <li><a href="#">F-105</a></li>
  29.                     <li><a href="#">Boing 747</a></li>
  30.                     <li>
  31.                         <a href="#">MIGOVI</a>
  32.                         <ul>
  33.                             <li><a href="#">level2</a></li>
  34.                             <li><a href="#">level2</a></li>
  35.                             <li>
  36.                                 <a href="#">level2</a>
  37.                                 <ul>
  38.                                     <li><a href="#">level3</a></li>
  39.                                     <li><a href="#">level3</a></li>
  40.                                     <li><a href="#">level3</a></li>
  41.                                 </ul>
  42.                             </li>
  43.                             <li><a href="#">level2</a></li>
  44.                         </ul>
  45.                     </li>
  46.                 </ul>
  47.             </li>
  48.             <li><a href="#">Contact</a></li>
  49.             <li><a href="#">Facebook</a></li>
  50.             <li><a href="#">About us</a></li>
  51.  
  52.         </ul>
  53.  
  54.    </div>
  55.  
  56.         <form action="" method="get">
  57.             <input id="search-field" type="text">
  58.             <input type="hidden" value="submit">
  59.         </form>
  60.  
  61.    
  62. </body>
  63. </html>


Evo kod CSS:
  1. body {
  2.    margin: 0;
  3.    background-color: #3b414a;
  4.    font-family: Arial, Helvetica, sans-serif;
  5. }
  6.  
  7. header {
  8.    background-color: red;
  9.    text-align: center;
  10.    text-decoration: none;
  11.    color: white;
  12.    height: 230px;
  13.    margin: 0;
  14. }
  15.  
  16. header h1 {
  17.    margin: 0;
  18. }
  19.  
  20.  
  21. .menu {
  22.    list-style: none; /*nema tackica ili kvadrata ispred reci u listi*/
  23.    margin: 0; /*da ne bude udaljeno od headera*/
  24.    padding: 0;
  25.    background: #c0392b; /* podesavamo celokupni dropdown */
  26.    width: 100%;
  27. }
  28.  
  29. .menu li:hover a:hover { /*boja bloka kada predjemo preko njega*/
  30.    background: red;
  31. }
  32.  
  33. .menu li {
  34.    display: inline-block; /* svi su u jednoj liniji */
  35.    position: relative;
  36.    margin: 0;
  37.    padding: 0;
  38. }
  39.  
  40. .menu li a {   /*odnosi se na 25. red, na rec dropdown*/
  41.    text-decoration: none;
  42.    text-align: center;
  43.    display: block;
  44.    padding: 20px 25px; /*rastojanje od teksta u bloku od ivice bloka*/
  45.    color: white;
  46. } /* podesavamo tekst u blokovima */
  47.  
  48. .menu li:hover > a { /*odnosi se na 24. red*/
  49.    color: black; /* boja slova kad se predje preko bloka*/
  50.    background: #c0392b; /* noja pozadine bloka kada se predje preko njega*/
  51. } /*sta ce da se desi kada predjemo preko dropdowna */
  52.  
  53. .menu li ul {  /*odnosi se na 26. red*/
  54.    visibility: hidden; /* da se ne vidi ono sto je ispod dropdowna kada mis nije preko njega*/
  55.    position: absolute;
  56.    z-index: 999; /*dropdown ce biti prikazan iznad svega*/
  57.    background: #c0392b; /*boja kada se ukljuci dropdown*/
  58.    width: 200px; /*sirina dropdown, od leve do desne ivice*/
  59.    padding: 0;
  60. }
  61.  
  62.  
  63. .menu li:hover > ul {   /*da se vidi kada se predje misem preko njega*/
  64.    visibility: visible;
  65. }
  66.  
  67. .menu li ul li {
  68.    display: block;
  69. }
  70.  
  71. .menu li ul li ul {
  72.    left: 200px; /*namesta ul iz 31. reda nadesno za 200px, tj, za sirinu bloka */
  73.    top: 0; /*odozgo nema*/
  74. }
  75.  
  76. #search-field {
  77.    margin: 0px 0px 0px 1130px; /*1. gore 2. dole 3. desno 4. levo*/
  78.    background-color: #2b3038;
  79.    width: 200px;
  80.    height: 30px;
  81.    text-indent: 0px;
  82.    cursor: text;
  83.    overflow: hidden;
  84.    color: red;
  85.    padding: 10px;
  86.    cursor: text;   
  87.    border: none;
  88. }

Imam jos jedno pitanje, ali to moze kasnije.

Poslao: 26 Jan 2017 22:21
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)

Okaci to sve lepo na [Link mogu videti samo ulogovani korisnici] pa daj link ovde pa da pogledamo.

Poslao: 26 Jan 2017 22:31
Idi na vrh
offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1300

[Link mogu videti samo ulogovani korisnici]

Samo jedna napomena. Header, odnosno, ono crveno gde pise AirSerbia treba da ide do ivice strane, a ne do pola kao sto je prikazano. Kod mene je kako treba.

Poslao: 27 Jan 2017 12:05
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3760
  • Gde živiš: 127.0.0.1

Dodaj ovo na .menu u CSS-u:

  1. text-align: center;
Poslao: 27 Jan 2017 20:18
Idi na vrh
offline
  • Pridružio: 31 Dec 2015
  • Poruke: 1300

Napisano: 27 Jan 2017 12:18

Boze, stvarno ne znam sta mi bi. Toliko je logicno. Verovatno zato sto sam radio uvece pa je koncentracija bila slaba. U svakom slucaju hvala.

E, sad, ono drugo pitanje. Kako da namestim da mi search field bude skroz desno u ravni sa menu? Znaci treba da ide menu i pored njega search field. Naravno, ja bih namestio da budu iste visine.

Dopuna: 27 Jan 2017 20:18

Pokusavao sam jos nesto, ali bezuspesno. Trazio sam i na internetu, ali nista od toga. Pa se nadam da mi vi mozete pomoci.

Poslao: 28 Jan 2017 17:35
Idi na vrh
offline
  • Pridružio: 29 Avg 2011
  • Poruke: 129

Milos ZA ::Napisano: 27 Jan 2017 12:18

Boze, stvarno ne znam sta mi bi. Toliko je logicno. Verovatno zato sto sam radio uvece pa je koncentracija bila slaba. U svakom slucaju hvala.

E, sad, ono drugo pitanje. Kako da namestim da mi search field bude skroz desno u ravni sa menu? Znaci treba da ide menu i pored njega search field. Naravno, ja bih namestio da budu iste visine.

Dopuna: 27 Jan 2017 20:18

Pokusavao sam jos nesto, ali bezuspesno. Trazio sam i na internetu, ali nista od toga. Pa se nadam da mi vi mozete pomoci.

Dodaj ga kao jos jedan list item:

  1. <li><a href="#">TITLE</a></li>
  2. <li><a href="#">TITLE</a></li>
  3. <li><a href="#">TITLE</a></li>
  4. <li id="last">
  5.   <form action="" method="get">
  6.     <input id="search-field" type="text">
  7.     <input type="hidden" value="submit">
  8.   </form>
  9. </li>


I onda ti recimo treba u CSS-u clearfix:

  1. .clearfix:after {
  2.     content:"";
  3.     display:block;
  4.     clear:both;
  5. }

Dodaj ga kao dodatnu klasu:

  1. <ul class="menu clearfix">

Pa CSS koji ce ti to sve sloziti:

  1. .menu li {
  2.    float: left;
  3.    display: block;
  4.    position: relative;
  5.    margin: 0;
  6.    padding: 0;
  7. }
  8. .menu ul li {
  9.   float: none;
  10. }
  11. #last {
  12.   float: right;
  13. }

I obrisi ovu marginu:

  1. #search-field {
  2.    margin: 0px 00px 0px 1130px; /*1. gore 2. dole 3. desno 4. levo*/
  3. }

I promeni height na 40px.

I ako nesto nisam zaboraio trebalo bi da dobijes ovo:

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

Ko je trenutno na forumu
 

Ukupno su 947 korisnika na forumu :: 65 registrovanih, 4 sakrivenih i 878 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 357magnum, Aleksa-, aleph_one, Arsenije, Asteker, babaroga, Banovo Brdo, BO-KO, bokisha253, BZ, Car89, croato, darkdruid72, Djokislav, dzoni19, Electron, Feller, FOX, gacesam, gasha, goxin, ikan, jon istvan, Jose, kihot, kolle.the.kid, kybonacci, laurusri, Macalone, MakiMaki02, mi17, milenko crazy north, mnn2, moldway, monomah, Mrav Obrad, Natuzzi, nelezele, nemkea71, Paklenica, pera bager, Petarvu, probisic, procesor, raptorsi, Relixiran, savslob, semper_fidelis, Sirius, spalev, Srle993, sspp, SympathyForTheDevil, Toper, Tvrtko I, uruk, Vanderx, vathra, vensla, vidra boy, vidra1, W123, zlaya011, zokilivac, Žoržo