Forum Sveta kompjutera

Nazad   Forum Sveta kompjutera > Internet > Web razvoj > Klijentske aplikacije

Klijentske aplikacije (X)HTML, CSS, JavaScript, AJAX...

Odgovor
 
Alatke vezane za temu Vrste prikaza
Stara 13.10.2012, 20:21   #1
Neky
Starosedelac
 
Član od: 15.6.2007.
Lokacija: Amsterdam
Poruke: 1.817
Zahvalnice: 463
Zahvaljeno 310 puta na 230 poruka
Određen forumom CSS početnik

Hejhej drugari,

pokušavam da napravim neki horizontalni meni na nekom nazovi sajtu, čisto igre radi. Ime sajta je na crvenom, a elementi menija na plavom delu (divu). Hoću da, kada mišem pređem preko elemenata menija, dobijem ovo:



a dobijem ovo:



CSS koji sam koristio je sledeći (samo ono što je bitno):

Kod:
#meni {
	position: absolute;
	width: 400px;
	height: 19px;
	top: 38px;
	font-size: 1.2em;
	font-weight: bold;
	list-style:none;
	background: #ccc;
	text-align:center;
	text-decoration:none;
}

#meni li{
	display:block;
	float:left;
	width:100px;
	height:30px;
}

#meni a:hover{
	/*color:#357;*/
	background:url(slika.png);
}

a {
	color: #357;
	text-decoration:none;
}

a:hover{
	color:#fff;
	background:url(slika.png);
}
Slika slika.png se pojavi, međutim nebitno koju visinu joj stavim, uvek postoji "razmak" na gornjoj strani koji je ružan.
Neky je offline   Odgovor sa citatom ove poruke
Stara 13.10.2012, 20:29   #2
el_corona
Starosedelac
 
Član od: 23.1.2008.
Poruke: 1.427
Zahvalnice: 10
Zahvaljeno 366 puta na 331 poruka
Određen forumom Re: CSS početnik

Hejhej druze

Ne znam da li si radio meni preko div-ova (layera) ili tabele ali ono sto ti trazis se tice margin i padding atributa. Sad ne znam kako si imenovao ove klase u htmlu ali mislim da treba da dodas margin i padding i podeseis jedno od ta dva na 0 u #meni a:hover klasi, probaj vec sam, pogodices gde treba, mislim da je margina ta koja ide na 0 u tvom slucaju. Uostalom upoznaj se sa box modelom, trebace ti uvek.
el_corona je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku el_corona na korisnoj poruci:
Neky (13.10.2012)
Stara 13.10.2012, 20:34   #3
Neky
Starosedelac
 
Član od: 15.6.2007.
Lokacija: Amsterdam
Poruke: 1.817
Zahvalnice: 463
Zahvaljeno 310 puta na 230 poruka
Određen forumom Re: CSS početnik

Hvala na odgovoru, mada sam malo umoran, pa slabije ide.

:edit:

Jeste, u pitanju je padding svojstvo, 2px je bilo dovoljno. Hvala još jednom

Poslednja ispravka: Neky (14.10.2012 u 0:17)
Neky je offline   Odgovor sa citatom ove poruke
Stara 15.10.2012, 15:09   #4
problemNo1
Član
 
Član od: 16.10.2009.
Poruke: 32
Zahvalnice: 12
Zahvaljeno 3 puta na 3 poruka
Određen forumom Re: CSS početnik

I od mene preporuka za flexibilni box model. Skratice ti dosta muka oko racunanja. Nema nista racunanja oko margina, bordera itd. Samo stavis da ti je jedna strana, jedan deo strane fixni a drugi promenljivi i on ti sam izracuna koliko ti treba. A mozes i da postavljas odnos izmedju delova. U svakom slucaju "prostudiraj" malo to, mislim da ce ti dobro doci.
problemNo1 je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku problemNo1 na korisnoj poruci:
Neky (15.10.2012)
Stara 24.10.2012, 22:43   #5
Neky
Starosedelac
 
Član od: 15.6.2007.
Lokacija: Amsterdam
Poruke: 1.817
Zahvalnice: 463
Zahvaljeno 310 puta na 230 poruka
Određen forumom Re: CSS početnik

Može li neko da mi objasni zašto ovaj CSS nije "ispravan" za IE6? Kao što naslov kaže, ja sam početnik.

Spoiler za CSS:
Kod:
body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	background-image:url('slike/pozadina.png');
	font-family: Tahoma, Verdana, Arial;
	font-size: 12pt;
}

.glavniDeo {
		position: absolute;
		top: 5%;
		left:1%;
		height: 90%;
		width: 98%;
		background: white;
}

.siviDeo {
		position: absolute;
		top: 0%;
		left: 0%;
		height: 10%;
		width:100%;
		background: #cccccc;
}

.logoPozadina {
	position: absolute;
		top: 10%;
		left: 0%;
		height: 18%;
		width:100%;
		background: #3399ff;	
}

.logo {
	font-family: 'Titillium Web', Tahoma;
	font-size: 30pt;
	position: absolute;
	top: 4%;
	left: 2%;
	color: white;
	font-weight: bold;
}


Chrome i Firefox prikazuju ovo:

http://imgur.com/ic5hR

a retardirani IE6 ovo:

http://imgur.com/A74px

IE6 je bitan pošto profesorica u njemu proverava projektne zadatke.
Neky je offline   Odgovor sa citatom ove poruke
Stara 26.10.2012, 16:31   #6
problemNo1
Član
 
Član od: 16.10.2009.
Poruke: 32
Zahvalnice: 12
Zahvaljeno 3 puta na 3 poruka
Određen forumom Re: CSS početnik

Hahaha zato sto ti je to Internet ExploDer IE 8 ne podrzava nekoliko novijih css atributa, IE7 jos gore, imaju neke svoje fore, a o IE6 da i ne govorimo. Mislim da svaki drugi atribut ne podrzava. Konkretno u tvom slucaju mislim da je problem sto se tice IE6 sto stavljas dimenzije u procentima. Novije verzije IE i ostalih browsera zaokruzuju rezultat tih procenta na ceo broj(pr. 18% od 1624) pa samim tim nemaju problema dok kod starijih vezija desi se da prebace element dole. Probaj sa min-height, min-width, ne znam sta da ti kazem. Mada ne znam da li vas profesorka forsira da koristite apsolutne pozicije pa sam tim i top i left ili ne , ali ja bih u tvom slucaju izbacio to. Lepo poredjas divove u htmlu jedan ispod drugog onim redom kako zelis da se prikazuju.
problemNo1 je offline   Odgovor sa citatom ove poruke
Stara 27.9.2013, 12:32   #7
zoki358
Član
 
Član od: 21.10.2011.
Poruke: 146
Zahvalnice: 7
Zahvaljeno 5 puta na 5 poruka
Određen forumom Re: CSS početnik

Moracu ovde da postavim pitanje zato sto nece da mi otvara novu temu

Pravim moj prvi sajt, oduvek sam izbegavao web dizajn ali muka me naterala da sad moram i time da se bavim
Inace napravio sam ga preko DreamWeavera CS6, ostalo mi jos da ubacim Like i Share dugme sa FB.
Nasao sam sa oficijalnog developers.facebook sajta kodove i radi mi ali nakon sto neko klikne like izbaci Confirm poruku i posle ta osoba mora i Confirm da klikne i onda se otvara novi prozor da mora ponovo da potvrdi za jedan jedini lajk, mnogo je glupo.
Ja sam nasao i kako onaj tekst da uklonim stavio sam velicinu 48px tako da mi stoji samo dugme kao sto sam zeleo ali ovo za potvrdu lajka nikako da uklonim.
Inace koristio sam kod za IFRAME, ali procitao sam na jednom forumu da ovo za lajkove je kao neka anti spam zastita kad se previse klikce i da jedini nacin je da koristim app za like dugme ali to pojma nemam kako?
zoki358 je offline   Odgovor sa citatom ove poruke
Stara 6.11.2013, 17:09   #8
MeriDzejn
Novi član
 
Član od: 25.10.2013.
Poruke: 2
Zahvalnice: 1
Zahvaljeno 0 puta na 0 poruka
Wink Re: CSS početnik

Ja sam takodje pocetnik u svemu ovome, tj. primorana sam da naucim i to. E sad, nije mi jasno da li mogu da napravim sajt samo sa html-om ili moram da koristim i CSS. Takodje, ne znam kako od kucanja kodova u nedogled, na kraju ispadne sajt... ali, do toga cu valjda doci vremenom...
MeriDzejn je offline   Odgovor sa citatom ove poruke
Stara 6.11.2013, 17:16   #9
JohnnyNT
Deo inventara foruma
 
Član od: 15.4.2006.
Lokacija: Srbija
Poruke: 4.037
Zahvalnice: 1.298
Zahvaljeno 1.396 puta na 948 poruka
Određen forumom Re: CSS početnik

Citat:
MeriDzejn kaže: Pregled poruke
JE sad, nije mi jasno da li mogu da napravim sajt samo sa html-om ili moram da koristim i CSS.
Pazi, možeš i samo sa HTML da napraviš sajt (zvalo bi se sajt), ali bi izgledao jako loše Moraš HTML da "ulepšaš" sa nečim, da mu daš oblik, boje, izgled, raspored a za to služi CSS (cascading style sheets).
JohnnyNT je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku JohnnyNT na korisnoj poruci:
MeriDzejn (11.11.2013)
Stara 11.11.2013, 19:36   #10
MeriDzejn
Novi član
 
Član od: 25.10.2013.
Poruke: 2
Zahvalnice: 1
Zahvaljeno 0 puta na 0 poruka
Wink Re: CSS početnik

Da, tako sam i mislila, hvala
MeriDzejn je offline   Odgovor sa citatom ove poruke
Stara 5.5.2014, 23:10   #11
beliorao
Novi član
 
Član od: 4.9.2009.
Poruke: 19
Zahvalnice: 0
Zahvaljeno 0 puta na 0 poruka
Određen forumom Re: CSS početnik

ja sam gledajuci ova 2 klipa:

http://www.youtube.com/watch?v=TmQm-p3wCSU
http://www.youtube.com/watch?v=T7ayE5AtRUA

pokusao da napravim horizontalni meni.

otkucao sam kod:

HTML kod:
<html>

<head>
<style tipe="text/css">
 
* {
margin:0px;
padding:0px;
}
body
{
font-family:verdana;
background-color:#ABC;
padding:50px;
}
h1
{
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/*============================*/

ul#navmenu, ul.sub1, ul.sub2
{
list-style-type:none;
}

ul#navmenu li {

width: 125px;
text-align: center;
position: relative;
float:left;
margin-right: 4px;
}

ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}

ul#navmenu .sub1 li {

margin-top:5px;
}

ul#navmenu .sub2 li {
margin-left: 8px;}

ul#navmenu .sub1 a {
margin-top: 0px;
}
ul#navmenu li:hover > a {
background-color: #CFC;
}
ul#navmenu li:hover a:hover {
background-color: #FF0;
}
ul#navmenu ul.sub1 {
display: block;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: block;
position: absolute;
top:0px;
left: 122px;
}
ul#navmenu li:hover .sub1{
display: block;
}

ul#navmenu .sub1 li:hover .sub2{
display: block;
}
</style>
</head>

<body>
<h1>Navigation Menu</h1>

 <ul id="navmenu">
 
    <li> <a href="#">hiperlink 1</a> </li>
	<li> <a href="#">hiperlink 2</a>
	
        <ul class="sub1"> 
		   <li> <a href="#">hiperlink 2.1</a></li>
		   <li> <a href="#">hiperlink 2.2</a></li>
		   <li> <a href="#">hiperlink 2.3</a></li>
	    </ul>
     </li>

	</li>
    <li> <a href="#">hiperlink 3</a> </li>
    <li> <a href="#">hiperlink 4</a>
	
        <ul class="sub1"> 
		   <li> <a href="#">hiperlink 4.1</a></li>
		   <li> <a href="#">hiperlink 4.2</a></li>
		   <li> <a href="#">hiperlink 4.3</a></li>
	    
		       <ul class="sub2"> 
		           <li> <a href="#">hiperlink 4.3.1</a></li>
		           <li> <a href="#">hiperlink 4.3.2</a></li>
		           <li> <a href="#">hiperlink 4.3.3</a></li>
	           </ul>
		</ul>
	</li>
    <li> <a href="#">hiperlink 5</a></li>
 
 </ul>
	

</body>

</html>
ali kad otkucam ovaj deo koda

Citat:
ul#navmenu ul.sub2 {
display: block;
position: absolute;
top:0px;
left: 122px;
}
rezultat mi nije isti kao na klipu, ako neko mozda vidi gde sam pogresio neka javi, jer jos sam pocetnik i ne mogu da nadjem gresku.
Hvala
beliorao je offline   Odgovor sa citatom ove poruke
Odgovor

Bookmarks sajtovi

Alatke vezane za temu
Vrste prikaza

Vaš status
Ne možete postavljati teme
Ne možete odgovarati na poruke
Ne možete slati priloge uz poruke
Ne možete prepravljati svoje poruke

BB kod: uključeno
Smajliji: uključeno
[IMG] kod: uključeno
HTML kod: isključeno


Slične teme
tema temu započeo forum Odgovora Poslednja poruka
Java početnik Pecarošmlad Programiranje 32 28.3.2012 0:11
Apsolutni početnik KumRuzvelt Web dizajn 1 6.11.2009 2:31
Kako programirati u C#, početnik sam i molim za pomoć Kostarum Rex Persia Programiranje 36 31.10.2009 11:33
MinGW, TransparentBlt() i početnik Goran Raseta Programiranje 5 20.8.2009 11:39
Totalni početnik: DVB vs Digitalni resiver Mihajlo_Lazic Video/TV softver 2 26.8.2007 17:28


Sva vremena su po Griniču +2 h. Sada je 13:14.


Powered by vBulletin® verzija 3.8.7
Copyright ©2000–2024, vBulletin Solutions, Inc.
Hosted by Beograd.com