CSS kérdésem van

[zsoltchelsea]

Nem vállalok érte garanciát, egy email-bõl szedtem ki (Oktatóvideós hírlevél):

Elsõ lépésként az összes menüponthoz el kell készítenünk 2 képet: az egyik kép az alapállapotot jelzi, a másik kép pedig akkor jelenik meg, ha az egérkurzort a menüpont fölé húzzuk. Ezt a másodikat hívjuk aktív állapotnak. A képek neve is ezt sugallja majd: pl. "menu1.gif" és "menu1_aktiv.gif". A két kép mérete teljesen meg kell, hogy egyezzen! Egy példa a két állapotra:

 

 

 

Miután mindegyik menüponthoz elkészítettük a 2 képet, helyezzük el õket például egy "img" nevû könyvtáron belül.

 

 

Ezután következik a kód megírása.

A HTML oldal fejlécén belül a következõ JavaScript függvényt kell elhelyezni:

 

 

<HEAD>

 

<script>

 

function aktival(kepnev,aktiv) {

if(window.document.images) {

if (aktiv) {

window.document.images[kepnev].src = "img/" + kepnev + "_aktiv.gif";

}

else {

window.document.images[kepnev].src = "img/" + kepnev + ".gif";

}

}

}

 

</script>

 

</HEAD>

 

A fenti függvény fogja a képeket váltogatni. Fontos, hogy a képek az "img" könyvtáron belül legyenek elhelyezve, illetve a 2 kép neve csak az "_aktiv" utótagban térjen el egymástól! (Pl.: "kep" és "kep_aktiv")

 

 

Végül nincs más dolgunk, mint elhelyezni az oldalon a képeket. A képekhez a forráson ("src") kívül fel kell venni a "name", az "onMouseOver" és az "onMouseOut" tulajdonságokat is, az alábbiak szerint (a kódot egyetlen sorba kell írni!):

 

<img name="menu1" src="img/menu1.gif" border="0" alt=""

onMouseOver="aktival('menu1',true)" onMouseOut="aktival('menu1',false)">

 

A fenti kódban vastag piros betûvel jelöltem a kép nevét. Fontos, hogy mindenhová ugyanazt a nevet írjuk! Ez a név a kép alapállapotát jelölõ kép neve (a .gif kiterjesztés nélkül). Ha tehát a két képünk neve pl. "alma.gif" és "alma_aktiv.gif", akkor a fenti kódban a "menu1" helyett mindenhol "alma"-t kell írnunk!

 

Ha azt szeretnénk, hogy a képekre kattintva egy új oldal jelenjen meg, akkor a képekbõl linkeket kell készítenünk:

 

<a href="menu1.htm"><img name="menu1" src="img/menu1.gif" border="0" alt=""

onMouseOver="aktival('menu1',true)" onMouseOut="aktival('menu1',false)"></a>

 

Ez mondjuk JS-sel van.

[Atys]

Na megint akadt egy kis gondom.

Akarok készíteni egy 3 oszlopból álló honlapot, ahol a három oszlop tartalmának a hossza nem egyforma. Hol az egyikben, hol a másikban van több szöveg. A baj az, hogy hogyan lehetne megoldani, hogy az oszlopok magassága mindig a leghosszabhoz igazodjon, vagyis hogy mindig egyforma magasak legyenek?

Mert most van 3 divem, benne szöveg, és a divek magassága a szövegmennyiségtõl függ. Az nem lenne jó, ha elõre megadnám a magasságot, mert annak viszont mindig változnia kell.

A három oszlop háttere is más-más színû lenne.

Hogyan lehet ezt megoldani?

[Budha]

Megoldható!

Ezt a lapot nézd meg: Link

 

A két div végén a lekerekítést egy léppel oldják meg. ( "extra " )

 

[Atys]

Köszi!

Közben én is leszedtem egy adag ilyen fajta honlapot csak még nem volt idõm megnézni.

 

[Netkaloz]

Üdv Mindenkinek!

 

Egy vízszintes menüt szeretnék átalakítani legördülõvé.

Próbálgatom, de eddig nem ment.

Találtam hozzá segédletet, kipróbáltam, nem sikerült.

Ez az eredeti menü:

 

          <ul>
                <li><a href="valami.php">1</a></li>
                <li><a href="valami.php">2</a></li>
                <li><a href="valami.php">3</a></li>
                <li><a href="valami.php">4</a></li>
                <li><a href="valami.php">5</a></li>
         </ul>

 

Ilyet szeretnék:

 

          <ul>
                <li><a href="valami.php">1</a></li>
                <li><a href="valami.php">2</a></li>
                <li><a href="valami.php">3</a></li>
                     <ul>
               <li><a href="akarmi.php">3.1</a></li>
             </ul>
                <li><a href="valami.php">4</a></li>
                <li><a href="valami.php">5</a></li>
         </ul>

 

A menüszerkezetem CSS kódja:

 

#header-content ul {
    position: absolute;
    right: -5px; top: 15px;
    font: bolder 1.3em 'Trebuchet MS', sans-serif;
    color: #FFF;
    list-style: none;
    margin: 0; padding: 0;        
}
#header-content li {
    display: inline;
}

#header-content li a {
    float: left;
    display: block;
    padding: 3px 12px;    
    color: #FFF;
    background-color: #333;
    text-decoration: none;
    border-right: 1px solid #272727;
}
#header-content li a:hover {
    background: #65944A;
    color: #FFF;
}
#header-content ul ul {
        position: absolute;
        left: 0px;
        display: none;
}

#header-content ul li:hover ul{
        display: block;
}

 

A segédlet itt van: legördülõ menü

 

Én átalakítottam a css-részletet, de nem történt semmi.

Használtam az oldal által leírtat is, akkor az egész menüm a bal felsõ sarokba került, de legördülés akkor sem volt.

 

Mit tegyek?

Köszönöm elõre is!

[Mezofi]

Ha a linkjeid körbe fogod ezzel:

<div id="header-content">linkek</div>

Akkor mindjárt másképp fog kinézni.

 

Ha ezt a css-t rakod be akkor függõleges lesz a menü

#header-content ul {
    font: bolder 1.3em 'Trebuchet MS', sans-serif;
    color: #FFF;
    list-style: none;
    margin: 0; padding: 0;        
}
#header-content li {
    display: inline;
}

#header-content li a {
    float: left;
    display: block; 
    color: #FFF;
    background-color: #333;
    text-decoration: none;
    border-right: 1px solid #272727;
}
#header-content li a:hover {
    background: #65944A;
    color: #FFF;
}

 

 

Nem volt idõm és türelmem próbálgatni, de a itt találsz egy legördülõ menüt.

[Netkaloz]

@Mezofi

 

Köszönöm, a menüt tanulmányozom, ha kész az oldal majd jelentkezem.

[btommi]

Üdv Mindenkinek!

 

A problémám a következõ: list-style-image-et szeretnék beállítani külsõ CSS-ben, valahogy így:

 

ultulajdonsag

{

list-style-image: url('arrow.gif');

}

 

A baj az, hogy Firefox alatt tökéletes, IE viszont sehogy sem akarja. Minden féle fajta formában próbáltam már, de ie nem enged. Ha valakinek volna ötlete... megköszönném!

[Mezofi]

Esetleg

.ultulajdonsag
{
list-style-image: url('arrow.gif');
}

Vagy

div#ultulajdonsag
{
list-style-image: url('arrow.gif');
}

Attól függõen, hogy id vagy class

[Leonyda]

... CSS Drop Down menu. Azzal az volt a baj, hogy IE alatt cseszett megmozdulni. Aztán ha rájövök mi miért van, akkor ha gondoljátok nyitok egy topikot érte, és leírom.

 

Találtam egy :hover emuláció -t IE-hez, gondolom ezt fogom tudni használni, de ha lehet megnézném a Te megoldásodat is.

Elérhetõ valahol?

 

Köszönöm! Leonyda

[enjoys1ng1ng]

Sziasztok!

Az átalakuló redtomato oldalamon szeretnék egy olyan változtatást, hogy ha majd bizonyos linkekre kattint a látogató, akkor a tartalom a "content1" elnevezésû div-ben nyíljon meg (a Márai idézet helyére). Nem szeretnék frame-ket használni, megoldható ez CSS-sel?

[enjoys1ng1ng]

Sziasztok!

 

Még az elõzõ kérdésem is aktuális, mert nem találtam meg a választ, de újabb akadt. Megnéztem a redtomato oldalamat IE-ben, a content részek elcsúsztak balra. Eddig azért nem vettem észre, mert persze csak Firefox-ban nézegettem. Gondolom, hogy valahol a CSS kódban van a hiba, próbálgattam, de nem tudom kijavítani, illetve, ha belenyúlok, akkor elcsúszik Firefoxban is. Megnézné valaki? Elõre is köszi!

[h.arpad]

íl: Az elsõ kérdésedre a válsz, hogy nem. PHP-val oldható meg. A megfelelõ tartalom helyén, a div-ben egy olyan PHP-scriptet helyezel el, ami a lekérdezõ karakterláncnak megfelelõen (ezt a PHP a $_GET tömbben tárolja) betölti a tertalmat. Nagyon egyszerûre gondolj. Ezt gyakorlatilag használhatod is:

 

Így néznének ki a linkek:

<a href="fooldal.php?tart=oldal">Valami</a>
<a href="fooldal.php?tart=oldal2">Valami2</a>

 

A div-be meg ezt tedd be (a fájlok egy könyvtárban legyenek a fõoldallal, és legyen a nevük oldal.html, oldal2.html, stb. és mondjuk az oldal.html legyen az alapértelmezett):

 

<?php
if (isset ($_GET['tart']) && (! empty ($_GET['tart'])))
{ 
    if (is_file($_GET['tart'] . '.html')) {
     include_once($_GET['tart'] . '.html');
    } else {
//az alapértelmezett oldat tölti be, ha nem létezik a kiválasztott fájl
     include_once ('oldal.html');
   }
} else {
//az alapértelmezett oldat tölti be, ha a látogató még nem kattintott linkre
     include_once ('oldal.html');
}
?> 

 

íl: A második kérdésedre: minden böngészõhöz külön stíluslapot kell írnod. Használhatod az oldalamon lévõ PHP script-et (így még Operához is írhatsz külön stylesheet-et), de a legegyszerûbb, ha IE hack-et használsz, vagyis csak IE6-nak és IE7-nek írsz külön stíluslapot, a többi böngészõ az alapértelmezett style.css-t fogja használni:

...
<head>
...
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="style_ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="style_ie7.css" /><![endif]-->
...
</head>
...

[enjoys1ng1ng]

Sziasztok!

 

Ezen az oldalon a CSS kódban mit kellene beírnom a "house" div-be a

height:600px

helyett ahhoz, hogy automatikusan olyan hosszú legyen mint a tartalom? Azt hiszem már mindent kipróbáltam, de csak így tudtam megoldani, s ez nem tetszik.

[h.arpad]

Talán:

height: 100%;

Vagy semmit. Akkor is automatikusan követi a tartalom hosszát. Azért a visibility-t is állítsd be ennek megfelelõen (visible vagy scrollbar).

[enjoys1ng1ng]

Az "overflow" oldotta meg.

[h.arpad]

Ja, azt akartam mondani, nem is tudom, honnan jött elõ ez a visibility dolog. Rég nem foglalkoztam CSS-sel.

[Giraffe1]

Egy kicsit elakadtam, és jól jönne egy kívülálló pillantása, hogy mi lehet a gond?

 

Van egy oldalam, ami pont úgy néz ki, és azt csinálja, amit én szeretnék - kivéve, hogy nyomtatásnál az IE elkezdi a #content tartalmát kiírni, majd amikor a #pictures melléér, akkor egy kicsit "megpihen", majd utána folytatja. Ehhez képest Firefoxban pont úgy néz ki nyomtatásban, ahogy annak lennie kellene (bár a Print Priview ott is csal egy kicsit).

Sajnos a "hülye az IE" válasz ez esetben nem jó, mert itt olyan felhasználókról van szó, akik a) kellõen magas pozícióban vannak; b) olyan kérésekkel jönnek, hogy itt és itt kezdjen új oldalt, ez pedig még férjen ki erre az oldalra. Mármint a nyomtatott változaton.

 

Ötlet? Hack? Vagy legalább 1-2 jó szó kellene...

[payskin]

Á, ez esélytelen. A weboldalak nyomtatása = pattintott kőkorszak. Rakd össze valamiben (Word, CorelDRAW, akármi), csinálj belőle egy PDF-et, és töltsék le azt, ha okvetlenül ki akarják nyomtatni.

[Giraffe1]

És javítsak mindent duplán - azonnal -, amikor észrevesznek egy vesszõhibát. Lassan másfél hónapja nem csinálok mást, mint az általuk n+1. javítások alapján módosítom az oldalakat. Ha a nyomtatás az elsõdleges, akkor csináltassanak egy brossúrát.

[h.arpad]

Ejh, hát rákanttintok a kis nyomtatóra és mit látok? Hát megnyílik az op. rendszer nyomtatási ablaka. Miért nem írsz külön, "printer friendly" CSS-t, ahogy illik? A nyomtató ikon lenne egy form-nak a gombja, és PHP-val lecserélnéd a CSS-t...

[payskin]

Csodálkoznék, ha a ksh.hu-n volna PHP. De az ötlet nem rossz! Csinálhatnál egy printer friendly CSS-t. Így nem kell kétszer szerkeszteni az anyagot.

[Giraffe1]

@h.arpad

És meg is nézted, hogy mi jelenik meg nyomtatáskor (legalább Print Preview-ként)? Ugyanis nyomtatáskor csak a tartalom jelenik meg, pl. a menü és az a mini eszközsáv (betûk változtatása + nyomtatás) nem, ahogyan a fejléc és a lábléc is másként néz ki papíron, mint a képernyõn. Vagy pl. a nagyítható képek jobb alsó sarkából eltûnik a kis ikon stb. Szóval van "printer friendly" CSS, ahogy illik. A gond egyedül az említett oldallal van, ahol valamiért a #content div tartalma "megszakad", amíg a képek mellette vannak.

 

Nézd meg pl. a Helységnévtárat vagy a Stadatot, amelyeknek HTML-jét és CSS-ét szintén én készítettem el/elõ. Ezeknél sincs külön nyomtatható változat - maga az oldal az. És ezek mûködnek is, sõt olyan "finomságok" is mennek, mint a lágjegyzet a képernyõn "sárga cetlin" jön, nyomtatásban szépen az oldal aljára kerül. Csak ez a k. budapesti oldal csúszik meg valamin.

 

[h.arpad]

És meg is nézted, hogy mi jelenik meg nyomtatáskor (legalább Print Preview-ként)?

Nem, bocs. Mentségemre legyen mondva: Linux alatt dolgozom, és itt minden kicsit más, tehát nem biztos, hogy használtam volna vele.

[enjoys1ng1ng]

Vizsgára készülve bele kell erõsítenem a CSS-be. Most készítettem egy oldalt:

EZT .

Már ez sem volt egyszerû... Hogy tudnám elérni azt, hogy a "main" div-ben a "leftwrap" és a "rightwrap" fej-fej mellett haladjon, tehát a magasságuk mindig egyforma legyen? Kipróbáltam, hogyha beteszek rengeteg linket a "right"-ba, akkor az ugye nagyon lenyúlik, viszont nem szép, hogy a baloldal nem nyúlik vele együtt. Ugyanakkor szeretném megtartani a külön boxokat. Remélem érthetõ vagyok, kicsit bénán fogalmaztam.