Problem sa header-om

Dizajn
#1

Pozdrav imam problem sa headerom tacnije sa slikom header-a.Kada idem u browseru zoom out slika headera se pomiče desno koristim ovaj kod u CSS-u:

#header {
  margin: auto;
  margin-top: 13px;
  width: 1000px;
  height: 128px;
  background: url(http://download-baza.ucoz.com/slike/zaglavlje_2012_2.jpg)0px 0 no-repeat;position:relative;
  margin-right:5px;

:slight_smile:

#2

Ne mogu si predočiti što je točno problem ali vidim da ti je margin krivo postavljen pa promijeni margin: 13px auto 0; to bi možda moglo riješiti tvoj problem.

#3

Stavi:

margin-top: 13px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

i možeš i ovo:

background-position: center;
#4

[quote=“belmo996”]Pozdrav imam problem sa headerom tacnije sa slikom header-a.Kada idem u browseru zoom out slika headera se pomiče desno koristim ovaj kod u CSS-u:

#header {
  margin: auto;
  margin-top: 13px;
  width: 1000px;
  height: 128px;
  background: url(http://download-baza.ucoz.com/slike/zaglavlje_2012_2.jpg)0px 0 no-repeat;position:relative;
  margin-right:5px;

:)[/quote]

position:relative; - to je to sto ti odredjuje da ti se krece header, makni to pa ti se nece pomicat…

ovako si odredio da ti pozicija headera bude relativna na nesto, a ovdje je to relativna na body, a kako ti je body 100% sirok i odredjuje ga sirina povrsine browsera tako ti se header drzi pozicije u odnosi na body koji se kada zumiras ili siri ili suzava pa ti tako mice header…

zanemari ostale prijedloge jer nemaju veze s vezom…

decki imate link sitea: Download Baza - Home page - bio je u css-u slike headera…

@Uber_Gosu nemoj pisati sto puta margin-ovaj margin-onaj, to je totalno nepregledno, pogledaj ovako:
margin: gore desno dolje lijevo; - je puno bolje i preglednije

#5

[quote=“zerocoolos”]
@Uber_Gosu nemoj pisati sto puta margin-ovaj margin-onaj, to je totalno nepregledno, pogledaj ovako:
margin: gore desno dolje lijevo; - je puno bolje i preglednije[/quote]
Tako je, a i lagano je zapamtiti jer ide u smjeru kazaljke na satu i krece od gore.

#6

[quote=“zerocoolos”]position:relative; - to je to sto ti odredjuje da ti se krece header, makni to pa ti se nece pomicat…

ovako si odredio da ti pozicija headera bude relativna na nesto, a ovdje je to relativna na body, a kako ti je body 100% sirok i odredjuje ga sirina povrsine browsera tako ti se header drzi pozicije u odnosi na body koji se kada zumiras ili siri ili suzava pa ti tako mice header…

zanemari ostale prijedloge jer nemaju veze s vezom…

decki imate link sitea: Download Baza - Home page - bio je u css-u slike headera…

@Uber_Gosu nemoj pisati sto puta margin-ovaj margin-onaj, to je totalno nepregledno, pogledaj ovako:
margin: gore desno dolje lijevo; - je puno bolje i preglednije[/quote]

Ako je to ova stranica na linku koji si napisao dovoljno je maknuti margin-right:5px; jer na suprotnu stranu ima auto pa ga margin pomiće tako. Kao što sam i napisao neka obriše sve margine i napiše samo margin: 13px auto 0; ili margin: 13px auto 0 auto; position: relative; mu u ovom slučaju ništa ne znači i neće riješit njegov problem.

#7

Piky hvala izbacio sam margin-right i radi.

E sad da jos nesto pitam ovaj top meni na vrhu stranice na njemu treba da bude da se korisnik prijavi ili registruje ili ako je ulogovan ima moj profil,poruke i odjava i tražilica.Ovi elemti sa top menija su samo vidljivi za one koji koriste firefox,a ko koristi chrome on samo vidi gore taj top meni(liniju) bez elemenata…moze pomoc :slight_smile:

#8

Ajoj čega tu sve ima. Prvo .ne_reg ul float: left; zatim .ne_reg a makni float. Također iz tog ul-a makni onaj div .trazilica i stavi ga unutar .ne_reg odmah ispod ul-a i njega float: right; tu također makni te negativne margine jer ti odvlače tad search 130px iznad stranice.

#9

al nije mi jasno kako na Firefox-u sve radi normalno a na Chrome nece :slight_smile:

#10

Kada bi ja shvatio sta si ti napisao,kada maknem float iz .ne_reg a svi elementi odu na sredinu a trazilica se izgubi evo citav kod iz css-a :

/* ======Pocetak Top Menija designed========*/
.top_meni li {
display:inline;
 text-decoration:none;
 font-weight:bold;
 padding:3px;
 margin-top:20px;
align:left;
}
.top_meni {
 position:fixed;
 z-index:997; 
 margin-top:-10px; 
 min-width:100%; 
 height:35px; 
 background: #090909; 
 border-top: 1px solid #000; 
 box-shadow: 0px 5px 5px red; 
 float:left;
 margin-bottom:5px;
 text-decoration:none;
} 

#search {
 height: 75px;
 width: 192px;
 float: right;
 margin-top: 35px;
}

