• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Divs überschreiben sich

P

Padimi

New member
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: 
_____________________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>
 
Zuletzt bearbeitet:
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.
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
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: 
* {
        margin: 0;
        padding: 0;
        }
        body
        {
        background-color: #c0c0c0;
        font-family:serif;
        }
    /*_____________________________________________________________________
  ===========================ALLGEMEINn=====================================
  _____________________________________________________________________*/
  .aktivmainmenue {
     font-size: 22px;
     color: #000000;
     }



  /*_____________________________________________________________________
  ===========================WRAP======================================
  _____________________________________________________________________*/
#wrap {
       position: relative;
       top: 0px;
       margin: 0 auto;
       text-align: center;
       width: 800px;
       border: solid 1px #000000;
       border-top: 0px;
       }
  /*_____________________________________________________________________
  ===========================HEADER======================================
  _____________________________________________________________________*/


      #header{
      margin: 0 auto;
      height:150px;

      }
/*-
  =Banner=
-*/
#headerpic {
       position: fixed;
       top: 0px;
      left: 50%;
      margin-left: -400px;
       width: 799px;
       height: 112px;
       background-image : url(http://www.mw.losehost.com/micha/oldschooldeluxe/grafiken/banner.gif);
       z-index:3;
       }
/*-
  =Mainmenue=
-*/
#headermenue {
      position: fixed;
      top: 66px;
      left: 50%;
      margin-left: -400px;
      width: 800px;
      z-index:4;
      }
   #headermenue ul{
      font-size: 23px;
      }
      #headermenue li{
          display: inline;
          padding-left: 20px;
          }
      #headermenue li a, #headermenue li a:link, #headermenue li a:visited {
          text-decoration: none;
          color: #333333;
          }
      #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
          font-size: 24px;
          color: #000000;
          }
/*-
  =Tapemenue=
-*/
 #tapemenue {
       position: fixed;
       top: 88px;
       left: 50%;
       margin-left: -260px;
       width: 520px;
       z-index:5;
       }
    #tapemenue ul{
       background-color: #f2f2f2;
       font-size: 18px;
       }
       #tapemenue li{
          display: inline;
          padding-left: 2px;
          }
       #tapemenue li a, #tapemenue li a:link, #tapemenue li a:visited {
          text-decoration: none;
          color: #000000;
          }
       #tapemenue li a:hover, #tapemenue li a:focus, #tapemenue li a:active {
          font-size: 20px;
          color: #4c3333;
          }
/*_____________________________________________________________________
  ===========================CONTENT======================================
  ______________________________________________________________________*/

/*-
  =Weblog=
-*/
 #weblog {
    text-align: center;

    width: 800px;
    }

 #adminform input {
  font-size: 70%;
  border: solid 5px #5f5f5f;
  background: transparent;
  }

Außerdem habe ich im body Dein Form umgesetzt, wie Du es wolltest und einen extra div header eingesetzt. Verkürzt also so:
PHP: 
<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>
 
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*
 
Padimi schrieb:
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*
Zum Vergrößern anklicken....

Du hast eine schließende Klammer vergessen:
Code: 
#header {
margin: 0 auto;
height:150px;
[COLOR="red"]}[/COLOR]
 
anna55 schrieb:
Du hast eine schließende Klammer vergessen:
Code: 
#header {
margin: 0 auto;
height:150px;
[COLOR="red"]}[/COLOR]
Zum Vergrößern anklicken....

Wie peinlich *roten Kopf kriegt*.
Es haut alles hin, ein riesengroßes dankeschön
blumenstrauss-t6590.jpg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben