ugrás a tartalomhoz

menük alá kép

kataiandi · 2011. Feb. 9. (Sze), 17.41
Sziasztok!
Újból itt vagyok :) Két kérdésem lenne:
- Oldalt van a menü, alá hogyan lehet képet rakni?
- A teknősös oldalon http://kataiandrea.name/teknos.html a kép alul nagyon kilóg, hogyan tudom ezt kiküszöbölni?
‹ Kép fölé vitt egérrel szöveg megjelenítése onclick hidden mező értékadás ›
 ■
1

Szia!

Kérésre törölve 9. · 2011. Feb. 9. (Sze), 23.49
Ha játszol a marginnal pl. így

#content {
margin: 0 2em 5em 17em;
}

akkor szerintem nem fog kilógni.

A css-ben tudsz a menü alá rakni háttérképet:
background-image: url(kép.png);
2

clear: both

Poetro · 2011. Feb. 9. (Sze), 23.53
Vagy beraksz egy elemet a #content végére, aminek a CSS tulajdonsága clear: both, vagy használsz egy clearfix-et.
3

Amúgy, ha jól látom

Kérésre törölve 9. · 2011. Feb. 10. (Cs), 00.28
nincs lezárása a <div id="content">, body és html - nek.
4

A legalsó képre tegyél egy

bb0072 · 2011. Feb. 10. (Cs), 11.29
A legalsó képre tegyél egy inline style-t, hogy style="float: none;" Vagy persze ugyanezt css-ből.

A clearfix itt ágyuval verébre, mivel a képnek nem is kéne float-olódni.
5

kép

bb0072 · 2011. Feb. 10. (Cs), 11.42
A képet nem egészen értem, hogy a menüpontok mögé háttérképnek? Vagy az egész menü alá egy kép? Utóbbi esetben a <div id="menu"></div> -ben van egy <ul></ul>, azután tegyél egy <img>-t
6

Fél siker..

kataiandi · 2011. Feb. 10. (Cs), 15.05
Tekis oldalon a kép már nem lóg ki, köszi :)
A képet betettem a menüs rész végére (alá) - eredetileg a lap alsó sarkába szerettem volna, de így is jó-.
<div id="menu">
 <ul>
  <li><a href="......">.....</a></li>
  <li><a href=".....">......</a></li>
  <li><a href=".....">......</a></li>
  <li><a href=".....">......</a></li>
  <li><a href=".....">......</a></li>
  <li><a href=".....">.....</a></li>  
  <li><a href=".....">.....</a></li> 
 </ul>
<img src="fehervirag.gif" alt= virág" />
</div>
a CSS pedig így néz most ki:

#menu {
    padding: 0.2em;
    float: left;
    position: relative;
}

#menu li {
  li-style: none;
  margin-right: 0.2px;
  display: block;
  padding: 0.6em;
}

#menu ul {
  text-align: left;
}


#menu a {
  color: #9CF;
  text-decoration: none;
  background: url(hatter1.bmp);
  border: 4px outset #9CF;
  padding: 0.25em 0.5em;
  
}

#menu a:hover {
  color: #9CF;
  background: #757575;
}
Hogyan lehetne megoldani, hogy az egész menü a lappal mozogjon? Sehogy sem sikerül.
Ha ezekben is hiba van kérlek javítsátok ki. Előre és utólag is köszi az eddigit is.:) (hú ezt jól megfogalmaztam :P) ( a virág még csak próba, nem ez marad ;) )
7

A képet betettem a menüs rész

kuka · 2011. Feb. 10. (Cs), 15.32
A képet betettem a menüs rész végére (alá) - eredetileg a lap alsó sarkába szerettem volna, de így is jó-.
rubicon háttérképes javaslata megoldaná:

#container {
  width: 825px;
  background: #FFF url(fehervirag.gif) no-repeat left bottom;
  margin: 0 0 0 1em;
  border: 6px outset #9CF;
}
Hogyan lehetne megoldani, hogy az egész menü a lappal mozogjon?
Ezt talán fejtsd ki bővebben. Én legalábbis nem értem.
Ha ezekben is hiba van kérlek javítsátok ki.
  • Az img tagben hiányzik az alt attribútum értékének a nyitó idézőjele.
  • A #menu li stílusában használt li-style nem létezik. Talán list-style-ra gondoltál?
8

Én értem

Kérésre törölve 9. · 2011. Feb. 10. (Cs), 15.52
a #menu-ben a position: relative; helyett position: fixed; kell. Akkor görgetéskor mindig egy helyben marad.

Viszont a virág is fix lesz, mert az is abban a részben van.
9

Köszönöm

kataiandi · 2011. Feb. 10. (Cs), 19.54
Mindegyiket megnéztem és ki is próbáltam (és kijavítottam a list-style-t). Végül is a fixed-es megoldás nem tetszett - de erre gondoltam -, mert zavaró volt számomra. A virágot a lap alsó sarkába tettem. Arra nem gondoltam, hogy ha megadom a színét akkor mellé "tűzhetek" képet is.
Köszönöm a segítséget.
10

Arra nem gondoltam, hogy ha

kuka · 2011. Feb. 11. (P), 08.50
Arra nem gondoltam, hogy ha megadom a színét akkor mellé "tűzhetek" képet is.
A background egy shorthand tulajdonság a background-color, background-image, background-repeat, background-attachment és background-position tulajdonságok állítására.

Személy szerint én utálom, csak azért írtam így, hogy téged ne zavarjalak össze a váltással. Az alábbi két beállítás egyenértékű:

/* shorthand */
background: #FFF url(fehervirag.gif) no-repeat left bottom;

/* külön-külön */
background-color: #FFF;
background-image: url(fehervirag.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left bottom;
Ha jól megfigyeled, a fenti azt is jelenti, hogy a shorthand a fel nem sorolt tulajdonságokat is beállítja, méghozzá az alapértelmezett értékekre. Jelen esetben a background-attachment-et scroll-ra, annak ellenére, hogy a shorthand-ben ez nem volt említve.
11

Ha jól megfigyeled..

kataiandi · 2011. Feb. 12. (Szo), 14.42
Köszi szépen tényleg ugyanaz :) aranyos vagy hogy felhívtad a figyelmemet. Ha találsz/találtok szerkezeti hibát akkor szólj légyszi itt vagy privátba ;) Esetleg nyithatok ez ügyben is témát?
12

Ha találsz/találtok

kuka · 2011. Feb. 15. (K), 09.21
Ha találsz/találtok szerkezeti hibát akkor szólj légyszi itt vagy privátba ;)
Csak úgy hirtelenjében:
  • A multkor említett szintaxis kavarás még fennáll.
  • Az iframe esetében elhagytad az attribútumok értékei körül az idézőjeleket. Az jelenleg használt XHTML doctype ezt tiltja. Viszont HTML 5 megengedi.
  • Az u és center tagek már HTML 4.01-ben is ellenjavallt volt, XHTML-ben és HTML 5-ben már nem létezik.
13

Szerkezeti hibák témakörbe

kataiandi · 2011. Feb. 17. (Cs), 12.05
Szia!
Nyitottam egy szerkezeti témakört, mert nem tudtam mennyire szabad egy témakörbe mást is belekeverni.
Nem értem ezt az u és center tagekről írt mondatodat. Ha én XHTML 1.0 val írom akkor az miért nem jó ? A centert gondolom a margo vagy padding "helyettesíti", de mi van az u -val? A HTML és a CSS stílusosan könyvben még erről olvastam csak :P :S
14

Nem értem ezt az u és center

kuka · 2011. Feb. 17. (Cs), 14.07
Nem értem ezt az u és center tagekről írt mondatodat. Ha én XHTML 1.0 val írom akkor az miért nem jó ?

Az ellenjavallt (angol szakirodalomban deprecated) azt jelenti, hogy jelenleg még meg van tűrve, de a szabvány következő változatában már nem lesz benne. A W3C validator nem jelez rájuk hibát, mert transitional DTD-t használsz, azaz elavult tag-ek használata elfogadott. De strict DTD esetén már hibát jelezne.

Ha most tenni akarsz egy lépést a jövő felé és átírod a doctype-ot HTML 5-re, akkor szintén hibát fog jelezni. Pedig ők az 1999-ben közzétett HTML 4.01-ben már előrejelezték, hogy ezek ki lesznek véve. Aki időben gondoskodik az ellenjavallt tag-ek mellőzéséről annak egyszerűbb az átállás.
A centert gondolom a margo vagy padding "helyettesíti", de mi van az u -val?

Az auto margin csak block elemekre alkalmazható, a center inkább inline szövegrész igazítására való.

/* u helyett */
.alahuzott {
  text-decoration: underline;
}
/* center helyett */
.kozepre {
  text-align: center;
}
15

Sziasztok! Menüsor alá

kataiandi · 2011. Már. 2. (Sze), 11.39
Sziasztok!
Menüsor alá szeretnék betenni egy bekeretezett részt amiben link van. Hogyan tudnám megoldani, hogy ne a menükhöz rendelt stílus jelenjen meg?
16

Vagy más stílust adsz meg

kuka · 2011. Már. 2. (Sze), 11.50
Vagy más stílust adsz meg neki:

.keret2 a {
  color: #369;
  text-decoration: underline;
  border-style: none;
  background-image: none;
}
Vagy kizárod a menü stílusából:

/* ezt az ul-t írod pluszba, a többi már megvan */
/*  vv                                          */
nav ul a {
  color: #9CF;
  text-decoration: none;
  background: url(hatter1.bmp);
  border: 4px outset #9CF;
  padding: 0.25em 0.5em;
}
Én viszont azt javasolnám, hogy a hirdetést ne rakd a nav tag-en belülre, mert nem a navigáció része.
17

köszi a gyors jelentkezést :)

kataiandi · 2011. Már. 2. (Sze), 12.37
Igen az nekem sem tetszik, hogy a navigációs része, de sehogy sem ment arra az oldalra - menü alá-.

Ez a kizárásos dolog nem megy. :P - bocsánat
18

Akkor lássuk mely elemekre

kuka · 2011. Már. 2. (Sze), 13.22
Akkor lássuk mely elemekre milyen szelektorok vonatkoznak:

<nav>                                                <!-- nav -->
 <ul>                                                <!-- nav ul -->
  <li><a href="index.html">Élet az SLE-vel</a></li>  <!-- nav a, nav ul a -->
 </ul>
<div class="keret2">                                 <!-- nav div -->       
Érdeklődni lehet: <a href="mailto:x##kukac##y.z">e-mail</a>  <!-- nav a, nav div a -->
</div>
</nav>
A nav a minden nav-on belüli a-ra vonatkozik.
A nav ul a csak a nav-on belül levő ul-on belüli a-ra vonatkozik.

Mivel a reklám az ul-on kivül van, a nav ul a rá nem vonatkozik. Így értettem a kizárást: szűkíteni a szelektor hatáskörét.

Mint már említettem, az URL-kódolt szóköz %20, nem 20%. :)
19

+

Poetro · 2011. Már. 2. (Sze), 13.24
Szerintem a + sokkal egyszerűbben megjegyezhető, mint szóköz karakter. Például: http://www.google.hu/search?q=a+space+karakter
21

Igaz. Bár mailto: esetében

kuka · 2011. Már. 2. (Sze), 15.04
Igaz. Bár mailto: esetében néha nem működik. Nekem például Thunderbirddal a pluszok megmaradnak, de a %20 lecserélődik szóközre.
20

igen, igen :)

kataiandi · 2011. Már. 2. (Sze), 14.30
Igen, igen mondtad és meg is jegyeztem a %20 és nem fordítva, ezt elnéztem :P
22

Újabb nekifutás

kataiandi · 2011. Már. 10. (Cs), 15.19
Átszerkesztettem az egész oldalamat - kinézetre -, de a hirdetés sehogy sem akar a menü alá menni. Hova tegyem? (mármint a menü alá szeretném.. , ami most a lap alján van)
23

Másabb lett. a hirdetés

kuka · 2011. Már. 10. (Cs), 16.39
Másabb lett.
a hirdetés sehogy sem akar a menü alá menni.
Onnan kissé strapás volna stabilan a menü alá illeszteni. Inkább szervezd át: legyen egy div#balsav, azt igazítsd balra. A nav és a div.hirdetés pedig legyen a div#balsav tartalma.
  • Beírod a div#balsav taget:
    
<body>

 <div id="container">
  <header>
   <h1></h1>

  </header>

<div id="balsav">

<nav>
 <ul>
  <li><a href="index.html">Élet az SLE-vel</a></li>
 </ul>
</nav>

<div class="hirdetes">
Anyanyelvi szinten beszélő, (...)
<hr>
Gyöngyfűzők kincses szigete! (...)
</div>

</div>
  • Beírod a div#balsav stílusát:
    
#balsav {
  float: left;
  width: 225px;
}
    (A width azért kell mert eddig a nav szélességét a tartalma határozta meg, de a div.hirdetes tartalma teljes szélességre tolná szét.)
  • A nav ul stílusából törlöd a float: left-et, mert az előző lépésben megkapta a div#balsav.

Megjegyzések:
  • A hirdetésben az &nbsp; csúnya hatást vált ki. Egyébként hirdetéseknek általában a teljes felülete kattintható szokott lenni, nehogy már valaki véletlenül elhibázza és a hirdető lemaradjon egy kattintásról. HTML 5 hasznos újítása, hogy az a tartalmazhat block elemeket is. (Eddig csak inline lehetett benne.) Bár nem hiszem, hogy ezt ki lehet használni azon a kis helyen.
  • A nav ul stílusából törölheted a position: relative-et, mert fölösleges.
  • <h2><span class="first_letter">L</span>ehetséges betegen is boldognak lenni?</h2> írható egyszerűbben is:
    
<h2>Lehetséges betegen is boldognak lenni?</h2> 

    
h2::first-child {
  font-size: 155%;
  font-family: Arial, serif;
}
    Igaz, hogy a ::first-letter pszeudoelemet régi böngészők nem ismerték, de szerintem az nagyobb baj, hogy a keresők azt a szót "ehetséges"-nek olvassák.
  • A font-family-ben az általános fontot a végére írjuk, tehát font-family: Arial, serif, nem pedig font-family: serif, Arial. Ugyanis a böngésző az elsőt olyant használja, amelyet ismer.
  • CSS-ben a kommenteket /* és */ közé írjuk, a <!-- és --> csak HTML (és XML).
24

Értettem, köszi! Majd jelzek

kataiandi · 2011. Már. 10. (Cs), 21.09
Értettem, köszi! Majd jelzek hogyan sikerült ;)

Hát a menü alatt nagyon rosszul festett, kicsi a hely, így visszatettem alulra, csak kicsit kiemeltem.
26

Hirdetés

rubi · 2011. Már. 13. (V), 01.40
A hirdetéseket simán lehetne új oldalra is, a menübe a mondjuk beszúrni egy Hírek (vagy Hirdetések) címűt fület és abba berakni.
27

Lehet jobb lenne, de

kataiandi · 2011. Már. 17. (Cs), 23.46
Nem hiszem hogy kettő max. 3 hirdetésnél több lesz rajta, de ha esetleg úgy alakul, hogy több lenne akkor mindenképp fontolóra veszem a javaslatodat.
25

Sokkal szebb lett

rubi · 2011. Már. 13. (V), 01.28
Sokkal szebb és melegebb hatású így sárgán az oldalad, mint a kék márványos volt.

Valamint nem hiba, de a menü és konténer szegélyei túl nagyok és durván kiemelkednek, megnéztem a border 6px, de elegendő lenne 1-2 px is, így máris elegánsabb hatást keltene az oldal.
28

Lekéstem, mert háttércsere lett...

kataiandi · 2011. Már. 17. (Cs), 23.54
Ma olvastam amit írtál és pont tegnap du. tettem fel egy új hátteret.... :P
Saját minta!:D Nagyon gagyi? És ha kék helyett az árnyalatok a kockában sárgás árnyalatok tennék??? Valami egyedi mintát akartam :)

- A bannerre nem kellene szegély?

A bordereket kijavítottam, lehet tényleg jobb így!

Köszi!:D
29

Nagyon gagyi?Bocs, de

kuka · 2011. Már. 18. (P), 09.27
Nagyon gagyi?
Bocs, de szerintem az a mintaf.jpg még a gagyinál is rosszabb. 386-os gépeken futtatott Windows 3.1-re emlékeztet, amikor az emberek görcsösen ragaszkodtak a tapétához, hogy többet lássanak mint DOS-ban, de a gép teljesítménye miatt csak pici képeket használhattak. Ezért a lehető legkisebb képet a lehető legordítóbbra tervezték.

Ami a csökkentett méretű menüt illeti, nekem az a #66f kék kissé hivalkodónak tűnik. De az még elmegy. Viszont a :hover #603 bordója teljesen elüt az oldal színvilágától.

Őszintén szólva a korábbi változat jobban tetszett.
31

Fő az őszinteség, azért jövök

kataiandi · 2011. Már. 18. (P), 12.00
Fő az őszinteség, azért jövök vissza mindig :) A menük azért változtak, mert talán emlékszel,hogy nem voltak egyforma hosszúak a menü gombok. A színekkel akkor tovább játszadozok :) és köszi ;)
30

Háttér

rubi · 2011. Már. 18. (P), 11.06
Én
innen(is) szoktam letölteni háttereket, lehet rajzolni is, de akkor is érdemes nézegetni, miket készítenek mások. Vannak jók és rosszak is az oldalon, válogatni kell. És ha rajzolsz fel is töltheted őket ide.
32

Értettem :) háttércsere

kataiandi · 2011. Már. 18. (P), 12.01
Értettem :) háttércsere betervezve ;)
33

Változtatás megvolt

kataiandi · 2011. Már. 23. (Sze), 20.46
Változtatás megvolt, vélemény? Most jobb?
34

Szerintem sokkal jobb. Már

kuka · 2011. Már. 24. (Cs), 08.44
Szerintem sokkal jobb. Már nem is találok rajta kritizálni valót. Csak két apró észrevétel:

A hatter03.jpg jobb szélén maradt egy sötét vonal.

A footer picit kilóg a div#container alól. A marginjaijat ugyanis em-ben adtad meg, ami relatív mértékegység, az aktuális karakterméret arányában. Viszont a footer számára más font-size-ot állítottál be, ezért az ő esetében az 1em más lesz mint a div#content esetében. Javaslom, hogy inkább középre igazítsd mindkettőt:

div#content {
  margin: 0 auto;
}
footer {
  margin: 5px 0 auto;
}
35

Köszi :) Megpróbáltam úgy

kataiandi · 2011. Már. 25. (P), 17.33
Köszi :) Megpróbáltam úgy ahogy írtad, de akkor a footer elcsúszott....
36

Upsz, sajtóhiba: footer {

kuka · 2011. Már. 25. (P), 18.09
Upsz, sajtóhiba:

footer {
  margin: 5px auto 0;
}
Mint említettem utálom a shorthand tulajdonságokat. Én jobban szeretem így, mert a fentihez hasonló hibák azonnal észrevehetőek:

footer {
  margin: 0;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}
37

:)

kataiandi · 2011. Már. 25. (P), 20.56
Siker! Köszi szépen! a csík is kivéve a háttérnél és a footer is a helyére került! A külső egyenlőre akkor ez marad már csak időnként a tartalmat kell bővíteni :)

További szép napot, estét!
üdv: Andi