CSS Positionierungs Probleme

balufreak

balufreak

Aktives Mitglied
Thread Starter
Dabei seit
12.10.2003
Beiträge
1.563
Reaktionspunkte
28
Hallo Leute!

Ich habe ein keines Problem. Ich muss bis nächsten Freitag 14:00 Uhr die Page meiner Band fertig haben. Das ist an und für sich kein Problem. Ich kämpfe nur noch mit dem Layout. Inhalte und so muss ich nur noch einfügen.
Also zu meinem Problem:

Auf der Seite http://www.katun.ch/test/index.php?c=1 habe ich ein Hintergrund bild, welches das Design darstellt. Dann habe ich verschiedene Layer darübergelegt(Menu, und Inhalt).Nun habe ich das Problem, dass Je nach Browser und OS (Windows, Mac, FF, IE) das Menü und der Inhalt zuweit rechts oder zu weit links sind. Könnt ihr mir sagen, wie ich das Problem lösen kann?

Hier der HTML Code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Abyss of Fear - Guestbook</title>
    
    <!-- lightbox -->
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <!-- main stylesheet -->
    <link type="text/css" rel="stylesheet" href="./templates/default/styles/style_ie.css" media="screen" />
    
    <!-- lightbox -->
    <script type="text/javascript" src="./templates/default/lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="./templates/default/lightbox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="./templates/default/lightbox/js/lightbox.js"></script>
    
    <!-- main javascripts -->
    <script type="text/javascript" src="./templates/javascript.js"></script>
    
  </head>
  <body>
    <div id="background">
      <div id="menubar">
        <ul>
          <li><a href="index.php?c=1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Band','','./templates/default/images/menu/band_selected.gif',1)"><img name="Band" id="Band" src="./templates/default/images/menu/band.gif" alt="Band" border="0" /></a></li>
          <li><a href="index.php?c=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','./templates/default/images/menu/news_selected.gif',1)"><img name="News" id="News"src="./templates/default/images/menu/news.gif" alt="News" border="0" /></a></li>
          <li><a href="index.php?c=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Media','','./templates/default/images/menu/media_selected.gif',1)"><img name="Media" id="Media" src="./templates/default/images/menu/media.gif" alt="Media" border="0" /></a></li>
          <li><a href="index.php?c=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','./templates/default/images/menu/gallery_selected.gif',1)"><img name="Gallery" id="Gallery" src="./templates/default/images/menu/gallery.gif" alt="Gallery" border="0" /></a></li>
          <li><a href="index.php?c=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gigs','','./templates/default/images/menu/gigs_selected.gif',1)"><img name="Gigs" id="Gigs"src="./templates/default/images/menu/gigs.gif" alt="Gigs" border="0" /></a></li>
          <li><a href="index.php?c=3" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Guestbook','','./templates/default/images/menu/guestbook_selected.gif',1)"><img name="Guestbook" id="Guestbook" src="./templates/default/images/menu/guestbook_selected.gif" alt="Guestbook" border="0" /></a></li>
          <li><a href="index.php?c=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','./templates/default/images/menu/contact_selected.gif',1)"><img name="Contact" id="Contact" src="./templates/default/images/menu/contact.gif" alt="Contact" border="0" /></a></li>
        </ul>
      </div>
      <div id="content">
      </div>    
    </div>
  </body>
</html>

Und hier noch das CSS File:
Code: 
body {
  /*background-color: #000000;*/
  font-family: Verdana, Arial;
  font-size: 12px;
  color:#ffffff;  
  padding:20px;
  margin:0px;
  text-align: center;
  overflow:hidden;
}


#background { 	
  text-align: left;
  vertical-align: middle;	
  margin: 0px auto;
  padding: 260px 0px 0px 0px;
  width: 1024px;
  height:768px;
  background: #000000 url(../images/entwurf2.gif) no-repeat;
}

#menubar {
  position:absolute;
  display:block;
  top:180px;
  left:285px;
  width:1024px;
}

#menubar ul{
margin: 0px;
list-style-type:none;
} 

#menubar li
{ 
  float: left; 
  margin: 0px; 
  padding: 0px;
  list-style-type:none;
} 

#menubar li a 
{ 
  float: left; 
  height: 25px;
  text-decoration: none; 
  padding: 0px;
  /*text-transform: uppercase;*/
  list-style-type:none;
} 
 
#content 
{
  position:absolute;
  display:block;
  overflow:auto;
  text-align:justify;
  top:230px;
  left:315px;
  bottom:50px;
  width:1024px;
  /*padding: 0px 170px 260px 200px;	*/
}

#content h1 
{
	padding-top: 0px;
	font-size:15px;
}

Mir geht es hier wirklich um die Abstände vom linken Bildschirmrand her. Ich möchte einfach, dass das richtig in der mitte is, dass das layout voll ausgenutzt wird.

Kann mir da jemand helfen? Oder gibt es da eine Andere Lösung? eine bessere?
 
entweder du positionierst den hintergrund auch absolut (dann kannst du beide am linken rand ausrichten) oder du trägst beim hintergrund position:relative; und top:0px; left:0px; ein. Dadurch wird dann content in dem hintergrund ausgerichtet. absolut richtet sich immer an den grenzen des letzten objektes aus, dass absolut oder relativ plaziert wurde, maximal am body.
achja, wenn du's zentriert haben willst, dann versuch mal im content den left: left:315px; befehl weg zu lassen. achja, und bottom sollte auch weg, man gibt entweder top oder bottom, bzw left oder right an, sonst gibt's fehler.

Grüße
 
Also ich habs jetzt mit absoluter positionierung gemacht. Irgendwie berechnet der Internetexplorer die Pixel falsch. Naja. habe jetzt zwei verschiedene stylesheets.

Wie mache ich jetzt das aber, dass ich im Textbereich scrollen kann? ich habe overflow schon auf auto. aber der Internetexplorer scheint das zu ignorieren :(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten