zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Layout-Check

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2016, 11:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2015
Beiträge: 13
chpo7234 befindet sich auf einem aufstrebenden Ast
Standard Layout-Check

Hallo Leute,

könntet ihr mal über mein Layout schauen und eventuell Feedback geben, ob irgendetwas besser zu machen wäre? Ob ich HTML/CSS richtig angewandt habe und die Vorgehensweise stimmt?

Bei dem Design habe ich halt viel Wert auf responsives Design gelegt:


http://www2.pic-upload.de/img/30548790/preview1.png



http://[img]http://www2.pic-upload.d....png[/img]


HTML (http://pastebin.com/aA32Ueg6):
HTML-Code:
<html>
	<head>
		<link href="style.css" rel="stylesheet">
		<meta charset="utf-8">
		<link rel="icon" href="chart.ico" />
	</head>
	
	<body>
		<div class="naviwrap">
			<ul class="navigation">
				<li class="logo"><a href="#">Testimeter</a></li>
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Lorem</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	
		<div class="contentwrap">
			<div class="content">
				<h1>PHP Florchart</h1>
				
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
				
				<h2>At vero eos et accusam</h2>
				
				Et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

				<h3>Lobortis nisl ut aliquip</h3>
				
				<img src="diagram.jpeg"</img>
		
				<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

				<br /><br /><input type="text" class="txt" placeholder="Gebe etwas ein!"/>
				
				<br /><input type="button" class="btn btnDarkBlue" value="Senden &rsaquo;&rsaquo;"/>
				
				<br /><input type="button" class="btn btnLightBlue" value="Abschicken &rsaquo;&rsaquo;"/>
				
				<br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

				<br /><br /><center><a href="http://www.google.de">Hier kannst du auf einen Link klicken</a></center>
				
				<br />Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

				<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

				<br /><br />At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
			</div>
		</div>
	</body>

</html>
CSS (http://pastebin.com/PSRE2K77):
PHP-Code:
body {
    
margin-top20px;
    
margin-bottom20px;

    
background:url(bg.pngno-repeat center center fixed;
    -
webkit-background-sizecover;
    -
mozb-background-sizecover;
    -
o-background-sizecover;
    
background-sizecover;

    
line-height1.4;
    
font-family"Helvetica Neue"HelveticaArialsans-serif;
    
font-size21px;
}

div.naviwrap{
    
background-color#FFB266;
    
border-radius5px;
    
width1100px;
    
margin-leftauto;
    
margin-rightauto;    

    
font-size15px;
    
    -
webkit-box-shadow0px 0px 19px 9px rgba(255,255,255,0.6);
    -
moz-box-shadow0px 0px 19px 9px rgba(255,255,255,0.6);
    
box-shadow0px 0px 19px 9px rgba(255,255,255,0.6);
}

ul.navigation {
    list-
stylenone;
    
    
display: -webkit-box;
    
display: -moz-box;
    
display: -ms-flexbox;
    
display: -webkit-flex;
    
displayflex;
    -
webkit-flex-flowrow wrap;
    
justify-contentflex-start/* noetig? */
}

div.contentwrap{
    
background-imagelinear-gradient(to top#FFB266 0%, #FFB575 50%);    
    
width1100px;
    
margin-leftauto;
    
margin-rightauto;
    
margin-top20px;
    
overflowauto;
    
border-radius5px;
    -
webkit-box-shadow0px 0px 19px 9px rgba(255,255,255,0.7);
    -
moz-box-shadow0px 0px 19px 9px rgba(255,255,255,0.7);
    
box-shadow0px 0px 19px 9px rgba(255,255,255,0.7);
}

div.content{
    
margin-right70px;
    
margin-left70px;
    
margin-top50px;
    
margin-bottom50px;
}

ul.navigation a {
    
displayblock;
    
padding1em;
}
{
    
text-decorationnone;
    
color#585858;
}

a:hovera:focus {
    
color#404040;
    
font-weightbold;
}

ul.navigation > .active  a{
    
background#F4A460;
}

li.logo{
    
font-weight800;
}

h1h2h3 {
    
font-weight100;
    
margin-left10px;
}

img{
    
border-radius6px;
    
max-width100%;
}

input.btn{
    
color#FFFFFF;
    
displayblock;
    
width100%;
    
    
border1px solid transparent;
    
border-radius6px;
    
    
font-size18px;
    
line-height1.3;
    
    
padding10px;
    
cursorpointer;
}

input.btnDarkBlue{
    
background-color#337ab7;
}

input.btnDarkBlue:hover{
    
background-color#285f8f;
}

input.btnLightBlue{
    
background-color#5bc0de;
}

input.btnLightBlue:hover{
        
background-color#31b0d6;
}

input.txt{
    
displayblock;
    
width100%;
    
height34px;
    
padding6px;
    
font-size14px;
    
line-height1.4;
    
color#555;
    
background-color#fff;
    
border1px solid #ccc;
    
border-radius4px;
    
fontinherit;
}

@
media all and (max-width1150px) {
    
div.naviwrap{
        
width850px;
    }

    
div.contentwrap{
        
width850px;
    }
}

@
media all and (max-width880px) {
    
div.naviwrap{
        
width600px;
    }

    
div.contentwrap{
        
width600px;
    }
}

/* Menue-Umbruch */
@media all and (max-width650px) {
    
body{
        
margin-top5px;
        
margin-bottom5px;
    }

    
div.naviwrap{
        
widthauto;
    }

    
div.contentwrap{
        
margin-top0px/* ??? */
        
widthauto;
    }

    
ul.navigation {
        -
webkit-flex-flowcolumn wrap;
        
flex-flowcolumn wrap;
        
text-aligncenter;        
        
padding0px;
    }

    
ul.navigation a{
        
padding6px;
        
border-top1px solid rgba(255,255,255,0.3);
        
border-bottom1px solid rgba(0,0,0,0.1);
    }

    .
navigation li:last-of-type a{
        
border-bottomnone;
    }
    
    
div.content{
        
margin-left10px;
        
margin-right10px;
        
margin-top5px;
    }
}

@
media all and (max-width350px) {
    
body{
        
font-size16px;
    }
    
    
div.naviwrap{
        
font-size12px;
    }
    
    
div.content{
        
margin-top0px;
    }
    
    
input.btnLightBlue{
        
font-size10px;
    }
    
    
input.btnDarkBlue{
        
font-size10px;
    }
    
    
input.txt{
        
font-size12px;
    }
    
    
h1h2h3 {
        
margin-left2px;
    }

Wenn soweit alles korrekt ist, würde ich in die "Smartphone-Ansicht" mittels JavaScript noch ein- und ausklappbar machen.

MfG

Geändert von chpo7234 (04.05.2016 um 11:38 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2016, 11:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zum Layout gehören auch die Farben, wieso hast du hier so ein orange gewählt? Das macht den Text nicht gerade leserlich und wirkt auch nicht so, als ob er gut gewählt wurde. Eher nach "Was für eine Farbe nehme ich da jetzt, mal schauen, was im Photoshop dabei rauskommt".
Was ich damit sagen will: Am besten sind Texte dann lesbar, wenn ein hoher Kontrast zwischen Hintergrund + Text besteht. Deshalb findet man auch oft Texte auf weißem HG, bzw. (wie hier im Forum) auf einem sehr hellen. Alternativ einen weißen Text auf einem schwarzen (dunklen) HG.

Auch sieht das Layout jetzt nicht sonderlich "spektakulär" aus. Eine einfache Breite, da hättest du die Breite auch mit width:90%, min-width: 600px angeben können und hättest dir mediaqueries für spezielle Breiten für content & navi erspart. Ja, auch das ist "responsive"

Zum Thema CSS+HTML:
Wozu diese divitis, sprich das content-div im contentwrap, die navigation im navi-wrap. Bei dem simplen Layout brauchst du diese wrapper nicht.
Wieso wird auf der einen Seite versucht, responsive zu sein und auf der anderen dann wieder mit fixen px-Werten (Schriftgröße, Breiten, mediaqueries, etc) gearbeitet? Damit macht man es sich nur unnötig kompliziert.
Das content-div wird per margin eingerückt, wieso nicht ein padding auf den content-wrap?
Was Präfixe anbelangt: Informiere dich, bei welchen Eigenschaften diese heute noch nötig sind, Infos dazu findest du zB auf caniuse.com
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.05.2016, 13:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2015
Beiträge: 13
chpo7234 befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine vielen Ratschläge! Das hat mir sehr sehr gut weiter geholfen!

Die Farben waren nun eher sporadisch gewählt. Der Kontrast-Tipp ist bei großen Textabschnitten sicher sehr hilfreich. Für den späteren Verwendungszweck wird aber wahrscheinlich nicht auf viel Text gesetzt. Generell wird über die Farbwahl jedoch trotzdem noch mal nachgedacht.

Der Tipp mit width:80% ist wunderbar! Die zahlreichen media-Queries haben mich sowieso gestört - das war reinste Fummelarbeit. Danke!

Die Wrapper habe ich nun auch entfernt. Top! Der Body wurde nun mit der Breitenangabe bestückt und im "content"-div wurde auf Padding zurück gegriffen. Jetzt ist mir auch endlich der Unterschied zwischen Padding/Margin klar geworden....

Generell Prozentangaben statt fixe Werte zu verwenden halte ich auch für besser. Jedoch sehe ich dann bei der Schriftgröße keinen erkennbaren Unterschied, wenn ich die Seite kleiner/größer mache. Vielleicht ist das ja eine Auflösungs-Sache..

Wegen dem Hinweis zu den Präfixen bedanke ich mich auch noch mal!

Wenn ich die fixen Werte so wie die Präfixe angepasst wurden, kann ich den Code ja hier noch mal beifügen.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.06.2016, 17:46
Benutzerbild von haupti
Neuer Benutzer
neuer user
 
Registriert seit: 21.04.2016
Beiträge: 7
haupti befindet sich auf einem aufstrebenden Ast
Standard

Das Orange fiel mir auch als erstes negativ auf...
__________________
Irgendwas ist ja immer...
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
Layout Check wftico Site- und Layoutcheck 6 05.11.2011 00:45
Layout Check wegen Grafiken und Ladezeit andreak Site- und Layoutcheck 18 12.06.2008 17:07
Layout Check claude Site- und Layoutcheck 7 13.11.2007 17:19
3-spalten-layout --> boxen nebeneinander positionieren nevermind CSS 9 03.01.2006 13:08
sich selbst vergrößernde Spacer Runsky CSS 17 30.12.2005 19:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:45 Uhr.