CSS kérdésem van

[Garono]

Lehet az IE6 debilsége. Hasonló problémám mintha nekem is lett volna már.

 

Azért kipróbálnám, ha így kezded a CSS-t, mi történik:

* {
    padding: 0px;
    margin: 0px;
}

Egyébként minden CSS kódot így illik kezdeni.

[headcoach]

Köszönöm a válaszokat, sajnos még nincs megoldás.

 

KGigi: Bocs. Javítottam, de így sincs változás.

7-es explorer-rel szintén ugyanez az eredmény.

<div id="p1"><a target="kozep" href="lap1.html"><IMG src="1.jpg" width="200" height="400" align="left" border="0" padding="0"></a></div>

 

Garono: javítottam, de így sincs változás.

* {
    padding: 0px;
    margin: 0px;
}

 

viszont, érdekességként észrevettem, ha a középsõ részt 3px-lel jobbra tolom (200px helyett 203px), akkor firefox alatt lesz hézag a bal oldalt, és az explorer-ben pedig jól fog kinézni. itt a változtatás:

 

 

#p3 {
    top: 0px;
    left: 203px;
    width: 400px;
    height: 400px;
    margin: 0px;
    padding: 0px;
   
}

 

Tehát az expoler valami miatt a css-ben a left: 200px helyett 197px-hez igazítja az iframet tartalmazó div-et.

Valahogyan ezt kellene kijavítani, vagy egy olyan módszer ami felismeri, hogy explorer böngészi, és akkor egy másik css file lenne aktív, bár nem tudom ez lehetséges-e, és nyílván nem ez a tökéletes megoldás.

 

Várom az észrevételeket

Edited July 20, 2009 by headcoach

[KGigi]

JavaScripttel megoldható, amit írsz. Nem is vészes, talán öt sor.

[Garono]

Próbáltam rekonstruálni a dolgot, arra jutottam, hogy ha a HTML kódból kiveszel minden formázást (amit egyébkét sem szabadna), megoldódik a dolog. IE6 és IE7 híján nem tudom kipróbálni, de alapból IE8-ban sem volt jó.

[headcoach]

Köszönöm a reagálásokat.

 

A Javakódra akkor rákreresek, ha nem találok, vagy nem megy majd még irok.

 

A html-ekben pedig semmi nincs. belinkelem, hogy hogy néz ez az egész ki. 4 file meg 2 kép, ahol a képek mérete: 200x400. Elvileg minden butított, szóval nem tudom mi lehet a gikszer.

 

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="1.css" rel="stylesheet" type="text/css">
<title>1-test</title>
</head>
<body leftmargin="0" marginheight="0" topmargin="0">
<div id="p1"><a target="kozep" href="lap1.html"><IMG src="1.jpg" width="200" height="400" align="left" border="0" padding="0"></a></div>
<div id="p2"><a target="kozep" href="lap2.html"><IMG src="2.jpg" width="200" height="400" align="left" border="0" padding="0"></a></div>
<div id="p3"><iframe src="lap1.html" name="kozep"  scrolling="no" frameborder="0" hspace="0" vspace="0" width="400" height="400" marginwidth="0" marginheight="0"></iframe></div>
</body>
</html>

 

1.css

@charset "iso-8859-2";

* {
    padding: 0px;
    margin: 0px;
}

#p1, #p2, #p3 {
    position: absolute;
   
}

#p1 {
    left: 0px;
    top: 0px;
    width: 200px;
    height: 400px;

}

#p2  {
    top: 0px;
    left: 600px;
    width: 200px;
    height: 400px;

}

#p3 {
    top: 0px;
    left: 200px;
    width: 400px;
    height: 400px;
  
}

 

lap1.html

<html>
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body bgcolor="#562605">
<table border="1" cellpadding="1" cellspacing="1" >
  <tbody>
      <td>A PIROSRA KATTINTOTTÁL</td>
      <td></td>
      <td></td>
    </tr>
</table>
</body>
</html>

 

lap2.html

<html>
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body bgcolor="#536899">
<table border="1" cellpadding="1" cellspacing="1">
    <tr>
      <td>A ZÖLDRE KATTINTOTTÁL</td>
      <td></td>
      <td></td>
    </tr>
</table>
</body>
</html>

Edited July 21, 2009 by headcoach

[Garono]

Itt a probléma:

<img src="1.jpg" width="200" height="400" align="left" border="0" padding="0" />

A piros törlendõ. A zöld bõvítendõ (bár utóbbi nem játszik most szerepet).

[headcoach]

Köszönöm szépen!

 

Sikerült megoldani, még volt egy kis bibi, egy lila keret a képek körül, de a css-be linkelt következõ parancs után minden flottul megy.

 

img {border: 0;}

 

Mégegyszer köszönöm mindenkinek a segítséget.

 

[payskin]

Azért az a bodyval kezdődő és utána headdel, majd újabb bodyval folytatódó index.html csúnyán odatesz mindennek, ami szent a weboldalkészítésben. 10/10. A DTD-k pedig nyilván helytakarékosság miatt nem játszottak egyik HTML fájlnál sem, nehogy szabványos módban kezelje a fájlokat bármelyik böngésző is. Macsó!

[headcoach]

Köszönöm az észrevételt. Javítottam az index.html-t, gondolom a másol beilleszt valamilyen maradványa lehetett.

A dokumentum definíciót pedig feleslegesnek tartottam, ilyen butított lapoknál, ahol a megoldáskeresés volt a cél. (Bár nem hülyeség a szabvány, de amúgy a problémát nem befolyásolta.)

Amúgy ha nem gedit-tel írtam volna, hanem valami grafikus cuccal valószínű ott lenne. Így a gizda!

Edited July 21, 2009 by KGigi

[Garono]

Hogyhogy nem lehet linknek beállítani margin-top: Npx értéket? Teljesen hatástalan. Úgy nézne ki, hogy van pár linkem egymás után BR-rel tördelve:

<a href="#">link1</a><br />
<a href="#">link2</a><br />
<a href="#">link3</a><br />
<a href="#">link4</a><br />
<a href="#">link5</a><br />

Majd megadom nekik az említett stílust:

a {
    margin-top: 50px;
}

Erre azt várnám, hogy a linkek közt 50 pixeles köz lesz, de nem!

[KGigi]

És padding-gel?

[Garono]

Az sem jó.

 

Próbaképp végigpróbáltam az összes display lehetõséget, a table úgy tûnik mûködik, és akkor még nem is kell tördelnem BR-rel a sorokat. Viszont van pár hibája, pl. az elõre beállított a:hover-re aláhúzódó linkek így nem mûködnek.

[KGigi]

Azt mondod, hogy a táblázatba foglalt hoveres linkek nem mennek? Nekem van ilyen oldalam és minden böngészõben mûködik.

[Garono]

Nem táblázatba van foglalva, csak display: table tulajdonságokat adtam neki.

 

Edit:

Kipróbáltam azt is, ha DIV-be rakom az összes linket egyenként, akkor mûködik, amit akarok.

<div><a href="#">link1</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
<div><a href="#">link5</a></div>

div {
    margin-top: 50px;
}

[KGigi]

Jaaa. Tedd be őket spanbe, akkor jó lesz. Én ezt eleve úgy tanultam, hogy semmi ne legyen blokkon kívül, pont az ilyenek miatt.

[Garono]

Többször próbáltam, úgy sem jó.

[KGigi]

Ha divvel megy, akkor spannel is mennie kell. Elvileg azonosak ilyen téren.

 

NEM! A div blokk-szintű, a span inline elem!

 

Bocsi

[Garono]

Gyakorlatilag nem.

<span><a href="#">link1</a></span>
<span><a href="#">link2</a></span>
<span><a href="#">link3</a></span>
<span><a href="#">link4</a></span>
<span><a href="#">link5</a></span>

span {
    margin-top: 50px;
}

Így már nem megy. De egyébként se lenne egészséges megoldás (ezért a DIV-est sem használom).

 

Tehát a kérdés továbbra is adott: hogy lehet/miért van, hogy A tagnek hiába adok meg margin-top értéket, nem érvényes rá, míg ha DIV-be van foglalva, és a DIV-nek adom meg ugyanazt margin-top-ot, akkor már megy?

[Giraffe1]

Az <a> és a <span> is ún. inline elem, így nem igazán meglepõ, sem a magasságát, sem a margóját nem lehet beállítani - ezért is mûködik, amikor a linkeket blokkszintû elembe, <div>-be "csomagolod".

Ha ragaszkodsz a sortöréses megoldáshoz, akkor esetleg próbálkozz a sortávolság növelésével, de én javasolnám az ilyen esetekre kiválóan bevált felsorolásokat - l. websuli oldalának menüje.

 

[OFF]

Bocs, a kissé tömör válaszért, de kissé nehéz úgy írni, hogy közben az ember ölében egy perpetuum mobile folyamatosan rúgkapál.

[Garono]

Nem ragaszkodom hozzá. Igazából csak annyi lenne a tényleges problémám, hogy ha ezek a linkek egy fix méretű dobozban vannak (350 px), és a link több szóból áll, és emiatt nem fér ki egy sorba, akkor nyilván több sorba teszi ki azt az egyetlen linket. Ez nem is lenne baj, sőt, ez így jó is. Azonban az már nem jó, hogy mint látszik, egymás alatt van több link is, és van, hogy két-három egymás alatt lévő link is több sorban fér csak el, így pedig egy kicsit összeolvadnak. Persze a:hover-re aláhúztam őket, de örülnék, ha LINKENKÉNT lenne egy kis köz. Próbáltam a sortávolság változtatásával, de semmit nem érek vele, mivel egyazon link közbe is ugyanakkora sortávolságot tesz.

 

Nem tudom érthető-e...

[Pjotr]

Rendezd listába a linkeket, ott már megadhatsz a <li>-nek távolságot. Más lehetőség, hogy plusz <p>-ba pakolod őket. Szerintem mindkettő járható, de a listázás jobban tetszik.

 

Ehh, kapkodok, nem láttam a Tanár urat!

[kléni]

Segítene valaki megtalálni az okát, hogy itt a Tetszik az oldal? felirat kezdõbetûje miért nem nagyobb, színesebb, mint a Színválasztó feliraté? ugye ugyanaz a kód van benne. Nem hinném, hogy a szavazás php része miatt van...

[payskin]

Öhm, szánom-bánom, de azt sem látom, mitõl lesznek nagyobbak az elsõ betûk?

[Atys]

Ettõl ha jól látom, de hogy azon miért nem érvényesül azt nem értem.

 

div.menulink:first-letter, div.menulink_szoveg:first-letter{

    font-size:20px;

}

 

[kléni]

a style.css -ben van a div.menulink:first-letter , a színek a változó csskben vannak.