• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

{position: relative;} & der Platzhalter...

T

Tarekc

Neues Mitglied
Guten Abend,

bin gerade an meinem ersten HTML/CSS Projekt. Das Layout ist nun fertig. Bevor ich mich jedoch an den Inhalt mache, stört mich noch das unterhalb des ganzen Layouts, dort wo Elemente durch position:relative verschoben wurden jetzt ein ewig großer Platzhalter ist. Ich stelle meinen .html und .css code mit rein und hoffe man kann mir hier weiterhelfen :D

<body>
<div id="wrap"/>
<div id="layout">
<img src="layout1.png" border="0" alt="mainbox" width="750px" />
</div> <!-- Ende Layout-->

<div id="auswahlleiste">
<img src="auswahlleiste.png" border="0" alt="mainbox" width="770px" />
</div> <!-- Ende Auswahlleiste-->

<div id="bodenleiste">
<img src="bodenleiste.png" border="0" alt="mainbox" width="696px" />
</div> <!-- Ende Bodenleiste-->


<div id="auswahlleistetext"/>
<nobr>
<a href="index.html"><img src="startseite.png" style="border: 0;" width="150px" height="18px"/></a>
<a href="bestellservice.html"><img src="bestellservice.png" style="border: 0;" width="150px" height="18px"/></a>
<a href="pflegehinweise.html"><img src="pflege.png" style="border: 0;" width="150px" height="18px"/></a>
<a href="unser team.html"><img src="unser team.png" style="border: 0;" width="150px" height="18px"/></a>
<a href="kontakt.html"><img src="kontakt.png" style="border: 0;" width="150px" height="18px"/></a>
</nobr>
</div> <!-- Ende Auswahlleistetext-->

<div id="bodenleistetext">
<a href="bodenleistetext.htm"><img src="bodenleistetext.png" style="border:0" width="240px"/></a>
</div> <!-- Ende Bodenleiste Text -->


<div id="sidebar">
<p><a href="schnittblumen.html"><img src="schnittblumen.png" style="border:0" width="170px"/></a></p>
<p><a href="topfpflanzen.html"><img src="topfpflanzen.png" style="border:0" width="170px"/></a></p>
<p><a href="dekoration.html"><img src="dekoration.png" style="border:0" width="170px"/></a></p>
<p><a href="gartenundbalkon.html"><img src="gartenundbalkon.png" style="border:0" width="170px"/></a></p>
<p><a href="hochzeit.html"><img src="hochzeit.png" style="border:0" width="170px"/></a></p>
<p><a href="beerdigung.html"><img src="beerdigungen.png" style="border:0" width="170px"/></a></p>
<p><a href="veranstaltungen.html"><img src="veranstaltungen.png" style="border:0" width="170px"/></a></p>
<p><a href="zubehoer.html"><img src="zubehoer.png" style="border:0" width="170px"/></a></p>
<p><a href="firmenservice"><img src="firmenservice.png" style="border:0" width="170px"/></a></p>
</div> <!--Ende Sidebar-->

<div id="hauptbereich">
<div id="haupttext">
<h2>Willkommen</h2>
<p>*Text gekürzt*</p>
</div> <!-- Ende Haupttext-->
</div><!-- Ende Hauptbereich-->
</div> <!-- Ende wrap-->
</body>
</html>





....und natürlich der .css code



@charset "utf-8";
/* CSS Document */

body {
background-attachment:fixed;
background-image:url(test.jpg);
background-repeat: no-repeat;}

#wrap {
height:1024px;
width:740px;
margin:0 auto;}

#auswahlleiste {
position: relative;
right: 22px;
bottom: 550px;}

#bodenleiste {
position: relative;
left: 50px;
bottom: 50px;}

#startseite {
position: relative
left: 15px;
bottom: 563px;}

div#auswahlleistetext a {
position: relative;
right: 15px;
bottom: 600px;}

#bodenleistetext {
position: relative;
left: 500px;
bottom: 87.5px;}

#sidebar {
position: relative;
right: 20px;
bottom: 580px}
h2, div#haupttext p {
position: relative;
text-align: center;
color: #003300;
width: 400px;
left: 260px;
bottom: 1020px;}



Vielen Dank im vorraus
Liebe Grüße
Tarek
 
Verzichte auf absolute wie auch relative Positionierung in diesen Ausmaßen - dann hast Du auch nicht das Problem mit überzähligem Platz.

Hinweis: Verwende bitte Code-Tags wenn Du Quellcode ins Forum postest.
 
Hallo,

über deine Struktur solltest du dir ein wenig Gedanken machen. So wie es scheint, hast du alles in einem Verzeichnis drin.

Hier mal ein paar kleine Anmerkungen:

- Div-Tags werden nicht mit /> geschlossen so wie <img /> oder <input />, sie werden mit </div> geschlossen.
- Bei den Anchor-Tags solltest du einen title="" Attribut mit einfügen, so wäre es auch für dich Übersichtlicher .. über SEO reden wir da ein ander mal
- position: relative musst du nicht jedes mal angeben, dies ist von Haus aus schon auf relative gestellt
- Du verwendest eine CSS-Datei und hast dennoch bei allen <img /> Tags einen style-Vermerk drin, dies lässt sich einfacher mit Klassen (in diesem Fall zumindest, da es sich wiederholt) elegant bewerkstelligen.. besser noch wäre ein verallgemeinender img {border: none;}
- So wie es scheint, hast du einen recht großen Monitor .. Bedenke auch, dass es noch User gibt, die nur 1024x768 große Monitore haben, somit entstehen hässliche und überflüssige Scrollbalken
- Es sieht u.a. stark nach Dreamweaver aus, stelle da mal ein, dass du eine sinnvollere Formatierung des CSS- und HTML-Quelltextes haben möchtest, es ist grausam zu lesen und sehr unübersichtlich

Beispiel:

HTML: 
.pfannkuchen {
  height: 123px;
  width: 123px;
}

bzw.

HTML: 
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

Besser noch wäre, wenn du dir mal SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) ansiehst, dieses riesige Nachschlagwerk ist nicht nur für Anfänger da und beantwortet mit großer Sicherheit jede Frage die man rund um HTML und CSS haben kann.


lascaux
 
Zuletzt bearbeitet:
ist mir nur gerade aufgefallen: die position ist normalerweise nicht auf relative, sondern auf static ([CSS]position[/CSS])! Ohne eine Angabe von top, right, bottom und left verhält sich relative aber wie static.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben