Forum Sveta kompjutera

Nazad   Forum Sveta kompjutera > Internet > Web razvoj > Web dizajn

Web dizajn Saveti u vezi dizajna sajtova

Odgovor
 
Alatke vezane za temu Vrste prikaza
Stara 26.9.2011, 23:26   #1
xsalex
Član
 
Član od: 5.4.2008.
Lokacija: Doboj
Poruke: 92
Zahvalnice: 66
Zahvaljeno 2 puta na 2 poruka
Određen forumom Problem sa kodom ...

E ovako ljudi, imam sledeći problem... Već neko vrijeme radim na html i css kodu za svoj blog... Odlučio sam da napravim sajt o antičkom Rimu, međutim posle sam se predomislio pošto mi servis blogger.ba daje dovoljno slobode pri dizajniranju, a ne postavlja nikakve add-ove i banere ...

Problem je nastao prilikom realizacije efekta ,,mouse over i on'' na meni, ali taj isti efekat se primjenio na link za komentare izpod posta, dugmića koji vodi do linka posta i sl. Ja sam želio da ,,mouse over i on'' efekat se primjeni samo na meni ,a ne i na dugmiće za komentare i ,,#'' tarabicu za link od posta.

evo kod:

Kod:
<html>
<head>
    <title> Istorija starog Rima, anti?ki Rim, Vizantija, Justinijanova kodifikacija, ulipinijan, Modestijan, Paul, Cezar, Ciceron </title>


    <style type="text/css">
hr {color:sienna;}
p {margin-right:3px; margin-top:10px; text-align:justify; line-height:1.1;} 
a:link {padding: 12px; border: 0px solid black; background: #871313; color: #black; font: bold 12px sans-serif;}
a:hover {background: #C7DCEB; color: black;}

     </style>
</head>

    <BODY 
    BACKGROUND="http://i52.tinypic.com/653n03.jpg" 
    TEXT=black 
    LINK=YELLOW 
    VLINK="#ffffff">

        <center>
				<table border="0px" cellspacing="0px" cellpadding="0px">
           				 <tr>
               				 <td width="1000px"><img src="http://i54.tinypic.com/naot5.jpg" /></td>
            			</tr>
      		       </table>





        			<table border="0px" bgcolor="#871313" cellspacing="0px" cellpadding="0px">
                    		<tr>                    
                   			 <td valign="center" width="1000px" height="40px"><a id="w3c" href="http://www.google.com"> Legenda o nastanku grada Rima</a>
											   <a id="w3c" href="http://www.google.com"> Kraljevstvo</a>
											   <a id="w3c" href="http://www.google.com"> Republika</a>
											   <a id="w3c" href="http://www.google.com"> Principat</a>
											   <a id="w3c" href="http://www.google.com"> Dominat</a>
											   <a id="w3c" href="http://www.google.com"> Vizantija</a>
											   <a id="w3c" href="http://www.google.com"> Rimsko pravo</a></td>
                    		</tr>
       		      </table>   



         



       		      <table border="0px" bgcolor="#FFFFFF" cellspacing="0px" cellpadding="0px">
            			<tr>
               				 <td valign="top" width="700px"><p style="color:sienna; margin-left:10px"> 

                                             <!-- pocetak glavne kolone -->
  <div id="blog">  
  {Postovi}
  </div>
  <!-- kraj glavne kolone -->
                                             </p> </td>
              			       

						<td valign="top" width="300px"><p style="color:sienna; margin-left:10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></td>


           			      </tr>
        			</table>


        
        


				<table border="0px" bgcolor="#FFFFFF" cellspacing="0px" cellpadding="0px">
          			      <tr>
              			     <td width="400px"><img src="http://i53.tinypic.com/4gomt3.jpg" align="right"/> </td>
						<td width="200px"><b><center>Hoster:Blogger.ba</center></b> </td>
						<td width="400px"><img src="http://i53.tinypic.com/4gomt3.jpg" align="left"/> </td>
          			     </tr>
        			</table>

	</center>
                    

    </body>

</html>
evo direktan link na stranicu: http://nekadablog.blogger.ba/
xsalex je offline   Odgovor sa citatom ove poruke
Stara 30.9.2011, 10:23   #2
Dark Champion
Član
 
Član od: 22.12.2007.
Poruke: 245
Zahvalnice: 12
Zahvaljeno 80 puta na 42 poruka
Određen forumom Re: problem sa kodom ...

Pa tebi je meni takav zato što u CSS-u nisi uopšte uredio navigaciju. Druga stvar, zašto koristiš svojstvo tabela kada se navigacije uvek rade kao liste.
Kod:
<ul>
  <li>Home</li>
  <li>Products</li>
</ul>
Znači moraš to prvo shvatiti. Sada lepo izbrišeš:

Kod:
<tr>                    
                                <td valign="center" width="1000px" height="40px"><a id="w3c" href="http://www.google.com"> Legenda o nastanku grada Rima</a>
                                               <a id="w3c" href="http://www.google.com"> Kraljevstvo</a>
                                               <a id="w3c" href="http://www.google.com"> Republika</a>
                                               <a id="w3c" href="http://www.google.com"> Principat</a>
                                               <a id="w3c" href="http://www.google.com"> Dominat</a>
                                               <a id="w3c" href="http://www.google.com"> Vizantija</a>
                                               <a id="w3c" href="http://www.google.com"> Rimsko pravo</a></td>

                            </tr>
I uradiš navigaciju valjano:

Kod:
<div id="nav">
<ul>
<li>Kraljevstvo</li>
<li>Republika</li>
<li>Principat</li>
<li>Dominat</li>
<li>Viyantija</li>
<li>Rimsko carstvo</li>
</ul>
</div>
I onda dodaš u CSS:

Kod:
#nav a {
padding: 12px;
 border: 0px solid black; background: #871313;
 color: #000000; font: bold 12px sans-serif;
#nav a:hover {
background: #C7DCEB;
 color: #000000;}
}
Dark Champion je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku Dark Champion na korisnoj poruci:
xsalex (2.10.2011)
Stara 30.9.2011, 13:23   #3
dare023
Veteran
 
Član od: 30.6.2006.
Lokacija: Bečkerek
Poruke: 722
Zahvalnice: 46
Zahvaljeno 133 puta na 122 poruka
Određen forumom Re: problem sa kodom ...

Citat:
Dark Champion kaže: Pregled poruke
I onda dodaš u CSS:
Kod:
#nav a {
padding: 12px;
 border: 0px solid black; background: #871313;
 color: #000000; font: bold 12px sans-serif;
}
Ovde fali :

Kod:
text-decoration:none;
ako hoćeš da nisu podvučeni
Ceo kod bi izgledao ovako :
Kod:
#nav a {
padding: 12px;
 border: 0px solid black;
 background: #871313;
 color: #000000; 
 font: bold 12px sans-serif;
 text-decoration:none;
}
I ja bih izbacio sve tabele,ako je moguće...

Poslednja ispravka: dare023 (30.9.2011 u 14:15)
dare023 je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku dare023 na korisnoj poruci:
xsalex (2.10.2011)
Stara 30.9.2011, 13:40   #4
EclipsE
Starosedelac
 
Član od: 16.4.2006.
Lokacija: Scary Movie Reputacija: ■■□
Poruke: 1.337
Zahvalnice: 378
Zahvaljeno 279 puta na 196 poruka
Slanje poruke preko Skypea korisniku EclipsE
Određen forumom Re: problem sa kodom ...

Citat:
dare023 kaže: Pregled poruke
Ovde fali :
Kod:
display:inline;
ako hoćeš da se linkovi pojave u jednom redu

...
Ne, link je po default-u inline element. Da bi linkovi bili u jednom redu, onda bi na wrapper (li) stavio display: inline-block;
EclipsE je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku EclipsE na korisnoj poruci:
xsalex (2.10.2011)
Stara 30.9.2011, 14:15   #5
dare023
Veteran
 
Član od: 30.6.2006.
Lokacija: Bečkerek
Poruke: 722
Zahvalnice: 46
Zahvaljeno 133 puta na 122 poruka
Određen forumom Re: Problem sa kodom ...

Da, moja greška,ispravio sam post - na <li> sam i mislio, mada bih ja stavio samo "inline",ne znam tačno koja je razlika?
dare023 je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku dare023 na korisnoj poruci:
xsalex (2.10.2011)
Stara 30.9.2011, 14:28   #6
EclipsE
Starosedelac
 
Član od: 16.4.2006.
Lokacija: Scary Movie Reputacija: ■■□
Poruke: 1.337
Zahvalnice: 378
Zahvaljeno 279 puta na 196 poruka
Slanje poruke preko Skypea korisniku EclipsE
Određen forumom Re: Problem sa kodom ...

Citat:
dare023 kaže: Pregled poruke
Da, moja greška,ispravio sam post - na <li> sam i mislio, mada bih ja stavio samo "inline",ne znam tačno koja je razlika?
http://dustwell.com/div-span-inline-block.html
EclipsE je offline   Odgovor sa citatom ove poruke
Sledećih 2 korisnika se zahvaljuje korisniku EclipsE na korisnoj poruci:
dare023 (30.9.2011), xsalex (2.10.2011)
Stara 2.10.2011, 13:46   #7
xsalex
Član
 
Član od: 5.4.2008.
Lokacija: Doboj
Poruke: 92
Zahvalnice: 66
Zahvaljeno 2 puta na 2 poruka
Određen forumom Re: Problem sa kodom ...

Hvala momci, ne izgleda tako komplikovano, al' kada sam amater ... Sve je komplikovano ,,,
xsalex je offline   Odgovor sa citatom ove poruke
Stara 23.7.2012, 2:42   #8
xsalex
Član
 
Član od: 5.4.2008.
Lokacija: Doboj
Poruke: 92
Zahvalnice: 66
Zahvaljeno 2 puta na 2 poruka
Određen forumom Re: Problem sa kodom ...

Neki gore, navedoše, da ,,izbacim'' tabele. Ne znam zašto to smeta, ja preko njih pozicioniram različite html elemente i sdržaj u brauzeru ? Ako ih izbacim srušiće mi se kompletna struktura sajta ???
xsalex je offline   Odgovor sa citatom ove poruke
Stara 23.7.2012, 3:06   #9
doctor
Deo inventara foruma
 
Član od: 14.3.2008.
Lokacija: EHCPCGG
Poruke: 12.110
Zahvalnice: 4.319
Zahvaljeno 3.295 puta na 2.274 poruka
Određen forumom Re: Problem sa kodom ...

Zato što pozicioniranje treba vršiti preko CSS-a a ne pomoću tabela.
doctor je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku doctor na korisnoj poruci:
xsalex (25.7.2012)
Stara 25.7.2012, 15:59   #10
xsalex
Član
 
Član od: 5.4.2008.
Lokacija: Doboj
Poruke: 92
Zahvalnice: 66
Zahvaljeno 2 puta na 2 poruka
Određen forumom Re: Problem sa kodom ...

Evo, listam ovaj forum i išao sam na sajt w3c, da vidim ima li šta o css pozicioniranju. Web dizajnom se bavim amaterski, dakle, jednostavne dizajne, sučelja, kože za blogove, sajtove i sl., dakle ne bavim se nekim komplikovanim stvarima flash, java, php i sl.

Sad sam pročitao da je css dobar zato šzo se mijenjanem jedne datoteke, npr. može promijeniti sadržaj dizajna svih stranica (slova, font i sl.), što mislim da je vrlo korisno ... E sad mene interesuje ovo: ja sam do skora pozcionirao sadržaj na stranici tako što bih izgradio tabelu koja mi štima, stavio border na : ,,0'' i popunio tabelu onako kako treba...

Recimo, imam elemente 1, 2, 3 i 4. Kada ih ubacim u html stranicu, oni bi trebali biti poredani vertikalni jedan ispod drugo od 1 do 4. Dalje, sada ja u css (fajl koji sam povezao sa datom stranicom) trebam stilizovati te elemente (što mi se dopada) ali i pozicionirati takođe pomoću css-a - što sam ja prethodno radio sa html-om. Pa bi onda napravio tabelu kojom bi rasporedio elemete onako kako želim. E sad mene interesuje ovo: ako ja želim da elementi 1 i 2, budu po šrini čitave stranice, jedan do drugog u horizontalnoj liniji, te da elementi 3, i 4, budu jedan ispod drugog po čitavoj širini prozora, ali tako da su odvojeni jedan od drugog, a da budu ispod 1 i 2... Kako to raditi preko css-a ?

Da li možda zna neki tutorijal sa primjerima ? Hvala unaprjed ...
xsalex je offline   Odgovor sa citatom ove poruke
Stara 25.7.2012, 16:36   #11
Geralt
Član
 
Član od: 5.5.2010.
Poruke: 371
Zahvalnice: 168
Zahvaljeno 191 puta na 123 poruka
Određen forumom Re: Problem sa kodom ...

^
Ako znaš engleski, na linku ispod imaš veoma dobre video tutorijale o CSS-u. Kreni sa njima i brzo ćeš naučiti neke osnove CSS-a, a kasnije ćeš i sam moći da raspoređuješ HTML elemente kako god ti poželiš... Ako negde zapneš, pitaj...
Link: http://www.youtube.com/playlist?list...C&feature=plcp

Evo ti jedan na brzinu napravljen primer kako rasporediti 4 html elemenata:

Spoiler za html kod:

Kod:
<!DOCTYPE html>
<html>
<head>
<title>Primer</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div id="header">Header</div>
<div id="header2">Header 2</div>
<span class="clearfix"></span>
<div id="content">Content</div>
<div id="footer">Footer</div>

</body>
</html>
Ovde se nalazi samo najobičnija HTML stranica sa četiri elementa(header, header2, content i footer).


Spoiler za CSS kod:

Kod:
#header {
background-color:red;
height:400px;
width:550px;
padding:10px;
float:left;

}
#header2 {
background-color:green;
height:400px;
width:550px;
padding:10px;
float:left;
margin-left:10px;
padding:10px;

}
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}

#content {
margin-top:10px;
width:100%;
background-color:yellow;
height:200px;
margin-bottom:10px;
padding:10px;
}

#footer {
width:100%;
background-color:blue;
height:200px;
margin-bottom:10px;
color:white;
padding:10px;
}
CSS kod potreban za osnovni layout stranice. Najvažnija stvar je "Float" koja se koristi za horizontalan raspored HTML elemenata, jer će većina tzv. "block" elemenata (p, div), biti vertikalno raspoređena jedan ispod drugog po default-u.


Spoiler za Izgled stranice:


Kao što rekoh, najobičnija HTML stranica...


Ako ne razumeš CSS kod iznad, onda lepo pogledaj one video tutorijale, i brzo ćeš shvatiti...

Poslednja ispravka: Geralt (25.7.2012 u 16:58)
Geralt je offline   Odgovor sa citatom ove poruke
Sledeći korisnik se zahvaljuje korisniku Geralt na korisnoj poruci:
xsalex (25.7.2012)
Stara 25.7.2012, 19:53   #12
xsalex
Član
 
Član od: 5.4.2008.
Lokacija: Doboj
Poruke: 92
Zahvalnice: 66
Zahvaljeno 2 puta na 2 poruka
Određen forumom Re: Problem sa kodom ...

Evo ovako, postavio sam uz ovaj post još dva atačmenta.

Dakle, vidi šta meni treba. Ja ne pravim neke super fensi stranice, u obliku mece, cuke, sa efektima transparentonosti. Ja jednostavno, imam svoj blog, po nekada volim da promijenim dizajn i sl. e sad. Moji dizajni se uviej baziraju na tome da su po prirodi kockasti, kvadratni, pravouganosti, nikakvi specijalni oblici, stoga će mi ovi dvoji linkovi i primjeri biti od velike koristi za css (nadam se) ...

Šta mene zeza kod tog css-a. Evo primjer. Neka rezolucija prozora (vindovsa) bude 1024 x 768 piksela pregleda sadržaja koju pruža brauzer. Ja (npr.) želim da moja stranica bude dimenzija 800x768 piksela (lupam primjer), i kad bi neko, recimo imao rezoluciju na monitoru 640x400 (npr.) meni se desi da moja stranica u toj rezoluciji bude prikazana deformisana. Pogledaj moj atačment 1., i vidjećeš da je kod ovog foruma (pošto je moja rezolucija manja od dimenzija foruma) prikazani skrol barovi. I koliko god ja smanjivao rezoluciju monitora, taj skrol bar meni se povećava ,a stranica ostaje istih dimenzija i tako sprečava da dođe do deformisanja stranice. Sledeći problem, imam rezoluciju 1024x768, i stranica se prikazuje ekstra, ako sad uzmem prozor brauzera, te stisnem ,,restore down'', rezolucija desktopa ostaje ista, ali se praktično dešava, da tako što neki korisnik mijenja veličinu prozora brauzera (,a ne vindovsa) npr. suži širinu i moja stranica se deformiše. To mi se dešava kada koristim css, a prilikom upotrebe html tabela, ja kada odredim fiksne veličine i širine tabeli, ona uvijek mi ostaje ista.

Koristiću se ovim tvojim poslednjim atačmentom, imam header 1 i 2. Odredio sam da obadva budu širine po 200 piksela, a sadržaj i futer da budu jedan ispod drugog takođe širine po 400 piksela, te margine s lijeva je 20px kao i po 20px sa vrha i dna... Sada kada neko mijenja rezoluciju svogam monitora, ili samo ručno mijenja širinu, veličinu prikaza stranice u svome brauzeru, ja neću da se u prikazu moja stranica deformiše. Želim da ove dimenzije ostanu, dakle hejder 1 i 2 širine po 200px, sadržaj i futer širine po 400px, margine sa lijeva, vrha i dna po 20px... Kako da ovo uredim preko css-a. Nadam se da ste me shvatili pošto sam naveo komplikovan primjer ...
Priložene slike
Kliknite na sliku za veću verziju

Ime:	1.jpg
Viđeno:	17 puta
Veličina:	95,0 KB
ID:	43798   Kliknite na sliku za veću verziju

Ime:	2.jpg
Viđeno:	12 puta
Veličina:	90,9 KB
ID:	43799  
xsalex 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
Opet problem sa DVD-RW-om mmm87 Nosači podataka 30 1.1.2013 19:47
Nokia e71 i problem sa USB konekcijom PsyDuck Aparati i oprema 5 1.12.2010 15:17
Problem sa PLAVIM EKRANOM backo87 Kvarovi 7 25.10.2010 18:12
Problem sa bootovanjem sa DVD-a za iATKOS S3 v2 toology Operativni sistemi 0 9.9.2010 2:03
WBR-3408 11g Wireless Broaband Router- Problem sa umrežavanjem Hich Komunikacioni uređaji i umrežavanje 1 19.2.2010 9:42


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


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