CSS Positionierungs Probleme

  1. balufreak

    balufreak Thread Starter MacUser Mitglied

    Mitglied seit:
    12.10.2003
    Beiträge:
    1.556
    Zustimmungen:
    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?
     
    balufreak, 13.11.2006
    #1
  2. starknights

    starknights MacUser Mitglied

    Mitglied seit:
    31.05.2004
    Beiträge:
    211
    Zustimmungen:
    16
    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
     
    starknights, 13.11.2006
    #2
  3. balufreak

    balufreak Thread Starter MacUser Mitglied

    Mitglied seit:
    12.10.2003
    Beiträge:
    1.556
    Zustimmungen:
    28
    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 :(
     
    balufreak, 13.11.2006
    #3
Die Seite wird geladen...
Ähnliche Themen - CSS Positionierungs Probleme
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    306
    wegus
    10.04.2017
  2. rockyV
    Antworten:
    5
    Aufrufe:
    561
    MacMaitre
    02.04.2017
  3. hello
    Antworten:
    1
    Aufrufe:
    238
    beage
    12.09.2015
  4. Hoooray
    Antworten:
    2
    Aufrufe:
    328
    Hoooray
    21.07.2015
  5. Kemna
    Antworten:
    6
    Aufrufe:
    569
    Kemna
    03.04.2015