#searchbg {
 background:url(/.s/t/798/16.png) no-repeat;
}
.searchForm {
 height: 27px;
 overflow: hidden;
}

#search input.queryField {
 background: none;
 width: 159px !important;
 float: left;
 border: 0px;
 font-size: 11px;
 display: inline;
 margin-top: 5px;
 padding-left: 6px;
}

#search input.queryField:hover {
 background: none;
}

#search input.queryField:focus {
 outline: none;
}

#search input.searchSbmFl {
 float: left;
 height: 27px;
 width: 33px;
 text-indent: -1000px;
 border: 0px;
 margin: 0;
 padding: 0;
 border-radius: 0px;
 -moz-border-radius: 0px;
 background: none;
 display: inline;
 cursor: pointer;
}

input.searchSbmFl:hover {
 background-position: 0px 0px;
}

textarea.commFl {
 width: 100%;
}
.trazilica {
 align:top;
margin-top:-130px;
 margin-right:10px;
}
.top_meni a {
text-decoration:none;
 float:left;
 margin-left:4px;
 margin-top:3px;
 padding:3px;
}
.top_meni a:hover {
color:white;
}
/* =====Za goste ======*/
.ne_reg li {
display:inline;
 text-decoration:none;
 font-weight:bold;
 padding:3px;
 margin-top:20px;
}
.ne_reg {
 position:fixed;
 z-index:997; 
 top:0px; 
 min-width:100%; 
 height:35px; 
 background: #090909; 
 border-top: 1px solid #000; 
 box-shadow: 0px 5px 5px red; 
float:left;
 margin-bottom:5px;
 text-decoration:none;
 
} 
.ne_reg a {
text-decoration:none;
float:left;
padding:3px;
margin-top:3px;
margin-left:4px;
}
.ne_reg a:hover {
color:white;
}
/* =====Kraj Top Menija ====*/
.search {
 float:right;
 padding-top:5px;
 margin-top:-38px;
 
 

}

.search .query {
 width:191px;
 background:url(http://www.forum.ucoz.com/images/search.png) no-repeat 5px #FFFFFF;
 padding-left:25px;
 color:#a1a1a1;
 vertical-align:middle;
 margin-right:90px;
 margin-bottom:-24px;
}

.search .search-button {
 background:url(http://www.forum.ucoz.com/images/button.png) no-repeat;
 width:56px;
 height:21px;
 border:0px;
 padding:0 !important;
 text-align:center;
 margin-left:160px;
 margin-top:-40px;
 }
#11

[quote=“belmo996”]Kada bi ja shvatio sta si ti napisao,kada maknem float iz .ne_reg a svi elementi odu na sredinu a trazilica se izgubi evo citav kod iz css-a :

/* ======Pocetak Top Menija designed========*/
.top_meni li {
display:inline;
 text-decoration:none;
 font-weight:bold;
 padding:3px;
 margin-top:20px;
align:left;
}
.top_meni {
 position:fixed;
 z-index:997; 
 margin-top:-10px; 
 min-width:100%; 
 height:35px; 
 background: #090909; 
 border-top: 1px solid #000; 
 box-shadow: 0px 5px 5px red; 
 float:left;
 margin-bottom:5px;
 text-decoration:none;
} 

#search {
 height: 75px;
 width: 192px;
 float: right;
 margin-top: 35px;
}

#searchbg {
 background:url(/.s/t/798/16.png) no-repeat;
}
.searchForm {
 height: 27px;
 overflow: hidden;
}

#search input.queryField {
 background: none;
 width: 159px !important;
 float: left;
 border: 0px;
 font-size: 11px;
 display: inline;
 margin-top: 5px;
 padding-left: 6px;
}

#search input.queryField:hover {
 background: none;
}

#search input.queryField:focus {
 outline: none;
}

#search input.searchSbmFl {
 float: left;
 height: 27px;
 width: 33px;
 text-indent: -1000px;
 border: 0px;
 margin: 0;
 padding: 0;
 border-radius: 0px;
 -moz-border-radius: 0px;
 background: none;
 display: inline;
 cursor: pointer;
}

input.searchSbmFl:hover {
 background-position: 0px 0px;
}

textarea.commFl {
 width: 100%;
}
.trazilica {
 align:top;
margin-top:-130px;
 margin-right:10px;
}
.top_meni a {
text-decoration:none;
 float:left;
 margin-left:4px;
 margin-top:3px;
 padding:3px;
}
.top_meni a:hover {
color:white;
}
/* =====Za goste ======*/
.ne_reg li {
display:inline;
 text-decoration:none;
 font-weight:bold;
 padding:3px;
 margin-top:20px;
}
.ne_reg {
 position:fixed;
 z-index:997; 
 top:0px; 
 min-width:100%; 
 height:35px; 
 background: #090909; 
 border-top: 1px solid #000; 
 box-shadow: 0px 5px 5px red; 
float:left;
 margin-bottom:5px;
 text-decoration:none;
 
} 
.ne_reg a {
text-decoration:none;
float:left;
padding:3px;
margin-top:3px;
margin-left:4px;
}
.ne_reg a:hover {
color:white;
}
/* =====Kraj Top Menija ====*/
.search {
 float:right;
 padding-top:5px;
 margin-top:-38px;
 
 

}

