Alte Strucktur?

[Friedel]

Einen schönen guten Abend,

wir erstellen unsere Seite neu und einer meiner Freunde meinte, ich würde alte Technik nehmen, mein Footer sieht so aus:

  
  
<div id="footer">  
	<div class="center">  
	  <div id="footer_content">  
	    <div id="service">  
		  <h4>Was wir bieten</h4>  
				<p>Zwei digitale Studio-Softwares nutzen wir. Zum einen Adobe-Audition 24 Spur Sound-Sampling und zum anderen das Samplitude MX-Plus, Multitrack Recording MR 64. Bedingt durch die knapp bemessene Räumlichkeit können wir keine größere Musiker-Gruppen platzieren.</p>  
                Copyright © 2014 | <a href="#" title="zu unseren Projekten">Eigene Projekte</a> - <a href="impressum.htm" title="zum Impressum">Impressum</a> - <a href="#" title="zu unseren Allgemeine Geschäftsbedingungen">Allgemeine Geschäftsbedingungen</a>  
			</div>  
	    <div id="contact">  
		  <h4>Kontakt</h4>  
				<p class="fon">040 - xxxxx</p>  
				<p class="mail">  
					<a href="kontakt.html">Schreiben Sie uns</a></p>  
			</div>  
		</div>  
	</div>  
</div>  
  

ich frag mich, was daran alt ist? wie würde man das mit neuer Technik umsetzten umgesetzt werden? Sind vielleicht ein paar viele Divs, aber es funktioniert in allen Browsern.

Vielleicht könnt ihr mein zeigen, wie man es anderes umsetzten kann.

Mein CSS sieht so aus:

  
  
#footer {  
	width: 100%;  
	height:143px;  
	clear: both;  
	padding: 19px 0 0;  
	color: #777;  
	background-color: #2e2e2e;  
}  
  
#footer a {  
	color: #777;  
	text-decoration: none;  
}  
  
#footer a:hover {  
	color: white;  
}  
  
#footer h4 {  
	margin: 0 0 1em 0;  
	color: white;  
}  
  
#footer_content {  
	width: 100%;  
	float: left;  
}  
  
.center {  
	width: 980px;  
	margin: 0 auto;  
	position: relative;  
}  
  
#service {  
	width: 655px;  
	padding: 0 50px 0 0;  
	float: left;  
}  
  
#contact {  
	width: 260px;  
	float: left;  
}  
  
#contact p {  
	font-size: 2em;  
	padding: .6em 0 .6em 45px;  
	margin: 0;  
	letter-spacing: 1px;  
	background: url(../icons/fon.gif) left no-repeat;  
}  
  
#contact p.mail {  
	font-size: 1.6em;  
	letter-spacing: 0;  
	background: url(../icons/mail.gif) left no-repeat;  
	margin-top: 11px;  
}  

[Matthias Apsel]

Om nah hoo pez nyeetz, Friedel!

Für den Anfang könntest du im Blog die noch unvollständige Serie zu HTML5 lesen.

Matthias

[M.]

Mahlzeit,

ich frag mich, was daran alt ist? wie würde man das mit neuer Technik umsetzten umgesetzt werden? Sind vielleicht ein paar viele Divs, aber es funktioniert in allen Browsern.

Mal ne Frage. Wenn du zum Abmischen 128 Kanäle brauchst, wo andere mit 16 auskommen, würdest du dann sagen "Was ist daran unnormal? Es funktioniert doch auf allen CD-Playern"?

[Encoder]

ich frag mich, was daran alt ist?

Das hätte ich gleich denjenigen gefragt der mich darauf hingewiesen hätte.

[MrMurphy]

Hallo

ein Grundproblem ist, das veralteter Quellcode auch veraltetes Denken nach sich zieht.

... aber es funktioniert in allen Browsern.

Mutige Aussage. Dann schau dir mal deine Seite auf Tablets und Smartphones an, die aktuell etwa 50% der Geräte ausmachen, mit denen die User im Internet unterwegs sind - mit noch immer stark steigender Tendez.

Es kommt ja nicht nur auf die Browser an (die HMTL5 / CSS3 zudem viel einheitlicher anzeigen als ältere HTML- / CSS-Versionen), sondern auch auf die Geräte, mit denen die User die Seite aufrufen.

Vielleicht könnt ihr mir zeigen, wie man es anderes umsetzten kann.

Gerne.

Erst mal der Footer mit deinen Angaben:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_04_14_friedel_01_veraltetes_html.html

und dann meine Lösung:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_04_14_friedel_02_veraltetes_html.html

Verändere einfach mal die Fensterbreite und rufe die Seiten auch auf einem Smartphone auf. Und frag' unbeteiligte Dritte, welche Version ihnen besser gefällt und welche sie besser / einfacher lesen können.

Gruss

MrMurphy

[M.]

Mahlzeit,

ich hab mir mal die Mühe gemacht, die Seite zu suchen und anzusehen.
Und glaub mir, dein Problem ist nicht der Footer, der ist die ganze Seit.
Mal abgesehen von Schreibfehlern ist das Design aus den 90ern übriggeblieben.

Und dann als Dienstleistung Webseiten nach aktuellen Standard (nicht Standart, wie bei dir) anzubieten, ist schon frech.

Also vergiss deinen Footer und überleg dir ein neues Konzept für die ganze Seite, denn sonst kannst du dir die Arbeit mit dem Footer sparen.

Und nein, kein Link. Wer die Seite finden will, muss ja nur den OP-Text in ne SuMa eingeben.

[Gunnar Bittersmann]

@@Friedel:

nuqneH

<div id="footer">

Wie Matthias schon sagte, dürfte dafür das footer-Element das passende sein. Aber Achtung: footer steht für bestimmte Inhalte, nicht dafür, dass diese unten aud fer Seite angezeigt werden.

<div class="center">

HTML sollte nicht die (gegenwärtig!) gewünschte Darstellung angeben. Weg mit dem div.

<div id="footer_content">

Auch das div ist überflüssig. Was sollte im Footer denn anderes drin sein als Footer-Content?

    <h4>Was wir bieten</h4>  
    <h4>Kontakt</h4>  

Ich vermute mal, dass das in der Überschriftenhierarchie nicht die 4. Ebene ist. Verwende h1…h6 nicht nach der (gegenwärtig!) gewünschte Darstellung, sondern der Reihe nach. Die Schriftgröße legst du mit CSS fest.

#contact p {…}
#contact p.mail {…}

Hier würde ich auch nicht die Deklarationen für "fon" mittels #contact p angeben und für "mail" überschreiben, sondern gemeinsame per #contact p und für "fon" spezielle #contact .fon und die für "mail" per #contact .mail. Das p im Selektor ist überflüssig.

Qapla'