CSS Help!, Mindenféle css-sel kapcsolatos probléma. Options

[Monique]

Egy példaoldalt mutathatnál, mert így nehéz lesz. A képet nyújtani css-ből nem lehet, legfeljebb ismételni vízszintesen és/vagy függőlegesen.

BlackY

Ha nekem szántad a következő üzit, akkor itt van az oldal: http://www.pocsaj-bedo-egyhazkozseg.info/
De csak bizonyos képfelbontásnál esik össze, azt hiszem a 800+600-nál,

[BlackY]

Az összeesést itt nem értem, mit jelent, de a korábbi kérdésednél még a háttérkép volt a kérdés, úgyhogy arra válaszolok, mert furán néz ki a lila->sárga gradiens után a hirtelen lila. Kerülő megoldások vannak erre:
1) background: #a_sárga_szín_kódja url('...') no-repeat;
Ez igazából nem lesz annyira szép, mert ez csak annyit csinál, hogy ahol már "elfogyott" a háttérkép, ott egy konstans színnel tölti fel, ami a sarkoknál csúnyán fog kinézni (a háttérkép jobb szélső és bal alsó sávjában nem végig ugyanaz a sárga szín van). Ha lecseréled a képet olyanra, hogy tiszta vízszintes/függőeleges átmenet van a képen, akkor a repeat-x/repeat-y-al a képet ismételheted a másik irányban, és a háttérszínt megadhatod a szélsőértéknek, akkor jól fog kinézni.
2) Ha mindenképp maradni akarsz ennél az x és y szerinti gradiensnél, akkor csinálhatod azt, hogy a mostani háttérképet átméretezed a kétszeresére szélességben és magasságban is, és a mostani kép elforgatottjaival "mozaikolod". Így az már ismételhető lesz, cserébe megjelenik egy plusz minta a képen (körök lesznek a színátmenetekből)
A mozaikolás:
(eredeti, flip horizontal,
flip vertical, flip horizontal + vertical)

BlackY

[Bence]

Köszönöm BlackY.

A png-t nem sikerült úgy elmenteni de a gif-el semmi gond. Az igazítást megoldottam. Üdv.

Nem kell PNG csatornát váltani, lásd itt: http://www.tutorial.hu/atlatszo-transzpare...bongeszo-alatt/

[Monique]

Sziasztok, szeretném, ha az a link amelyik oldalon vagyok, más színű lenne, mint a többi!

az alábbi a kód, ami szerintem jó, bár nem működik, vetnétek rá egy pillantást?

CODE

a:link {
    color: #416770;
    font-weight: normal;
    text-decoration: none;
    border:1px #416770 solid;
    text-align: center;
    background: white;
}

a:visited {
    color: #416770;
    font-weight: normal;
    text-decoration: none;
    border:1px #416770 solid;
    text-align: center;
    background: white;
}

a:hover {
    color: #416770;
    font-weight: normal;
    text-decoration: none;
    border:1px #416770 solid;
    text-align: center;
    background: white;
}
a:active {
    color: aqua;
    font-weight: normal;
    text-decoration: none;
    background-color: black;
    border:1px #416770 solid;
    text-align: center;
}

This post has been edited by LeGaS: 2010. May 2., 18:44

[LeGaS]

Ez így önmagában nem fog működni. Valóban megtévesztő az a:active, mint aktív link, de ez arra vonatkozik, amikor egy linkre rákattintasz és ha hosszabb ideig nyomva tartod az egeret, akkor láthatod hogy alkalmazni fogja azokat a stílusokat. Általános megoldás, hogy ugyanezeket a stílusokat egy active nevű osztálynak is megadod és PHP-vel vagy statikus oldalaknál magukban a HTML fájlokban ezt az osztályt alkalmazod a linkeken.

Tehát így nézne ki:

CODE

a:active, a.active {
    color: aqua;
    font-weight: normal;
    text-decoration: none;
    background-color: black;
    border:1px #416770 solid;
    text-align: center;
}

HTML:

CODE

<a href="index.html" class="active">Főoldal</a>

This post has been edited by LeGaS: 2010. May 2., 18:48

[KriS]

Sziasztok!

Szeretnék egy kis segítséget kérni.
A következő megjelenítési problémám adódott.


Miért van Firefoxnál a weboldal tetején ez az 5-7 px belső "keret"?!
IE-ben, Safariban nincs, normálisan megjelenik az oldalam.

[KriS]

Megoldottam, ne fáradjatok!

[zoleytaylor]

az alábbi problémának van valami közismert elnevezése? (nem tudom, hogyan keressek rá)

adott egy container, aminek háttere van és x pixelnyi paddingja mind a négy oldalán.
ez tartalmaz egy képet (vagy bármit, aminek van egy adott szélessége, és nem törhető; nincs float-olva...)

ha az első képet megnézzük, azt látjuk, ami az elvárt megjelenés (teljes méretű ablakban):
http://img263.imageshack.us/img263/4792/61536769.png

viszont ha átméretezem az ablakot, keskenyebbre, mint a tartalom, értelemszerűen megjelenik a vízszintes scrollbar, de ha ezt egy pixellel is elmozdítom, már látom, hogy a container háttere csak addig tart, amíg az ablak...
http://img845.imageshack.us/img845/7370/11506448.png

íme a kód:

CODE

<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>

ie8-ban az ablak átméretezése után nincs ilyen hiba. firefoxban és operában igen. firefoxban a "-moz-box-sizing: border-box;" nem megoldás...

ugyancsak tapasztalható, hogy a padding felül és alul is "tartalomként" viselkedik, azaz megjelenik a scrollbar, amint kisebb lesz az ablak magassága, mint a rózsaszín háttéré (padding+kép+padding). viszont: vízszintesen ez nincs így, a bal oldali padding adott, de a jobbon nem lényeg, ha nem fér az ablakba a padding rész, a scrollbar csak akkor jelenik meg, amikor már a kép egy része is túlcsordul... ez semmiképp nem normális viselkedés. (egyébként ez tapasztalható egyszerűen képek megjelenítésénél is: felül, bal oldalon, alul ott az alapértelmezett 8px távolság, jobb oldalon nincs.)

[zoleytaylor]

oké, megválaszoltam magamnak: a firefox relatívan (százalékosan) megadott méreteknél a tartalmazó elem méretét veszi alapul. (a példában "auto" a div szélessége.) ha egy ilyen elem tartalmaz egy abszolútul (fix értékben) megadott méretű másikat, és az nagyobb, mint a tartalmazó, akkor túlcsordul. (a kép-nézet esetén ugyanez van: a root elem az alap, azon van egy body 8px-es paddinggal, azon pedig a kép, fix szélességgel. ha szélesebb, mint a body 100%-a, a jobb padding ki lesz takarva.)

[asam9]

sziasztok,

biztosan ti is találkoztatok már a html5boilerplate oldallal. nagyon jól összepakolt cucc és szeretném hasznát venni, de sok kérdés merült fel bennem, amit most felteszek, hátha valaki tudja rá a választ.
ezidáig külön-külön link tag-gel és a megfelelő media megadásával (all / screen, projection / print) használtam a css-eket, a h5bp viszont a felesleges fájlműveletek miatt inkább egy fáfjlba pakolja az összes stílust, ami valahogy így néz ki:


<link rel="stylesheet" href="style.css">

--------
reset css
fő stílus css-e
@media print{
print css
}
(és ide még jönnek a mobil és égyéb @media-s cumók)
--------

így, hogy a link tag-ben nincs megadva media, az alapértelmezett: all.
a kérdésem az lenne, hogy a @media print és társai milyen böngészőkben támogatottak? ha nem mindegyikben, akkor szívás az egész, ha viszont ie6+, akkor nem értem, hogy a fő stílus miért nem egy @media screen, projection{}-ben foglal helyet? mert így a reset.css előnye elfog veszni a nyomtatáshoz ill. a mobilhoz készült stíluslapoknál is.

[zoleytaylor]

alakíthatod a css fájlodat így is:

CODE

@media screen {
/* a képernyőn megjelenő verzió összes css meghatározása */

  /* a képernyőn megjelenő verzió reset-ei */
  body { ... }

  /* a képernyőn megjelenő verzió formázása */
  body { ... }

}

@media print {
/* a nyomtatásra szánt verzió összes css meghatározása */

  /* a nyomtatásra szánt verzió reset-ei */
  body { ... }

  /* a nyomtatásra szánt verzió formázása */
  body { ... }

}

azaz nincs kötelező alapértelmezett és kötelező reset stílus.

az ie-ben egyébként előfordulhatnak hibák, ezért jobb, ha conditional comments-szel hivatkozol a css fájlodra. tehát ha [if !IE], akkor mehet egyedül a @media-s css fájlod, ha viszont [if lt IE 9], akkor küldd neki az x darab külön fájlba pakolt stíluslapodat.

[asam9]

köszi a választ

igazából azt szeretném, hogy az alap reset minden verzióra vonatkozzon, ezzel nincs is annyira bajom, kicsit átalakítva amit írtál:

CODE

/* reset mindenre */

@media screen, projection {
/* a képernyőn megjelenő verzió formázása */
}

@media print {
/* a nyomtatásra szánt verzió formázása */
}

csak nem vok benne biztos, hogy véletlenül maradt ki a @media screen {} a Paul Irish által összeállított css-ből, arra gondolok, hogy lehet nem minden böngésző támogatja, azt szeretném tudni, hogy ha tényleg így van, akkor melyik böngésző(k) nem kezelik? gugliztam, de vszínűleg más kulcsszavakkal kéne próbálkoznom.

A conditional comment - hasonlóan, ahogy Te írtad - nála úgy van megoldva, hogy nem a stíluslapok vannak külön ie-verzió szerint berakva, hanem a html tag-ek, és ezek kapnak egy-egy osztályt: ie6, ie7, ie8... így emiatt sem kell külön fájlba írni a hack-eket.

[zoleytaylor]

ja értem, tehát a html-t írja valahogy így:

CODE

<!--[if IE 6]>
<body class="ie6 ...">
<![endif]-->
<!--[if IE 7]>
<body class="ie7 ...">
<![endif]-->
<!--[if IE 8]>
<body class="ie8 ...">
<![endif]-->
<!--[if IE 9 || !IE]>
<body class="...">
<![endif]-->

most hirtelen nem vagyok biztos benne, hogy ez a legutóbbi létező feltétel-e. (valahogyan használható a "vagy" cc-ben, de nem biztos hogy így.)

[asam9]

igen

CODE

<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->

[Stefanie]

Hali!

Már egy ideje küzdök egy problémával, amit sehogy sem sikerül 100%-osra megoldanom: van egy oldalunk ahol a táblázat cellái felé szöveget szeretnénk kiírni, 90°-al elforgatva. Kép nem lehet, mert azt az ügyfél nem tudja szerkeszteni, mi pedig nem szeretnénk minden egyes alkalommal új képet legyártani hozzá. Másik megoldás még lehet az, hogy PHP-val oldjuk meg, de a kedves kollégám nem hajlandó azzal vacakolni.

Találtam egy nagyon jó megoldást erre, ami minden böngésző alatt működik >link< (még ie6 alatt is, lol), de Firefox 3.6 alatt nem (a fent említett kedves kolléga pedig szintén nem hajlandó frissíteni az övét, csak hogy izgalmasabb legyen az élet...).
Ami még eszembe jutott, az a CSS3 és egy változóval átadjuk neki, hogy melyik megoldást használja. Mind szép és jó, de! Ahogy nézegettem, ez a CSS3-as szövegforgatás úgymond egy optikai illúzió. A szöveg elfordul, de maga a div attól függetlenül vízszintes pozícióban marad és olyan széles mint a benne lévő szöveg, vagyis a szövegeket nem tudom közelebb húzni egymáshoz vagy megtörnek több sorba. Lássátok, hogy miről beszélek: kép

Tud bárki akármilyen megoldást erre a csodára mielőtt falnak megyek...? Mivel a cégem egy ici-picit maradi, így IE6+, FF 3,6+-ban jónak kell lennie és nem lehet benne jQuery. Örök hálám annak aki tud segíteni rajtam!