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

Objekte an die richtige Stelle platzieren

P

Peerli

Neues Mitglied
Hallo!
Ich bin neu in der HTML-Programmierung und versuche mich gerade an einem Projekt. Ich hänge gerade fest, weil ich ein Menü auf der rechten Seite, in der Mitte ein Bild und auf der linken Seite wieder ein Menü bauen will. Aber die jeweiligen Objekte werden nicht an den Stellen angeordnet, wie ich sie will. Ich möchte versuchen, mit welchen Möglichkeiten es realisierbar ist. Ich habe von Tabellen gehört, aber auch, dass sie viele Nachteile haben sollen. Wie kann ich das noch anderes machen.
Anbei der Code der Startseite:

Danke für jeden Tip.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Startseite</title>
<style type="text/css">

body  {background:#C00;}
.banner {background-position:center; background-color: #FFF; width: auto; height:170px; padding:10px; padding-bottom:10px; border:2px solid #000; }
.links a { width:180px; margin:20px ; padding:5px; border:2px solid #000 ; background: #FFF; display:block; text-align:center;}
.rechts a { width:180px; margin:20px ; padding:5px; border:2px solid #000; background:#FFF; display:block; text-align:center;}
a:link {color:#000; }
.mannschaft { position:absolute; left:450px; top:280px }
</style>

</head>

<body>
<div style align="center" class="banner"><img src="images/logo_FCF.png" />

<div class="links">
<div style align="left">    
  <a href="history.html"><dt>Historie der Friedenau</dt></a><br/>
  <a href="geschichte.html"><dt>Geschichte des FC Friedenau</dt></a><br/>
  <a href="vorstandschaft.html">Vorstandschaft</a><br/>
  <a href="kontakt.html">Kontakt</a><br/>
  <a href="satzung.html">Satzung</a><br/>
</div></div>
<div class="mannschaft">
<img src="Fotos/FC Friedenau Vatertag 2009.jpg" >
</div>
<div class="rechts">
<div style align="right">
  <a href="jahresplan.html"><dt>Jahresplan</dt></a><br/>
  <a href="aktuelles.html"><dt>Aktuelles</dt></a><br/>
  <a href="spielberichte.html"><dt>Spielberichte</dt></a><br/>
  <a href="statistik.html"><dt>Statistik</dt></a><br/>
  <a href="forum.html"><dt>Forum</dt></a><br/>
</div></div>

</body>
</html>
 
Danke w7 für deine antwort.
Ich habe das mal probiert, aber das Ergebnis ist nicht zufriedenstellend. Erstens sind meine Formatierungen des Menüs weg (es sind jetzt keine Button mehr, sondern nur noch ein "Button" und es sind auch keine Links mehr) und zweitens sind die Elemente zwar wo anders, aber immer noch nicht so angeordnet, wie ich oben genannt gern hätte. Hier nochmal der Code. Vielleicht kann mir jemand im Code es richtig zeigen, damit ich es sehe.

Gruss Peer

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Startseite</title>
<style type="text/css">

body  {background:#C00;}
.banner {background-position:center; background-color: #FFF; width: auto; height:170px; padding:10px; padding-bottom:10px; border:2px solid #000; }
#links, #rechts {width:14%; line-height:18px;}
#links { width:14%; margin:20px ; padding:5px; border:2px solid #000 ; background: #FFF; display:block; text-align:center; float:left;}
#rechts { width:14%; margin:20px ; padding:5px; border:2px solid #000; background:#FFF; display:block; text-align:center; float:right}
a:link {color:#000; }
#mannschaft { float:left; width:66%; margin-left:3%;  }
</style>

</head>

<body>
<div style align="center" class="banner"><img src="images/logo_FCF.png" />

<div id="links">
<div style align="left">    
  <a href="history.html"><dt>Historie der Friedenau</dt></a><br/>
  <a href="geschichte.html"><dt>Geschichte des FC Friedenau</dt></a><br/>
  <a href="vorstandschaft.html">Vorstandschaft</a><br/>
  <a href="kontakt.html">Kontakt</a><br/>
  <a href="satzung.html">Satzung</a><br/>
</div></div>
<div id="mannschaft">
<img src="Fotos/FC Friedenau Vatertag 2009.jpg" >
</div>
<div id="rechts">
<div style align="right">
  <a href="jahresplan.html"><dt>Jahresplan</dt></a><br/>
  <a href="aktuelles.html"><dt>Aktuelles</dt></a><br/>
  <a href="spielberichte.html"><dt>Spielberichte</dt></a><br/>
  <a href="statistik.html"><dt>Statistik</dt></a><br/>
  <a href="forum.html"><dt>Forum</dt></a><br/>
</div></div>

</body>
</html>
 
Hallo.

In deinem HTML Code sind noch einige Fehler enthalten.
Schau dir mal deine divs an. Du öffnest ein div mehr als du schliesst.

HTML: 
<div style align="right">
align ist veraltet und sollte nicht mehr benutzt werden.
Benutze statt dessen CSS und text-align.
Das div ist ebenfallst unnötig da du Formatierungen der id rechts geben kannst.
Das selbe gilt natürlich auch für die id links.

HTML: 
<a href="history.html"><dt>Historie der Friedenau</dt></a><br/>
Du benutzt dt aber du hast keine Definitionsliste geöffnet.

Du solltest dein Menü zwar als Liste auszeichnen, aber eine unsortierte Liste ist hier richtig.

Korregiere dein HTML bevor du dich an die Formatierung mit CSS machst.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben