zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Grobe Fehler?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2013, 20:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2013, 23:30
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Saxxon Beitrag anzeigen
Wo sind meine Bedenken?
- habe fast alle DIVs absolute (positioniert).
Das geht so nicht.
Vergrößere mal die Schrift (z.B Firefox: Ansicht > Zoom > Nur Text zoomen).
Die Inhalte können sich nicht ausweichen und überdecken sich.
Zitat:
Zitat von Saxxon Beitrag anzeigen
- habe viele style Einträge im Kopf (ja, die gehören extern...) und würde noch mehr hinzufügen,....
Ich meine das ist OK wenn es eine "One Page" Seite bleibt.
__________________
MfG
Jens
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.05.2013, 02:45
Benutzer
neuer user
 
Registriert seit: 05.05.2013
Beiträge: 37
CaptainGerrard befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.05.2013, 12:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard Danke, noch ne Frage

Zitat:
Zitat von plastiko Beitrag anzeigen
Das geht so nicht.
Vergrößere mal die Schrift (z.B Firefox: Ansicht > Zoom > Nur Text zoomen).
.
ok, stimmt.
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
Mit Zitat antworten
  #5 (permalink)  
Alt 05.05.2013, 13:49
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Saxxon Beitrag anzeigen
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)
Nein, das kann man nicht unterbinden, ebensowenig kannst du beeinflussen, wenn der Benutzer deine Schrift nicht mag und sich eine andere Schriftart/grösse voreingestellt hat. In beiden Fällen sieht deine Seite dann schlecht aus.

Ä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.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.05.2013, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2013
Beiträge: 15
Saxxon befindet sich auf einem aufstrebenden Ast
Standard 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:
Zitat von explanator Beitrag anzeigen
Nein, das kann man nicht unterbinden, ebensowenig kannst du beeinflussen,...
Ok, habe jetzt im Code die Schriftgröße in px eingestellt-
Das Problem ist damit behoben, denke ich....
Egal was ich im Browser einstelle, die Seite bleibt gleich.

Danke euch.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2013, 03:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Ausrufezeichen

Es ist zwar jedem selbst überlassen, aber ich finde Denglisch ist in der Programmierung absolut daneben.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2013, 08:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Und, ja, ich komme aus der Druckecke, da hat alles seinen festen Platz
Und genau das ist dein Problem. Wenn du das nicht überwinden kannst, kannst du keine guten Webseiten erstellen. Das merkt man auch an deinen Angabe

Zitat:
habe fast alle DIVs absolute
deutlich. Du willst alles bestimmen und dem User vorgeben und sogar

Zitat:
Kann man einstellen, dass sich die Schrift auf diese Weise NICHT vergrößern lässt?
in seine Einstellungen eingreifen. So wurden Seiten vor 15 Jahren erstellt - und von den Besuchern abgestraft. Die sind schlicht verschwunden.

Solche Seiten will auch heutzutage kein Besucher mehr. Niemand besucht eine Seite wegen der Optik.

Zitat:
auf dem Smartphone, dem Tablet und versch. Compis sieht die Seite vom Layout her gleich aus
Und genau das ist ein Problem. Die Darstellung muss sich auf die Ausgabegröße und das Ausgabemedium anpassen. Die Richtung ist durch die Entwicklung der Hardware und von HTML5/CSS3 eindeutig vorgegeben.

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:39 Uhr.