Ptoblem sa CSS-om

[ Konstantin91 @ 13.11.2012. 18:03 ] @

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 ???

[ D4n1L0 @ 13.11.2012. 21:43 ] @

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]}

[ plus_minus @ 13.11.2012. 22:14 ] @

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.

[ D4n1L0 @ 14.11.2012. 08:09 ] @

Citat:

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

[ Konstantin91 @ 14.11.2012. 13:49 ] @

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...

[ D4n1L0 @ 14.11.2012. 14:29 ] @

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]}

[ jeske.su @ 14.11.2012. 15:30 ] @

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!

[ D4n1L0 @ 15.11.2012. 22:01 ] @

Dobio odgovor i nejavlja se vise :)

[ jeske.su @ 16.11.2012. 08:17 ] @

Valjda smo mu nesto pomogli :)

[ D4n1L0 @ 16.11.2012. 10:09 ] @

Citat:

jeske.su: Valjda smo mu nesto pomogli :)

Verovatno da jesmo cim se nejavlja :) Shvaticu to kao hvala :)

[ Konstantin91 @ 16.11.2012. 13:19 ] @

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."