Boxen neben zentrierter Seite platzieren - css

**schokotoast** · 29. 04. 2012, 21:15

Guten Abend!
Ich bin gerade dabei meine Internetseite www.suffilix.de wieder mal in Angriff zu nehmen und ich habe jetzt auch schon so die Grundstruktur da.

Mein Problem:
Ich möchte die Boxen für YouTube, Twitter und Facebook gerne rechts neben die Hauptseite machen.
Ich habe schon diverses ausprobiert wie mit float oder Tabellen und ich schaffe es einfach nicht die Boxen ordentlich neben der Seite zu platzieren.

Nochmal zum besser vorstellen könne, hier ein Bild wie es ungefähr aussehen soll:

Der HTML Code von der Seite

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--Meta Tags-->
<meta name="author" content="Marcus Jaeger"/>
<meta name="description" content="Beispielseite fuer ein Forntend einer Datenbak"/>
<meta name="keywords" content="Kamera, Hamburg, Verleih, Datenbank, Frontend"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow"/>

<!--CSS Einbindung-->
<link rel="stylesheet" type="text/css" href="style.css">

<!--Titel-->
<title>
Suffilix - Start
</title>

<!--Seite-->
<body>

<!--Banner-->
<div id="top" class="top">
<img src="banner_top.jpg" alt="" border="0" width="1000" height="150" usemap="#social">
<map name="social">
<area shape="rect" alt="Facebook" title="" coords="769,36,816,82" href="https://www.facebook.com/pages/suffilixde/315043791886398" target="_blank" />
<area shape="rect" alt="Youtube" title="" coords="839,36,885,82" href="http://www.youtube.com/user/suffilix/videos" target="_blank" />
<area shape="rect" alt="Twitter" title="" coords="909,36,955,82" href="https://twitter.com/#!/suffilix" target="_blank" />
</map>
</div>

<!--Menue-->
<div id="menu" class="menu">
<a href="index.html"><img src="start.png" border="none" alt="start" width="130" height="50"></a><a href="impressum.html"><img src="impressum.png" border="none" alt="order" width="130" height="50"></a>
</div>

<!--Inhalt-->
<div id="content" class="content">



</div>

</body>
</html>

Und nochmal der Css Code:

Code:

#top {
  margin:3px auto;
  height: 150px;
  width: 1000px;
  background-color: #000000;
}

#menu {
  margin:3px auto;
  padding-left: 22px;
  height: 50px;
  width: 978px;
  background-color: #E0E0E0;
}

#content {
  margin:3px auto;
  padding: 20px;
  height: 600px;
  width: 960px;
  background-color: #ededed;
}

a:link {
color: grey;
text-decoration: underline;
}

a:hover  {
text-decoration: underline overline;
font-style: italic;
}

a:visited {
color: grey;
text-decoration: underline;
}

Mit freundlichen Grüßen
schokotoast

**epiphora** · 30. 04. 2012, 12:15

Abhängig davon, ob die Kästchen Deinen Wrapper mit ausrichten sollen oder nicht, würde ich einen anderen Aufbau wählen.

Oberes Bild:
Die Kästen gehören mit zu dem Bereich, der mittig ausgerichtet werden soll.

HTML-Code:

<div id="wrapper">
   <div class="left">
      <div id="menu">...</div>
      <div id="content">...</div>
   </div>
   <div class="right">
      <div class="box">...</div>
      <div class="box">...</div>
   </div>
</div>

Code:

#wrapper{
   margin: 0 auto;
   width: 1000px;
}
#wrapper > .left{
   float: left;
   width: 950px;
}
#wrapper > .right{
   float: left;
   width: 50px;
}

Unteres Bild:
Hier ist lediglich der Inhalt mittig zentriert und die Kästchen nehmen keinerlei Einfluss auf dessen Ausrichtung.

HTML-Code:

<div id="wrapper">
   <div id="menu">
      <div class="boxes">
         <div class="box">...</div>
         <div class="box">...</div>
      </div>
      ...
   </div>
   <div id="content">...</div>
</div>

Code:

#wrapper{
   margin: 0 auto;
   width: 1000px;
}
#menu{
   position: relative;
}
#menu > .boxes{
   position: absolute;
   right: -75px;
   width: 50px;
}