Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Ptoblem sa CSS-om

[es] :: Web dizajn i CSS :: Ptoblem sa CSS-om

[ Pregleda: 1446 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Konstantin91
Konstantin Petrovic
Mladenovac

Član broj: 57918
Poruke: 168
178.219.6.*



+34 Profil

icon Ptoblem sa CSS-om13.11.2012. u 18:03 - pre 79 meseci
Poceo sam malo da radim neke web sajtove i naisao sam na jedan neobican problem kod cesto koriscenog rasporeda. Ne koristim gotova resenja vec zelim da sam radeci naucim kako i sta. Objasnicu sta je konkretno problem.

Koristim raspored sa zaglavljem, zatim sledi sadrzaj iz tri kolone, desna, centralna i leva (centralna je dosta sira od leve i desne sobzirom da se glavni sadrzaj u njoj nalazi a kolone sa strane sluze za navigaciju i ostale "sitnije" stvari) i na kraju footer (tu se nalaze osnovni podaci o autoru i link na mapru sajta (stranica sa linkovima)

Code:

#container {position: relative; left: 0px; top: 0px; background-color: white;}
#masthead {width: 100%; height: 150px; background-image: url(images/baner.jpg);}
#nav {float: left; width: 20%; border: 1px solid black; background-color: #203f60;}
#content {padding-top: 10px; padding-left: 10px; float: left; width: 60%; text-decoration: none; color: black; background-color: white;}
#sidebar {float: right; width: 18%; text-decoration: none; border-left-width: medium; background-color: white; margin-left: 0px; text-decoration: none;}
#footer {width: 100%; clear: both; background-color: #0D4C89; text-decoration: none; color: white;}

#link li {list-style-type: none; text-decoration: none;}
#link a {color: whitek; text-decoration: none;}
#link a:link {color: white; text-decoration: none;}
#link a:visited {color: white;}
#link a:hover {color: black; background-color: white; text-decoration: none;}



Problem je u navigaciji, linkove stavim u #nav (leva kolona) i poslednji link mi izlazi iz #nav i prenosi se na centralnu i desnu kolonu, takodje se neki put "mesa" i sa prvim linkom. Npr. ako imam klasicnu navigaciju, vertikalna lista, home, o sajtu, kalendar, vesti i kontakt. Poslednji link "kontakt" se ponasa kao sto sam opisao gore. Probao sam i sa "border" da vidim gde su granice #nav i sve je ok ali nikako da shvatim kako i zasto izlazi van svojih granica...

Kod nisam sredio jer jos uvek malo eksperimentisem sa marginama i padding ali to nije vazno jer se isto ponasa sa i bez toga...

Da li neko zna razlog zbog kojeg link izlazi van svojih granica i kako to da resim ???
 
Odgovor na temu

D4n1L0

Član broj: 295581
Poruke: 17



+1 Profil

icon Re: Ptoblem sa CSS-om13.11.2012. u 21:43 - pre 79 meseci
Ako ti nije problem okaci i HTML kod jer ovako iz CSS ne mogu da vidim u cemu je problem...
Kad okacis ostatak pokusacemo da nadjemo resenje ;)

U sustini mislim da je problem u #link, ti si stavio #link a, a trebalo bi da svuda imas #link li a (znaci svuda gde imas #link stavi ispred li )..

Ovako : ( umesto id koristi class)
Code:

.link {margine:0px; padding:0px;}
.link li {list-style-type: none; text-decoration: none;}
.link li a {color: whitek; text-decoration: none;}
.link li a:link {color: white; text-decoration: none;}
.link li a:visited {color: white;}
.link li a:hover {color: black; background-color: white; text-decoration: none;}

Probaj da to promenis pa javi rezultat
;)

[Ovu poruku je menjao D4n1L0 dana 13.11.2012. u 22:58 GMT+1]
“Unapređenje i širenje znanja je jedini pravi čuvar slobode.” - Džejms Madison
Zainteresovan za ucenje i usavrsavanje kompjuterskih vestina i programiranja...
Oblasti: Web Development, C++, Java, Python, Racunarske mreze
**Napomena** - Nisam strucan u navedenim oblastima vec mi je to hobi.
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2123
*.dynamic.isp.telekom.rs.



+2227 Profil

icon Re: Ptoblem sa CSS-om13.11.2012. u 22:14 - pre 79 meseci
A zašto gotovo svi izostavljaju i četvrto stanje koje se zove a:active ? U trenutku kada se klikne na link » a:active

