www.fahrradkurier-forum.de
http://fahrradkurier-forum.de/

problem mit css-stylesheet
http://fahrradkurier-forum.de/viewtopic.php?f=276&t=8021		 Seite 1 von 3
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 15:40 ]
Betreff des Beitrags:  problem mit css-stylesheet
wer von euch kann mir helfen?

ich habe näulich den w3c-validator entdeckt, der grammatik- oder rechtschreib- oder logikfehler im quellcode einer webseite findet und meldet. wenn man die behebt, soll man wohl davon ausgehen können, daß die seite in jedem browser gleich angezeigt werden müßte. eben meine seite checken lassen. 28 fehler und 14 warnungen. hossa die waldfee.

hab alles begradigt bekommen, außer einem.

der nav-bereich, wo die ganzen links rechts vom logo gelistet sind, ist als <ol></ol> gestaltet. darin befanden sich die links bisher als <p>, also als absätze, die ich mit style="margin:0;" oder so ähnlich (erinner mich nicht mehr) abstandslos übereinandergestapelt hatte, um die summe der gesamthöhen der kleinen pngs bündig mit der höhe des k_k-logos abschließen zu lassen.

w3c will nun aber im <ol> keine <p>, sondern lieber <li> sehen. ok. gemacht. zack! schon hab ich im firefox wieder 2px abstand zwischen den grafiken, den ich nicht will weil für unbrechenbar in anderen browsern einschätze. browsershots.org hatte mir das gezeigt.

habe im css (das alles erst in den letzten 21tagen gelernt) also im nav ol { }, im nav ol li { } und im nav ol li img { } jeweils sachen wie border:0; oder margin:0; oder padding:0; oder margin-bottom:0; eingefügt. mal nur in einzelnen, mal in allen, fast alle als anfänger denkbaren kombinationen hab ich durch, um den verdammigten zeilenabstand der <li> auf NULL zu regilieren. aber nix da. komplette verarsche. die 2px habe ich nicht entfernt bekommen.

wer kann mir helfen???

Code:
nav {
            
            width:180px;
            float: left;
            overflow:hidden;
         
         }
         
         nav ol {
         
            list-style-type: none;
            margin:0;
            padding:0;
         
         }
         
         nav ol li {
         
            padding: 0 0 0 0;
            margin: 0;
         
         }
         
         nav ol li img {
         
            width: 162px;   
            height: auto;
            border: 0;
            margin: 0;


Dateianhänge:
verdammigte kacke.png
verdammigte kacke.png [ 37.89 KiB | 3639-mal betrachtet ]
Autor:  flotte biene [ Mi 19. Jan 2011, 15:41 ]
Betreff des Beitrags:  Re: css-styleshit
kannst du das vor "wer kann mir helfen" noch mal wiederholen bitte?
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 15:42 ]
Betreff des Beitrags:  Re: css-styleshit
:aaahh:

(so gings mir vor drei wochen auch. lerne selbst auch erst langsam hinein)
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 17:07 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
ich versteh nicht, wieso dieser thread an seinem ursprünglichen ort (zigges computerfragen) partout nicht in meinen aktiven theman oder ungelesenen beiträgen gelistet wurde, deswegen hab ich das kurz verschoben und hoffe, daß es nun sichtbar ist..? :häh:
Autor:  mistfink [ Mi 19. Jan 2011, 17:12 ]
Betreff des Beitrags:  Re: css-styleshit
Alderalder - <ol> heisst ordered list, also eine Liste mit 1. 2. 3. usw. usf. und dort haben <p> nix zu suchen, sondern nur <li>s, da Listenpunkte, deshalb meckert das W3C.

Ich hab jetzt gerade leider keinen Nerv mich mit CSS-Details auseinanderzusetzen, kann aber sagen, dass ich in solchen Faellen auch mit negativen Abstaenden gearbeitet habe (-2) und das auch legitim ist.
Autor:  Daywood [ Mi 19. Jan 2011, 18:04 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Ich denke auch dass das <ol> überflüssig ist. Am einfachsten wäre es wahrscheinlich wenn du in das nav-DIV einfach für jeden Link ein weiteres DIV anstatt des <li> setzt. Das kannst du dann, wie mistfink schon beschrieben hat, ggf. mit negativen Abständen ausrichten.
Für sowas benutze ich ganz gerne das FF-Addon Firebug. Kannst du dir ja mal angucken.
Was mir sonst nich aufgefallen ist: Warum benutzt du zum Farbwechsel beim Mouseover eigentlich Javascript? Das könnte man ja auch mit CSS machen.
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 19:31 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
hab das problem mit line-height:1px geregelt bekommen =D

warum <ol>? öööh hatte sich in dem ersten nebeneinandersitzen mit http://dreikelvin.de an meinem rechner zuerst so ergeben, als ich ihm grob aufzeichnete, was ich haben wolle ;) div ist eine idee, die ich heute abend ausprobieren werde. würden wzischen den divs auch so abstände entstehen? zuerst hatte ich das mit <br> machen gewollt, um diese blöden lücken zwischen den grafiken loszuwerden, aber da hat dreikelvin mich ganz böse angekuckt, das könne man doch auch im css!! aber was css überhaupt sei, habe ich nach all dem vielen zu lernenden input erst heute wirklich verstanden =D

die farbwechsel habe ich mit jvascript, weil google mir das als erstes ausgespuckt hat. css, jajaja. siehe oben: was das ist, begreife ich erst seit heute so langsam ;D
Autor:  Daywood [ Mi 19. Jan 2011, 19:43 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Wegen des Farbwechsels: Du kannst den <div> bzw. <li> Elementen eine eindeutige id zuordnen (z.b. id="msp", id="hansa", usw.).
Im CSS Teil kannst du dann für die einzelnen Links mit z.B.
Code:
#hansa{background-image: url("url_zum_hansa_bild.jpg");background-repeat:no-repeat;}

sowie
Code:
#hansa:hover{background-image: url("url_zum_hansa_hover_bild.jpg");}

die Hintergrundbilder zuordnen.

Der Vorteil, wenn du DIVs nimmst wäre einfach, dass du dir eine "Ebene" (nämlich das <ol>) sparst, was den Quelltext übersichtlicher macht. Probier es einfach mal aus. Die Abstände kannst du da genauso ändern.
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 19:46 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
:knuddel:

ach so, die links rechts sitzen in einem <nav>, um so etwas wie ein inhaltsverzeichnis der seite zu ergeben, ich glaube so hatte dreikelvin vor drei wochen die ol begründet. glaub ich. irgendwie, dmait google das als navigation erkennt, vielleicht? vielleicht auch nicht. informationsflut.
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 20:51 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
was können eigentlich suchmaschinen? google zum einen aber vor allem zum andern spambots oä?

lesen bots nur im code, um würdige sachen zu finden, oder sind bots befähigt, den code zu rendern und mit einem zweiten auge zu betrachten, was da nun wirklich auf dem bildschirm steht?

nämlich:

wenn etwas in html-entities geschrieben ist, ist das wirklich eine so große hürde wie das googeln "emailadresse spam schutz" behauptet? wenn in so einem wust aus &032; geschrieben buchstaben ein &064; auftaucht wird das nicht doch als emailadresse erkannt und von einem spambot genauer hingesehn, ob da was zu holen sei? falls ein &064; spambots neugierig macht: ist bekannt, ob es schon welche gibt, die aus dem rückwärts geschriebenem aber vorwärts angezeigtem <bdo dir="rtl">moc.niamod@liame</bdo> email@domain.com machen können? oder können bots zerspaltene suchziele als solche erkennen, etwa, wenn da <!-- hahah --> mittendrinsteht - oder <span></span>?

kann es browser geben, die das nicht zum lesbaren text umgesetzt kriegen (abmahnungs-gefahr hinsichtlich eines etwaigen risikos, daß mein impressum nicht garantiert lesbar sein könnte?)

diese vier methoden habe ich allesamt benutzt, um meine adress- und email-daten im impressum zu verschlüsseln, so sind aus 89 zeichen völlig unlesbare 786 zeichen geworden.

delle sagte, die codierung in html-entities allein würde ihm in jahren ich glaub nur "zwei chinesen" an den hals gebracht haben. wenn das repräsentativ für die methode ist, fühle ich mich besser, der sgar noch drei methoden draufgesetzt hat =)

kann mich jemand beruhigen? ;)
Autor:  Daywood [ Mi 19. Jan 2011, 21:05 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Du wirst da nie eine 100%ige Sicherheit haben. Denn wenn es in einem Browser darstellbar ist, kann es theoretisch auch von einer Maschine gelesen werden. So lang noch genug Leute ihre Emailadressen für die jetzigen Bots gut lesbar im Internet verteilen, gibt es für die Bot-Entwickler wohl keinen so großen Anreiz die schwer zu lesenden zu entschlüsseln. Wenn jedoch immer mehr Leute es den Bot-Betreibern schwer machen, wird der Anreiz für diese größer, das ganze weiterzuentwickeln. Ich will dich jetzt auch nicht beunruhigen, aber es gibt auch einige Spam-Versender, die sich einfach die 2nd-Level-Domains raussuchen (z.B. xyz.de) und dann ihre Mails an info@xyz.de, mail@xyz.de, webmaster@xyz.de usw. verschicken. Da hilft ein Spamschutz im Impressum dann auch nichts...
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 21:16 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
ok, also immerhin etwas ist so, wie ich mir das dachte: NOCH ist die chance zwar gegeben, aber gering. gut. =)

markieren und einfügen meiner adresse aus dem impressum verhält sich übrigens lustig. ;)
Autor:  Daywood [ Mi 19. Jan 2011, 21:18 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
das hab ich auch schon bemerkt ;)
Autor:  Daywood [ Mi 19. Jan 2011, 21:46 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Mir ist grad noch aufgefallen: Du kannst aus
Code:
style="margin: 0pt;"
aus den <li>-Elementen rausnehmen, da es ja bereits im CSS Bereich unter nav ol li {} deklariert ist. Macht den Quellcode wieder etwas schlanker.
Autor:  kiwi_kirsch [ Mi 19. Jan 2011, 22:01 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
hatte ich das noch gar nicht? ist noch doppelt? uups ;)

ach richtig. wegen buchstabierfehler im css hatte das nicht geklappt, also hatte ich das erstmal wieder so, und hin und her..
Autor:  kiwi_kirsch [ Do 20. Jan 2011, 01:18 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
versuche das grad zu basteln, peils aber noch nicht ganz.

künftig müßte das im css-stylesheet so stehen oder wie?
Code:
<head>
   <style>
      #dawanda {
         background-image: url("nav_job_1_dawanda.png");
         background-repeat:no-repeat;
      }

      #hansa:hover {
         background-image: url("nav_job_red_1_dawanda.png");
      }
   </style>
</head>


und wie muß dann die <li> künftig aussehn (die ich übrigens in jener form in der <ol> behalten möchte, weil ein browser in einem <nav>-bereich wohl eine <ol> erwartet, sagen w3c und self-html)? wo und wie muß ich in der <li> die referenz zum stylesheet-dings #dawanda schreiben? so siehts bisher als javascript aus:
Code:
<head>
   blabla
</head>
<body>
   <div id="mainwrapper">
      <nav>
         <ol>
            <li id="dawanda">
               <a target="_blank" href="http://kiwikirsch.dawanda.de/"
               onmouseover="austausch1.src='img/nav_job_red_1_dawanda.png';"
               onmouseout="austausch1.src='img/nav_job_1_dawanda.png';">
               <img src="img/nav_job_1_dawanda.png" id="austausch1"></a>
            </li>
            <li id="blabla">
               blabla
            </li>
         </ol>
      </nav>
      <footer>
         blabla
      </footer>
   </div>
</body>


:häh:

mann mann mann ist das ne lernerei. und alles nur für so ne online-visitenkarte mit n paar links. nicht mal irgendwas groß aktives. einfach nur ne liste mit links. puuuh. ich will kein webdeseiner sign.
Autor:  e[nt]e [ Do 20. Jan 2011, 10:17 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
So funktioniert es, allerdings ist das mit dem visibility: hidden bei dem Bild ein doofer Trick wie ich finde. Man könnte stattdessen auch ein transparentes ein Pixel großes Bild nehmen und auf die richtige Größe skalieren, dann brächte man das visibility: hidden nicht mehr. Sinn der Sache ist nur, dass da überhaupt etwas anklickbares existiert. Das eigentliche Bild wird ja nur als Hintergrundbild eingebunden und kann deswegen nicht der Link sein.

Im Stylesheet musst du die Höhe der Listenelemente anpassen an die Größe der jeweiligen Bilder. Sonst wird das Hintergrundbild abgeschnitten.
Code:
<head>
   <style>
      #dawanda {
         width: 162px;
         height: 35px;
         background-image: url("nav_job_1_dawanda.png");
         background-repeat: no-repeat;
      }

      #dawanda:hover {
         background-image: url("nav_job_red_1_dawanda.png");
      }
   </style>
</head>


Code:
<head>
   blabla
</head>
<body>
   <div id="mainwrapper">
      <nav>
         <ol>
            <li id="dawanda">
               <a target="_blank" href="http://kiwikirsch.dawanda.de/">
               <img src="img/nav_job_1_dawanda.png" style="visibility: hidden;"></a>
            </li>
            <li id="blabla">
               blabla
            </li>
         </ol>
      </nav>
      <footer>
         blabla
      </footer>
   </div>
</body>
Autor:  Daywood [ Do 20. Jan 2011, 10:51 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Einfach das:
Code:
<a target="_blank" href="http://kiwikirsch.dawanda.de/">
<img src="img/nav_job_1_dawanda.png" style="visibility: hidden;"></a>

durch das:
Code:
<a target="_blank" href="http://kiwikirsch.dawanda.de/">
&nbsp;</a>

Sollte auch gehen. Dann hat der Link ein Leerzeichen als "Text".
Autor:  Daywood [ Do 20. Jan 2011, 11:06 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Oh sorry, geht doch nicht. Der Link muss ja so groß sein wie das <li>-Element. Also vielleicht doch ein leeres Gif als <img> im <a>?!
Autor:  kiwi_kirsch [ Do 20. Jan 2011, 11:32 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
uiuiui. =D danke dir! probier ich mal aus!!! =D
Autor:  Daywood [ Do 20. Jan 2011, 13:03 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Ich hab es mal grad probiert: Du müsstest ein 1*1px großes durchsichtiges gif nehmen können, welches du per <img>-Tag in das jeweilige <a> packst. Und dieses <img> passt du dann jeweils mit style="width:200px;height:100px;" an die größe des übergeordneten <li>-Elements (mit dem entsprechenden Hintergrundbild) an.
Autor:  mistfink [ Do 20. Jan 2011, 13:08 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Ich will jetzt den ganzen Thread nicht durchdenken, aber diese 1Pixelbilderhacks sollten eigentlich mit CSS nicht mehr genutzt werden muessen?!
Autor:  kiwi_kirsch [ Do 20. Jan 2011, 13:14 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
irgendwie hatte ich wohl berechtigte angst vor mistfinks erstem beitrag in diesem thread ;D

ich habe keine ahnung, mistfink, ich kann nur googeln und lande dann bei javascripten, was css überhaupt ist, beginne ich erst seit etwa gestern zu ahnen.

verrat mir gernbe, wie es funktioniert! nur bitte, streitet euch nicht ;)
Autor:  mistfink [ Do 20. Jan 2011, 13:27 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
Das war ja schon mein zweiter Beitrag - hatte mich ja aber oben schon aus dem Thread verabschiedet, da man mit CSS nur wirklich effizient arbeiten kann, wenn man sich ausgiebig damit beschaeftigt, also im Saft ist.
Laesst man die Faehigkeit damit umzugehen ein Jahr ruhen, muss man sich wieder reindenken und gerade das CSS-Boxmodel ist nicht ganz selbsterklaerend und nur fuer den Praktiker einleuchtend.

Dass nicht jeder Browser den ganzen Funktionsumfang implementiert und zu allem Elend einige Beschreibungen falsch interpretiert kommt noch als Schwierigkeit hinzu.

Ich weiss ja gar nicht, was genau Dein Problem ist, aber dieser Versuch mit 1Pixelbildern da was zurechtzupfuschen hat mich wieder schreiben lassen.
Autor:  kiwi_kirsch [ Do 20. Jan 2011, 13:57 ]
Betreff des Beitrags:  Re: problem mit css-stylesheet
ach richtig, da oben stehst du schon.

als ich das mouseoverdings mit java gemacht hab, haben paar leute schon die augen verdreht, deswegen sollte/wollte/oderso ich das mit css frickeln. :schulterzuck:
Seite 1 von 3 Alle Zeiten sind UTC + 1 Stunde
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/