Ergebnis 1 bis 8 von 8

Thema: Html & css problem beim Seitenaufbau

  1. #1
    HTML Newbie
    Registriert seit
    21.08.2015
    Beiträge
    4
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard Html & css problem beim Seitenaufbau

    Hallo erstmal,
    ich bin neu in diesem Forum, und wollte euch mein Problem darlegen.

    Aber zuerst ein paar details zu mir:
    Ich bin 19 Jahre alt, habe keine große Erfahrung mit Css und Html, aber jeder muss ja mal iw damit beginnen
    Aktuell Besuche ich eine Staatliche Oberschule in Bayern und wollte mir deswegen in den Ferien mal Html und css in den Basics beibringen.

    Dabei bin ich aber auf ein Problem gestoßen: Die Seite an sich Funktioniert, aber sie baut sich immer wieder anders auf, mal wirkt sie etwas größer und mal so wie sie sein soll. Ich hab alles Probiert, hab das Internet durchforstet aber nichts gefunden, um dieses Problem zu lösen.

    Als Browser Benutze ich Firefox.
    Ich hoffe mir können ein paar erfahrenen User helfen mein Problem zu lösen.

    Ich hänge zwei .gif Bilder an, die zeigen sollen wie die website verschieden aussieht. Ausserdem den html und css code.

    Anhang 1 ist der wie es oft aussieht und Anhang 2 wie es aussehen soll.

    Der Html Code:

    HTML-Code:
    [PHP][/PHP]<!doctype html>
    <html lang=''>
    <head>
       <meta charset='utf-8'>
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       
       <link rel="stylesheet" href="css/styles.css">
       <link rel="stylesheet" type="text/css" href="css/design.css">
       
       <title>Pythonic.ddns.net</title>
    </head>
    <body>
    <div id="website">
        
            <div id='cssmenu'>
            <ul>
               <li><a href='index.html'>Home</a></li>
               <li><a href='#'>News</a></li>
               <li class='active'><a href='#'>Tutorials...</a>
                  <ul>
                     <li><a href='#'>Arduino</a>
                        
                     </li>
                     <li><a href='#'>Raspberry Pi</a>
                        
                     </li>
                  </ul>
               </li>
               <li class='active'><a href='#'>Sonstiges...</a>
                    <ul>
                     <li><a href='#'>Kruschkiste</a>
                        
                     </li>
                     
                  </ul>
                </li>
               <li><a href='#'>Downloads...</a>
               
                   <ul>
                         <li><a href='#'>Sourcecode</a>
                            
                         </li>
                         <li><a href='#'>Anderes</a>
                            
                         </li>
                      </ul>
               
               </li>
               <li><a href='#'>Kontakt</a></li>
               
            </ul>
            </div>
        
    
        <div id="header">
        
        </div>
        <div id="inhalt>">
            
            
            <div id="text">
            </div>
        </div>
        
        <div id="footer">
        </div>
        
    </div>
    
    </body>
    <html>
    Und Hier der Css Code:
    Code:
    body {
    background-color:gainsboro;
    text-align:center;
    
    }
    
    #website {
        width:980;
        margin:0 auto;
        
        
    }
    #header {
        width:980;
        height:200px;
        background:dimgray;
        
        
    }
        
    #menu_css {
        width:980;
        margin-top:10;
        
        
    }
    #inhalt{
        margin-top:10;
        width:980;
        
        
        
        
        
    }
    
    #sidebar_l {
        float:left;
        width:250px;
        height:500;
        background:dimgray;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;
        margin-top:10px;
        margin-bottom:10px;
        
    }
    
    
    #text {
        
        text-align: justify;
        float:right;
        width:980px;
        height:500px;
        
        background:silver;
        
        -moz-border-radius:0px;
        -webkit-border-radius:0px;
        -o-border-radius:0px;
        border-radius:0px;
        margin-top:10px;
        margin-bottom:10px;
    }
    
    #footer {
        width:980px;
        height:40px;
        background:dimgray;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;
        margin-top:10px;
        
        margin-left: auto;
        margin-right: auto;
        clear:both;
        
        
    }
    Es gibt noch eine weitere css Datei, die aber nur das Menü händelt, falls dieser Code gebraucht wird, werde ich ihn umgehend nachliefern.

    Ich bedanke mich fürs lesen und eventuellem Antworten.

    Mit freundlichen Grüßen
    BerryBlue
    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 !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Hallo,

    dein Problem kann ich nicht nachvollziehen.

    Allerdings scheinst du uns auch ein Teil des CSS vorzuenthalten. In der HTML-Datei werden zwei CSS-Dateien eingebunden und für das Menü gibt es keine CSS-Angaben, bis auf eine. Und die scheint auch noch falsch zu sein.

    Im CSS

    Code:
    #menu_css
    und im HTML dann

    Code:
    <div id='cssmenu'>
    und wollte mir deswegen in den Ferien mal Html und css in den Basics beibringen.
    Insgesamt scheinen deine Unterlagen zu HTML / CSS leider sehr veraltet zu sein. Du solltest dir unbedingt aktuelle Unterlagen bzw. aktuelles Lehrmaterial besorgen. Grade in den letzten Jahren hat sich viel geändert und wenn nach veralteten Grundlagen gelernt wird fällt die Umstellung auf aktuelles HTML / CSS sehr schwer oder gelingt gar nicht.

    Gruss

    MrMurphy

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    21.08.2015
    Beiträge
    4
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Danke erstmal für die antwort.
    Zum Thema was ich lerne, bzw mit was:
    Internet, ich habe zwar noch uralt-php bücher rumfahren, lasse die aber getrost in der ecke liegen

    Das #menu_css in der css datei begrenzt macht derzeitig nichts.
    und cssmenu ist in der zweiten datei verlinkt. Den code liefere ich sofort nach .



    PS: Kannst du mir irgeneine lektüre/Seite empfhelen, die auf dem aktellem stand zum lernen ist ?
    Code:
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      line-height: 1;
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    #cssmenu #menu-button {
      display: none;
    }
    #cssmenu {
      font-family: Montserrat, sans-serif;
      background: #333333;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu.align-center > ul {
      font-size: 0;
      text-align: center;
    }
    #cssmenu.align-center > ul > li {
      display: inline-block;
      float: none;
    }
    #cssmenu.align-center ul ul {
      text-align: left;
    }
    #cssmenu.align-right > ul > li {
      float: right;
    }
    #cssmenu > ul > li > a {
      padding: 17px;
      font-size: 16px;
      letter-spacing: 1px;
      text-decoration: none;
      color: #dddddd;
      font-weight: 700;
      text-transform: uppercase;
    }
    #cssmenu > ul > li:hover > a {
      color: #ffffff;
    }
    #cssmenu > ul > li.has-sub > a {
      padding-right: 30px;
    }
    #cssmenu > ul > li.has-sub > a:after {
      position: absolute;
      top: 22px;
      right: 11px;
      width: 8px;
      height: 2px;
      display: block;
      background: #dddddd;
      content: '';
    }
    #cssmenu > ul > li.has-sub > a:before {
      position: absolute;
      top: 19px;
      right: 14px;
      display: block;
      width: 2px;
      height: 8px;
      background: #dddddd;
      content: '';
      -webkit-transition: all .25s ease;
      -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
      -o-transition: all .25s ease;
      transition: all .25s ease;
    }
    #cssmenu > ul > li.has-sub:hover > a:before {
      top: 23px;
      height: 0;
    }
    #cssmenu ul ul {
      position: absolute;
      left: -9999px;
    }
    #cssmenu.align-right ul ul {
      text-align: right;
    }
    #cssmenu ul ul li {
      height: 0;
      -webkit-transition: all .25s ease;
      -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
      -o-transition: all .25s ease;
      transition: all .25s ease;
    }
    #cssmenu li:hover > ul {
      left: auto;
    }
    #cssmenu.align-right li:hover > ul {
      left: auto;
      right: 0;
    }
    #cssmenu li:hover > ul > li {
      height: 35px;
    }
    #cssmenu ul ul ul {
      margin-left: 100%;
      top: 0;
    }
    #cssmenu.align-right ul ul ul {
      margin-left: 0;
      margin-right: 100%;
    }
    #cssmenu ul ul li a {
      border-bottom: 1px solid rgba(150, 150, 150, 0.15);
      padding: 11px 15px;
      width: 170px;
      font-size: 16px;
      text-decoration: none;
      color: #dddddd;
      font-weight: 400;
      background: #333333;
    }
    #cssmenu ul ul li:last-child > a,
    #cssmenu ul ul li.last-item > a {
      border-bottom: 0;
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li a:hover {
      color: #ffffff;
    }
    #cssmenu ul ul li.has-sub > a:after {
      position: absolute;
      top: 16px;
      right: 11px;
      width: 8px;
      height: 2px;
      display: block;
      background: #dddddd;
      content: '';
    }
    #cssmenu.align-right ul ul li.has-sub > a:after {
      right: auto;
      left: 11px;
    }
    #cssmenu ul ul li.has-sub > a:before {
      position: absolute;
      top: 13px;
      right: 14px;
      display: block;
      width: 2px;
      height: 8px;
      background: #dddddd;
      content: '';
      -webkit-transition: all .25s ease;
      -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
      -o-transition: all .25s ease;
      transition: all .25s ease;
    }
    #cssmenu.align-right ul ul li.has-sub > a:before {
      right: auto;
      left: 14px;
    }
    #cssmenu ul ul > li.has-sub:hover > a:before {
      top: 17px;
      height: 0;
    }
    @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
      #cssmenu {
        width: 100%;
      }
      #cssmenu ul {
        width: 100%;
        display: none;
      }
      #cssmenu.align-center > ul {
        text-align: left;
      }
      #cssmenu ul li {
        width: 100%;
        border-top: 1px solid rgba(120, 120, 120, 0.2);
      }
      #cssmenu ul ul li,
      #cssmenu li:hover > ul > li {
        height: auto;
      }
      #cssmenu ul li a,
      #cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0;
      }
      #cssmenu > ul > li {
        float: none;
      }
      #cssmenu ul ul li a {
        padding-left: 25px;
      }
      #cssmenu ul ul ul li a {
        padding-left: 35px;
      }
      #cssmenu ul ul li a {
        color: #dddddd;
        background: none;
      }
      #cssmenu ul ul li:hover > a,
      #cssmenu ul ul li.active > a {
        color: #ffffff;
      }
      #cssmenu ul ul,
      #cssmenu ul ul ul,
      #cssmenu.align-right ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
      }
      #cssmenu > ul > li.has-sub > a:after,
      #cssmenu > ul > li.has-sub > a:before,
      #cssmenu ul ul > li.has-sub > a:after,
      #cssmenu ul ul > li.has-sub > a:before {
        display: none;
      }
      #cssmenu #menu-button {
        display: block;
        padding: 17px;
        color: #dddddd;
        cursor: pointer;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
      }
      #cssmenu #menu-button:after {
        position: absolute;
        top: 22px;
        right: 17px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: '';
      }
      #cssmenu #menu-button:before {
        position: absolute;
        top: 16px;
        right: 17px;
        display: block;
        height: 2px;
        width: 20px;
        background: #dddddd;
        content: '';
      }
      #cssmenu #menu-button.menu-opened:after {
        top: 23px;
        border: 0;
        height: 2px;
        width: 15px;
        background: #ffffff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      #cssmenu #menu-button.menu-opened:before {
        top: 23px;
        background: #ffffff;
        width: 15px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        height: 46px;
        width: 46px;
        cursor: pointer;
      }
      #cssmenu .submenu-button.submenu-opened {
        background: #262626;
      }
      #cssmenu ul ul .submenu-button {
        height: 34px;
        width: 34px;
      }
      #cssmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #dddddd;
        content: '';
      }
      #cssmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px;
      }
      #cssmenu .submenu-button.submenu-opened:after {
        background: #ffffff;
      }
      #cssmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #dddddd;
        content: '';
      }
      #cssmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px;
      }
      #cssmenu .submenu-button.submenu-opened:before {
        display: none;
      }
    }

  5. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Hallo

    ich habe die Seite mit dem kompletten CSS getestet, konnte dein Problem aber nicht nachvollziehen. Ich kann im CSS auch keine Angaben finden, die die Verschiebung des Layouts verursachen könnten.

    Das Problem ist demnach offensichtlich im Softwarebereich deines Rechners zu suchen. Da werden sich wohl einige Programme gegenseitig stören.

    Gruss

    MrMurphy

  6. Folgende User finden die Antwort von MrMurphy gut:


  7. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    21.08.2015
    Beiträge
    4
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Html &amp; css problem beim Seitenaufbau

    Hab es aber auch auf meinem Laptop getestet, da tritt das problem ebenso auf
    Vielleicht tritt es bei dir bei mehrmaligem laden auch auf.

    Darf man Fragen welchen Browser du hernimmst ?

    Habe das Design mal auf meinen kleinen webserver hochgeladen, da tritt das Problem genau so auf. Kannst du mal testen ob das bei dir auch der Fall ist ?

    link ist: pythonic.ddns.net (ohne www davor!)

    MFG Berry

    PS: habe es mal auf Opera getestes, selbes Problem wie oben beschrieben ...
    An welcher systemkonfiguration kann das denn liegen ?

  8. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Hallo,

    so einen Fehler hatte ich schon lange nicht mehr, deshalb war ich da wohl etwas betriebsblind. Das liegt doch nicht an deinem Rechner.

    Du hast bei vielen Größenangaben die Einheit weggelassen, bei dir px. Meist wohl bei width.

    Das ist nicht zulässig. Die Einheit darf nur bei ganz bestimmten Angaben (z. B. line-height) weggelassen werden.

    Lokal ignorieren die Browser solche Fehler. Bei Daten von Webserven offensichtlich nicht. Das musst du also korrigieren.

    Gruss

    MrMurphy

  9. Folgende User finden die Antwort von MrMurphy gut:


  10. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    21.08.2015
    Beiträge
    4
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Vielen Dank, jetzt Funktioniert alles wunderbar, warum aber der Browser es manchmal ingnoriert und manchmal nicht, würde mich mal interessieren.

    Iw war der fehler ja echt offensichtlich ^^

    Du hast mir geraten Modernere lektüre herzunehmen, darf ich erfahren was an dem Code nicht Mehr Zeitgemäß ist ?

    MFG
    BerryBlue

  11. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    570
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Html & css problem beim Seitenaufbau

    Hallo

    warum aber der Browser es manchmal ingnoriert und manchmal nicht, würde mich mal interessieren.
    Die Browser schalten die Ansicht nach unterschiedlichen Vorgaben um. Offensichtlich ist das bei der Doctype-Angabe.

    Aber es gibt noch andere Gründe. So halt auch ob die Daten lokal vom Rechner stammen oder von einem Webserver geliefert werden.

    Anfänger sehen das dann gerne als Browserfehler oder Bug an, dabei übersehen sie ihre "Pflicht" einen fehlerfreien Quellcode zu liefen.

    darf ich erfahren was an dem Code nicht Mehr Zeitgemäß ist ?
    Zum Beispiel die Verwendung von div anstatt geeignetere Container wie header, main, footer u.s.w. zu verwenden.

    Oder den Containern feste Größen aufzwingen zu wollen, anstatt das Browserfenster in seiner ganzen Breite zu nutzen oder die Besucher bei schmaleren Fenstern zu zwingen seitwärts zu scrollen.

    Gruss

    MrMurphy

Ähnliche Themen

  1. Problem beim Bildaufbau beim offline Test
    Von Duval mit Sonnenbrille im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.04.2015, 10:52
  2. Problem beim Zentrieren [css/html]
    Von Path im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 06.12.2013, 17:00
  3. HTML <hr> Problem beim ausrichten
    Von menetekel im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 19.09.2013, 14:45
  4. Seitenaufbau
    Von Mad_Dog im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 10.08.2006, 14:16
  5. brauche hilfe beim seitenaufbau
    Von tim im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.05.2005, 22:26

Stichworte

Berechtigungen

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