design mit css

[littleHtml Freak]

hallo
wie kriege ich diese tabelle:
auf meiner hp
in css realisierbar?
PS: ich poste mal nicht den ganzen code, sondern verlasse mich darauf das ihr den seiten quelltext angucken könnt ;)
mfg

 

[Efchen]

Moin,

eine Tabelle kann man nicht in CSS realisieren. Entweder es handelt sich um tabellarische Daten, dann kann man die Tabelle mit CSS formatieren.

Oder aber es handelt sich um Layout-Tabellen (schäm Dich ;) ) und Du willst lernen, wie Du HTML benutzt und dann mit CSS das möglichst selbe Aussehen hinbekommst.

Zufälligerweise weiß ich, dass Du letzteres meinst :-D

Meine Empfehlung: Nim die Tabelle einfach erstmal raus. Im nächsten Schritt studieren wir dann mal Dein Markup. Wenn Du richtig was lernen willst, dann nimmst Du auch statt XHTML 1.0 Transitional lieber XHTML 1.0 Strict.

Dann sehen wir weiter!

 

[littleHtml Freak]

also du meinst ich soll xhtml 1 strikt verwenden; OK
(kannst du mir einen entsprechenden doctype geben)
muss ich dann was an meinem code ändern?
und dann natürlich wie weiter?
mfg:mrgreen:

 

[Efchen]

(kannst du mir einen entsprechenden doctype geben)

Hilfe! Macht denn hier niemand auch mal was selber?
Immer muss man alles vorkauen... :-)
-- LANtastic :: Artikel -- DTD - Document Type Declaration - Das richtige Doctype

muss ich dann was an meinem code ändern?

Das sagt Dir dann der The W3C Markup Validation Service

und dann natürlich wie weiter?

Wenn der Code dann valide ist, gehen wir an CSS ran.

Viel Erfolg :-)
-Efchen

 

[littleHtml Freak]

also der doctype ist bei allen doks geändert
alles wird noch richtig dargestellt scheint kein fehler im code zu sein ;Jump
PS: ich habe mir ein neues design ausgedacht das sich nicht wesentlich im code unterscheiden sollte aber ich würde dann gerne den scollbalken in der tabelle(ist ja NOCH eine)haben. (oder ist das nur mit frames zu erreichen :-|, dann wärs natürlich nen ganz anderer code)
mfg

 

[Efchen]

alles wird noch richtig dargestellt scheint kein fehler im code zu sein

Wie war doch der Link zur Seite?

PS: ich habe mir ein neues design ausgedacht

Langsam, langsam, so weit sind wir noch nicht...!

ich würde dann gerne den scollbalken

Scrollbalken gibts überall da, wo der Inhalt nicht ins Element passt.

in der tabelle(ist ja NOCH eine)haben.

Wird aber keine mehr sein :-)

(oder ist das nur mit frames zu erreichen

Frames...Frames...warum reden hier noch 80% der Leute von Frames? Die hab ich schon 2002 ausgemistet und war damit sicher nicht einer der ersten. Frames sind so ungleublich bedienerunfreundlich. Ist das bis hierhin noch nicht vorgedrungen?

Nix Frames. Nix Layouttabellen. Sonst hör ich auf :-D

Gruß,
-Efchen

 

[littleHtml Freak]

der link: Simon Kulozik
ich will auch keine frames(und keine tabs)! ich dachte nur, dass es vielleicht nicht anders zu lösen gewesen wäre, dann hätt ichs nämlich gelassen.
mfg

 

[Efchen]

der link: Simon Kulozik

Hmmm...wie kommst Du darauf, da wären keine Fehler mehr?
32 Errors: [Invalid] Markup Validation of http://home.arcor.de/simon.kulozik/ - W3C Markup Validator

Den Link zum Validator hatte ich Dir doch gegeben?

ich will auch keine frames(und keine tabs)!

Frames gibt es ab XHTML 1.0 Strict nicht mehr, und Tabs sind eine Sache des Browsers, nicht des Webmasters.

Du hast eine Website. Ob Deine Besucher diese in mehreren Fenstern oder Tabs ansehen möchten, bleibt ihnen völlig allein überlassen und das ist auch gut so. Links öffnet man immer im selben Fenster (anders gehts auch gar nicht mehr seit XHTML 1.0 Strict, da es das target-Attribut nicht mehr gibt!). Daher haben Dich Tabs gar nicht zu interessieren. Wenn Du sie nicht magst, benutze sie nicht. Ich mag sie und öffne alles in Tabs. Ich wäre sauer auf Dich und Deine Website, wenn Du mir neue Fenster aufmachen könntest. Aber das geht zum Glück nicht!

ich dachte nur, dass es vielleicht nicht anders zu lösen gewesen wäre, dann hätt ichs nämlich gelassen.

Frames und Layout-Tabellen gehören nicht auf eine ordentliche Website. Wenn man etwas lösen will, was nur damit ginge, dann dürfte man dieses Feature nicht umsetzen. Der Nutzbarkeit zuliebe.

Wir lesen uns wieder, wenn Du die Fehler des Validator behoben hast oder Fragen dazu hast, okay? :-)

Viel Erfolg,
-Efchen

 

[littleHtml Freak]

also die seite sieht jetzt nicht ganz so aus wie vorher und ist auch nicht mehr vollständing aber sie ist jetzt valide
wir können weiter machen
mfg

 

[Efchen]

Gratuliere! Das war fix! Ich bin beeindruckt.

Jetzt entfernst Du die Tabelle und machst semantisch korrektes Markup daraus.
Überschriften mit dem HTML-Tag für Überschriften auszeichnen, alles raus, was nicht die Struktur beschreibt, also auch <b>-Tags, die sind überflüssig.

Der XML-Prolog muss raus, weil das den IE verwirrt und der dann in den Quirks Mode springt.

Und Du könntest den Qualidator bemühen, den hab ich auch erst vor kurzem kennengelernt, aber der scheint extrem gut zu sein:
XHTML Singlepage Qualidator - Quelltext validieren und überprüfen

Weiterhin viel Spaß.

Ich werde heute wahrscheinlich keine Zeit mehr haben, aber ich bin nicht aus der Welt :-)

Schönen Abend,
-Efchen

 

[littleHtml Freak]

hi ich denk du meinst so
mfg

 

[Efchen]

Moin,

wird immer besser. Aber das HTML ist immer noch nicht gut.

1. Aufgabe: Warum sind ".titel_klasse1" und ".titel_klasse2" <div>s? Da gibt es bessere Tags, die wirklich beschreiben, was der Inhalt bedeuten soll. Der Name der Klasse sagt eigentlich schon, was Du mit dem Text bezwecken willst, und welches Tag Du verwenden sollst.

2. Aufgabe: ".inhalt_klasse". Hier verwendest Du Tags, die eigentlich nicht die Struktur, sondern das Aussehen definieren. Diese sollten nicht verwendet werden. Das eine findest Du leicht auch selbst heraus. Besteht nur aus einem Zeichen. Welches ist das?
Zusatzfrage: Welches Tag ist da in dem <div> noch drin, das eigentlich nur ein Aussehen definiert, wobei ich zugeben muss, dass sich da viele drüber streiten, ob das noch verwendet werden soll oder nicht.
Entferne die entsprechenden Tags und zeichne Deinen Inhalt semantisch korrekt aus. Da Du Deine Angaben in tabellenähnlicher Form gemacht hast, kommt hier kein <p> zum Einsatz, sondern eine besondere Liste. Findest Du heraus, welche ich meine?

3. Aufgabe: Ich würde aus "fussnote" eine ID machen (denn die Fußnote kommt sicher nur einmal vor auf jeder Seite, richtig?) und dann das ganze von einem <div> zu einem <p> ändern. Immerhin enthält das Text, ein Textabsatz ist da schon okay.

Die Navi lass ich bei der ganzen Sache immer außen vor.

Bis zum nächsten Mal :-)

 

[littleHtml Freak]

ich hab jetzt das geändert von dem was ich wusste was du meinst.
habe aber noch ein paar fragen.
-->bei der navi; wie kriege ich die wieder auf eine reihe. (span sol ich ja nicht mehr nehemen?!)aber die sollen wieder einen abstand von 50px haben
-->wie kann ich im css schrift unterstreichen also wie font-weight: bold; nur eben für unterstreichen.
mfg

 

[Efchen]

ich hab jetzt das geändert von dem was ich wusste was du meinst.

Warum kommt nach h1 schon h3? Ich hab in der Schule gelernt, dass nach 1 erstmal 2 kommt :-)
Aber ich könnte mir auch vorstellen, dass man die zwei Zeilen beide ins h1 rein nimmt, und dann später nur unterschiedlich formatiert. Denn eigentlich bezeichnet die zweite Zeile ja keine eigenständige Überschrift.

Bei dem Text mit "Das bin ich" meinte ich eigentlich eine Definitionsliste (<dl>), da hier ja das "Das bin ich" zum Image gehört. Und "Meine Hobbys" gehört zu der Auflistung der Hobbies.

-->bei der navi; wie kriege ich die wieder auf eine reihe. (span sol ich ja nicht mehr nehemen?!)

An der navi wollte ich eigentlich nichts ändern. das war doch das Ausklappzeugs, oder? Da wird das span womöglich sogar für eben diesen Effekt gebraucht. Hast Du da den Originalcode noch?

aber die sollen wieder einen abstand von 50px haben

Soweit sind wir noch nicht, wir zeichnen immer noch den Inhalt aus :-)

-->wie kann ich im css schrift unterstreichen also wie font-weight: bold; nur eben für unterstreichen.

Das geht mit text-decoration:underline; aber ich würde davon abraten. Unterstrichener Text wird von WWW-Nutzern immer zuerst mal als Link interpretiert. Umso größer ist der Frust, wenn sie feststellen, dass sich keine neue Seite öffnet. Um der Usability willen verzichtet man im WWW auf Unterstreichungen.

 

[littleHtml Freak]

ich hatte den span aus dem oginal code rausgenommen und durch ein object erstezt weil mir das fehler melde dingda gesagt hat ich soll keinen span nehmen

soll ich das ignorrieren und wieder den span reintun oder was sollte ich da am besten tun?
nach h1 kommt h3 weil ich h2 für h3 zu groß finde ;)
was bringt die dl?
mfg

 

[Efchen]

ich hatte den span aus dem oginal code rausgenommen und durch ein object erstezt weil mir das fehler melde dingda gesagt hat ich soll keinen span nehmen

Der Validator? Der sagt sicher nicht, dass Du was nicht nehmen sollst...bau das mal wieder ein, da will ich mir die Fehlermeldung ansehen.

nach h1 kommt h3 weil ich h2 für h3 zu groß finde ;)

Na, nu geb ich mir so viel Mühe :-), Dir das Prinzip der Trennung von Inhalt und Layout zu erklären und Du schaust beim Auszeichnen Deines Inhalt darauf, wie das dargestellt wird? Wie gesagt, soweit sind wir noch nicht! Wie das jetzt aussieht int zu diesem Zeitpunkt noch völlig uninteressant. Denn das Aussehen wird allein durch CSS gesteuert. Da kannst Du ein h2 auch größer machen als ein h1, wenn Du das brauchst.

was bringt die dl?

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

 

[littleHtml Freak]

also die navi sieht jetzt so aus wie sie aussehen soll.
und ist im orginalcode:

<span class="navigation_klasse"><a class="tooltip" href="kontakt.html">Kontakt
     <div><b>Kontakt:</b> Wie ihr mich<br />kontaktieren könnt.
     </div></a></span>

css dazu:

a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: relative;
  text-decoration: none; 
  font-style: none;
  font-weight: bold;
  color: #000000; 
  }
  
a.tooltip:hover {
  color: #0000ff; 
  background: transparent;
  }

a.tooltip div {
  display: none;  
  text-decoration: none; 
}

a.tooltip:hover div {
  display: block;
  position: absolute; 
  top: 20px; 
  left: 0; 
  width: 200px;
  z-index: 100;
  color: #000000; 
  border:1px solid #000000; 
  background: #ff8800;
  font: 12px Verdana, sans-serif; 
  text-align: left;
  }
a.tooltip div b {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weigth: bold;
  color: #000000;
  background-color: #ff0000;
  border: 0px;
  border-bottom: 1px solid black;
}

es gint einiges, dass den tester ärgert(12F)(hab den ersten genommen).

span.navigation_klasse {
                        font-weight: bold;
                        margin-right:50px;
                                             }

mfg

 

[littleHtml Freak]

PS:
so solls mal aussehen

thx to my maths teacher ;)

 

[Efchen]

<span class="navigation_klasse"><a class="tooltip" href="kontakt.html">Kontakt
     <div><b>Kontakt:</b> Wie ihr mich<br />kontaktieren könnt.
     </div></a></span>

Na, das geht ja auch nicht, ein Block-Element (hier: <div>) ist nicht innerhalb eines Inline-Elements (hier: <span> und <a>) erlaubt. Ohne das jetzt auszuprobieren...müsste doch eigentlich auch mit einem span statt eines div funktionieren. Aber nicht nur im HTML, auch im CSS an allen richtigen Stellen anpassen :-)

 

[littleHtml Freak]

ja geht auch so.
mfg
können weiter machen