Aktuelle Zeit: So 21. Dez 2025, 11:41

Alle Zeiten sind UTC + 1 Stunde




Ein neues Thema erstellen Auf das Thema antworten  [ 56 Beiträge ]  Gehe zu Seite 1, 2, 3  Nächste
Autor Nachricht
 Betreff des Beitrags: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 15:40 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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 | 2799-mal betrachtet ]
Nach oben
 Profil  
 
 Betreff des Beitrags: Re: css-styleshit
BeitragVerfasst: Mi 19. Jan 2011, 15:41 
Offline
Benutzeravatar

Registriert: Mi 20. Feb 2008, 20:37
Beiträge: 5902
Wohnort: hämbüääch!
kannst du das vor "wer kann mir helfen" noch mal wiederholen bitte?

_________________
"the drugs don't work? me neither!"


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: css-styleshit
BeitragVerfasst: Mi 19. Jan 2011, 15:42 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
:aaahh:

(so gings mir vor drei wochen auch. lerne selbst auch erst langsam hinein)


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 17:07 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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:


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: css-styleshit
BeitragVerfasst: Mi 19. Jan 2011, 17:12 
Offline
Benutzeravatar

Registriert: So 28. Sep 2008, 07:29
Beiträge: 10379
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 18:04 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 19:31 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 19:43 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 19:46 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
: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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 20:51 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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? ;)


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 21:05 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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...


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 21:16 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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. ;)


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 21:18 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
das hab ich auch schon bemerkt ;)


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 21:46 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Mi 19. Jan 2011, 22:01 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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..


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 01:18 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 10:17 
Offline

Registriert: Sa 1. Aug 2009, 16:29
Beiträge: 1516
Wohnort: Berlin
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>

_________________
"ente ist nicht meins, find ich eklig. oder wabbelig, meistens trocken."
Karlsson


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 10:51 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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".


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 11:06 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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>?!


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 11:32 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
uiuiui. =D danke dir! probier ich mal aus!!! =D


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 13:03 
Offline
Moderator

Registriert: Mi 6. Dez 2006, 11:06
Beiträge: 1196
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 13:08 
Offline
Benutzeravatar

Registriert: So 28. Sep 2008, 07:29
Beiträge: 10379
Ich will jetzt den ganzen Thread nicht durchdenken, aber diese 1Pixelbilderhacks sollten eigentlich mit CSS nicht mehr genutzt werden muessen?!


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 13:14 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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 ;)


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 13:27 
Offline
Benutzeravatar

Registriert: So 28. Sep 2008, 07:29
Beiträge: 10379
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.


Nach oben
 Profil  
 
 Betreff des Beitrags: Re: problem mit css-stylesheet
BeitragVerfasst: Do 20. Jan 2011, 13:57 
Offline
Benutzeravatar

Registriert: Mi 17. Mai 2006, 15:11
Beiträge: 12018
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:


Nach oben
 Profil  
 
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 56 Beiträge ]  Gehe zu Seite 1, 2, 3  Nächste

Alle Zeiten sind UTC + 1 Stunde


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

Suche nach:
Gehe zu:  

Powered by phpBB® Forum Software © phpBB Group
Deutsche Übersetzung durch phpBB.de