Layout - Art und Weise wie man es macht (und IE-Problem)

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

bin gerade am basteln für ein neues Layout (siehe angehängte Grafik 1).

Ich habe bis jetzt das Grundgerüst und dieses ist laut Validator (w3c) auch valide.
Im FF, Opera und Safari (PC) wird alles so wie ich es will angezeigt.
Der IE 7 (andere habe ich bisher nicht getestet fügt statt 7px für padding-top in # footer einfach den doppelten Wert ein (siehe Grafik 2).

Hat jemand eine Idee warum das so ist?

Ausserdem würde mich interessieren was Ihr hier von dieser Art und Weise wie ich mein Layout gliedere halte und ob Ihr denkt, dass es besonders im #mitte bzgl. der Ausrichtung und Größe der Boxen bei anderen Browsern probleme geben könne.

Hier mal meine Quelltexte:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>

<title>Hier der Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Hier die Seitenbeschreibung" />
<meta name="keywords" content="Hier die Schlüsselwörter" />
<link href="./screen.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<div id="container">

	<div id="header">
	
        <div class="box" id="box1">
          <b class="top">
            <b class="r1"></b><b class="r2"></b>
            <b class="r3"></b><b class="r4"></b>
          </b>
          <div><br />Hier ist der Header<br /><br /></div>
          <b class="bottom">
            <b class="r4"></b><b class="r3"></b>
            <b class="r2"></b><b class="r1"></b>
          </b>
        </div>
	
	</div>
	
	<div id="mitte">
	
		<div id="links">
		
			<div id="links1">
                <div class="box" id="box2">
                  <b class="top">
                    <b class="r1"></b><b class="r2"></b>
                    <b class="r3"></b><b class="r4"></b>
                  </b>
                  <div>Hier kommt die Navigation hinein<br /><br /><br /><br /></div>
                  <b class="bottom">
                    <b class="r4"></b><b class="r3"></b>
                    <b class="r2"></b><b class="r1"></b>
                  </b>
                </div>
            </div>
            
            <div class="box" id="box3">
              <b class="top">
                <b class="r1"></b><b class="r2"></b>
                <b class="r3"></b><b class="r4"></b>
              </b>
              <div>Das ist eine Infobox<br /><br /><br /><br /><br /><br /></div>
              <b class="bottom">
                <b class="r4"></b><b class="r3"></b>
                <b class="r2"></b><b class="r1"></b>
              </b>
            </div>
		
		</div>
		
		<div id="rechts">
		
			<div class="box" id="box4">
              <b class="top">
                <b class="r1"></b><b class="r2"></b>
                <b class="r3"></b><b class="r4"></b>
              </b>
              <div>Hier kommt der Content hinein<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
              <b class="bottom">
                <b class="r4"></b><b class="r3"></b>
                <b class="r2"></b><b class="r1"></b>
              </b>
            </div>
		
		</div>	
	
	</div>

	<div id="footer">
	
		<div class="box" id="box5">
          <b class="top">
            <b class="r1"></b><b class="r2"></b>
            <b class="r3"></b><b class="r4"></b>
          </b>
          <div>Dies ist der Footer bereich</div>
          <b class="bottom">
            <b class="r4"></b><b class="r3"></b>
            <b class="r2"></b><b class="r1"></b>
          </b>
        </div>
	
	</div>

	<div id="footer2">
		Das w&auml;re jetzt noch ein weiterer Footer
	</div>





</div>



</body>
</html>
HTML: 
body {
	background-color:#DDDDDD;
	margin: 0px;
}


#container {
	width: 780px;
	margin: 10px auto 10px auto;
}

#header {
	margin-bottom: 7px;
}

#links {
	float:left;
	width: 155px;
}
#links1 {
	padding-bottom: 7px;
}

#rechts {
	float:right;
	width: 618px;
}

#footer {
	clear:both;
	padding-top: 7px;
}
#footer2 {
	padding-top: 7px;
}

.box {background: white;}
.box h1, .box p, .box div {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #DDDDDD;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: white;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

#box1 {
	width: 780px;
}
#box2 {

}
#box3 {

}

#box4 {

}
 

Anhänge

  • tutorials0000.jpg
    tutorials0000.jpg
    38,5 KB · Aufrufe: 29
  • tutorials0001.jpg
    tutorials0001.jpg
    44,7 KB · Aufrufe: 25
Hi,

stelle den normalen Textfluss innerhalb des Containers #mitte wieder her.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>

<title>Hier der Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Hier die Seitenbeschreibung" />
<meta name="keywords" content="Hier die Schlüsselwörter" />
<style type="text/css">
  <!--
body {
	background-color:#DDDDDD;
	margin: 0px;
}


#container {
	width: 780px;
	margin: 10px auto 10px auto;
}

#header {
	margin-bottom: 7px;
}

#links {
	float:left;
	width: 155px;
}
#links1 {
	padding-bottom: 7px;
}

#rechts {
	float:right;
	width: 618px;
}

#footer {
	clear:both;
	padding-top: 7px;
}
#footer2 {
	padding-top: 7px;
}

.box {background: white;}
.box h1, .box p, .box div {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #DDDDDd;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: #fff;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

#box1 {
	width: 780px;
}
#box2 {

}
#box3 {

}

#box4 {

}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 //-->
</style>
</head>
<body>

<div id="container">

	<div id="header">

        <div class="box" id="box1">
          <b class="top">
            <b class="r1"></b><b class="r2"></b>
            <b class="r3"></b><b class="r4"></b>
          </b>
          <div><br />Hier ist der Header<br /><br /></div>
          <b class="bottom">
            <b class="r4"></b><b class="r3"></b>
            <b class="r2"></b><b class="r1"></b>
          </b>
        </div>

	</div>

	<div id="mitte" class="clearfix">

		<div id="links">

			<div id="links1">
                <div class="box" id="box2">
                  <b class="top">
                    <b class="r1"></b><b class="r2"></b>
                    <b class="r3"></b><b class="r4"></b>
                  </b>
                  <div>Hier kommt die Navigation hinein<br /><br /><br /><br /></div>
                  <b class="bottom">
                    <b class="r4"></b><b class="r3"></b>
                    <b class="r2"></b><b class="r1"></b>
                  </b>
                </div>
            </div>

            <div class="box" id="box3">
              <b class="top">
                <b class="r1"></b><b class="r2"></b>
                <b class="r3"></b><b class="r4"></b>
              </b>
              <div>Das ist eine Infobox<br /><br /><br /><br /><br /><br /></div>
              <b class="bottom">
                <b class="r4"></b><b class="r3"></b>
                <b class="r2"></b><b class="r1"></b>
              </b>
            </div>

		</div>

		<div id="rechts">

			<div class="box" id="box4">
              <b class="top">
                <b class="r1"></b><b class="r2"></b>
                <b class="r3"></b><b class="r4"></b>
              </b>
              <div>Hier kommt der Content hinein<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
              <b class="bottom">
                <b class="r4"></b><b class="r3"></b>
                <b class="r2"></b><b class="r1"></b>
              </b>
            </div>

		</div>

	</div>

  <div id="footer">
  			<div class="box" id="box5">
          <b class="top">
            <b class="r1"></b><b class="r2"></b>
            <b class="r3"></b><b class="r4"></b>
          </b>
          <div>Dies ist der Footer bereich</div>
          <b class="bottom">
            <b class="r4"></b><b class="r3"></b>
            <b class="r2"></b><b class="r1"></b>
          </b>
        </div>

	</div>

	<div id="footer2">
		Das w&auml;re jetzt noch ein weiterer Footer
	</div>

</div>
</body>
</html>

Ciao
Quaese
 
Hey super,

das hat schonmal funktioniert - vielen Dank dafür!

Und was haltet Ihr im allgemeinen von diesem Quelltext?
Macht man sowas - bzw. könnte man es "schöner" oder besser machen?
 
Servus Sven,

es geht doch nichts über konstruktive Kritik. :eek: ;)

Also ich gehe mal davon aus, dass so wie ich es mache es auch "Stand der Technik" ist.
 
Hi,

Was sollen denn die vielen <b>-Tags im Dokument? Wenn man den Inhalt fett dargestellt haben möchte, macht man das per CSS.

LG
 
Hi,

dwex hat gesagt.:
Die <b>-Tags sind offensichtlich für die runden Ecken da
Zum Vergrößern anklicken....

richtig, ich hatte nicht groß drauf geachtet und die Bilder auch nicht angeschaut... :-(

Das ist schon ein moderner Weg, runde Ecken zu realisieren. Der Nachteil sind halt tatsächlich die vielen Elemente, die man dazu braucht. Alternativ kann man das aber auch mit Javascript machen. Schau dir mal den Artikel Nifty Corners: rounded corners without images an. Das Javascript macht zwar im Prinzip auch nichts anderes, als die erforderlichen b-Tags zu generieren, dafür bekommen Suchmaschinen aber übersichtlicheren, rein semantischen HTML-Code zu sehen. Benutzer mit deaktiviertem Javascript sehen dann halt einfach das gleiche Layout mit nicht abgerundeten Ecken. Ich persönlich finde diese Variante besser.

LG
 
Hallo,

das bedeutet, dass der Code über Java-Script von Herrn Google lieber gesehen wird - sehe ich das richtig?
 
Hi,

dwex hat gesagt.:
das bedeutet, dass der Code über Java-Script von Herrn Google lieber gesehen wird - sehe ich das richtig?
Zum Vergrößern anklicken....

Ob eine Suchmaschine etwas "gerne sieht" oder nicht, sei mal dahingestellt. In erster Linie durchsucht sie Deinen Content. Und da ist es durchaus sinnvoll, ein HTML-Dokument rein semantisch auszuzeichnen, statt bei jedem Inhaltselement eine Suppe aus leeren Tags drum herum zustopfen. Da ein Bot kein Javascript ausführt, bekommt er diese Suppe auch nicht zu sehen.

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück