|
|||
Grobe Fehler?
Guten Abend-
Habe kein wirkliches Problem, vorerst. Habe alle WYSIWYG-Programme gelöscht, und lerne CSS mit einem Editor. (ja, ungewohnt, zeitaufwendig, lese unheimlich viel...) Habe nun eine erste Seite erstellt. Eigentlich ist alles ok. Sieht genauso aus, wie ich will. (Sorry, habe die Bilder/texte nicht verändert, sollte ich? soll keine Werbung sein) Nun: Will CSS richtig lernen. Habe ich grobe Fehler gemacht, wo ihr sagt: "ne, so geht das garnicht"? Nicht von der Gestaltung her, das ist Geschmackssache.... Will nur für die Zukunft "richtig" gehen.... Danke für Tipps- Stichwörter reichen. Peter Da ist die Seite in der Ansicht: jfc-foto fotos von Jan Friedemann Chemnitz Wo sind meine Bedenken? - habe fast alle DIVs absolute. - habe viele style Einträge im Kopf (ja, die gehören extern...) und würde noch mehr hinzufügen, z.B. für Das Zitat im Kopf nun der Code: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jfc-foto fotos von Jan Friedemann Chemnitz</title> <link rel="shortcut icon" href="logo.ico" type="image/x-icon" /> <style type="text/css"> <!-- /*----------------------------Allgemein-----------------------*/ body { color: gray; background-color: #101010; padding: 0; margin: 0; font-family:verdana, sans-serif; font-size:small; line-height: 1.3em; } p { margin:0px; padding-top:5px; padding-bottom:5px; } .imgFuss /*formatierung der Bilder*/ { float: left; margin-left:10px; border-radius: 10px; } .imgButton { float:left; margin-right:10px; margin-top:10px; } #logo { /*wegen der abgerundeten Ecken, sonst unnötig*/ margin-left:20px} ul { margin:0px; padding:15px; } h1 { font-size:0.9em; color: white; margin:0px; display:inline; } /*----------------------------Die Container-----------------------*/ #wrapper { /*Zentriert den Inhalt im Browser*/ position:relative; top:50px; width:1000px; height:800px; z-index:1; margin-left:auto; margin-right:auto; background-color: #303030; border-radius: 10px; } #kopf { /*der Logo-Bereich*/ position:absolute; top:10px; left: 10px; width:980px; height:100px; z-index:2; background-color: #101010; border-radius: 10px; } #Spruch { /* Das Zitat im kopfbereich */ position:absolute; left:578px; top:19px; width:370px; height:75; z-index:1; font-size:1.0em; } #main { /*umschliesst Kontakt, Portrait, content_oben, content_mitte*/ position:absolute; top:121px; left:9px; width:980px; height:460px; z-index:12; background-color: #303030; border-radius: 10px; } #kontakt { /*Kontaktdaten*/ position:absolute; top:350px; left:341px; width: 356px; } #content_oben { /*Vorstellung*/ position:absolute; top:0; left:338px; width: 640px; height:175px; } #content_mitte { /*Die Shops*/ position:absolute; top:194px; left:338px; width: 640px; height:122px; } #portrait { /*Das Portrait*/ position:absolute; left:0; top:0; width:320px; height:460px; z-index:2; } #fuss { /*der div mit der Fotoleiste*/ position:absolute; top:590px; left:10px; width:980px; height:180px; z-index:2; background-color: #101010; padding-top:10px; padding-bottom:10px; border-radius: 10px; } #facebook { /*Facebook-Button*/ position:absolute; top:205px; left:574px; width:61px; height:58px; } --> </style> </head> <body> <div id="wrapper"> <div id="kopf"> <div id="logo"> <img src="logo.gif" alt="logo" /></div> <div id="Spruch"> Fotografieren ist wie schreiben mit Licht, wie musizieren mit Farbtönen, wie malen mit Zeit und sehen mit Liebe.<br /> © Almut Adler (http://www.almut-adler.de) </div> </div><!-- Ende kopf --> <div id="main"> <div id="portrait"><img src="IMG_6289-1.jpeg" alt="he_himself" width="320" height="460" /> </div> <div id="kontakt"> <h1>Kontakt</h1> <p>Jan Friedemann, Talstraße 38, 09117 Chemnitz,<br /> info@jfc-foto.de, 0176/ 70910571</p> <h1>Studio</h1> <p> Augustusburger Straße 102, 09126 Chemnitz 102</p> </div> <!-- Ende kontakt --> <div id="content_oben"> <h1>Sie suchen einen Fotografen für:</h1> <ul> <li>Hochzeit</li> <li>Babybauchfotos</li> <li>Babyfotos</li> <li>Familie Portraits</li> <li>Bewerbungsfotos</li> </ul> <p>professionell im Studio oder ganz entspannt bei Ihnen zu Hause? <br /> Dann melden Sie sich bei uns und vereinbaren Sie einen Termin mit uns (gern Samstag)!</p> </div> <!-- Ende content oben --> <div id="content_mitte"> <a href="http://jfc-shop.fineartprint.de"><img class="imgButton" src="button.gif" alt="Button"></a> <p>Ihre Fotos auf Leinwand, Poster, Tapete, Acrylglas etc. <br /> Sie können auch aus Millionen anderer Bilder wählen.... </p> <br /> <a href="http://jfc-foto.fotoportopro.de/"><img class="imgButton" src="button.gif" alt="Button"></a> <p>Bestellen Sie Bilder von Ihrem Fotoshooting <br /> oder von einer Veranstaltung </p> <br /> <div id="facebook"> <a href="https://www.facebook.com/JFCfoto?fref=ts"><img src="fb.gif" alt="facebook" /></a></div> </div> <!-- Ende content mitte --> </div> <!-- Ende Main --> <div id="fuss"> <!--der Bildbereich--> <img class="imgFuss" src="6.jpg" width="120" height="180" alt="Bild 1"> <img class="imgFuss" src="2.jpg" width="120" height="180" alt="Bild 2"> <img class="imgFuss" src="3.jpg" width="120" height="180" alt="Bild 3"> <img class="imgFuss" src="4.jpg" width="120" height="180" alt="Bild 4"> <img class="imgFuss" src="5.jpg" width="120" height="180" alt="Bild 5"> <img class="imgFuss" src="7.jpg" width="120" height="180" alt="Bild 6"> <img class="imgFuss" src="8.jpg" width="180" height="180" alt="Bild 7"> </div> <!--Ende Bildbereich--> </div> <!-- Ende Wrapper --> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Des weiteren würde ich mir auf alle Fälle eine einheitliche Schreibweise angewöhnen.
Z.B.: selektor { eigenschaft: wert; } In deinem Dokument gibt es teilweise diese Varianten selektor { ... } bzw. eigenschaft:wert; eigenschaft: wert; Vor allem bei späteren Nacharbeiten freut sich das Auge wenn's einheitlich geschrieben ist /edit auch bei den Selektoren würde ich eine Linie fahren, entweder du schreibst diese groß oder klein, mit der Vergabe von ID's würde ich auch aufpassen (#facebook ist sehr gefährlich, eine ID sollte/darf pro Seite nur 1 mal vorkommen). Entweder genauere Bezeichnungen verwenden oder mit Klassen + Verschachtelungen arbeiten. |
|
|||
Danke, noch ne Frage
Zitat:
Kann man einstellen, dass sich die Schrift auf diese Weise NICHT vergrößern lässt? (Bestimmt... denn meine anderen Seiten, mit irgendwelchen anderen Programmen gemacht, vergrößern die Schrift nicht) Der "normale" Zoom funktioniert.... Und: Stimmt, die Codeformatierung ist nicht optimal, ich werde da mal Regeln für mich aufstellen. Danke euch Beiden.... Peter |
|
|||
Zitat:
Ändere es so das es auch bei Schriftvergrösserung gut aussieht. Dazu musst du dich allerdings vom Design mit absoluter Positionierung verabschieden. Webseiten sind nun mal keine gedruckten Produkte. Bedenke auch das es verschiedene Monitorgrössen und auch Smartphones gibt und darüber hinaus auch verschiedene Auflösungen. Das beste ist immer die Schrift mit 1em voreinzustellen und danach die Schriftgrössen für Überschriften etc. zu bestimmen. Du musst dein Design flexibel gestalten. Ein gutes Design lässt die Webseite auch doppelter Schriftgrösse noch anständig aussehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
soweit verstanden...
Also, auf dem Smartphone, dem Tablet und versch. Compis sieht die Seite vom Layout her gleich aus- insofern habe ich da schon geguggt- nur die Schriftvergrößerung per Browservoreinstellung zerhaut das Layout.
Habe das prinzipiell verstanden, warum. Versuche in Zukunft (das ist nur ne Testseite) auf absolute Positionierung zu verzichten und solche Dinge einzuplanen... (Und, ja, ich komme aus der Druckecke, da hat alles seinen festen Platz ) Zitat:
Das Problem ist damit behoben, denke ich.... Egal was ich im Browser einstelle, die Seite bleibt gleich. Danke euch. |
|
||||
Hallo
Zitat:
Zitat:
Zitat:
Solche Seiten will auch heutzutage kein Besucher mehr. Niemand besucht eine Seite wegen der Optik. Zitat:
Es gibt keine Vorschrift wie du deine Seite erstellen musst. Aber wenn du dich der Entwicklung verweigerst kannst du für deine Seite weder Lob ernten noch Besucher anlocken. Die Information steht im Vordergrund. Entsprechend sollten auch moderne Seiten erstellt werden. Die Information fehlt aber bei dir aber noch komplett und soll sich dann wahrscheinlich deinem Layout anpassen. So wird das erfahrungsgemäß nichts. Also erst die Information, dann die Semantik, dann die flexible Anpassung an die unterschiedlichen Ausgabegeräte. Und dann noch etwas Design, je weniger, desto besser. Am besten also ganz weglassen. Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Fehler: character ";" not allowed in attribute specification list | Schaum | Javascript & Ajax | 2 | 20.01.2011 14:54 |
Fehler bzw. Warnungen für eine Lightbox | empfei | (X)HTML | 3 | 24.10.2009 15:27 |
Firefox Validator Extension - grobe Fehler | heiko_rs | (X)HTML | 16 | 26.03.2007 18:06 |
Kleiner Fehler bei Opera und IE -> Bitte Hilfe! | ONeill | CSS | 10 | 11.08.2006 14:40 |