CSS kérdésem van

[Kovács Gyula (MiniDisk)]

Van egy dived, amit a lap aljára akarsz tolni? Vagy mit szeretnél pontosan?

Mert ha:

position: absolute;

z-index: 1;

 

definíciókat is beírod a css-be, akkor átmegy "3D-be" a div, és a marginokkal oda teszed, ahova akarod úgy, hogy az oldal többi elemének pozícióját nem befolyásolja.

 

A http://game.minidiscweb.hu oldalam pl. így van megcsinálva, 12 rétegü az oldal. Az összes div a lap elején van a html kódban, és a fenti megoldással tettem a helyükre. Viszont ehhez kell az, hogy az egész lap egy befoglaló divben legyen, aminek fix a szélessége, mert csak így lesz felbontásfüggetlen.

[Garono]

Nem, arra gondoltam, hogy amit linkeltem, ott a menü követi a böngészõ szélességét. Nekem ez kéne, csak nem jobb oldalra, hanem alulra. Majd három (esetleg négy) részbõl fog állni az oldal, egy felül, egy középpen, és egy alul. Na most, felül lenne a menü és a logo, középpen a tartalom, és alul az aláírás, meg a valid gombok, meg ilyesmik, vagy esetleg bannerek, egy marquee szövegben.

 

Úgy szeretném csinálni, hogy a felsõ rész az értelemszerûen felül legyen, a középrésznek legyen egy min-height-je, s a mérete változó legyen, érjen az alsó rész tetejéig, miközben az mindíg a böngészõ alsó részén van.

 

Nem tudom mennyire lehet érteni, ha kell rakok be képet, magyarázatokkal.

 

/Amúgy abban sem vagyok biztos, hogy kivitelezhetõ amit akarok.

 

[Kovács Gyula (MiniDisk)]

Nem igazán értem. A menü hogy tudná lefelé tolni az alsó részt, ha az nem közvetlenül az alsó rész felett van? Szóval jöhet a kép.

[Garono]

Hát akkor: a felsõ és a középsõ résznek fix magassága lenne, ám a középsõnek, vagyis a tartalomnak változó. De! Az alsó résznek mindíg a böngészõ alján legyen a helye, és a felsõ és az alsõ rész közötti részen legyen a tartalom, ami a felsõ alatt kezdõdne, és az alsõ felett végzõdne, és ha változik az ablak méret (függõlegesen), akkor az alsó rész kövesse a böngészõ alját, és ezzel együtt a tartalom magassága is változzon. <click!>

 

Ilyet még sehol se láttam, szóval lehet, hogy kivitelezhetetlen...

 

/Ja és a tartalom DIVnek overflow:auto tulajdonságot adok, így nem gond, ha a tartalom tartalma ( ) több lesz, mint amennyi kifér.

 

Na, ez kivitelezhetõ, vagy nem?

 

[Kovács Gyula (MiniDisk)]

Hát ezt maximum javascripttel lehetne. De nem tudom, hogyan.

[Garono]

Hmm. Az nem jó. Akkor megkérdezem majd a Weblaboron, hátha tud valaki egy trükköt. Ha meg nem, akkor nem lesz változó magassága az oldalnak. Csak úgy tök szép lett volna.

[Kovács Gyula (MiniDisk)]

Próbáld meg azt, hogy a css-ben a body-ba teszel egy overflow: hidden; opciót. Ha nem lenne jó, akkor: html { overflow: hidden; }

[Giraffe1]

Valami olyasmit szeretnél, mint ahogyan ezen az oldalon vannak alul a szakértõk és a vissza "gomb"?

Ezt - eddig - csak JS segítséggel tudtam megoldani, de csak azért, mert az alsó DIV mérete változó (1-5 között változik a szakértõk száma ). A próbák során fix méretû alsó csíkkal meg tudtam valahogy oldani, hogy az fixen az ablak aljához tapadjon. Ha valóban erre van szükséged, akkor megpróbálom újra kitalálni.

[Garono]

@MiniDisc

De ez most nem az, hogy a scrollbart elrejti?

 

@Giraffe

Igen, ilyesmire gondoltam. Legalábbis az alsó részhez ez kéne. Ezt csak JS-el lehet megcsinálni? Mert akkor nem kell...

 

Szerk.: @Giraffe

Oké, meg is van! Nagyon szépen köszi a linket!

#tegla {
   background-color: black;
   bottom: 0px;
   height: 10px;
   position: absolute;
   width: 600px;
}

 

Pedig próbáltam én a bottom tulajdonságot, de nem sikerült... vagy egy másik tulajdonság felülírta... Mindegy, már minden oké, mégegyszer köszi, hogy idõt szántatok rám.

 

[Giraffe1]

Igen, ilyesmire gondoltam. Legalábbis az alsó részhez ez kéne. Ezt csak JS-el lehet megcsinálni? Mert akkor nem kell...

Legalábbis nekem másképpen nem sikerült. A gond az, hogy meg kellene adni heightet is, de azt én nem tudok, hiszen az alsó sáv magassága tartalomtól függõen változik.

Mindenestre ha találsz olyan megoldást is, ami az alsó DIV magassági beállítása nélkül is jól mûködik, arra vevõ lennék.

[Garono]

Olyat tudnék mondani, amivel megadhatsz fix magasságot, és ha a tartalom nõ, akkor egy gördítõsáv jelenik meg. Csak ez nem túl szép, de szerintem nézdd meg!

#akarmi {
   height: 50px; /* a fix magaság */
   overflow: auto; /* a scrollbar megjelenése */
   width: 50px;
}

 

Így ha a tartalom nagyobb, mint 50x50 pixel, akkor megjelenik a gördítõsáv, így IFRAME beütése lesz neki, de mégsem lesz az. Csak mint mondtam, nem túl szép, legalábbis ahova Te akarod, ott nem mutat szépen. De majd meglátjuk.

 

[Garono]

Készen van amit akartam, akit érdekel, annak erre tessék.

 

Húzogassátok a böngészõ magasságát!

 

[zoryn]

Sziasztok

 

Kezdő programozó vagyok és az első honlapommal küzdök (XHTML és CSS). Az a problémám, hogy ha a balsávba be szeretnék tenni egy kisebb keretet (pl: kedvenc linkjeim címmel) akkor az egész lábléc szétesik. A web.axelero.hu/fox217 oldalra töltöttem fel a kezdetleges honlapot.

 

Hogyan lehet eltűntetni a az <LI> felsorolással keletkezett fekete pontokat?

 

Segítségeteket előre is köszönöm. ír:

 

Üdv Zoryn

[Charizard]

A css-ben az ul beállításaihoz írd be, hogy list-style-type: none; , vagy list-style: none; Elvileg a rövidebb verzió is jó, de a list-style-type 100%, hogy eltünteti a pontokat.

[Kazy]

Halihó!

 

Komolyaban szeretnék megismerkedni a CSS-sel. Tudnátok valami helyet mondani, ahol be lehet szerezni leírásokat?

[Garono]

Én innen tanultam, szerintem ezek a legjobb leírások.

[Kazy]

kösz! Ránézek!

[payskin]

...ha a balsávba be szeretnék tenni egy kisebb keretet (pl: kedvenc linkjeim címmel) akkor az egész lábléc szétesik.

1. Túl sok div-et használsz. Olyan oldalelemekre, mint például egy doboz fejlécfelirata használd a h1, h2, h3 fejlécelemek valemelyikét, nem kell külön class-okat gyártani. (--> Weblabor)

 

2. Rosszul használod a floatot és a cleart, ezért esik szét az alja. Vigyázz! A float nem egyszerű balra-jobbra igazítás, hanem bizonyos oldalelemek kiragadása a hagyományos megjelenítésből! Keress egy CSS-oktató oldalt, ahol ezt elmagyarázzák! (A Weblabor a CSS alapjai IV-ben foglalkozik vele, de mondhatnám, hogy félrevezetően felületes, inkább a külföldi oldalak között keresgélj!)

[Darcy Tucker]

Sziasztok,

 

Készítgetem a honlapom új arculatát (vagy legalábbis gyakorolgatok) és egy problémát sehogy sem tudok megoldani.

 

Csináltam a főszöveg mellé jobbra úsztatva egy szövegdobozt, ami teljesen máshogy néz ki IE-ben és Firefoxban. Amin, persze, nem lepődtem meg, de mégis érdekelne, hogy miként lehetne kijavítani, hogy megközelítőleg ugyanúgy nézzen ki a lap mindkét böngészőben.

 

A lap címe: http://uhrinyidaniel.uw.hu/about.html (Csak a szemléltetés kedvéért van ilyen ízléstelen színe a háttérnek! )

 

A kód ide vonatkozó részei a következők:

 

HTML:

 

<div id="content">

<div id="contentright">
{tartalom - jobbra úsztatva}
</div>

<div id="contentboxleft">
<h1>Magamról</h1>
{tartalom - főszöveg}
</div>

</div>

CSS:

 

#content {
    background-image: url(decor/header_03.jpg);
    background-repeat: no-repeat;
    background-color:#FFFFFF;
    width: 700px;
}

#contentboxleft {
    width: 460px;
    height: 100%;
    padding: 20px 20px;
    background-color: #CC9966;
}

#contentright {
    width: 160px;
    float: right;
    padding: 50px 20px;
    background-color:#00FF00;
}

Előre is köszönöm a segítséget!

[Kovács Gyula (MiniDisk)]

A megoldás: IE hack. Óriási különbség egyébként nincs a Firefox, és az Internet Exlorer 7-es között, gondolom a hiba IE6-tal jön elő.

[Darcy Tucker]

Így van. Nekem még nincs telepítve a 7-es verzió, így azzal nem néztem.

 

És mi lenne a megoldás - részletesebben egy kicsit, ha kérhetem?

 

Köszi

[Kovács Gyula (MiniDisk)]

Mivel nem látom a pontos hibát, gondolom pozícionálási problémák adódnak IE6-ban.

Ebben az esetben IE hack kell.

csinálsz egy ie6.css fájlt, pl. Ebbe bemásolod az adott definíciót, és azt az értékbeállítást, ami nem stimmel, tehát ha pl. ebbõl a padding értékén kell változtani,

 

#contentright {
    width: 160px;
    float: right;
    padding: 50px 20px;
    background-color:#00FF00;
}

 

akkor az ie6.css-be elég ezt írni:

 

#contentright {
    padding: 50px 20px;
}

 

Hogy érvényesüljön is a beállítás, az index.html (vagy php) head-jébe ezt a sort tedd be:

 

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

[payskin]

Attól, hogy ugyanazt a beállítást átrakod egy másik CSS-be, miért javulna meg valami IE6 alatt?

 

Gondoltam belenézek a kódba, de elment tőle a kedvem. A HTML nincs rendesen tagolva, a CSS pedig tök össze-vissza van, véletlenül sem abban a sorrendben, ahogy a HTML-ben az egyes elemek jönnek. Ez miért jó?! Így piszok nehéz kibogozni, mi a probléma.

[Kovács Gyula (MiniDisk)]

Csak példának írtam, nem akartam más értéket írni, azt majd Ő átírja, hogy jó legyen. Nem a definíció a hibás, hanem a padding értékének kell mást adni. Az Internet Explorer leginkább ezekben téved. Én a hackekben jobbára ilyeneket állítok, hogy teljesen egyforma legyen a weboldalam. Padding, margin ... ezekben téveszt az IE, míg a Firefox, és az Opera jó.

[Darcy Tucker]

[...] Gondoltam belenézek a kódba, de elment tőle a kedvem. A HTML nincs rendesen tagolva, a CSS pedig tök össze-vissza van, véletlenül sem abban a sorrendben, ahogy a HTML-ben az egyes elemek jönnek. Ez miért jó?! Így piszok nehéz kibogozni, mi a probléma.

A kód rendbeszedése még egyelőre ráér (legalábbis nekem). Persze, a kritika jogos.

 

@Minidisc: Köszi. Este kipróbálom és megírom, hogy mire jutottam.