Ergebnis 1 bis 8 von 8
  1. #1
    Padimi ist offline Jungspund
    registriert
    19-09-2008
    Beiträge
    14

    Divs überschreiben sich

    Hallo zusammen,
    ich habe folgendes Problem.
    Ich habe eine Seite mit mehreren Verschachtelten Divs und im Betreffenden "Weblog div" ein Script (ein blog).
    Wenn ich nun per css dem Div in dem der Blog ist die position "absolut" zuteile verschwindet mein rahmen vom "wrap div" welches alles umschließen soll und der Inhalt vom "Weblog Div" verschiebt sich auch.
    Am besten ihr schaut es euch selber mal an.
    OLDSCHOOL-DELUXE
    Des weiteren verschwindet das kleine Login Formular am Ende der Seite wenn ich besagtes "Weblog Div" absolut positioniere wenn ich es nach dem Schließendem "Weblog Div" aber innerhalb des "Wrap Divs" (das was alles umfasst) positioniere.
    Es ist jetzt blos sichtbar da ich es innerhalb des "Weblog Divs" gesetzt habe.
    Hier noch der betreffende Css und Html Code.
    Wäre sehr dankbar wenn mir jemand weiterhelfen könnte.
    Gruss Michael
    HTML-Code:
    _____________________DER CSS PART:_________________________
    #wrap {
           position: relative;
           top: 0px;
           margin: 0 auto;
           text-align: center;
           width: 800px;
           border: solid 1px #000000; ________________WIRD IRGENDWIE ÜBERSCHRIEBEN ODER SO UND WIRD NICHT ANGEZEIGT GENAU WIE DIE ZENTRIERUNG____________
           border-top: 0px;
           } 
    #weblog {
    position: absolute;
    top:150px;
        } 
    ______________DER HTML PART_______________________
    <?php
    SCRIPT  
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    
      </head>
    <body>
    <div id="wrap">
               <div id="headerpic">
              MIT "FIXED" POSITIONIERT
               </div> 
               <div id="headermenue">  
                   MIT "FIXED" POSITIONIERT       
               </div>
    <div id="weblog">
    <?php
    SCRIPT  
    ?>
    
    
    <form action="index.php" method="post" id="adminform">
    <input type="text" name="usr"> 
    <input type="password" name="pwd">
    <input type="submit" value="abschicken">
    </form>
    </div>
    ______________WENN ICH DAS FORMULAR AN DIESE STELLE SETZE IST ES NICHT MEHR SICHTBAR_____________
    </div>
    </body>
    </html>
    Geändert von Padimi (19-09-2008 um 12:05 Uhr)

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Divs überschreiben sich

    Hm, wie soll's denn eigentlich werden, Deine Seite sieht in jedem Browser ein wenig anders aus. Du kennst die Problematik um position:fixed?

    Edit: Schau Dir mal ein Layout-Beispiel bei Stu Nicholls an. Wie Du die Seite zentriert bekommst, weißt Du ja.
    Geändert von anna55 (19-09-2008 um 12:40 Uhr)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    Padimi ist offline Jungspund
    registriert
    19-09-2008
    Beiträge
    14

    AW: Divs überschreiben sich

    Hm, naja, hab jetze blos firefox und seamonkey und das ja fast das gleiche, und da sieht sie auch gleich aus, und im ie ist der Contenbereich rechtsbündig wo hingegen er im Firefox linksbündig ist.
    Im Prinzip wollte ich es einfach zentriert, wobei es mir darum erstmal nicht geht sondern eher um die Frage warum der Rahmen den ich für das hauptdiv ("Wrap") vorgegeben habe nichtmehr angzeigt wird sobald ich das unter Dif ("Weblog") mit einer "position:" Definition ausstatte und warum das Formular nicht angezeigt wird wenn ich es nicht im "Weblog" DiV platziere sondern im "Wrap" Div.

    Ich könnte ja das "Position" tag auch einfach weglassen (dann ist das Div ja glaube ich standart mäßig als "static" positioniert oder)
    Aber dann funktioniert das Atribut "top:..px" nicht mehr und ich müsste den Abstand nach oben anderst erzeugen.
    Gehen würde das natürlich, aber es interessiert mich auch zum Zwecke der Weiterbildung warum das so wie ich es habe nicht funktioniert und der Rahmen von einem Elternelement (das Div "Wrap" ist doch das Elternelement zum Div "Weblog" oder?) dann nicht normal durchgängig angezeigt wird.
    Danke erstmal für deine Hilfe
    Ahso, welche Problematik mit "position:fixed" meinst du?

    Edit:
    Ich zentriere jetze das Div "Weblog" einfach mal und gebe ihm eine feste Breite, dann dürfte die Seite im ie und Mozilla Browsern gleich aussehen, andere hab ich grad nicht hier, wird aber später selbstverständlich noch gecheckt
    Geändert von Padimi (19-09-2008 um 14:08 Uhr)

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Divs überschreiben sich

    Hallo Padimi,
    hat mich jetzt mal interessiert, wie Dein Ansatz für die gängigen Browser umzusetzen ist (außer IE6). Ich poste jetzt mal das gesamte CSS und Du schaust Dir an, wo ich was geändert habe. Hab keine Lust, das nochmal zu vergleichen.
    PHP-Code:
    * {
            
    margin0;
            
    padding0;
            }
            
    body
            
    {
            
    background-color#c0c0c0;
            
    font-family:serif;
            }
        
    /*_____________________________________________________________________
      ===========================ALLGEMEINn=====================================
      _____________________________________________________________________*/
      
    .aktivmainmenue {
         
    font-size22px;
         
    color#000000;
         
    }



      
    /*_____________________________________________________________________
      ===========================WRAP======================================
      _____________________________________________________________________*/
    #wrap {
           
    positionrelative;
           
    top0px;
           
    margin0 auto;
           
    text-aligncenter;
           
    width800px;
           
    bordersolid 1px #000000;
           
    border-top0px;
           }
      
    /*_____________________________________________________________________
      ===========================HEADER======================================
      _____________________________________________________________________*/


          #header{
          
    margin0 auto;
          
    height:150px;

          }
    /*-
      =Banner=
    -*/
    #headerpic {
           
    positionfixed;
           
    top0px;
          
    left50%;
          
    margin-left: -400px;
           
    width799px;
           
    height112px;
           
    background-image url(http://www.mw.losehost.com/micha/oldschooldeluxe/grafiken/banner.gif);
           
    z-index:3;
           }
    /*-
      =Mainmenue=
    -*/
    #headermenue {
          
    positionfixed;
          
    top66px;
          
    left50%;
          
    margin-left: -400px;
          
    width800px;
          
    z-index:4;
          }
       
    #headermenue ul{
          
    font-size23px;
          }
          
    #headermenue li{
              
    displayinline;
              
    padding-left20px;
              }
          
    #headermenue li a, #headermenue li a:link, #headermenue li a:visited {
              
    text-decorationnone;
              
    color#333333;
              
    }
          
    #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
              
    font-size24px;
              
    color#000000;
              
    }
    /*-
      =Tapemenue=
    -*/
     #tapemenue {
           
    positionfixed;
           
    top88px;
           
    left50%;
           
    margin-left: -260px;
           
    width520px;
           
    z-index:5;
           }
        
    #tapemenue ul{
           
    background-color#f2f2f2;
           
    font-size18px;
           }
           
    #tapemenue li{
              
    displayinline;
              
    padding-left2px;
              }
           
    #tapemenue li a, #tapemenue li a:link, #tapemenue li a:visited {
              
    text-decorationnone;
              
    color#000000;
              
    }
           
    #tapemenue li a:hover, #tapemenue li a:focus, #tapemenue li a:active {
              
    font-size20px;
              
    color#4c3333;
              
    }
    /*_____________________________________________________________________
      ===========================CONTENT======================================
      ______________________________________________________________________*/

    /*-
      =Weblog=
    -*/
     #weblog {
        
    text-aligncenter;

        
    width800px;
        }

     
    #adminform input {
      
    font-size70%;
      
    bordersolid 5px #5f5f5f;
      
    backgroundtransparent;
      } 
    Außerdem habe ich im body Dein Form umgesetzt, wie Du es wolltest und einen extra div header eingesetzt. Verkürzt also so:
    PHP-Code:
    <body>
    <
    div id="wrap">
    <
    div id="header">
               <
    div id="headerpic">

               </
    div>
               <
    div id="headermenue">
                  <
    ul>
             ..
                  </
    ul>
               </
    div>

               <
    div id="tapemenue">
                  <
    ul>
             ..
             </
    ul>

               </
    div>
          </
    div>
    <
    div id="weblog">

    ..

    </
    div>

    <
    form action="index.php" method="post" id="adminform">
    <
    input type="text" name="usr">
    <
    input type="password" name="pwd">
    <
    input type="submit" value="abschicken">
    </
    form>
    </
    div>
    </
    body>
    </
    html


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    Padimi ist offline Jungspund
    registriert
    19-09-2008
    Beiträge
    14

    AW: Divs überschreiben sich

    Also erstmal ein großes Dankeschön liebe Anna für dein Interesse und deine Hilfe.
    Hab die Seite jetzt nach deiner Idee Umgestellt.
    Problem ist das jetzt die gesammten festgelegten Styles der im "Header" befindlichen Divs nichtmehr hinhauen.
    Hast du vieleicht noch eine Idee was das sein könnte *hilflos guckt*

  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Divs überschreiben sich

    Zitat Zitat von Padimi Beitrag anzeigen
    Problem ist das jetzt die gesammten festgelegten Styles der im "Header" befindlichen Divs nichtmehr hinhauen.
    Hast du vieleicht noch eine Idee was das sein könnte *hilflos guckt*
    Du hast eine schließende Klammer vergessen:
    Code:
    #header {
    margin: 0 auto;
    height:150px;
    }


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    Padimi ist offline Jungspund
    registriert
    19-09-2008
    Beiträge
    14

    AW: Divs überschreiben sich

    Zitat Zitat von anna55 Beitrag anzeigen
    Du hast eine schließende Klammer vergessen:
    Code:
    #header {
    margin: 0 auto;
    height:150px;
    }
    Wie peinlich *roten Kopf kriegt*.
    Es haut alles hin, ein riesengroßes dankeschön

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Divs überschreiben sich

    Gerne und danke für die Blumen. Ich kann ja kaum drüberschauen, so groß ist der Strauß.

    Du hast meine klitzekleine Anmerkung in Post 2 noch in Erinnerung? Hier einfach mal IE6 einstellen:
    IE NetRenderer - Browser Compatibility Check -

    Oder besser:
    http://forum.jswelt.de/tools-program...tml#post230286 (Mehrere IE-Versionen installieren)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. anzahl von divs innerhalb eines divs ermitteln
    Von ToM80 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 14-08-2007, 12:38
  2. Antworten: 2
    Letzter Beitrag: 05-09-2006, 08:34
  3. Andere div's als das gewählte verstecken?
    Von badbandit im Forum JavaScript
    Antworten: 15
    Letzter Beitrag: 02-05-2006, 13:55
  4. Antworten: 3
    Letzter Beitrag: 06-04-2005, 21:49
  5. divs nebeneinander alle 100% Höhe
    Von bine im Forum CSS und (X)HTML
    Antworten: 15
    Letzter Beitrag: 30-08-2004, 16:44

Lesezeichen

Berechtigungen

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