Neue Archtitektur
0 0 0 0 DOPPELPOSTING!
Felix Riesterer
0 Echt?
1
Neue Archtitektur
Eins vorweg: Das ist kein Doppelpost, da die betreffende Seite jetzt eine neue Architektur und ein neues Design aufweist.
Was haltet ihr von der jetzigen Umsetzung der Architektur? Was kann man besser machen?
Zur Seite
Der Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
<meta name="description" content="Beschreibung der seite">
<meta name="keywords" content="Hier Schluesselwoerter">
<meta name="author" content="Moppel">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" href="CSS/formate.css" type="text/css">
</head>
<body>
<div id="Content">
<!-- Seitenkopf -->
<img class="Kopf1" src="Grafiken/Logo1.bmp" alt="Logos" width="227" height="160"><img class="Kopf2" src="Grafiken/Logo2.jpg"
alt="Logos" width="240" height="160"><img class="Kopf3" src="Grafiken/Logo3.jpg"
alt="Logos" width="240" height="160"><img class="Kopf1" src="Grafiken/Logo4.jpg"
alt="Logos" width="240" height="160"><table class="Kopftabelle" style="border-collapse: collapse;"><tr>
<td width="227"><span class="Homepagelink">www.paarberatung-duisburg.de</span></td>
<td width="240"><a href="paarberatung.html" class="textzeile">Paarberatung</a></td>
<td width="240"><a href="psycholberatung.html" class="textzeile">Psychologische-/<br>Sexualberatung</a></td>
<td width="240"><a href="familenberatung.html" class="textzeile">Familien-/Erziehungsberatung</a></td></tr></table>
<!-- Seitenkopf Ende -->
<!-- Navigation -->
<div id="Nav">
<table class="Navigation" style="border-collapse: collapse;">
<tr><td class="rfarbe1"><span class="Navigationstextaktiv">Startseite</span></td></tr>
<tr><td class="rfarbe1"><a href="uebermich.html" class="nav">Zu meiner Person</a></td></tr>
<tr><td class="rfarbe1"><a href="paarberatung.html" class="nav">Paarberatung</a></td></tr>
<tr><td class="gross"><a href="psycholberatung.html" class="nav">Psychotherapeutische-/<br>Sexualberatung</a></td></tr>
<tr><td class="gross"><a href="familienberatung.html" class="nav">Familien-/<br>Erziehungsberatung</a></td></tr>
<tr><td class="rfarbe1"><a href="diepraxis.html" class="nav">Die Praxisräume</a></td></tr>
<tr><td class="rfarbe1"><a href="kostenudauer.html" class="nav">Kosten und Dauer</a></td></tr>
<tr><td class="rfarbe1"><a href="kontakt.html" class="nav">Kontakt</a></td></tr>
<tr><td class="rfarbe2"><a href="impressum.html" class="nav">Impressum</a></td></tr></table>
</div>
<!-- Navigation Ende -->
<!-- Hauptfenster -->
<div id="Hauptfenster"></div>
<!-- Hauptfenster Ende -->
</div>
<!-- Fussnote -->
<div id="Fussnote"><span class="Fussnotentext">Praxis für Psychotherapie • Margret Kümmerling • Altenbrucher Damm 52a
• 47249 Duisburg • Telefon: 0203/8057139 • Email: webmaster@paarberatung-duisburg.de</span></div>
</body>
</html>
Der CSS Code ohne die Links:
/* Global gueltige Layouts */
html { background-color:#828fc6; }
body { width:100%; height:100%; margin:0px;padding:0px; }
/* Div-Container */
#Content { width:957px;padding:0px;margin-left:auto;margin-right:auto;margin-top:10px;border:0px; }
#Nav {float:left;}
#Hauptfenster { Width:727px;Height:395px;background-image:url(../Grafiken/Hintergrund.jpg);float:left; }
#Fussnote { width:957px;padding:0px;margin-left:auto;margin-right:auto; }
/* Klassen fuer Bereich mit Logo, Fotos und 4 Textbloecken */
.Kopf1 { border:2px solid #FFFFFF; }
.Kopf2 { border-width:2px 1px 2px 0px;border-style:solid;border-color:#FFFFFF; }
.Kopf3 { border-width:2px 0px 2px 1px;border-style:solid;border-color:#FFFFFF; }
.Kopftabelle table { width:957px;padding:0px;border:0px; }
.Kopftabelle td { border-width:0px 2px 2px 2px;border-style:solid;border-color:#FFFFFF;height:34px;text-align:center; vertical-align:middle; }
.Homepagelink { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;
font-weight: normal;text-decoration: none;color: white; display:block; text-align: center; }
.Textzeilenlinkaktiv { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 10pt;
font-weight: bold;text-decoration: none;color: white; display:block; text-align: center; }
/* Klassen fuer die Navigation */
.Navigation table { padding:0px; float:left; }
.Navigation td { background-image:url(../Grafiken/Button.jpg);width:205px;
text-align:center; vertical-align:middle;padding-left:20px; }
.rfarbe1 { border-width:0px 2px 2px 2px;border-style:solid;border-color:#FFFFFF #FFFFFF #828fc6 #FFFFFF;height:35px; }
.rfarbe2 { border-width:0px 2px 2px 2px;border-style:solid;border-color:#FFFFFF #FFFFFF #FFFFFF #FFFFFF;height:35px; }
.gross { border-width:0px 2px 2px 2px;border-style:solid;border-color:#FFFFFF #FFFFFF #828fc6 #FFFFFF;height:57px; }
.Navigationstextaktiv { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 11pt;
font-weight: bold;text-decoration: none;color: white; display:block; text-align: left; }
/* Klassen fuer die Fussnote */
.Fussnotentext { font-family:'Verdana' ;font-style: normal;font-variant: normal;font-size: 7.5pt;
font-weight: normal;text-decoration: none;color: white; display:block; text-align: left; }
-
Hi!
Eins vorweg: Das ist kein Doppelpost,
Doch! Zudem hatte ich dir explizit davon abgeraten, Tabellen zu mißbrauchen - och Mönsch!
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Also ein bisschen was von letzten Mal ist ja schon noch übrig ;-)
Was andres fällt mir auf die schnelle nicht ein.-
Jetzt missbrauche ich Tabellen...
Ich habe versucht mit Listen zu arbeiten. Damit bekommt man aber das Layout der Navigation, insbesondere die Querstriche nicht umgesetzt. Was spricht gegen diese Umsetzung? Auch die Links unter den drei Fotos habe ich versucht per liste zu machen. Null Chance, dass die mittig unter den Bildern sind. Von den Rahmen gnaz zuschweigen.-
Hi!
Jetzt missbrauche ich Tabellen...
Ja, trotz Warnung;) Nimm das aber nicht persönlich, bitte!
Ich habe versucht mit Listen zu arbeiten. Damit bekommt man aber das Layout der Navigation, insbesondere die Querstriche nicht umgesetzt.
Sagt wer?
Was spricht gegen diese Umsetzung?
Das habe ich beschrieben - dazu sind Tabellen _nicht_ da.
Auch die Links unter den drei Fotos habe ich versucht per liste zu machen. Null Chance, dass die mittig unter den Bildern sind. Von den Rahmen gnaz zuschweigen.
Wenn Du eine /gewünschte/ *Darstellung* mit CSS nicht umzusetzen vermagst, dann wegen mangelnder Kenntnisse von CSS - das ist nicht schlimm, du kannst z.B. hier nachfragen - aber: es liegt _niemals_ daran, dass Du keine Tabellen für Layoutzwecke eingesetzt hast.
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Hehe,
gut, denn ich würde sehr gerne die drei 4 Links unter den Fotos als Liste machen.Wie gehe ich dazu vor? Muss ich die Liste in einen div-Container Packen, oder kommt sie einfach nach den Bildern, wie in meiner Lösung die Tabelle?
Und wie bekomme ich dann die senkrechten Striche als Verlängerung der Bilderrahmen zwischen bzw vor und hinter die Listeneinträge?
Beste Grüße-
Also die Kästchen mit den Links und die Bilder sind sowieso leicht versetzt, schau mal genau hin.
Die Rahmen kannst du mit border (CSS) machen. Musst halt deine <p> oder <div> oder was auch immer so anordnen dass es passt und dann die jeweiligen Seiten mit Rahmen versehen.Nachdem deine ganzen Unterseiten alle fast gleich aufgebaut sind, könntest du dir überlegen das mit php zu machen. Dann kommt alles was gleich ist in eine einzige Datei und die wird mit include eingebunden. Dazu ist kein wochenlanges Lernen notwendig, überlegs dir mal.
-
Die Rahmen kannst du mit border (CSS) machen. Musst halt deine <p> oder <div> oder was auch immer so anordnen dass es passt und dann die jeweiligen Seiten mit Rahmen versehen.
...Oder gleich bei den Listen: Du kannst diese Eigenschaften auch dem ul-Element geben.
Übrigens auch für die Trennlinien in der Liste und die Ausrichtung des Textes: Gib den li-Elementen die Eigenschaft "display:block" (oder auch "display:inline-block", je nachdem wo die Elemente erscheinen sollen) , dann kannst du ihnen wunderbar eine Breite und Höhe zuweisen, einen Rand etc...Sind übrigens die "iStockphoto"-Watermarks in den Fotos gewollt? Die finde ich persönlich sehr sehr sehr unschön!!!
-
Übrigens auch für die Trennlinien in der Liste und die Ausrichtung des Textes: Gib den li-Elementen die Eigenschaft "display:block" (oder auch "display:inline-block", je nachdem wo die Elemente erscheinen sollen) , dann kannst du ihnen wunderbar eine Breite und Höhe zuweisen, einen Rand etc...
Sind übrigens die "iStockphoto"-Watermarks in den Fotos gewollt? Die finde ich persönlich sehr sehr sehr unschön!!!
Weiter oben habe ich gerade geschrieben, dass die Seite jetzt online gehen muss, da das gewerbe läuft und der Link in die Telefonbücher kommt. Das mit den Listen nehme ich mir zu Herzen und versuche,im Hintergrund, die Navigationen damit zu realisieren.
Die Fotos werden noch um das "istockphoto"-Zeichen erleichtert.
Grüße aus Duisburg
-
-
-
-
-
Jetzt missbrauche ich Tabellen...
Ich habe versucht mit Listen zu arbeiten. Damit bekommt man aber das Layout der Navigation, insbesondere die Querstriche nicht umgesetzt. Was spricht gegen diese Umsetzung? Auch die Links unter den drei Fotos habe ich versucht per liste zu machen. Null Chance, dass die mittig unter den Bildern sind. Von den Rahmen gnaz zuschweigen.Klarer Fall von: Back to the Roots. Schon einmal den css-Abschnitt von selfhtml durchgelesen?
-
-
-
Hi Moppel,
was mir noch zusätzlich auffällt, unter dem Punkt "Zu meiner Person" ist ein Link mit dem Text "Interview über meine Arbeit in der WAZ". Das es sich dabei um einen Link handelt, erfahre ich erst wenn ich mit der Maus drüber bin. Links sollten sich jedoch optisch von dem normalen Fließtext absetzen, damit diese schnell und einfach zu erkennen sind.
MfG
Otto-
»»Links sollten sich jedoch optisch von dem normalen Fließtext absetzen, damit diese schnell und einfach zu erkennen sind.
Kommt drauf an, ob man all den schnell-mal-hin-und-weiter-ohne-richtig-hinzugucken-surfern behilflich sein will oder nicht :)
In diesem Fall stört mich eigentlich nur das irgendwie "zusammenhangslose", da kommt einfach was dahergeschmissenes: sehr unangenehm zum Lesen. Darum würde auch ich eine optische Abhebung begrüssen, und zwar bspw. in Form eines Pfeiles der zeigt. ->Hier gibts noch mehr!
-
Hi pete,
»»Links sollten sich jedoch optisch von dem normalen Fließtext absetzen, damit diese schnell und einfach zu erkennen sind.
Kommt drauf an, ob man all den schnell-mal-hin-und-weiter-ohne-richtig-hinzugucken-surfern behilflich sein will oder nicht :)
Also ist deine Empfehlung links als normalen Fließtext zu tarnen, damit ich dann Stunden lang suchen darf?
Das folgt doch dazu, das ich den Link nicht entdecke und mir unter Umständen interessante Informationen verloren gehen.
MfG
Otto-
Hey zunächst mal vielen Dank für die vielen Kommentare.
Sorry an Felix, wenn ich mit meinem Post bei ihm für Unmut gesorgt habe. Und auch Dank an ihn für seine lange und ausführliche Antwort im anderen thread.
Zum Thema Interview-Link: Ich habe inzwischen ein PDF Logo direkt neben dem Link. dadurch sollte es deutlicher sein - schaue morgen aber noch nach einer anderen Lösung.
Die Seite muss jetzt mal online gehen, da das Gewerbe auch schon läuft und der Link bald in den örtlichen Telefonbüchern steht. Aber da das mein erstes seriöses Projekt ist, würde ich gerne weiter im Hintergrund an einer zeitgerechten und sauberen Umsetzung arbeiten: sprich keine Tabellen und Listen-Navigation.Beste Grüße aus Duisburg
-
-
-
-
Liebe Moppel,
Eins vorweg: Das ist kein Doppelpost, da die betreffende Seite jetzt eine neue Architektur und ein neues Design aufweist.
es ist sehr wohl ein Doppelposting! Es geht nachwievor um dieselbe Seite und um nachwievor dasselbe Problem, nämlich dass Du mit den Grundlagen zu semantischem Markup und mit dem passenden Layout-Code kämpfst.
Was mich besonders ärgert: Ich habe Dir eine recht umfangreiche Antwort in Deinem alten Thread geschrieben (warum hätte mich der neue interessieren sollen?), die nun offensichtlich im falschen Zweig Deiner mehr-threadigen Diskussion untergeht.
Ich hasse Doppelpostings! Mach das nie wieder, wenn Du an meiner Hilfe interessiert bist!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi Felix!
Ich hasse Doppelpostings!
OjE!
Mach das nie wieder,
Sag einmal, lieber Felix: geht's noch?
Was soll das?
» wenn Du an meiner Hilfe interessiert bist!
OP wird das spätestens jetzt antizipiert haben, denke ich!
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
-
Eins vorweg: Das ist kein Doppelpost, da die betreffende Seite jetzt eine neue Architektur und ein neues Design aufweist.
Darum hab ich dich ja auch darauf hingewiesen dass du in _deinem- anderen Thread problemlos den Titel ändern kannst.
Auch wenn das Problem jetzt augenscheinlich für dich neu ist - für "Fachleute" bzw. potentielle Helfer ist es immer noch dieselbe Thematik - darum wäre es wichtig, solche Diskussionen nicht unnötig zu zerlegen.
Das ist mittlerweile der vierte Thread zu deinem Thema - warum das, egal wie du das drehst, keine gute Idee ist, hast du in der Carta des Forums sicher gelesen.
btw: ich fungiere bei diesem Thema lediglich als Beobachter - ich hab den ersten Thread zwar gelesen, konnte/wollet aber nichts beisteuern - diesen hier lese ich wegen vermutlicher Redundanz aber garnicht - im alten hätte ich weiterverfolgt und ggf. dann auch geantwortet.