tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von spicelab
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
234
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.08.11 19:14 #1
    noxum noxum ist offline Mitglied Bronze
    Registriert seit
    Mar 2011
    Beiträge
    32
    Guten Abend,

    ich habe ein Problem mit drei div´s welche ich nebeneinander angeordnet habe. Die Suche sowie Google habe ich schon benutzt aber leider nichts genaues gefunde.

    Also die drei Boxen habe ich mal hier hochgeladen: Klick mich!

    So die drei Div´s sind mit Float in eine Reihe gebracht worden. Nun möchte ich, dass das rote Div immer in der Mitte ist und auch wenn das Brwoserfenster verkleinert werden sollte, dann sollen die beiden Div´s an den Seiten ausgeblendet werden und nicht verschoben.

    Im grunde will ich sagen, dass das rote Div einfach immer in der Mitte sein soll.
    Leider ist bis jetzt alles fehlgeschlagen was ich bis jetzt versucht habe. Somit bitte ich hier um eure Hilfe.

    Vielen Dank schonmal für alle nützlichen Antworten.
    Mfg Noxum
     
    Zitieren Zitieren
  2. 21.08.11 19:28 #2
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von noxum Beitrag anzeigen
    So die drei Div´s sind mit Float in eine Reihe gebracht worden. Nun möchte ich, dass das rote Div immer in der Mitte ist und auch wenn das Brwoserfenster verkleinert werden sollte, dann sollen die beiden Div´s an den Seiten ausgeblendet werden und nicht verschoben.
    Vielleicht ist hier diese CSS-Technik Zentrieren mit nur einem Element hilfreich, in das du deine drei DIVs einbettest.

    Unterschreitet hier die Breite des Browserfensters die Boxendimension, wird der linke Boxenrand "abgeschnitten". Gleiches kannst du für den rechten Boxenrand mittels overflow-x:hidden erzwingen. In dem Beispiel erscheint derzeit bei zu geringer Fennsterbreite der horizontale Scrollbalken.

    Oder was stellst du dir unter dem "Ausblenden" der DIV-Blöcke vor?
    Geändert von spicelab (21.08.11 um 19:31 Uhr)
     
    Zitieren Zitieren
  3. 21.08.11 19:46 #3
    noxum noxum ist offline Mitglied Bronze
    Registriert seit
    Mar 2011
    Beiträge
    32
    Danke schonmal für deine schnelle antwort.

    Also sagen wir mal die rote Box ist 800px breit, die gelbe und die schwarze sind 200px breit.
    Wenn ich jetzt das Fenster auf 800px klein ziehe, dann ist die ganze gelbe Box und ein Teil von der roten Box zu sehen. Ich möchte aber wenn ich mein Fenster auf 800px ziehe nur die 800px große rote Box sehen und nicht die gelbe Box.

    Ich werde deinen Rat jetzt einmal ausprobieren und melde mich dann noch einmal.

    Mfg Noxum

    Edid: Overflow hat leider garnichts gebracht.
    Geändert von noxum (21.08.11 um 19:52 Uhr)
     
    Zitieren Zitieren
  4. 21.08.11 20:20 #4
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von noxum Beitrag anzeigen
    Edid: Overflow hat leider garnichts gebracht.
    Tatsächlich?

    Bei mir erwartungsgemäß sehr viel!

    Anbei der ergänzte Code des Beispiels:

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>Zentrieren mit nur einem Element</title>
  <style type="text/css">
<!--

html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden; /* overflow-Regel hinzugefügt */
}

#center {
  
  padding:0;       
  border:1px solid #0f0; 

  
  width:1200px;      /* bestehende Breite aufgestockt */
  min-height:298px; 
  
  
  position:absolute;
  top:50%;                  
  left:50%;
  
  
  margin:-150px 0 0 -601px;  /* linken Außenabstand der Boxenverbreiterung angepasst */
}


* html #center {
  height:298px;            
}


p, h1 {
  padding:0.5em;
  margin:0;
}
ul {
 margin-top:0; 
}
h1 {
  font-size:1.2em;
}
-->
  </style>
 </head>
 <body>
  <div id="center">
   <h1>Zentrieren mit nur einem Element</h1>
   <p>Wenn das Browserfenster kleiner als das zentrierte Element ist, kann es pasieren, dass Inhalte oben und links nicht errreichbar sind.</p>
   <p>Deshalb weitere Anregungen, wie dies verhindert werden kann:
   <ul>
    <li>mit <a href="center2.html">zusätzlichem Spacer</a></li>
    <li>mit <a href="../fricca/center.html">float and clear</a> von fricca</li>
   </ul>
  </div>
 </body>
</html>
    Geändert von spicelab (21.08.11 um 20:38 Uhr) Grund: Tipp-Ex
    noxum bedankt sich. 
    Zitieren Zitieren
« Text nach Klick aufklappen lassen - nur CSS | design auf 1024px optimieren »

Ähnliche Themen

  1. Wie weise ich nach: Browser Problem oder Code Problem?
    Von Steb im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 10.03.11, 20:09
  2. [IE7 Problem] Problem mit ul/li Höhen im IE7 bei Verwendung eines vertikalen Menüs
    Von josDesign im Forum CSS
    Antworten: 0
    Letzter Beitrag: 11.01.11, 21:40
  3. Problem: Flash MX (7.1) exportiert meine Fla nicht mehr - dringendes Problem
    Von Lukasz im Forum Flash Plattform
    Antworten: 4
    Letzter Beitrag: 22.03.06, 20:50
  4. Problem mit hover- background ändern & Problem bei Reload
    Von ollioollio im Forum CSS
    Antworten: 0
    Letzter Beitrag: 06.10.04, 14:03
  5. Problem mit PopUp (Ja ich weiss Suche benutzten, hab ein ganz anderes Problem)
    Von killkrog im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 13.06.02, 12:29

Stichworte