.search .query {
 width:191px;
 background:url(http://www.forum.ucoz.com/images/search.png) no-repeat 5px #FFFFFF;
 padding-left:25px;
 color:#a1a1a1;
 vertical-align:middle;
 margin-right:90px;
 margin-bottom:-24px;
}

.search .search-button {
 background:url(http://www.forum.ucoz.com/images/button.png) no-repeat;
 width:56px;
 height:21px;
 border:0px;
 padding:0 !important;
 text-align:center;
 margin-left:160px;
 margin-top:-40px;
 }

[/quote]

Tu bi dosta toga trebalo popravit, čim uhvatim vremena pogledat ću ti za taj .ne_reg element. Možda netko drugi u međuvremenu pomogne.

#12

Ok :smiley:

#13

Ja se kladim u 1000E da ovo što sam napisao:

margin-top: 13px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

rješava njegov problem.

A tvoje micanje relative positionane ne služi ničem i još je kontra pravila struke jer dozvoljavaš IEu da radi što hoće s njim.

Inače:
Poželjno je da se *{} definira kao relative za sve elemente osim za one koji se naknadno stave da su absolute, tako da zabune nema. Zoom isto tako nema veze jer je na 2560x1600px header desno kao i na bilo kojoj drugoj rezoluciji (od margin-right:5px; ) koji radi sranje…

A pisanje margina u jednom redu mi ne odgovara jer koristim DW kao spell checker za CSS. :wokmen:

Sve u svemu layout je izrazito loše sklepan i samo čeka da se raspadne, trebao bi što više koristiti nekakve kontenjere…

#14

Uber_Gosu to sam sredio samo izbacio margin-right:5px; i sad radi normalno,nego jel znas kako ovaj drugi problem da sredim :slight_smile: ? btw. uCoz nudi svoje template-ove ja sam uzeo jedan ali sam ga editovao,dio po dio,tako da sad i ne lici na onaj stari. :smiley:

#15

Nisam skužio kaj ti ne radi, meni je kolko vidim u Chromeu i FFu isto sve…

Dali si primjetio da ti se na vrhu pojavi reklama, ne znam za druge ali meni je za ovako loš template reklama sol na ranu :smiley: ajde da je neki “dobar” pa da reklamiraš ali ovako…:krele:

Mogu ti dat jedan prijateljski savjet, odhebi taj template i složi si svoj novi, na ovom linku imaš hrpetinu besplatnih menija, galerija, slideshowowa, formi i ostaloga pa samo biraj i ubacuj. Malo češ se oznojit ali rezultat će vrjedit.:ljug:

LINK

i još jedan savjet, na početak svakog (ovo je važno) CSS fajla stavi ovo:

* {
	padding: 0;
	margin: 0;
	position: relative;
}

pogotovo ti je ovo bitno za rad sa UL LI elementima koji znaju “plesat” svuda u različitim browserima, za početak stavi taj kod na početak svog CSSa i reloadaj stranicu…

#16

Jel ti u Chrome ima ovo gore prijavi se i registruj se(ja sam bio ulogovan kad sam slikao)

slika:

http://www.dodaj.rs/f/15/qU/2zoTHfIo/1/4webmajstori.jpg

a to je reklama za ucoz izbaci se kad kupis premium acc. to se pojavljuje samo gostima ko je registriran nema,to sam probao da pisem svoj CSS al to je u uCozu skoro ne izvodljivo jer ima dosta skrivenih elemenata,classova i nema teorije da se snadjes ,a ovo cu ubacit :smiley:

#17

SLIKA

3 browsera 3 različite stvari :stuck_out_tongue:

Sad ću ti evo pogledat i odgovorit, sek…

#18

Probaj ovo:

.ne_reg {
	padding: 0px;
	height: 35px;
	width: 1000px;
	margin-top: 22px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: relative;
	background-color: #090909;
	z-index: 999;
        clear: both;
}

Greška je u FLOATu .ne_reg-a koji ispada iz “računice” i svaki browser ga proizvoljno (ne)prikazuje, moguće da i sa LI elementima nije sve u redu…

Probaj dodat i:

.ne_reg ul {
        padding: 0px;
	height: 35px;
}
#19

U Firefox-u se nista nije promjenilo dok je Chromu se ovaj top meni negdje izgubio :slight_smile:

#20

evo i HTML sto sam radio,mozda pomogne :slight_smile: zanemarite ove if i endif tagove:

<!--Poectak top menija-->
<?ifnot($USER_LOGGED_IN$)?>
<div class="ne_reg">
 <ul>
 <li><a href="$LOGIN_LINK$"><img src="http://belmin96.ucoz.com/profil.png"/>Prijavi se</a></li>
 <li><a href="$REGISTER_LINK$"><img src="http://belmin96.ucoz.com/regaj_se.png"/>Registruj se</a></li>
 <div class="trazilica"><li><div id="search">
<?if($SEARCH_FORM$)?>
 <div class="search"><form method="get" action="/search/"><input type="hidden" name="t" value="0"/><input type="text" name="q" value="Ukucaj pojam za pretragu..." class="query"> <input type="submit" class="search-button" id="search-button" value="Traži"></form></div>
<?endif?></li>
 </div>
 </div>
 </ul>
 </ul>
 </div>
<?endif?>
<?if($USER_LOGGED_IN$)?>
<div class="top_meni">
 <ul>
 <li><a href="$PERSONAL_PAGE_LINK$"><img src="http://belmin96.ucoz.com/profil.png"/>Moj Profil</a></li>
 <li><a href="$PM_URL$"><img src="http://belmin96.ucoz.com/poruke.png"/>Poruke ($IS_NEW_PM$)</a></li>
 <li><a href="$LOGOUT_LINK$"><img src="http://belmin96.ucoz.com/odjava.png"/>Odjava</a></li>
 <li> <div class="trazilica"><li><div id="search">
<?if($SEARCH_FORM$)?>
 <div class="search"><form method="get" action="/search/"><input type="hidden" name="t" value="0"/><input type="text" name="q" value="Ukucaj pojam za pretragu..." class="query"> <input type="submit" class="search-button" id="search-button" value="Traži"></form></div>
<?endif?></li>
 <?endif?>
 </ul>
 </div>
</div>
 <!--Kraj top Menija-->

Copyright © 2020 WM Forum - About | Contact - Sponsored by: Mydataknox & Profit Monkey