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.
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. p {  
  5. border:1px solid black;  
  6. }  
  7.   
  8. span{  
  9.  display:block;  
  10.  float:left;  
  11. }  
  12. span.nagypadding{  
  13.  padding:10px;  
  14.  border: 1px solid black;  
  15. }  
  16. em.clear {  
  17.  display:block;  
  18.  clear:both;  
  19. }  
  20. </style>  
  21. </head>  
  22. <body>  
  23.   
  24. <p>  
  25. <span>Ez meg </span><span class="nagypadding">Ha túl hosszú</span><span>nem töri meg az oldal mert block!</span>  
  26. <em class="clear">Ide kell egy clear both</em>  
  27. </p>  
  28. </body>  
  29. </html>  
Vagy:
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. p {  
  5. border:1px solid black;  
  6. }  
  7.   
  8. span{  
  9.  padding-left:20px;  
  10.  padding-right:20px;  
  11.  line-height:50px;  
  12.  border:1px solid black;  
  13. }  
  14. </style>  
  15. </head>  
  16. <body>  
  17.   
  18. <p>  
  19. Ide írok hogy látszon mekkora nagy a line-heightem pontosan 50px  
  20. Ez meg <span class="nagypadding">egy nagyon érdekes</span> másik sor  
  21. És ez is nagyon érdekes kis sor itt. És ide még írok hogy látszon hogy   
  22. mekkora nagy a line-heightem egészen 50 px.  
  23. </p>  
  24. </body>  
  25. </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.:
  1. <div id="wrapper">  
  2. <div id="sidebar"></div>  
  3. <div id="content"></div>  
  4. </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.)
  1. #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ó...

+
  1. #menupont {   
  2.         font: normal 10px verdana, tahoma, arial, sans-serif;  
  3.         display: block;  
  4.         margin: 0;  
  5.         padding: 2px 3px;  
  6.         color: #ffffff;  
  7.         background-image: url(images/menucover_bg.jpg);  
  8.         text-decoration: none;  
  9.         border: 1px solid #ECEEE4;  
HTML-be pdig ez ment:
  1. <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!