nicht angemeldet
Probleme mit div Layouts
0 0 0 
MudGuard
Probleme mit div Layouts
Hallo alle zusammen,
ich spiel grad ein bisschen mit divs herum und hab bei zwei Sachen Probleme.
Beim 1. Fall würde ich gerne die Anzeige der Scrollleisten verhindern. Hier der Code.
<html>
<head>
<style type="text/css">
#ebene1 {
position:absolute;
}
#ebene2 {
position:absolute;
}
#shadow{
position:relative;
width:800px;
height:600px;
background-color:#F0F4D6;
border:1px solid #000000;
}
#head{
position:relative;
width:950px;
height:80px;
background-color:#F0F4D6;
border:1px solid #000000;
top:-602px;
}
#links{
position:relative;
top:-580px;
left:-415px;
width:120px;
height:220px;
background-color:#F0F4D6;
border:1px solid #000000;
}
#meistGemietet{
position:relative;
top:-802px;
width:600px;
height:150px;
background-color:#F0F4D6;
border:1px solid #000000;
}
#mitte{
position:relative;
top:-780px;
width:600px;
height:300px;
background-color:#F0F4D6;
border:1px solid #000000;
}
#rechts{
position:relative;
left:+415px;
top:-1256px;
width:120px;
height:220px;
background-color:#F0F4D6;
border:1px solid #000000;
}
</style>
</head>
<body>
<div align="center" valign="middle" >
<div>
<div id="shadow">hintergrund</div>
</div>
<div>
<div id="head">kopf</div>
<div id="links">testMenüLinks</div>
<div id="meistGemietet">Meist</div>
<div id="mitte">mitte</div>
<div id="rechts">rechts</div>
</div>
</div>
</body>
</html>
Wie kann ich das machen?
Beim 2. Fall wird das Bild nicht angezeigt:
<html>
<head>
<style type="text/css">
body{
background-color:f0f0f0;
font-family:Arial;
font-size: 12px;
}
#ebene1 {
position:absolute;
}
#ebene2 {
position:absolute;
}
#shadow{
position:relative;
width:800px;
height:600px;
background-color:#e1e1e1;
border:1px solid #000000;
}
#head{
position:relative;
width:950px;
height:70px;
background-color:#cadef8;
border:1px solid #000000;
top:-602px;
}
#links{
position:relative;
top:-580px;
left:-395px;
width:160px;
height:220px;
background-color:#ffffff;
border:1px solid #000000;
}
#eSuche{
position:relative;
top:-560px;
left:-395px;
width:160px;
height:50px;
background-color:#ffffff;
border:1px solid #000000;
}
#meistGemietet{
position:relative;
top:-852px;
width:600px;
height:150px;
background-color:#ffffff;
border:1px solid #000000;
}
#mitte{
position:relative;
top:-830px;
width:600px;
height:300px;
background-color:#ffffff;
border:1px solid #000000;
}
#rechts{
position:relative;
left:+395px;
top:-1306px;
width:160px;
height:220px;
background-color:#ffffff;
border:1px solid #000000;
}
div.navi{
height: 25px;
width:120px;
background-color:#cadef8;
border:1px solid #000000;
margin: 5px 5px 5px 5px;
backgound-image:url(button.jpg)
}
div.rand{
width:140px;
background-color:#b3b3b3;
border: 1.9px dashed #000000;
margin: 5px 5px 5px 5px;
}
div.button{
backgound-image:url(button.jpg);
}
</style>
</head>
<body>
<div align="center">
<div>
<div id="shadow">hintergrund</div>
</div>
<div>
<div id="head">
<div> logo</div>
<div> text</div>
</div>
<div id="links">
<div class="rand">
<div class="navi">Link</div>
<div class="navi">Link</div>
</div>
<div class="rand">
<div class="navi">Link</div>
<div class="navi">Link</div>
</div>
</div>
<div id="eSuche">
<div class="rand">
<div class="button">Link</div>
</div>
</div>
<div id="meistGemietet">Meist</div>
<div id="mitte">mitte</div>
<div id="rechts">
<div class="rand">
<div class="navi">Link</div>
<div class="navi">Link</div>
</div>
</div>
</div>
</div>
</body>
</html>
Was hab ich falsch gemacht?
-
Hallo,
Beim 1. Fall würde ich gerne die Anzeige der Scrollleisten verhindern.
Die CSS-Eigenschaft overflow hilft dir dabei bestimmt.
Beim 2. Fall wird das Bild nicht angezeigt:
Die Bilddatei sollte in Hochkommas stehen:
background-image('button.jpg'); Bei dieser Angabe muss sich das Bild im selben Verzeichnis wie die Stylesheetdatei befinden (in diesem Fall das selbe, in dem auch die HTML-Datei liegt).Was hab ich falsch gemacht?
Ziemlich viel!
Dein Quelltext besteht ja nur aus <div>, das ist keinen deut besser als Tabellendesings.Als allererstes empfehle ich dir die Verwendung eines Doctypes, welcher die Browser in den standardkonfomren Modus versetzt.
Dann solltest du dich mit strukturellen Elementen wie Listen, Absätzen und Überschriften außeinandersetzen.
Versuche nicht einfach, mit <div> und absoluter Positionierung Tabellen nachzubauen, versuche stattdessen mit den ganz einfachen Mitteln ein gutes Design zu erstellen, während du die Struktur des Dokuments sinnvoll zusammenstellst.Gruß;
-
Hallo Daniel,
zu deinem 1. Punkt: Es gehören keine einfachen Anführungszeichen in dieses CSS-Attribut (Hier:http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=hintergrundbild+css). Müsste also auch so gehen, wenn das Bild im richtigen Verzeichnis liegt.
Nächster Punkt: Standart-Layouts (am Besten noch mit schicken Inline-Frames) kann man doch heute in Zeiten des dynamischen und schicken neuen Webs niemanden mehr anbieten. Für mich sieht das Beispiel von Martin eher nach einem Grobgerüst aus, in dem bisher noch keine Textformatierung wie Überschriften und Absätze vorhanden sind. Wie würdest du ein Design mit mehreren Ebenen ohne DIVs bauen? Und im Gegensatz zu Tabellen, laden DIVs bekanntlich schneller.
Gruß
-
Hallo,
zu deinem 1. Punkt: Es gehören keine einfachen Anführungszeichen in dieses CSS-Attribut (Hier:http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=hintergrundbild+css). Müsste also auch so gehen, wenn das Bild im richtigen Verzeichnis liegt.
Hatte ich vermutlich falsch in Erinnerung. Danke.
Nächster Punkt: Standart-Layouts (am Besten noch mit schicken Inline-Frames) kann man doch heute in Zeiten des dynamischen und schicken neuen Webs niemanden mehr anbieten. Für mich sieht das Beispiel von Martin eher nach einem Grobgerüst aus, in dem bisher noch keine Textformatierung wie Überschriften und Absätze vorhanden sind. Wie würdest du ein Design mit mehreren Ebenen ohne DIVs bauen? Und im Gegensatz zu Tabellen, laden DIVs bekanntlich schneller.
Mag sein, dass ich es etwas radikal angehe. Aber sieh der den Quelltext trozdem an.
Dort befinden sich neun <div>s, vom Design im Browser würde ich nur sechs vermuten, von denen mindestens zwei durch andere Elemente ersetzt werdden könnten (Je nach Aufgabe der Blöcke auf vier).Ich möchte sicher niemanden entmutigen, die Praxis zeigt nur leider, dass sich manche zu viel von <div>Design erhoffen, dabei aber wirklich strukturierende Elemente vernachlässigen.
Gruß
-
Morgen ;-)
du hast sicher recht, dass man die äußeren DIVs ersetzen könnte. Die Grundstruktur find ich aber dennoch ok. Mag sein, dass es daran liegt, dass ich auch viele DIVs verwende ;-)
Gruß
-
-
-
-
Hallo Martin,
ich habe den Fehler gefunden, der dazu führt, dass dein Bild nicht angezeigt wird. Vor "url" muss hier ein Leerzeichen:
div.button{
backgound-image: url(button.jpg);
}Wenn du es im richtigen Verzeichnis hast, müsste das Bild nun angezeigt werden.
Gruß
-
Hi,
ich habe den Fehler gefunden, der dazu führt, dass dein Bild nicht angezeigt wird. Vor "url" muss hier ein Leerzeichen:
Nein, muß es nicht.
div.button{
backgound-image: url(button.jpg);ein r geschickt platziert im Namen der Eigenschaft sollte helfen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-