Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 25

Thema: zentrieren von div/overflow

  1. #1
    Unregistriert
    Gast

    Standard zentrieren von div/overflow

    hallo,
    ich habe ein anfängerproblem... und zwar bekomme ich meine divs nicht horizontal zentriert, dh. ich habe ein prob mit dem overflow.

    fakt:
    2 divs, eins rechts, eins in der mitte. horizontal zentriert mit 50% und -300margin.
    bei hoher auflösung: alles klar.
    wenn ich aber meinen browser horizontal kleiner schiebe, bzw mit netbookauflösung anschaue,
    kommt wie gewolllt die scrollleiste, aber das linke div bekommt abstand von unten und das mittlere verschwindet nach unten..

    ich hätte aber gerne, dass beide in vollem format horizontal zentriert bleiben und scrollbalken bekommen.

    das ist das linke div:
    Code:
    #naviscroll {
        position:absolute;
        width:325px;
        height:100%;
        z-index:10;
        left: 0px;
        overflow: auto;
        padding: 0px;
        top: 50%;
        margin-top: -300px;
    }
        #weissakk{
        background-image: url(bilder/menuKeybordBack2.png);
        background-repeat: no-repeat;
        height: 600px;
        width: 300px;
        
    }
    #keyboard {
        position: absolute;
        left: 5px;
        top: 184px;
    
    }
    <div id="naviscroll">
    <div id="weissakk"><a href="index.html"><img src="bilder/blank388x180.png" width="300" height="180" alt="home" /></a>
      <div id="keyboard">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="275" height="396" id="keyboardSmart" align="middle">
                    ...
    ..
    inhalt..
    ..
    
    </div> </div></div>
    und dieses das mittlere:
    Code:
    #textbox {
        
        
        position:absolute;
        width:650px;
        height:550px;
        left: 30%;    
        overflow: auto;
        top: 50%;
        margin-top: -300px;
        padding: 25px;
        text-shadow:0px -1px 3px black;
         /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
        
    }
    #refPic {
        margin: 5px;
        text-align:    center;
        
    }
    #refTxt {
        text-align:    justify;
        margin: 5px;
    }
    
    #refTxt-foot {
        font-size: 12px;
        font-style: italic;
        text-align: right;
        margin: 5px;
    }
    <div id="textbox">
    
    <div id="refPic"><img src="bilder/querblauerhimmel.jpg" alt="loschi" width="600" height="216" /></div>
    <div id="refTxt"><em>&bdquo;Seemann  Loschi&ldquo; und sein Schifferklavier geh&ouml;ren zusammen wie der Wind und das Meer.</em> <em>&bdquo;                        Loschis&ldquo;  Gro&szlig;vater war Musiker, der Vater Seemann.</em> <em>Wen wundert  es, dass die &bdquo;Mischung&ldquo; f&uuml;r wahr gelungen ist. ...</em></div>
      <div id="refTxt-foot"><em>(Landesheimatverband  Mecklenburg-Vorpommern e.V.)</em></div>
      
    <div class="style21" id="refPic"><img src="bilder/querSunthorice09-Toern02.jpg" width="600" height="231" alt="LOSCHI auf dem Schiff" /></div>
      <div id="refTxt"><em>Ein wenig  zotig mit netter Anmache und guter Stimme.</em> <em>Als Darsteller  &uuml;berzeugend, animiert er das Publikum. ...</em></div>
      <div id="refTxt-foot"><em>(Das Kultur-  und Veranstaltungsmagazin &bdquo;R&uuml;gen, Stralsund aktuell&ldquo;)</em></div>
      
      <div id="refPic"><img src="bilder/querhafen.jpg" width="600" height="226" alt="LOCHI im Hafen" /></div>
      <div id="refTxt"><em>Bereits seit  1998 begleitet &bdquo;Seemann Loschi&ldquo; anl&auml;sslich der Hanse-Sail Rostock die Segeltour  des</em> <em>Mecklenburger  Blitz-Verlages mit Gesch&auml;ftskunden musikalisch. Durch sein vielf&auml;ltiges  Programm und seine freundliche Art sorgt er immer f&uuml;r die richtige Stimmung an  Bord &ndash; und das den ganzen Tag lang! &bdquo;Seemann Loschi&ldquo; singt nicht nur ein  umfangreiches Repertoire an Seemannsliedern, die er selbst mit seinem  Akkordeonspiel untermalt, sondern bezieht die G&auml;ste mit Witz, Spa&szlig; und  Seemannsgarn auf sehr angenehme Weise in sein Programm ein. Ein Tag an Bord  wird dadurch recht kurzweilig. </em></div>
      <div id="refTxt-foot"><em>(Blitz Verlag  und Werbeagentur GmbH, Vorpommern Blitz)</em></div>
      
      <div id="refPic"><img src="bilder/quermohle.jpg" width="600" height="135" alt="LOSCHI an der Mohle" /></div>
      <div id="refTxt"><em>&bdquo;Seemann  Loschi&ldquo; haben wir als einen sehr ehrenhaften und zuverl&auml;ssigen Gesch&auml;ftsmann  kennen gelernt, der stets alle vertraglichen Verpflichtungen erf&uuml;llt. Wir  freuen uns, dass &bdquo;Seemann Loschi&ldquo; die gesch&auml;ftlichen Verbindungen weiter  ausbaut und werden auch in Zukunft die gesch&auml;ftlichen Beziehungen zu ihm  aufrechterhalten. ...</em></div>
      <div id="refTxt-foot"><em>(MV Best,  Reise- und Eventveranstalter)</em></div>
      
      <div id="refPic"><img src="bilder/quermeer.jpg" width="600" height="215" alt="LOSCHI an der Mohle" /></div>
      <div id="refPic">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="650" height="40" id="FlashID2" title="Referenzen">
          <param name="movie" value="bilder/ticker.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="7.0.70.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="bilder/ticker.swf" width="650" height="40">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="7.0.70.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
      </div>
      
      
    
    </div>
    sorry, die situation ist schwer zu beschreiben.. ich hoffe, jemand von euch hat genug imaginationskraft..

    sven

    die seite ist temporär zu sehen auf: http://test.thepetsitters.net
    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 !!!!!
    Geändert von Bandit (08.09.2012 um 22:15 Uhr) Grund: BB-Code eingebaut

  2. #2
    Bandit
    Gast

    Standard AW: zentrieren von div/overflow

    Quellcode bitte zwischen [code]Quellcode[/code]

    Guck mal hier: http://www.css4you.de/wslayout1/index.html
    Geändert von Bandit (08.09.2012 um 22:16 Uhr)

  3. #3
    Unregistriert
    Gast

    Standard AW: zentrieren von div/overflow

    oops, ich habe horizontal und vertikal vertauscht..

    also, ich hätte gerne, dass die divs nach oben und nach unten gleichen abstand behalten sollen, wenn der scrollbalken auftaucht.
    vielen dank für den link, doch ich finde nirgends dieses scrollproblem.
    oder meinst du mit dem link, das mein ganzes layout nicht stimmt?

    nette grüße,
    sven



    Code:
    #naviscroll {
    position:absolute;
    width:325px;
    height:100%;
    z-index:10;
    left: 0px;
    overflow: auto;
    padding: 0px;
    top: 50%;
    margin-top: -300px;
    }
    #weissakk{
    background-image: url(bilder/menuKeybordBack2.png);
    background-repeat: no-repeat;
    height: 600px;
    width: 300px;
    
    }
    #keyboard {
    position: absolute;
    left: 5px;
    top: 184px;
    
    }
    <div id="naviscroll">
    <div id="weissakk"><a href="index.html"><img src="bilder/blank388x180.png" width="300" height="180" alt="home" /></a>
    <div id="keyboard">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="275" height="396" id="keyboardSmart" align="middle">
    ...
    ..
    inhalt..
    ..
    
    </div> </div></div>
    und dieses das mittlere:

    Code:
    #textbox {
    
    
    position:absolute;
    width:650px;
    height:550px;
    left: 30%;
    overflow: auto;
    top: 50%;
    margin-top: -300px;
    padding: 25px;
    text-shadow:0px -1px 3px black;
    /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
    
    }
    #refPic {
    margin: 5px;
    text-align: center;
    
    }
    #refTxt {
    text-align: justify;
    margin: 5px;
    }
    
    #refTxt-foot {
    font-size: 12px;
    font-style: italic;
    text-align: right;
    margin: 5px;
    }
    <div id="textbox">
    
    <div id="refPic"><img src="bilder/querblauerhimmel.jpg" alt="loschi" width="600" height="216" /></div>
    <div id="refTxt"><em>&bdquo;Seemann Loschi&ldquo; und sein Schifferklavier geh&ouml;ren zusammen wie der Wind und das Meer.</em> <em>&bdquo; Loschis&ldquo; Gro&szlig;vater war Musiker, der Vater Seemann.</em> <em>Wen wundert es, dass die &bdquo;Mischung&ldquo; f&uuml;r wahr gelungen ist. ...</em></div>
    <div id="refTxt-foot"><em>(Landesheimatverband Mecklenburg-Vorpommern e.V.)</em></div>
    
    <div class="style21" id="refPic"><img src="bilder/querSunthorice09-Toern02.jpg" width="600" height="231" alt="LOSCHI auf dem Schiff" /></div>
    <div id="refTxt"><em>Ein wenig zotig mit netter Anmache und guter Stimme.</em> <em>Als Darsteller &uuml;berzeugend, animiert er das Publikum. ...</em></div>
    <div id="refTxt-foot"><em>(Das Kultur- und Veranstaltungsmagazin &bdquo;R&uuml;gen, Stralsund aktuell&ldquo</em></div>
    
    <div id="refPic"><img src="bilder/querhafen.jpg" width="600" height="226" alt="LOCHI im Hafen" /></div>
    <div id="refTxt"><em>Bereits seit 1998 begleitet &bdquo;Seemann Loschi&ldquo; anl&auml;sslich der Hanse-Sail Rostock die Segeltour des</em> <em>Mecklenburger Blitz-Verlages mit Gesch&auml;ftskunden musikalisch. Durch sein vielf&auml;ltiges Programm und seine freundliche Art sorgt er immer f&uuml;r die richtige Stimmung an Bord &ndash; und das den ganzen Tag lang! &bdquo;Seemann Loschi&ldquo; singt nicht nur ein umfangreiches Repertoire an Seemannsliedern, die er selbst mit seinem Akkordeonspiel untermalt, sondern bezieht die G&auml;ste mit Witz, Spa&szlig; und Seemannsgarn auf sehr angenehme Weise in sein Programm ein. Ein Tag an Bord wird dadurch recht kurzweilig. </em></div>
    <div id="refTxt-foot"><em>(Blitz Verlag und Werbeagentur GmbH, Vorpommern Blitz)</em></div>
    
    <div id="refPic"><img src="bilder/quermohle.jpg" width="600" height="135" alt="LOSCHI an der Mohle" /></div>
    <div id="refTxt"><em>&bdquo;Seemann Loschi&ldquo; haben wir als einen sehr ehrenhaften und zuverl&auml;ssigen Gesch&auml;ftsmann kennen gelernt, der stets alle vertraglichen Verpflichtungen erf&uuml;llt. Wir freuen uns, dass &bdquo;Seemann Loschi&ldquo; die gesch&auml;ftlichen Verbindungen weiter ausbaut und werden auch in Zukunft die gesch&auml;ftlichen Beziehungen zu ihm aufrechterhalten. ...</em></div>
    <div id="refTxt-foot"><em>(MV Best, Reise- und Eventveranstalter)</em></div>
    
    <div id="refPic"><img src="bilder/quermeer.jpg" width="600" height="215" alt="LOSCHI an der Mohle" /></div>
    <div id="refPic">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="650" height="40" id="FlashID2" title="Referenzen">
    <param name="movie" value="bilder/ticker.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="bilder/ticker.swf" width="650" height="40">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>
    </div>
    
    
    
    </div>

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: zentrieren von div/overflow

    Verzichte auf die absoluten Positionierungen und zentriere so:
    Horizontale Zentrierung
    Vertikale Zentrierung nach Ziff. 2

  5. #5
    Unregistriert
    Gast

    Standard AW: zentrieren von div/overflow

    das klingt spannend! vielen dank,
    ich werde es gleich mal ausprobieren,
    sven

  6. #6
    Unregistriert
    Gast

    Standard AW: zentrieren von div/overflow

    ok. hat geklappt! vielen dank für´s erste..

    ich hab den container jetzt nach links ausgerichtet
    und möchte die gleiche formation noch einmal rechts daneben haben,
    also diese hier:

    #distance {
    width: 10px;
    height: 50%;
    margin-bottom: -250px;
    float: left;
    background-color: #f00; /*nur zu Demozwecken*/
    }

    #container {
    margin: 0 auto;
    position: relative;
    height: 500px;
    width: 700px;
    clear: left;
    background-color: #ADFF2F;
    }

    das funktioniert aber nicht, der #distance rutscht immer darunter..

    nette grüße,
    sven

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: zentrieren von div/overflow

    Dann hat dein zweites Problem mit Zentrierung wohl nichts mehr zu tun.
    Du musst zunächst eine äußere Hülle, z.B. den #container zentrieren wie beschrieben.
    In den #container kannst du dann weitere divs mit float und margin platzieren und anordnen.

  8. #8
    Unregistriert
    Gast

    Standard AW: zentrieren von div/overflow

    hallo, inzwischen bin ich ein stück weiter gekommen.

    1. habe ich meinen ersten DIV nach links und horizontal mittig ausgerichtet bekommen und die scrollleiste funktioniert auch prima.
    2. habe ich nach "Vertikale Zentrierung nach Ziff. 2" den zweiten "distance"-DIV rechts neben die ersten zwei DIVs bekommen.
    rechts daneben kommt jetzt mein Container2, der letzte möchte aber wieder nicht vertikal zentriert werden..

    @sejuma: ich habe mal in deinem tut geschmöckert. wirklich sehr gut erklärt. und ich habe jetzt auch mehr überblick. danke.

    dieses sind meine ertsten zwei Container. die stehen super da:
    Code:
    #distance {
    width: 1px;
    height: 50%;
    margin-bottom: -300px;
    float: left;
    }
    
    #container {
    	position: relative;
    	height: 100%;
    	width: 320px;
    	clear: left;
    	background-color: #ADFF2F;
    	overflow:auto;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: 0px;  float: left;
    }
    dann mein zweiter distanzDIV und der zweite Hauptcontainer, horizontal kein prob aber vertikal... er klebt wieder an der decke..
    Code:
    #distance2 {
    	width: 10px;
    height: 50%;
    margin-bottom: -250px;
    float: left;
    background-color: #f00; /*nur zu Demozwecken*/
    
    
    }
    
    #container2 {
    	height: 600px;
    	width: 700px;
    	background-color: #ADFF2F;
    	overflow:auto;
    	margin-left: 400px;
    }
    sven

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: zentrieren von div/overflow

    Stelle die Seite am besten mal online und poste einen Link, damit man alles im Zusammenhang sieht.
    Falls noch nicht vorhanden, besorge dir ggf. Free-Webspace.

  10. #10
    Unregistriert
    Gast

    Standard AW: zentrieren von div/overflow

    http://test.thepetsitters.net/03referenzenNEU.html

    das problem ist wieder das alte:
    wenn man die auflösung verkleinert, dh. den browser von unten kleiner zieht,
    wandert der rechte inhalt nach oben..

    vielen dank für deine bemühungen!
    sven

Ähnliche Themen

  1. css overflow problem
    Von Serpico73 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.08.2011, 16:46
  2. div- body- overflow
    Von Dicker1 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.12.2008, 13:33
  3. overflow:visible in IE7
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 29.09.2008, 18:23
  4. Overflow
    Von mgraf im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 08.01.2007, 01:07
  5. #content overflow Problem
    Von mgraf im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 2
    Letzter Beitrag: 08.01.2007, 00:47

Stichworte

Berechtigungen

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