|
|
|
|
|
Poslao: 24 Jan 2017 21:43
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3747
- 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
|
offline
- Srki_82
- Moderator foruma
- 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
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1192
|
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:
<!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="header">
<br>
<br>
<br>
<h1>AirSerbia</h1>
<h2>Our company is the best in Serbia.</h2>
</div>
</header>
<div class="container">
<ul class="menu">
<li>
<a href="#">Airplanes</a>
<ul>
<li><a href="#">F-105</a></li>
<li><a href="#">Boing 747</a></li>
<li>
<a href="#">MIGOVI</a>
<ul>
<li><a href="#">level2</a></li>
<li><a href="#">level2</a></li>
<li>
<a href="#">level2</a>
<ul>
<li><a href="#">level3</a></li>
<li><a href="#">level3</a></li>
<li><a href="#">level3</a></li>
</ul>
</li>
<li><a href="#">level2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<form action="" method="get">
<input id="search-field" type="text">
<input type="hidden" value="submit">
</form>
</body>
</html>
Evo kod CSS:
body {
margin: 0;
background-color: #3b414a;
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: red;
text-align: center;
text-decoration: none;
color: white;
height: 230px;
margin: 0;
}
header h1 {
margin: 0;
}
.menu {
list-style: none; /*nema tackica ili kvadrata ispred reci u listi*/
margin: 0; /*da ne bude udaljeno od headera*/
padding: 0;
background: #c0392b; /* podesavamo celokupni dropdown */
width: 100%;
}
.menu li:hover a:hover { /*boja bloka kada predjemo preko njega*/
background: red;
}
.menu li {
display: inline-block; /* svi su u jednoj liniji */
position: relative;
margin: 0;
padding: 0;
}
.menu li a { /*odnosi se na 25. red, na rec dropdown*/
text-decoration: none;
text-align: center;
display: block;
padding: 20px 25px; /*rastojanje od teksta u bloku od ivice bloka*/
color: white;
} /* podesavamo tekst u blokovima */
.menu li:hover > a { /*odnosi se na 24. red*/
color: black; /* boja slova kad se predje preko bloka*/
background: #c0392b; /* noja pozadine bloka kada se predje preko njega*/
} /*sta ce da se desi kada predjemo preko dropdowna */
.menu li ul { /*odnosi se na 26. red*/
visibility: hidden; /* da se ne vidi ono sto je ispod dropdowna kada mis nije preko njega*/
position: absolute;
z-index: 999; /*dropdown ce biti prikazan iznad svega*/
background: #c0392b; /*boja kada se ukljuci dropdown*/
width: 200px; /*sirina dropdown, od leve do desne ivice*/
padding: 0;
}
.menu li:hover > ul { /*da se vidi kada se predje misem preko njega*/
visibility: visible;
}
.menu li ul li {
display: block;
}
.menu li ul li ul {
left: 200px; /*namesta ul iz 31. reda nadesno za 200px, tj, za sirinu bloka */
top: 0; /*odozgo nema*/
}
#search-field {
margin: 0px 0px 0px 1130px; /*1. gore 2. dole 3. desno 4. levo*/
background-color: #2b3038;
width: 200px;
height: 30px;
text-indent: 0px;
cursor: text;
overflow: hidden;
color: red;
padding: 10px;
cursor: text;
border: none;
}
Imam jos jedno pitanje, ali to moze kasnije.
|
|
|
|
|
|
|
Poslao: 26 Jan 2017 22:21
|
offline
- m4rk0
- 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 https://jsfiddle.net pa daj link ovde pa da pogledamo.
|
|
|
|
|
|
|
|
|
|
|
Poslao: 27 Jan 2017 20:18
|
offline
- Milos ZA
- Super građanin
- Pridružio: 31 Dec 2015
- Poruke: 1192
|
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
|
offline
- proka89
- Građanin
- 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:
<li><a href="#">TITLE</a></li>
<li><a href="#">TITLE</a></li>
<li><a href="#">TITLE</a></li>
<li id="last">
<form action="" method="get">
<input id="search-field" type="text">
<input type="hidden" value="submit">
</form>
</li>
I onda ti recimo treba u CSS-u clearfix:
.clearfix:after {
content:"";
display:block;
clear:both;
}
Dodaj ga kao dodatnu klasu:
<ul class="menu clearfix">
Pa CSS koji ce ti to sve sloziti:
.menu li {
float: left;
display: block;
position: relative;
margin: 0;
padding: 0;
}
.menu ul li {
float: none;
}
#last {
float: right;
}
I obrisi ovu marginu:
#search-field {
margin: 0px 00px 0px 1130px; /*1. gore 2. dole 3. desno 4. levo*/
}
I promeni height na 40px.
I ako nesto nisam zaboraio trebalo bi da dobijes ovo:
|
|
|
|
|
|
