Vse, kar ste si želeli vprašati o CSS, pa si niste upali.

1. uporabljaj lower case ker je primerno za css in xhtml
2. text-decoration: none pri a:hover lahko zbrišeš
3. če se prov spomnem je tvoj problem posledica tega, da je link brez določene lokacije (href="")

lp

Nevermind. V tej temi sem se že navadil reševati težave sam.

Ena moznost, ki mi zdaj pade na pamet, je da div floatas.

Sicer ne vem kako ima ie7, ampak tole ti zna pomagat:
CSS - Fun with tables

fix al pa absoulte ?

Cisto odvisno od konteksta - ce imas kak container in ce je visina spodnjega div-a fiksna, potem bi slo takole: http://pastie.textmate.org/200083

Mas kar zanimiv problem, sploh za dobit neko splosno resitev. Sporoci ce kaj pogruntas, ce pa mas moznost, daj link do konkretnega primera, bom z veseljem se malo pogledal :)

Mene zanima kako se naj zmebim tega robe ob če kliknem na gumbek ?

R33D3M33R:

Ah, razumem. Kaj pa, ce bi sidebar za print stylesheet kar skril?


#000000:

selector_za_gumbek:focus { outline: none; }

Pomembno: ko odstranis pikice najdi drug nacin za prikazat kje je fokus, sicer bos zmedel uporabnike, ki okrog po tvoji strani skacejo s pomocjo tipkovnice.

Ce je sredinski del vsebinsko bolj pomemben, zakaj pa je v kodi za desnim?

Trenutno imam dva problema z CSSjem.
1.)Imam neko stran kjer je en levi meni in polje z vsebino. Oba polja sem vtaknil v en container, ki skrbi, da sta polja poravnana sredinsko. Problem je, da ko se sredinko polje razširi čez višino containerja ne razširi containerja ampak gre preprosto čez njega.

Koda:
.container
{
margin: 0 auto;
background-color: white;
min-height: 500px;
width: 800px;
border-left: black solid 1px;
border-right: black solid 1px;
height: auto;
}

.menu_l
{
float: left;
width: 150px;
background-color: red;
}

.vsebina
{
float: right;
background-color: white;
width: 650px;
}

Še HTML del:

<div class="container">
<div class="vsebina">
hrthrth<br /><br />ht<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />gh<br /><br /><br /><br /><br /><br /><br /><br />grtg
</div>
<div class="menu_l">
rthrt<br /><br />
</div>
</div>

2.) Tisti rdeči meni (rdeč samo zaradi lažjega prepoznavanja) mora biti tako visok kot je visoko polje z vsebino. Nekje sem sicer prebral, da je v takem primeru bolje uporabit tabelo saj je s CSSjem praktično neizvedljivo.

Torej kako bi rešil ta dva problema?

Hvala!
Drugi problem pa seveda ostaja - seveda sem pod meni_l dodal še height: inherit - vendar ne pomaga.

Zdravo

Problem v IE6:



Zakaj se nekaj črk iz zadnje povezave pojavi v novi vrstici? Koda je xhtml valid, css je valid, povsod zgleda vredu samo v ie6 ga serje. So pa ti gumbki navadni linki oblikovani s cssom.

hvala, lp

hidropower.si

Tako na slepo rečeno boš moral ustvarit css za IE6 posebej ter experimentirat z margin (verjetno).

Tukaj si poglej kaj bi ti pasalo :) SitePoint

Aha hvala!

Mah rabm, ker mam neke sence v png-ju, IE6 pa seveda ne podpira png format in sm našu nek hack zanj. Zato rabm ta child selector. Sam IE7 pa očitno telih child selectorjev ne razume najboljš, ker v FF dela tole...

http://www.dave-woods.co.uk/?p=143

http://www.positioniseverything.net/ind...

http://www.alistapart.com/topics/code/c...

http://reference.sitepoint.com/css

Eno vprašanje za vse poznavalce CSS-ja. Uporabljam "XHTML 1.0 Transitional", kjer "vertical-align" ne deluje oz. ne reagira.

Zanima me, kako bi najbolj enostavno vertikalno centriral sliko znotraj div-a v naslednjem primeru:

.image-frame {
width: 90px;
height: 90px;
border: solid 1px #CCCCCC;
text-align: center;
vertical-align: middle;
}

<div class=image-frame>
<img src='slika.jpg' width='80px' height='80px'>
</div>

Kaj pa če odstranim sliki atributa width=80px height=80px, torej da imam sliko poljubne velikosti do max 80x80 (lahko npr. tudi 30x60) pa bi rad da je centrirana?

Grrrrr kaj IE6 dela z mojim dizajnom! Kot prvo ne prebavi transparentnosti v PNGjih, razlomi glavo in naredi zmešnjavo.

Glavni problem je seveda v centralnem delu:
IE6
Firefox 3

IE7 pa stvar prikaže tako kot mora. Še CSS, ki skrbi za osrednji del (komentarje):
.komentarji
{
overflow: hidden;
margin-bottom: 10px;
min-height: 100px;
color: black;
background-color: #f1f4d0;
border: solid 1px black;
padding:10px;
}

.komentarji_user
{
float:left;
width: 68px;
}

.komentarji_top
{
border-bottom: solid black 1px;
font-style: italic;
margin-bottom: 10px;
width: 540px;
float: right;
}

.komentarji_jedro
{
width: 540px;
float: right;
}


Ter HTML, ki ga generira PHP:

<div class='komentarji'>
<div class='komentarji_top'>::Avtor: janko&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;::Datum: 15:06:2008 ob 
19:42&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#: 41</div>
<div class='komentarji_user'>
<img alt='avatar' class='priajvljen_user_img' src='images/ikone/neotux.png' />
</div><div class='komentarji_jedro'>rhrhrh r hrt hrt h r hrt hrrht&nbsp;</div></div>

Občutek imam, da ignorira min-height!

Si mislil na kaj takega:
http://www.dustindiaz.com/min-height-fa...

Sedaj sicer ni razlomljeno vendar vse kar je daljšega od tistega height oz. min-height atributa preprosto izgine! Vsaj v IE - drugje še vedno deluje kot mora!

kaj takega bi verjetno delalo:

div a[href="/script/profil/?userID=35920"] {
display:none:
}

s kirim pluginom pa ga kličeš?

Imam eno praktično vprašanje za vse tiste, ki vam CSS leži v tamalem prstu:)

Torej, sledeč problem:


Okvirček z zakroženimi robovi. V HTML-ju ga napišeš v stilu:

<div class="frame">
  <div class="frame-top">
    <div class="frame-top-left">
    <div class="frame-top-fill">
    <div class="frame-top-right">
  </div>
  <div class="frame-middle">
    <!-- ...vsebina okvirčka... -->
  </div>
  <div class="frame-bottom">
    <div class="frame-bottom-left">
    <div class="frame-bottom-fill">
    <div class="frame-bottom-right">
  </div>
</div>

CSS koda pa sledeča:

.frame-top {
clear:both;
}
.frame-top-left {
float:left;
background:url(images/frame-top-left.png) no-repeat;
height:5px;
width:5px;
}
.frame-top-fill {
float:left;
background:url(images/frame-top-fill.png) repeat-x;
height:5px;
width:Y; <!-- Y=X-10px(zaradi levega in desnega zaobljenega vogalcka) -->
}
.frame-top-bottom {
float:left;
background:url(images/frame-top-right.png) no-repeat;
height:5px;
width:5px;
}
.frame-middle {
clear:both;
width:X;
}
.frame-bottom {
clear:both;
}
.frame-bottom-left {
float:left;
background:url(images/frame-bottom-left.png) no-repeat;
height:5px;
width:5px;
}
.frame-bottom-fill {
float:left;
background:url(images/frame-bottom-fill.png) repeat-x;
height:5px;
width:Y; <!-- Y=X-10px(zaradi levega in desnega zaobljenega vogalcka) -->
}
.frame-bottom-bottom {
float:left;
background:url(images/frame-bottom-right.png) no-repeat;
height:5px;
width:5px;
}

Dokler sta X in Y fiksno določena vse lepo prikaže, jaz pa bi rad imel okvirček dinamične širine, da se prilagaja dolžini teksta znotraj osrednjega dela. Lahko je 100px ali pa 500px, odvisno od besedila. Kako to naredim?