Code:


a:link {}
a:visited {}
a:hover {}
a:active {}



Ja bih inače kod neodređenih ili unordered tipa listi stavljao i ul tag, ukoliko želiš da taj deo bude ciljan baš, baš u "metu".


Code:


ul.link {}
ul.link li {}
ul.link li a {}

ul.link li a:link {}
ul.link li a:visited {}
ul.link li a:hover {}
ul.link li a:active {}



I ne vidim razlog zbog kojeg bi trebao da izbegava ID za listu. Pogotovo ako se radi o navigaciji koja se pojavljuje na samo jednom mestu u sklopu html dokumenta.. ukoliko je u pitanju lista koja ide u sklopu glavne sadržine gde je tekst stranice, pa se onda javlja mogućnost za ponavljanjem istih pravila više puta, za šta klase i služe, onda ID pada u vodu jer dokument onda neće biti validan.. ali u svakom drugom slučaju... sasvim ok.
about:networking
 
Odgovor na temu

D4n1L0

Član broj: 295581
Poruke: 17



+1 Profil

icon Re: Ptoblem sa CSS-om14.11.2012. u 08:09 - pre 79 meseci
Citat:
I ne vidim razlog zbog kojeg bi trebao da izbegava ID za listu. Pogotovo ako se radi o navigaciji koja se pojavljuje na samo jednom mestu u sklopu html dokumenta.. ukoliko je u pitanju lista koja ide u sklopu glavne sadržine gde je tekst stranice, pa se onda javlja mogućnost za ponavljanjem istih pravila više puta, za šta klase i služe, onda ID pada u vodu jer dokument onda neće biti validan.. ali u svakom drugom slučaju... sasvim ok.


Pa dobro upravu si, nema razloga da ne koristi. ;) A sto se tice ovog cetvrtog parametra ja to nikad ne izostavljam samo mi sada nije palo napamet da mu skrenem paznju na to al eto dopunio si sta je falilo ;)

Pozdrav, Danilo
“Unapređenje i širenje znanja je jedini pravi čuvar slobode.” - Džejms Madison
Zainteresovan za ucenje i usavrsavanje kompjuterskih vestina i programiranja...
Oblasti: Web Development, C++, Java, Python, Racunarske mreze
**Napomena** - Nisam strucan u navedenim oblastima vec mi je to hobi.
 
Odgovor na temu

Konstantin91
Konstantin Petrovic
Mladenovac

Član broj: 57918
Poruke: 168
178.219.6.*



+34 Profil

icon Re: Ptoblem sa CSS-om14.11.2012. u 13:49 - pre 79 meseci
Evo sada sam probao sa horizontalnim linkovima. Isto mi se desava, poslednji link (u ovom slucaju "kontakt") oznacava mi se i kada je kursor na content, sidebar pa cak i na footer...

Code:

#container {position: relative; left: 0px; top: 0px; background-color: white;}
#baner {width: 100%; height: 150px; background-color: #be0100; }
#masthead {width: 100%; background-color: #e9e9e9; clear: both;}
#nav {float: left; width: 20%; border: 1px solid black; background-color: #203f60;}
#content {padding-top: 10px; padding-left: 10px; float: left; width: 60%; text-decoration: none; color: black; background-color: white;}
#sidebar {float: right; width: 18%; text-decoration: none; border-left-width: medium; background-color: white; margin-left: 0px; text-decoration: none;}
#footer {width: 100%; clear: both; background-color: #0D4C89; text-decoration: none; color: white;}


#link ul, li, a {display: inline; list-style-type: none; text-decoration: none;}
#link li a {color: black; text-decoration: none; }
#link li a:link {color: black; text-decoration: none;}
#link li a:visited {color: black;}
#link li a:hover {color: black; background-color: #8f8f8f; text-decoration: none;}
#link li a:active {color: black; text-decoration: none;}

body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: black; background-color: white; }
h1 {font-size: 24px; color: #114c83; border-bottom: strong; border-bottom-style: dotted; border-bottom-color: #114c83; }


U odnosu na proslu verziju sada sam prosli #masthead preimenovao u baner a dodao sam novi #masthead za horizontalne linkove...
To u pretrazivacima izgleda (sa vrha pa na dole)
baner pa ispod njega horizontalni linkovi pa ispod linkova 3 kolone (klasican raspored desna i leva oko 20% i centralna 60%) i na kraju ispod svega footer... Ono sto sam zapazio je da se link ne "prenosi" iznad, odnosno na baner vec samo ispod na ostale kolone i cak i na footer...

Zaista cudno ponasanje, kao sto sam i napisao ranije, probao sam i sa borderom da vidim gde su granice elementa (diva) sa linkovima i sve izgleda normalno, e sada kako se taj link prenosi na ostale elemente (divove) nije mi uopste jasno...
 
Odgovor na temu

D4n1L0

Član broj: 295581
Poruke: 17



+1 Profil

icon Re: Ptoblem sa CSS-om14.11.2012. u 14:29 - pre 79 meseci
ajde ovako probaj (pazi ovo ti je za HORIZANTALNU NAVIGACIJU) predpostavljam da se ona nalazi u okviru #nav ako je tako onda podesi sirinu da cela navigacija stane lepo.

CSS:
Code:

#link {display:block; float: left; padding:0px; margin:0px;}
#link ul {margin:0px; padding:0px; list-style:none;}
#link li {display:block; float:left; color:black; margin:0px; padding:0px;}
#link li a {display:block; float:left; background-color:#999; color:white; margin:0px; padding:10px;}
#link li a:link {color:#FFF; background-color:#999; text-decoration:none;}
#link li a:hover {color:#FFF; background-color:#333333;}
#link li a:visited {color: black; background-color:#666;}
#link li a:active {color: black; background-color:#333333;}


HTML:
Code:

<ul id="link">
 <li><a href="#">Nesto 1</a></li>
 <li><a href="#">Nesto 2</a></li>
 <li><a href="#">Nesto 3</a></li>
 <li><a href="#">Nesto 4</a></li>
 <li><a href="#">Nesto 5</a></li>
</ul>


Ovo radi kod mene morace i kod tebe. Ne izgleda nesto lepo ali funkcionise.
Ti sada mozes da se igras sa parametrima i da menjas izgled kako tebi odgovara...
Postavi ovo i javi da li radi.


Pozdrav, Danilo.

[Ovu poruku je menjao D4n1L0 dana 14.11.2012. u 15:44 GMT+1]

[Ovu poruku je menjao D4n1L0 dana 14.11.2012. u 15:50 GMT+1]
“Unapređenje i širenje znanja je jedini pravi čuvar slobode.” - Džejms Madison
Zainteresovan za ucenje i usavrsavanje kompjuterskih vestina i programiranja...
Oblasti: Web Development, C++, Java, Python, Racunarske mreze
**Napomena** - Nisam strucan u navedenim oblastima vec mi je to hobi.
 
Odgovor na temu

jeske.su
Web Dizajner & Developer

Član broj: 307577
Poruke: 21

Sajt: tihomirjesic.comli.com


+7 Profil

icon Re: Ptoblem sa CSS-om14.11.2012. u 15:30 - pre 79 meseci
Da li si probao da nakon recimo navigacije ubacis div sa klasom clear:both?

Mislim da je problem u samoj strukturi tvog sajta.
Evo ti jedan od primera kako bi to mogao izvesti.

HTML:
Code:
<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="left_sidebar">LEFT SIDEBAR</div>
    <div id="content">CONTENT</div>
     <div id="right_sidebar">RIGHT SIDEBAR
        <div id="nav">
            <ul>
                <li><a href="">link #1</a></li>
                <li><a href="">link #2</a></li>
                   <li><a href="">link #3</a></li>
                <li><a href="">link #4</a></li>
                <li><a href="">link #5</a></li>
                <li><a href="">link #6</a></li>
                <li><a href="">link #7</a></li>
                <li><a href="">link #8</a></li>
                <li><a href="">link #9</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div id="footer">FOOTER</div>
</div>


CSS:
Code:
#wrapper {
    width: 960px; 
    margin:0 auto;
}
#header {}
#content {
    width:480px; 
    float:left;
}
#left_sidebar,
#right_sidebar {
    width:240px; 
    float:left;
}
#nav ul {
    padding:0;
    margin:0;
    list-style:none;
}
#footer {}
.clear {clear:both;}


Namerno sam napisao layout u px jer je tako najlakse da vidis u cemu je caka. Ako hoces da radis cist fluid dizajn, onda pogledaj malo na netu tutorijale kako bi izbegao moguce bagove.

Pozdrav!
Prikačeni fajlovi
 
Odgovor na temu

D4n1L0

Član broj: 295581
Poruke: 17



+1 Profil

