Ergebnis 1 bis 7 von 7

Thema: Positionierung der Container

  1. #1
    HTML Newbie
    Registriert seit
    23.06.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Positionierung der Container

    Hallo zusammen,

    ich habe für die Kneipe von meiner Mutter eine Homepage gebastelt, www.kegelbistro-gifhorn.de. Leider habe ich immer noch ein großes Problem damit, die einzelnen Container zentriert darzustellen, so dass sie bei allen Browsern und Bildschirmgrößen mittig erscheinen. Mit der Höhe haut auch was nicht hin. Wo liegt mein Problem? Würde mich freuen wenn Ihr mir helfen könntet.

    Vielen Dank

    Tophy

    http://www.kegelbistro-gifhorn.de

    Code:
    @charset "UTF-8";
    * {margin: 0px; padding: 0px; }
    
    /*Verläufe*/
    body{ 
          min-width: 700px;
          max-width: 1100px;
          height:  1000px;
          margin: 0 auto;
          position:relativ;
    background: #ebf1f6; /* Old browsers */
    background: -moz-linear-gradient(top, #ebf1f6 0%, #89c3eb 1%, #abd3ee 50%, #d5ebfb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(1%,#89c3eb), color-stop(50%,#abd3ee), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
    }
    
    
    /*Design*/
    
    
    #header{      
             width: 700px;
            height:153px;
            background: url(Headerneu.png) no-repeat;
            position: absolute;
               top: 13px;    
            left:600px;
            border-radius: 18px;
                    }
                    
    /* Styling Klapp-Menü */
    
                
    #navigation > ul  {  position: absolute;
                     top: 173px;    
                  left:615px;    
                  padding: 5px 30px; background: url(Leist.png) no-repeat; 
                 z-index:1;
            }                
    
    /* Navigation Layout-Aufklappfunktion (ohne Styling) */
    
    #navigation ul{ margin: 0 0 px 0; padding: 0px; }
    #navigation ul li{ display: inline;position:relative; }
    #navigation ul ul,#navigation ul ul { display: none; }
    #navigation ul ul li, #navigation ul ul li {display: block; }
    #navigation ul li:hover> ul {display: block; position: absolute; left: 0px; }
    #navigation ul li:hover> ul {top: 100%; }
    #navigation ul ul li:hover ul {left: 100%; top:0px;  }
    
            
        
    #navigation  a { 
    color:#D20014; text-decoration: none;}
        
    #navigation ul li{   background: url (Leist.png) no-repeat; position: 10px;    
                      font-weight: bold;
                      padding: 5px;
     } 
    
    #navigation ul li:hover a { text-decoration:none;
             color: blue; 
    }
    
    #navigation ul ul li{
              background: url(Leist.png) no-repeat; repeat-x; padding: 7px 10px;
     }
    /*Text Home*/
    
    #Hauptbild  {   position: absolute;    
                    top: 200px;
                    left: 600px;
                    width: 700px;
                   height:600px;
                    background:  url(Home.png) no-repeat ; 
                    border-radius: 18px;
                    
                   }
    
    #Kind          {   font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    position: absolute;    
                    top: 200px;
                    left: 620px;
                   width: 180px;
                   height:300px;
                   padding: 30px;
                   margin: 20px;
                    background: #F0FFF0 url(002.jpg) no-repeat 40px 70px;                 
                     }  
    #Kind  h1 {  font-size:1.5em; color:#D20014; font-weight:bold; 
                    font-family:"Georgia";
                    position: relative;    
                    top: -10px;
                    left: 150px;               
                  } 
             
    
                     
                     
    /*Kindergeburtstag*/
    #Kindergeburtstag{ 
                  font-family:"Helvetica", "Verdana", "sans-serif";
                    font-size:1.0em;
                    font-weight:bol;
                    position: absolute;    
                    top: 180px;
                    left: 580px;
                   width: 640px;
                   height:580px;
                   padding: 30px;
                   margin: 20px;
                   background:#F8F3F8 url(Kindergeburtstag.png)no-repeat 265px 35px ;
                   border: 5px solid #FFFFFF;
                    border-radius: 18px;
                  
                  }
    #Kindergeburtstag h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    }
    
    /*Impressum*/
    #Impressum  {
                      font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    position: absolute;    
                    top: 180px;
                    left: 580px;
                   width: 630px;
                   height:500px;
                   padding: 30px;
                   margin: 20px;
                    background: #F8F3F8 url(030.jpg) no-repeat 380px 95px;
                    border: 5px solid #FFFFFF;
                    border-radius: 18px;
    }
    
    #Impressum  h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    
    }
    /*Gastronomie*/
    #Speise   {font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    font-weight:bol;
                    position: absolute;    
                    top:180px;
                       left:830px;
                  width: 375px;
                  height:645px;
                   padding: 30px 30px 30px 32px;
                   margin: 20px;
                   background: #F8F3F8 url(003.jpg)no-repeat 30px 450px;
                   border: 5px solid #FFFFFF;                
                    border-top-right-radius:18px;
                    border-bottom-right-radius:18px;
    }
    
    #Oeffnung {font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    font-weight:bol;
                    position: absolute;    
                    top: 180px;
                       left: 580px;
                    width: 240px;
                    height:645px;
                   padding: 30px 0px 30px 30px;
                   margin: 20px;
                   background: #F8F3F8 url(008.jpg)no-repeat 30px 450px;
                   border: 5px solid #FFFFFF;                
                    border-top-left-radius:18px;
                    border-bottom-left-radius:18px;
                   }
    
    
    #Oeffnung h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    
    }
    #Oeffnung h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.0em; color:black;
    }
    
    /*Events*/
    
    #Events {font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em; 
                    position: absolute;
                    top:190px;                
                   left: 590px;
                  height:590px; 
                  width: 640px;
                   padding: 30px;
                   margin: 10px;
                   background: #F8F3F8 url(Gruppe1.jpg)no-repeat 310px 80px;
                   border: 5px solid #FFFFFF;
                    border-radius: 18px;
    }
    #Events h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    }
    #Events h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.0em; color:black;
    }
    /*Frühstück*/
    #Frühstück    {font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em; 
                    position: absolute;    
                    top:180px;
                       left: 580px;
                  width: 638px;
                  height:590px;
                   padding: 30px 30px 30px 32px;
                   margin: 20px;
                   background:  #F8F3F8 url(frueh.png) no-repeat 260px 30px;
                   border: 5px solid #FFFFFF;
                    border-radius: 18px;
                   
                  }
    #Frühstück h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    }              
    
    #Frühstück h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.0em; color:black;
    }            
                  
    /*Familienkegeln*/
    #Familienkegeln {font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    font-weight:;
                    position: absolute;    
                    top:180px;
                       left: 580px;
                  width: 640px;
                  height:570px;
                   padding: 30px 30px 30px 32px;
                   margin: 20px;
                   background: #F8F3F8 url(Familie1.png)no-repeat 255px 35px;
                   border: 5px solid #FFFFFF;
                    border-radius: 18px;
                  }    
    #Familienkegeln h1{font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    }              
    /*Kegelspaß*/
    #Kegelspaß {  font-family:"Georgia","Sergio UI","tahoma","Verdana";
                    font-size:1.0em;
                    position: absolute;
                    font-weight:;
                    top: 180px;
                    left: 580px;
                   width: 640px;
                   height:570px;
                   padding: 30px;
                   margin: 20px;
                    background: #F8F3F8 url(Kegelspass.png)no-repeat 230px 35px;
                    border: 5px solid #FFFFFF;
                    border-radius: 18px;
                  }              
    #Kegelspaß h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
    font-size:1.5em; color:#D20014;
    }    
    
    /*footer*/
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Positionierung der Container

    Baue ein div ein, dem du eine Breite und margin:0 auto; verpasst. In diesem Div packst du dann den kompletten Inhalt rein. Siehe http://www.ohne-css.gehts-gar.net/0001.php

    Hier solltest du auch mal drüber sehen: http://validator.w3.org/check?verbos...-gifhorn.de%2F

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Positionierung der Container

    @Bandit
    Das hat er doch, nennt sich body.

    Nimm mal alle positionierungen heraus.
    Body braucht nur ein width von 700 px.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    23.06.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Positionierung der Container

    Danke für die schnellen Antworten.

    Wenn ich die Positionierungen raus nehme, dann ist doch alles ganz links?!

    Weiß jetzt nicht was ich machen soll.

  5. #5
    Bandit
    Gast

    Standard AW: Positionierung der Container

    Ich wiederhole mich ja gerne, siehe http://www.ohne-css.gehts-gar.net/0001.php

  6. #6
    Unregistriert
    Gast

    Standard AW: Positionierung der Container

    @Bandit,

    Danke für die Antwort. Hab' einiges probiert, leider ohne Erfolg. Brauche bitte mal einen heißen Tipp wo ich Anfangen soll.

    Schönen Sonntag noch.

    Tophy

  7. #7
    Bandit
    Gast

    Standard AW: Positionierung der Container

    Hallooooo???? Jemand zu Hause? Hier hast du den ultimativen Tipp: http://www.ohne-css.gehts-gar.net/0001.php
    Ansehen Copy/Paste und deinen Inhalt reinpacken. Wo ist jetzt dein Problem?

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 06.12.2012, 18:48
  2. CSS Positionierung
    Von jensnrw im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 17.05.2009, 18:32
  3. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 14:13
  4. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 18:56
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 20:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •