ugrás a tartalomhoz

CSS - nem jeleníti meg!

dadikovi · 2008. Jún. 26. (Cs), 11.27
A probléma a következő. A gépem nem kezeli a következő CSS kódokat. (félkövérrel írtam azokat, amiket nem kezel)

.menupont { font-size: 18px; color: grey; text-decoration: none; text-shadow: 2px 2px 1px #000000; }
font { font-size:12px; color: #000000; face: Arial; padding: 1px 15px 1px 15px;
-> margin sem ment, pedig azzal közel ugyanezt érhettem volna el...
‹ JavaScript -ból type módosítás ie6 -ban -moz-user-select ›
 ■
1

text-shadow nem elterjedt, face tulajdonság pedig nincs

gex · 2008. Jún. 26. (Cs), 11.54
a text-shadow attól függően jelenik meg, hogy milyen böngészővel nézed. nem olyan széles körben támogatott tulajdonság. a második sor pedig ott bukik el szerintem, hogy nincs face tulajdonság, amire te gondolsz, az a font-face.

ja és a font elemet már nem használjuk. ;)
2

font probléma

dadikovi · 2008. Jún. 26. (Cs), 13.27
Változtattam, de természetesen a padding-probléma még mindig fennáll.
A bajom az, hogy csak a font elemek közt lévő szöveg első sora van bentebb kezdve, ahogy az a padding-ben meg van szabva. Ezzel mi a baj?

Font helyett p-t használunk? :D
3

screenshot?

gex · 2008. Jún. 26. (Cs), 14.44
A bajom az, hogy csak a font elemek közt lévő szöveg első sora van bentebb kezdve, ahogy az a padding-ben meg van szabva. Ezzel mi a baj?

az inline típusú elemeknél csak a jobb és bal padding lesz hatással a körülvevő elemekre. a felső és alsó nem, azok csak magára az elemre hatnak. egy egyszerű példa: egy sok szöveget tartalmazó p elemben az egyik szót rakd span elembe és annak adj háttérszín és padding tulajdonságokat.
ha ezt valaki szakmaibban is el tudja magyarázni, tegye meg kérem. :)

Font helyett p-t használunk? :D

span-t (strong-ot, em-et, stb).
4

Így van!

Ustak · 2008. Jún. 26. (Cs), 21.06
Ha jól tudom, és a font inline elem (nyilván az én nem használom) akkor úgy képzeld el, mint egy hosszú szalagot, amit megtör az oldal, de következő sorban ugyanúgy folytatódik, mintha nem is lett volna a sortörés, azaz margin és padding left-right tulajdonság csak az elem két végénél, tehát ahol a <font> elem kezdődik és ahol a </font> elem befejeződik fog mutatkozni. Mivel inline elem, ezért nem is fog működni (mint ahogy span nál sem működik a bottom-top margin-padding varia.
Lehetőségeink:
A nagy szöveghez mindenképpen p-t javasolnék. Ez block szintű elem, azaz a következő elemeket maga alá nyomja (ha nem absolute pozicionált.)
A spanos dolog jó, de top-bottom margin padding nem fog működni. Ha ki akarod emelni javaslom a line-height tuladjonságot, ami megnöveli a sor magasságát, így úgy fog kinézni, mintha margin meg padding lenne adva. Viszont az elem inline marad.
Ha a span elemet display:block ra változtatod, akkor már már top-bottom marginolhatsz, paddingolhatsz, viszont az a szövegrész a többit maga alá nyomja, tehát egyedül marad a sorban.
Erre viszont azt mondod hogy float:left (vagy right) és már meg is vagyunk :) Az aljára pedig egy clear:both -valamit raksz, hogy ne menj ki a tartalmazó paragrafusból.

<html>
<head>
<style type="text/css">
p {
border:1px solid black;
}

span{
 display:block;
 float:left;
}
span.nagypadding{
 padding:10px;
 border: 1px solid black;
}
em.clear {
 display:block;
 clear:both;
}
</style>
</head>
<body>

<p>
<span>Ez meg </span><span class="nagypadding">Ha túl hosszú</span><span>nem töri meg az oldal mert block!</span>
<em class="clear">Ide kell egy clear both</em>
</p>
</body>
</html>
Vagy:

<html>
<head>
<style type="text/css">
p {
border:1px solid black;
}

span{
 padding-left:20px;
 padding-right:20px;
 line-height:50px;
 border:1px solid black;
}
</style>
</head>
<body>

<p>
Ide írok hogy látszon mekkora nagy a line-heightem pontosan 50px
Ez meg <span class="nagypadding">egy nagyon érdekes</span> másik sor
És ez is nagyon érdekes kis sor itt. És ide még írok hogy látszon hogy 
mekkora nagy a line-heightem egészen 50 px.
</p>
</body>
</html>
5

túl sok info ;)

gex · 2008. Jún. 27. (P), 11.44
azt hiszem a kérdezőt össze fogja zavarni ez a sok - nem túl releváns - info. ;)
6

Akkor légyszi

Ustak · 2008. Jún. 27. (P), 20.04
írjátok le egyszerűbben :-)

javaslom még a w3scools tanításait, pl. a fenti esetben az én (nem túl releváns:-)) kódom ha beilleszted egy "Tryit Editor"-ba a bal oldalra, akkor láthatod az eredményt a jobb oldalon, és szerkesztgetheted, próbálgathatod.
7

Mégegyszer... :))

dadikovi · 2008. Jún. 29. (V), 21.59
Megközelítem máshonnan a dolgot.
Van ez a szuper oldal. Baloldalt egy fekete csík. Minden írás egy olyan 10 pixellel a fekete csíktől jobbra helyezkeik el. Minden. Hogyan csináljam meg? Köszönöm a válaszokat!
8

linket, kódot, screenshotot...

gex · 2008. Jún. 29. (V), 23.16
milyen oldal, milyen fekete csík, milyen minden?!
9

menü

yaanno · 2008. Jún. 30. (H), 17.25
szerintem olyasmire gondol, mint a weblabor jobb oldali menübarja: szuper oldal, baloldalt szürke csík, tőle jobbra minden 10 pixellel eltolva jobbra - de csak találgatok :)
10

:)

dadikovi · 2008. Júl. 10. (Cs), 17.45
Ennyire talán már mégsem vagyok hülye :D:D:D

Igen yaanno, erre gondoltam... Mármint erre, csak a bal oldalon. Ott a tartalom van 10 px-re a fekete csíktól :)

Értitek...? :) :(

u.i.: Jano, küldtem neked egy üzenetet, tárgytalan, még meg kell tanulnom az oldalt használni :D ......tényleg ennyire hülye vagyok :D
11

semmi baj :)

yaanno · 2008. Júl. 11. (P), 13.18
többféleképpen is csinálhatod, pl. a faux column megoldással, ami annyit tesz, hogy pl.:

<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
szerkezet esetén nem a sidebarnak v. a contentnek adsz bordert, hanem a wrappernek adsz egy ismétlődő, mondjuk 1 pixel magas és wrapper széles háttérképet (adhatod a bodynak is stb.)

#wrapper{background: url(/kepeim/hatterkep.png) repeat-y}
Innentől kezdve van egy végig húzódó csíkod, nem kell borderezni stb. és ami fő, szabadon állítgathatod paddinggal v. marginnal a térközt. Mindenképpen tanulmányozd a box model nevű csodát, hogy be tudd állítani a térközt. Ezt a technikát alkalmazza egyébként a weblabor is, próbáld megnézni az oldal háttérképét, és meglátod miről van szó.
12

Válasz

dadikovi · 2008. Júl. 11. (P), 18.55
Te jó ég, már eléggé rég kezdtem el HTML-lel, meg CSS-sel foglalkozni, mindenre magam jöttem rá, és azt hittem, már nagyjából értem, de azóta minden megváltozott :D
font helyett string-et alkalmazunk, table helyett div-et.. :D
Mondjuk erről már hallottam. :) De gondolom ez table mellett is használható...

+
#menupont { 
        font: normal 10px verdana, tahoma, arial, sans-serif;
        display: block;
        margin: 0;
        padding: 2px 3px;
        color: #ffffff;
        background-image: url(images/menucover_bg.jpg);
        text-decoration: none;
        border: 1px solid #ECEEE4;
HTML-be pdig ez ment:
<a  class="menupont" href="#">Kezdőlap </a>
És nem jeleníti meg...

Ha számít valamit, akkor ez az egész egy "ul-os; li-s" legördülős vízszintes menüben van benne... :)

ILLETVE MÉG VALAMI:

Kezdem csinálni azt, amit ajánlotok, hogy egy képet tegyek be a bal oldalra, ami egy "margót" képezne, és szükség lenne, hogy a kép része legyen egy kis része a header.jpg-nek. Ehhez persze csak az adott részt bele kell rakni a kis csíkba, ill. kitörölni az eredeti helyéről - próbáltam a cella kisebbitésével, de ekkor a megadott 10 pixelt a jobb oldalról vette el, de nekem a balról kéne. Hogyan oldjam ezt meg? Remélem értitek :)

Köszönöm a válaszokat!!!
13

Utánaolvastam!

dadikovi · 2008. Júl. 14. (H), 10.07
Tehát a div minden elemét megszabhatjuk CSS-ben? Az már igen... :)
http://csszengarden.com/tr/magyar :)

Sziasztok!