icon Re: Ptoblem sa CSS-om15.11.2012. u 22:01 - pre 79 meseci
Dobio odgovor i nejavlja se vise :)
“Unapređenje i širenje znanja je jedini pravi čuvar slobode.” - Džejms Madison
Zainteresovan za ucenje i usavrsavanje kompjuterskih vestina i programiranja...
Oblasti: Web Development, C++, Java, Python, Racunarske mreze
**Napomena** - Nisam strucan u navedenim oblastima vec mi je to hobi.
 
Odgovor na temu

jeske.su
Web Dizajner & Developer

Član broj: 307577
Poruke: 21

Sajt: tihomirjesic.comli.com


+7 Profil

icon Re: Ptoblem sa CSS-om16.11.2012. u 08:17 - pre 79 meseci
Valjda smo mu nesto pomogli :)
 
Odgovor na temu

D4n1L0

Član broj: 295581
Poruke: 17



+1 Profil

icon Re: Ptoblem sa CSS-om16.11.2012. u 10:09 - pre 79 meseci
Citat:
jeske.su: Valjda smo mu nesto pomogli :)


Verovatno da jesmo cim se nejavlja :) Shvaticu to kao hvala :)
“Unapređenje i širenje znanja je jedini pravi čuvar slobode.” - Džejms Madison
Zainteresovan za ucenje i usavrsavanje kompjuterskih vestina i programiranja...
Oblasti: Web Development, C++, Java, Python, Racunarske mreze
**Napomena** - Nisam strucan u navedenim oblastima vec mi je to hobi.
 
Odgovor na temu

Konstantin91
Konstantin Petrovic
Mladenovac

Član broj: 57918
Poruke: 168
178.219.6.*



+34 Profil

icon Re: Ptoblem sa CSS-om16.11.2012. u 13:19 - pre 79 meseci
Ma nisam otisao bez da kazem hvala naravno...

Izlazak linka van elementa, izgleda da sam nasao resenje.

Pre nadjenog resenja sam probao sledece. Prvo sam probao neke izmene na mom sajtu i nisam uspeo. Posle sam otvorio novu stranu i krenuo sve iz pocetka. Uzeo sam primer koji je postavio @jeske.su

Citat:
jeske.su: Da li si probao da nakon recimo navigacije ubacis div sa klasom clear:both?

Mislim da je problem u samoj strukturi tvog sajta.
Evo ti jedan od primera kako bi to mogao izvesti.

HTML:
Code:
<div id="wrapper">
<div id="header">HEADER</div>
    <div id="left_sidebar">LEFT SIDEBAR</div>
    <div id="content">CONTENT</div>
     <div id="right_sidebar">RIGHT SIDEBAR
    <div id="nav">
        <ul>
            <li><a href="">link #1</a></li>
                <li><a href="">link #2</a></li>
               <li><a href="">link #3</a></li>
                <li><a href="">link #4</a></li>
                <li><a href="">link #5</a></li>
                <li><a href="">link #6</a></li>
                <li><a href="">link #7</a></li>
                <li><a href="">link #8</a></li>
                <li><a href="">link #9</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div id="footer">FOOTER</div>
</div>


CSS:
Code:
#wrapper {
width: 960px; 
margin:0 auto;
}
#header {}
#content {
width:480px; 
float:left;
}
#left_sidebar,
#right_sidebar {
width:240px; 
float:left;
}
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#footer {}
.clear {clear:both;}


Namerno sam napisao layout u px jer je tako najlakse da vidis u cemu je caka. Ako hoces da radis cist fluid dizajn, onda pogledaj malo na netu tutorijale kako bi izbegao moguce bagove.

Pozdrav!



Znaci najprostiji primer na najprostiji nacin, krenem u Frontpage-u, samo u desnoj koloni umesto njegovih "primera" ubacim prave linkove, moje. U ovom slucaju se poslednji link prenosi samo na footer. Nakon toga Ubacim u levu kolonu, u ovom slucaju se poslednji link iz navigacije prenosi na centralnu, desnu i footer. Zakljucak jednostavan, link izlazi iz okvira <UL> i prenosi se na sve sto sledi NAKON njega. Nadjem resenje na w3schools....

Tryit Editor

Oni kazu sledece:

"Note: If you only set the padding for a elements (and not ul), the links will go outside the ul element. Therefore, we have added a top and bottom padding for the ul element."
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Ptoblem sa CSS-om

[ Pregleda: 1446 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.