nicht angemeldet
Probleme mit der Darstellung des Layouts
0 0 0 0 0 0 0 0 
Matthias Apsel
0 0
1 
Gunnar Bittersmann
0
Probleme mit der Darstellung des Layouts
Ich habe sowohl mit google, als auch in der Forumsuche gesucht, habe aber keine Lösung für mein Problem gefunden.
Die Seite um die es sich handelt : http://tdc.alexpoell.com/yoshi/index.php?id=42
- wenn die seite auf kleinerern Bildschirmen dargestellt wird, dann verschwindet auf der linken Seite das Menü.
- die Schatten links und rechts, das Menü, und der Inhalt werden nicht mit "100%" höhe angezeit, (ihr seht es wenn ihr runter scrollt) sowohl im ie, als auch im ff nicht,
Code:
HTML
<html>
<head>
<title></title>
<meta name="author" content="Johannes Proksch">
<link rel="stylesheet" type="text/css" href="....">
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="schatten_oben"></div>
<div id="schatten_links"></div>
<div id="schatten_rechts"></div>
<div id="grid">
<div id="head">
<div id="logo";><h1 id="h1">HMB</h1></div>
<div id="suche";>###SUCHE### </div>
</div>
<div id="menue_links">
###MENUE###
</div>
<div id="content">
<p id="pfad">###PFAD###</p>
<p id="sprache">###SPRACHE###</p>
<div id="inhalt"> ###INHALT###</div>
</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>
CSS:
#grid{
position:absolute ;
left:50%;
top:10px;
width:1000px;
margin-left:-500px;
background-color:WHITE;
height:100%;
}
body {
background-color:#B7B7B7;
height:auto;
min-height:100%;
}
#h1 {
margin-left:-1100px;
}
#schatten_oben {
/*background-image: url('schatten_oben.jpg');*/
position:relative ;
left:50%;
}
#schatten_links{
background-image: url('schatten_links.jpg');
position:absolute;
top:10px;
left:50%;
top:10px;
width:66px;
margin-left:-566px;
height: auto;
min-height: 100%;
float:left;
background-color:#B7B7B7;
}
#schatten_rechts {
background-image: url('schatten_rechts.jpg');
position:absolute;
top:10px;
left:50%;
top:10px;
width:52px;
margin-left:500px;
height: 100%;
background-color:#B7B7B7;
}
#head {
position:absolute ;
top:0px;
height:137px;
width:900px;
background-color:green;
}
#logo {
background-image: url('logo.jpg');
BORDER-TOP: #000000 1px solid;
position:absolute ;
height:113;
top:0px;
width:1000px;
background-color:WHITE;
}
#suche {
background-image: url('leiste.jpg');
position:absolute ;
text-align:right;
position:relative ;
height:24;
top:113px;
width:1000px;
background-color:WHITE;
}
#menue_links {
overflow:auto;
top:134px;
position:absolute;
background-image: url('menue.jpg');
width:200px;
height: 100%;
}
#content {
position:absolute;
top:137px;
left:200px;
width:800px;
height: 100%;
background-color:WHITE;
}
#pfad {
position:absolute ;
text-align:left;
top:0px;
left:20px;
}
#inhalt {
position:absolute;
background-color:WHITE;
width:600px;
text-align:left;
top:50px;
left:20px;
}
#sprache {
position:absolute ;
text-align:right;
top:0px;
left:650px;
}
-
Moin,
- wenn die seite auf kleinerern Bildschirmen dargestellt wird, dann verschwindet auf der linken Seite das Menü.
- die Schatten links und rechts, das Menü, und der Inhalt werden nicht mit "100%" höhe angezeit, (ihr seht es wenn ihr runter scrollt) sowohl im ie, als auch im ff nicht,
IMHO zentrierst du mit position:absolute; und left:50%. Das ist suboptimal. Zentriere Divs mit margin: auto;
Das hat in meinem Test deine Probleme behoben.Grüße Marco
-
Moin,
für das Layout, was du verwenden willst, brauchst du weder position:relative; noch position:absolute;
Jedenfalls nicht, wenn es so bleibt. Da du feste Beiten verwendest, kannst du mit margin:auto; und mit float arbeiten.Grüße Marco
-
Moin,
- wenn die seite auf kleinerern Bildschirmen dargestellt wird, dann verschwindet auf der linken Seite das Menü.
- die Schatten links und rechts, das Menü, und der Inhalt werden nicht mit "100%" höhe angezeit, (ihr seht es wenn ihr runter scrollt) sowohl im ie, als auch im ff nicht,
IMHO zentrierst du mit position:absolute; und left:50%. Das ist suboptimal. Zentriere Divs mit margin: auto;
Das hat in meinem Test deine Probleme behoben.
Grüße Marco
Danke für die schnelle Antwort!!
kannst du mir sagen wie du des genau gemacht hast?-
Moin,
Danke für die schnelle Antwort!!
kannst du mir sagen wie du des genau gemacht hast?Ich nutze den Chrome, der standardmäßig eine Funktion "Element untersuchen" hat. Dort öffnet sich unten ein Fenster ähnlich wie im Firefox die Firebug-Erweiterung. Und dort kann man explizit verschiedene Sachen an der Seite ändern und live beobachten. Dort habe ich einfach beispielsweise bei dem #grid die Positionsangabe und margin-left entfernt und margin:auto; hinzugefügt. Dann sah die Seite schon sauberer aus. Da du fast alle Divs absolut positioniert hast, musst du aber einige Änderungen mehr vornehmen. Navigation- und Content-Div würde ich beispielsweise auf float:left; setzen.
Die Änderungen in der Übersicht:
#grid { margin:auto; } // die anderen Positionierungsangaben entfernen #head { width:100%; } // die anderen Positionierungsangaben entfernen, height bleibt #menu_links { float:left; } // die anderen Positionierungsangaben entfernen #content {float:left; } // height-Angabe weglassen #sprache { float:right; } // text-align weglassenKann sein, dass ich was vergessen habe, aber so siehts schon ganz gut aus, muss natürlich noch weiter angepasst werden.
Dem #content-Div würde ich natürlich noch die padding-Eigenschaft geben etc. pp.
Grüße Marco
-
Danke Marco!!
habe deine Ratschläge befolgt,
habe jetzt folgendes : http://tdc.alexpoell.com/yoshi/index.php?id=42Problem. In FF wird das menü und der Content nicht bis zum ende angezeigt, im ie schon
danke
-
Moin,
Problem. In FF wird das menü und der Content nicht bis zum ende angezeigt, im ie schon
Du hast vergessen bei #content die height-Angabe zu entfernen. Dann ist zumindest der #content-Div genauso lang, wie dein Inhalt wirklich ist.
Das mit der Navigation geht nicht so einfach. Dazu lies dir bitte den Artikel durch, besonders den Abschnitt "Gleich lange Spalten simulieren"
Insgesamt steht aber auch noch die Aussage von Gunnar, dass man nicht für jeden Furz einen Div braucht. Die CSS-Angaben zum Schatten gibst du dem <html>-Tag. Und die anderen Eigenschaften vom Grid gibst du dem <body>-Tag. Damit ist dann auch der eigentliche Sinn dieser Strukturierung erfüllt.
Grüße Marco
-
Moin,
Problem. In FF wird das menü und der Content nicht bis zum ende angezeigt, im ie schon
Du hast vergessen bei #content die height-Angabe zu entfernen. Dann ist zumindest der #content-Div genauso lang, wie dein Inhalt wirklich ist.übersehen, da hast du recht
Das mit der Navigation geht nicht so einfach. Dazu lies dir bitte den Artikel durch, besonders den Abschnitt "Gleich lange Spalten simulieren"
danke, des ist ur hilfreich, da habe ich bis jetzt nie gute erklärungen gefunden
Insgesamt steht aber auch noch die Aussage von Gunnar, dass man nicht für jeden Furz einen Div braucht. Die CSS-Angaben zum Schatten gibst du dem <html>-Tag. Und die anderen Eigenschaften vom Grid gibst du dem <body>-Tag. Damit ist dann auch der eigentliche Sinn dieser Strukturierung erfüllt.
also wie ich dem html nen schatten geben sollte weiß ich nicht..
der ff kann den body verwenden der ie nichtGrüße Marco
-
Moin,
also wie ich dem html nen schatten geben sollte weiß ich nicht..
der ff kann den body verwenden der ie nichtNatürlich musst du dem Body-Element den Schatten geben, ich hatte mich hier einfach vertan^^
Im FF sieht die Seite doch jetzt sehr gut aus, und auch im IE, nur eben, dass der Schatten fehlt. Dafür kannst du dem Body-Element per CSS Microsoft-spezifische http://de.selfhtml.org/css/eigenschaften/filter.htm@title=Filter geben, beispielsweise filter:DropShadow() oder in deinem Fall wahrscheinlich eher http://de.selfhtml.org/css/eigenschaften/filter.htm#shadow@title=filter:Shadow(). Viel Erfolg.
Grüße Marco
PS: Die Seite sieht im IE genauso gut aus, wie sonst wo. Ich würde keinen zu sehr gesteigerten Wert auf die Korrektheit des Schattens legen. Der Inhalt einer Seite ist IMHO wichtiger, als optische Feinheiten.
-
-
Om nah hoo pez nyeetz, misterunknown!
Die CSS-Angaben zum Schatten gibst du dem <html>-Tag. Und die anderen Eigenschaften vom Grid gibst du dem <body>-Tag.
Beachte bitte, dass du die Eigenschaften den Elementen gibst. (Unterschied Tag-Element)
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, misterunknown!
Die CSS-Angaben zum Schatten gibst du dem <html>-Tag. Und die anderen Eigenschaften vom Grid gibst du dem <body>-Tag.
Beachte bitte, dass du die Eigenschaften den Elementen gibst. (Unterschied Tag-Element)
Das wird vom ie aber nicht richtig dargestellt(vom ff schon)
-
Om nah hoo pez nyeetz, joschi789!
Das wird vom ie aber nicht richtig dargestellt(vom ff schon)
Das war eine Klugscheißer-Mail von mir an Mister Unknown. Ich habe mich mit deiner Seite nicht beschäftigt, kann dir aber sagen, dass vIEle keinen Schatten darstellen können. (Wiki)
Matthias
--
1/z ist kein Blatt Papier.
-
Das war eine Klugscheißer-Mail von mir an Mister Unknown.
wobei unknown in vielen punkten recht hatte( und ich nehme an auch in dem recht haben wird)
ich habe es nicht zusammengebracht des div grid zu entfernen.
das beide divs (Menü und Content) gleich lang dargestellt werden aber sehr wohl,
habe eine ausnahme fürn ie gemacht, damit ihn diese zusätzlichen styles net stören,
http://tdc.alexpoell.com/yoshi/falls jmd wissen will wie genau ich es gemacht habe (code) einfach melden
-
-
-
Moin,
Die CSS-Angaben zum Schatten gibst du dem <html>-Tag. Und die anderen Eigenschaften vom Grid gibst du dem <body>-Tag.
Beachte bitte, dass du die Eigenschaften den Elementen gibst. (Unterschied Tag-Element)Ja, das stimmt, ich habs auch selbst gemerkt gehabt, dass das so nicht stimmen kann, aber man kann hier seine Beiträge leider nicht bearbeiten. Ich gewöhne mir aber gerade an, die gute Vorschau-Funktion zu nutzen :)
Grüße Marco
-
-
-
-
-
@@joschi789:
nuqneH
<div id="schatten_oben"></div>
<div id="schatten_links"></div>
<div id="schatten_rechts"></div>Für den Schatten brauchst du keine 'div'-Elemente. Weg damit! Nutze die Möglichkeiten von CSS!
<div id="grid">
Auch dieses 'div' ist überflüssig. Nutze die Möglichkeiten von CSS!
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Moin,
Für den Schatten brauchst du keine 'div'-Elemente. Weg damit! Nutze die Möglichkeiten von CSS!
Wird das in allen gängigen Browsern umgesetzt? Ich meinte gehört zu haben, der IE hätte da Probleme...
Grüße Marco
-
@@misterunknown:
nuqneH
Wird das in allen gängigen Browsern umgesetzt? Ich meinte gehört zu haben, der IE hätte da Probleme...
Der IE hätte da Filter …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
@@joschi789:
nuqneH
<div id="schatten_oben"></div>
<div id="schatten_links"></div>
<div id="schatten_rechts"></div>Für den Schatten brauchst du keine 'div'-Elemente. Weg damit! Nutze die Möglichkeiten von CSS!
danke =) habs jetzt mit css gelöst:
-moz-box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; -webkit-box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; filter: progid:DXImageTransform.Microsoft.Shadow(strength=10 ,color=gray,direction=0) progid:DXImageTransform.Microsoft.Shadow(strength=50,color=gray,direction=90) progid:DXImageTransform.Microsoft.Shadow(strength=50,color=gray,direction=275);<div id="grid">
Auch dieses 'div' ist überflüssig. Nutze die Möglichkeiten von CSS!
Qapla'
grid habe ich behalten, da der schatten um grid herum liegt
lg
-
Moin,
Auch dieses 'div' ist überflüssig. Nutze die Möglichkeiten von CSS!
grid habe ich behalten, da der schatten um grid herum liegtDas Grid musst du nicht behalten, wenn du die Tags <html> und <body> mit CSS-Eigenschaften belegst. Damit hast du es dann auch einfacher die gleich langen Spalten zu simulieren.
Grüße Marco
-
-
-
UPDATE!!
ich habe eure Ratschläge befolgt und habe nun folgendes : http://tdc.alexpoell.com/yoshi/index.php?id=42
Ich verwende nun kein einziges position mehr, und keine divs für schatten.
Die Darstellung im FF hat dennoch fehler, (scrollt einfach runter dann seht ihr es)
Die Darstellungim IE funktioniert.HTML~~~html <html>
<head>
<title>Harramach Managment Beratung</title>
<meta name="author" content="Johannes Proksch">
<meta name="editor" content="html-editor phase 5">
<meta name="keywords" content="unternehmensberatung, wirtschaftstraining, erfolgskontrolle, weiterbildung, kennzahlen, beratung, benchmarks, controlling,coaching, e-learning, betriebliche, social, teamwork, skills, schlüsselqualifikationen, central, eastern , european, trainings, osteuropa, organizational,personnel, development, persönlichkeitsentwicklung, evaluation, bildung, gruppentraining, führung, leadership, conflictmanagement, cooperation, communication, motivation, moderation, experiential, learning, human resource management">
<meta name="description" content="Sie bekommen einen ÃÅ“berblick über HARRAMACH & PARTNER; unser Trainernetzwerk, unsere Philosophie, unser Angebot, unsere Events und speziellen Services für unsere Kunden und Interessenten. -------- You get an overview about HARRAMACH & PARTNER, our trainer´s network, our philosophy, our offer, our events and special services for our customers and prospects."><link rel="stylesheet" type="text/css" href="styles_neu.css">
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="grid"><div id="head">
<div id="logo";><h1 id="h1">Harramach Managment Beratung</h1></div>
<div id="suche";>###SUCHE### </div>
</div>
<div id="menue_links">
###MENUE###
</div><div id="content">
<p id="pfad">###PFAD###</p>
<p id="sprache">###SPRACHE###</p>
<div id="inhalt">###INHALT### </div>
</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>CSS:~~~css #grid{ margin:0px auto; top:10px; width:1000px; min-height:100%; height:100%; background-color:GREEN; -moz-box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; -webkit-box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; box-shadow: 8px 8px 100px #666, -8px 8px 100px #666, 8px -8px 100px #666; filter: progid:DXImageTransform.Microsoft.Shadow(strength=10 ,color=gray,direction=0) progid:DXImageTransform.Microsoft.Shadow(strength=50,color=gray,direction=90) progid:DXImageTransform.Microsoft.Shadow(strength=50,color=gray,direction=275); } body { background-color:#B7B7B7; height:100%; height:auto; margin:10px 0px; padding:0px; text-align:center; } html { height:100%; height:auto; } #h1 { margin-left:-11100px; } #schatten_links{ background-image: url('schatten_links.jpg'); width:25px; height: 100%; background-color:#B7B7B7; float:left; } #schatten_rechts { background-image: url('schatten_rechts.jpg'); width:25px; float:right; background-color:#B7B7B7; } #head { top:0px; height:136px; width:1000px; background-color:blue; } #logo { background-image: url('logo.jpg'); /*BORDER-TOP: #000000 1px solid;*/ height:113; top:0px; width:1000px; background-color:WHITE; } #suche { background-image: url('leiste.jpg'); text-align:right; height:23; top:113px; width:1000px; background-color:WHITE; } #menue_links { top:137px; float:left; background-image: url('menue.jpg'); width:200px; height:100%; } #content { float:left; width:800px; height: 100%; background-color:WHITE; } #pfad { float:left; text-align:left; top:0px; padding:10px; } #sprache { float:right; text-align:right; top:0px; padding:10px; } #inhalt { float:left; margin-left:20px; width:600px; text-align:left; }
