1. Tudásbázis
  2. Sminkek
  3. Kaszkád, vagy nem kaszkád?

Kaszkád, vagy nem kaszkád?

Beküldte gepidak - 2008. augusztus 21. 07.43
gepidak képe

Sziasztok!

Alaposan belefutottam egy CSS apróságba, amire a tervezés fázisában nem is gondoltam. Én még a megszokott táblázatos Layout-hoz szoktam anno (tudom ez már lejárt). Frankón megcsináltam a honlap nagyját, mikor rájöttem, hogy az Main-en belül és egy külön blokkon belül, ha néhány táblázatot akarok beszúrni img tag-okkal, akkor örökli a drupal css fájlában a table, td, img elemek tulajdonságait. Pl. border-t, padding-ot, aling-ot tesz rá, egyszóval szétesik a tartalom (lásd: www.profieskuvoivideo.hu Jobb oldalt a Showreel-t) Mivel a CSS elemek tulajdonságai egymásba ágyazható lehet olyat csinálni, hogy amit a Törzsbe begépelek az vagy ne örökölje a css tulajdonságait, vagy le tudjam a table, td, img tagok tulajdonságait nullázni, esetleg felül írni? Vagy felejtsem el ezt a technikát és másként oldjam meg a problémát?
Tud valaki okosat mondani ebben?

Köszönettel:
gepida

Fórum: 
Sminkek
pp képe

Beküldte pp - 2008. augusztus 21. 08.27

http://css-tricks.com/specifics-on-css-specificity/

A lényeg, hogy speciálisabb (nagyobb súlyú) kiválasztót kell írnod. Ököl szabályként ha van egy táblázatot, akkor a firebuggal megnézed, hogy milyen szabályok vonatkoznak rá. Beteszed az egészet egy div-be és adsz neki egy id-t. A szabályok kiválasztóit lemásolod és elé írod az id-t és akkor már felül is írtad. Ha nem megy, akkor használd az !important kulcsszót.

pp

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

gepidak képe

Beküldte gepidak - 2008. augusztus 21. 11.31

Köszönet: B. Attilának, aki segített megoldani a feladatott. Rendes srác!
A megoldás:
html:
=====

Tovább

css:
====
#tabla-zero, #tabla-zero div {
width: 197px;
margin: 0;
padding: 0;
border: 0;
}
#tabla-zero #top {
height: 44px;
background: url('/sites/files/film_01.jpg') no-repeat; } #tabla-zero #center {
height: 116px;
background: url('/sites/files/film_02.jpg') no-repeat; } #tabla-zero #bottom {
height: 110px;
background: url('/sites/files/film_03.jpg') no-repeat; } #tabla-zero #bottom span {
display: block;
padding: 52px 0 0 20px;
}

0
0
gepidak képe

Beküldte gepidak - 2008. augusztus 21. 11.39

Ami a html-nél lemaradt, mert nem írtam 

 tag-et és a rendszer törölte a forrást:
 
html:
=====
<code><div id="tabla-zero">
	<div id="top"> </div>
	<div id="center"> </div>
	<div id="bottom"><span><a href="#">Tovább</a></span></div> </div>
0
0