CSS Positionierungs Probleme

Diskutiere mit über: CSS Positionierungs Probleme im Web Page Design Forum

  1. balufreak

    balufreak Thread Starter MacUser Mitglied

    Beiträge:
    1.560
    Zustimmungen:
    28
    Registriert seit:
    12.10.2003
    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?
     
  2. starknights

    starknights MacUser Mitglied

    Beiträge:
    211
    Zustimmungen:
    16
    Registriert seit:
    31.05.2004
    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
     
  3. balufreak

    balufreak Thread Starter MacUser Mitglied

    Beiträge:
    1.560
    Zustimmungen:
    28
    Registriert seit:
    12.10.2003
    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 :(
     
Die Seite wird geladen...
Ähnliche Themen - CSS Positionierungs Probleme Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
Google meldet sich bezüglich Web-Design Web Page Design 28.02.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014

Diese Seite empfehlen

Benutzerdefinierte Suche