CSS kérdésem van

[Atys]

Hú de gyorsak vagytok válasz téren...

@Garono:Szóval nekem nem csak a színváltoztatás kellene, hanem a grafikát is meg akarom változtatni.

@Mezofi: Kösz majd kipróbálom!

[Garono]

Ja tényleg. Akkor lehet tényleg kéne JS, vagy esetleg szín helyett képet adsz meg CSS-ben, bár akkor nagyon precíz képeket kéne csinálnod, hogy passzoljon.

[Atys]

Képet? Ezt hogyan gondolod? A precizitással eddig még nem volt gondom...

@Mezofi: megnéztem amit ajánlottál, de csak forrás+grafika amit le lehetett tölteni, a JS meg nekem kínai..., amúgy a bemutató oldal az vagány.

[enjoys1ng1ng]

Sziasztok!

Valahogy még mindig nem világos a "margin", a "float" és az "align" használata a CSS-ben. Ha ezen a weblapon szeretném a dolgokat CSS-el elhelyezni, akkor bal oldalon azt a "box"-ot amiben a menüsor van, mondjuk elnevezem #navigator-nak, magát a menüsor-t pedig listával csinálom meg, amit #menu-nek nevezek el (#menu ul, #menu ul li, #menu ul li a ...) ... dolgozom már az ügyön, de a menüm balra húz, nem tudom hol kell megadnom azt, hogy a #navigator boxban a #menu középen helyezkedjen el.

[level]

A margin az a szabad hely, ami az elem körül üresen marad. A floatot picit nehéz elmagyarázni, én inkább nem is próbálkoznék, de remélem valaki más majd érthetően elmondja. A text-align az adott elemen belül lévő további elemeket (nem csak szöveget) rendezi balra, középre vagy jobbra. A vertical-align az elemen belül lévő további elemeket fel, középre vagy lentre igazítja.

A #navigator-ra állítsd be, hogy text-align: center. Ha a listaelemek egyforma szélesek, akkor ennek elégnek kéne lennie. Ha nem egyforma szélesek, akkor a #navigatoron belül még hozz létre egy div-et, ami tartalmazza a listát.

[Garono]

A FLOAT tulajdonság az, hogy egy elem egy másik elemen bellül (mondjuk DIV) hol helyezkedjen el. Csak két értéke lehet, LEFT vagy RIGHT. De úgy emlékszem, hogy az is befolyásolja, hogy a POSITION tulajdonsága milyen, de ebben nem vagyok biztos.

 

@Atys

Arra gondoltam, hogy nem színt adsz meg, hanem textúrát, vagyis url("valami.png").

 

[Atys]

Textúrát? Majd megpróbálom!

[enjoys1ng1ng]

Sziasztok! A segítségetekkel próbáltam átalakítani az egyik lapomat CSS oldalkészítéssel. Ez az eredeti oldal. Ez pedig: a CSS próbálkozásom. Rengeteget kínlódtam vele, szerintem még mindig túl sok a fölösleges információ, de most valahogy már nem látom át. De a legfõbb gond, hogy IE-ben szétcsúszik az oldal. Ebben tudna valaki segíteni?

Elõre is köszönöm!

[level]

Tényleg áttekinthetetlen, bocs hogy nem böngészem végig alaposan a forrást. Pár megjegyzés:

 

A divek háttérszínét ne a html forrásban, hanem a css fájlban add meg inkább.

 

Az oldal alapszerkezete, ha jól értem, valami ilyesmi:

<div id="nagyszurke">

<div id="bal">
  menü, kép
</div>

<div id="jobb">
  linkek, kép, idézet, zenék
</div>

</div>

 

Ez rendben is van. Nagy szürkének adj felsõ és alsó margót, jobb és bal margó legyen auto, így az oldal középre kerül. (Valahol azt olvatam, hogy ez IE-ben nem mûködik, de nekem igen.) Balra és jobbra is állítsd be, hogy "float: left;" + a szélességét, esetleg margókat, háttérszínt, ilyesmit, de más (position, align) nem kell. Így a jobb és a bal rész egymás mellé kerül.

A többi jónak tûnik.

A html forrásban próbáld a szöveget áttekinthetõbben elrendezni, pl. behúzásokkal vagy magyarázatokkal.

 

Esetleg legközelebb készíthetsz elõre egy vázlatot, ahogyan a diveket szeretnéd elrendezni, és utána illeszted bele a tartalmat, mikor a vátlaton már letesztelted, hogy minden mûködik. Így sokkal könnyebb vele dolgozni, és a szerkezete is átláthatóbb. Nekem ez sokat segített.

[enjoys1ng1ng]

@level! Nagyon köszi, kijavítottam egy-két dolgot, és így Firefox-ban már majdnem tökéletes . IE-ben is egymás mellé került a bal és jobb oldal, de a margin: 1em auto; sajnos nem mûködik, balra húzódik a "nagyszürke". Találkoztam már olyannal, hogy "clear:both". Ezt mire alkalmazzák?

Következõ kérdésem: hogyan lehet az elemeket függõlegesben középre helyezni? A "vertical-align: middle" nem mûködik, próbáltam. Az lenne az igazi, ha az egymás mellett levõ bal és jobb oldali elemek egyforma magasak lennének, de most nem így van, kisakkoztam, hogy úgy nézzen ki mintha... mivel nem tudom a "tartalmat" függõlegesen középre helyezni.

 

Az oldal nagyjából így néz ki:

 

#house

 

#left

#topleft (link)

#navigate

.menu (linkek)

#leftsmall (link)

#leftbottom (kép)

 

#right

#topright

.boxx (linkek)

#tartalom (kép)

#rightsmall (idézet)

#rightbottom (zene)

 

A menüben az elemek háttérszínét azért adtam meg html-ben, mert minden "button"-nak más színe van (próbáltam lekövetni nagyjából a mellette levõ kép színeit). Persze megpróbálhatom áttenni a css-be ezt az információt is.

 

Az oldal itt található

[level]

Nos, nekem IE-ben nincs egymás mellett a két sáv, hanem egymás alatt van. Ezt az szokta okozni általában, ha túl szélesek, és nem férnek el egymás mellett (az IE kicsit másként érzékeli a szélességeket, mint más böngészõk, sajnos - most vettem észre, hogy az enyémet is szétdobta, pedig eddig jó volt IE-ben is).

Nekem az auto margin müködik, nem tudom, hogy ebben szerepe van-e annak, hogy én mind a négyet külön adtam meg (margin-left: auto;).

 

A clear:both azt jeletni, hogy az elem mellett nem lehet más lebegõ elem. Gyakorlatban pl. az én oldalamon ezzel van megoldva, hogy az alsó barna sáv mindig alul legyen, és ne csússzon fölé a jobb, középsõ vagy bal rész, ha azoknak túl hosszú a tartalmuk.

 

Függõlegesen úgy tudsz középre helyezni, hogy az elemet beleteszed egy divbe, amire beállítod a vertical-align-t. így az elem tartalma (ami lehet egy másik div) elméletileg középre kerül. A gyakorlatban sajna nekem sem müködik.

[enjoys1ng1ng]

@level! Fura! Megnéztük 15' laptopon, az én 17' monitoromon és egy 19' monitoron és nincs szétcsúszva IE-ben. A te lapod sincs szétcsúszva nálam.

De azért ma reggel sokat alakítgattam rajta, egyre letisztultabb. Viszont nálam IE-ben még mindig balra húz, hiába adtam meg egyenként a két oldalra az "auto"-t.

Az is fura, hogy hiába adom meg a #house-ban a színkódot, nem állította be az egész "nagyszürke"-re, egyenként be kellett írni minden elembe a background-color-t.

A #house-ban a margin-bottom sem mûködik, meg kellett adni külön a #leftbottom-ban és a #rightbottom-ban.

 

Ami sokat segített és talán jótanács lehet ugyanolyan kezdõknek mint amilyen én vagyok, hogy minden elemnek rikító más-más színt adtam ma amíg dolgoztam vele, és így végre jól látható volt minden apró változás. Aztán a végén visszaállítottam a szürkét persze.

 

Szóval: talán @mezõfi-nél olvastam olyat, hogy IE hack-et kell készíteni, de arról aztán tényleg nulla fogalmam van. Azzal talán el lehet érni, hogy IE-ben is középre kerüljön a tábla.

 

Ha valaki tudja, örülnék ha segítene.

 

Itt a tanulós honlap amirõl szó van.

[level]

Igen, ez nekem is furcsa, mert arról a géprõl nézve, ahol általában internetezni szoktam, nincs szétcsúszva (IE6). Tegnap egy másik gépnél voltam, ott nem tudom milyen IE van, mert nem írja ki, de ott szétcsúszott.

Ami a középre állítást illeti, nekem a body-ra be van állítva, hogy text-align:center. Lehet, hogy ezért kerül IE-ben is középre az oldal?!

IE-hacket még sosem csináltam, de már sokszor volt róla szó, ha nem ebben a témában, akkor a "HTML-kérdésem van"-ban.

 

[enjoys1ng1ng]

Szuper! A #body {text-align:center} tényleg középre helyezte a szürke táblát IE-ben! Köszönöm!

Most már egész elfogadhatóan néz ki IE-ben is. Már csak Opera-ban nem látható alul az 1em margin, de ez legyen a legnagyobb baj!

Nagyon sokat tanultam az elmúlt pár napban. Még egyszer: köszönöm!

[Kovács Dávid ( Davs )]

Hy!

cat_list.php

$categories_query=mysql_query("SELECT * FROM categories WHERE enable=1");
$i=1;
while($categories_list_fetch=mysql_fetch_row($categories_query))
{
    ?>
        <div style="margin: 0px;" class="leftmenu" onmouseover="this.className='leftmenuover'" onmouseout="this.className='leftmenu'">
            <a href="categories.php?cat=<?php echo $categories_list_fetch[0]; ?>&d=0">
                <?php
                    echo $categories_list_fetch[1];
                ?>
            </a>
        </div>
    <?php
    $i++;
}

 

style1.css

...
.leftmenu {
background-image: url("images/menu2.gif");
background-repeat: no-repeat;
background-position: center left;
color: black;
background-color: #EEEFEF;
padding: 2px;
padding-left: 20px;
border-bottom: 1px solid #DBDBDB;
}

.leftmenuover {
background-position: center left;
border-bottom: 1px solid  #DBDBDB;
padding: 2px;
padding-left: 20px;
background-image: url("images/menu4.gif");
background-repeat: no-repeat;
color: white;
background-color: #7B7C7C;
}

a.leftmenu {
color: yellow;
}
...

A hiba az, hogy a link nem sárga. Mi lehet a baj?

[level]

<a href="categories.php?cat=<?php echo $categories_list_fetch[0]; ?>&d=0" class="leftmenu">

 

Külön meg kell adni az osztályt. Így már jó lesz.

[Kovács Dávid ( Davs )]

De a leftmenu nem csak a színét adja meg, ezzel elrontanám az egészet. Viszont találtam rá egy megoldást, egy gyerek-szülõs dolgot:

.leftmenu>a {
text-decoration: none;
color: black;
font-weight: bold;
}

.leftmenuover>a {
font-weight: bold;
text-decoration: none;
color: white;
}

 

És már vígan megy. Egyébként ez egy webshop-ba lesz.

[payskin]

Még a gyerek-szülõ kapcsolat sem kell, egyszerûen a .leftmenu a azt mondja, hogy a leftmenu osztályon belüli a. Ez is tökéletesen mûködne.

 

[zsoltchelsea]

Hogyan lehet a link színét rámutatással megváltoztatni? Nem találtam sehol. Köszi elõre is.

[Garono]

a:hover {
   color: green;
}

 

[zsoltchelsea]

Köszi. A szín hexakóddal is jó? Nem mindegyik színt tudom angolul (a keverékekkel valamikor bajban vagyok).

[level]

Persze, jó azzal is.

[zsoltchelsea]

Köszi .

[kupa]

Sziasztok! Ki tudná megmondani, hogy ez a css miért jelenik meg másképpen Firefox alatt mint IE-ben?

 

#kresz{
    background-color: #003E5D;
    position: absolute;
    width:690px;
    top: 198px;
    left: 262px;
    border-left:1px solid #1f6888;
    border-top:1px solid #1f6888;
    border-right:1x solid #333333;
    border-bottom:1px solid #333333;
    padding:20px;
    font-size:12px;
    text-align:left; 
    color: #bbbbbb
}

 

A szélességét nem tudom mindkét böngészõre egységessé tenni, mozilla alatt szélesebb.

[payskin]

Ha jól látom, akkor ez egy 732 pixel széles #003E (???) háttérszínű doboz. Bocs, lehet hogy a háttérszínt én rontottam el a szerkesztésnél. De ha nem én rontottam el, akkor az a hiba! Ha normális háttérszínt írok be, és rakok pontossvesszőt a végére, akkor IE6-ban és FF2-ben is ugyanúgy, ugyanakkorában jelenik meg.