tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Jan-Frederik Stieler
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
425
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 20.10.11 13:44 #1
    tinchern06 tinchern06 ist offline Mitglied
    Registriert seit
    Sep 2011
    Beiträge
    17
    Hallo Zusammen,

    habe folgendes Problem:
    habe ein HP erstellt die sich dynamisch der Fenstergröße anpassen soll.
    Das funktioniert auch, bis der Text größer als die Fenstergröße ist oder das Homepagefenster verkleinert wird.

    Habe jetzt ein overflow:auto versucht zu setzen. Da aber die Seite mit %- Angaben läuft bekomme ich das nicht hin. 100% wird nicht angezeigt und bei einem overflow :auto mit height 500px läuft beim verkleinern der Seite der scroolbereich über die Seite hinaus.
    Hier mal der code
    HTML-Code:
    <style type="text/css">
* {
 margin:0 0 0 0;
 padding:0 0 0 0;
 border:none;

}


html , body  {
 height:100%;
 font-family: Verdana,Arial,Helvetica;
 font-size: middle;

}

#wrapper {
 position:relative;
 width:100%;
 min-width:760px;
 min-height:100%;
 float:left;
 margin:0 0 0 0;
 left:0;
 background:url(images/wrapper.gif) repeat-y 20% ;
}

#header {
 position: absolute;
 margin:0 0 0 0;
  height:22%;
  width:100%;
  max-width:100%;
  background:rgb(216,228,255);
  z-index:10;
}
#header img {
position:absolute;
top:10px;
left:10px;
bottom:0;
width:35%;
}

#links {
 position:absolute;
 bottom:0;
 margin-left:0;
 width:20%;
 background:rgb(216,228,255);
 height:100%;
 z-index:1;

}
#links img {
position:absolute;
bottom:0;
width:100%;
}

#mitte {
 position:absolute;
 margin-left:20%;
 top:22%;


}

#navi {
 width:200px;
 float:left;

}

#inhalt {
 margin-left:200px;
 line-height: 1.9em;
 font-weight:300;
 font-size: medium;
 text-align:justify;
 }

 #content2{

 line-height: 1.9em;
 font-weight:300;
 font-size: medium;
 padding-right:20px;
 text-align:justify;
height:500px;
 overflow: auto;
}


</style>

</head>
<body>

<div id="wrapper">


 <div id="header">Hier steht das Logo</div>

<div id="links">Foto </div>
 <div id="mitte">

  <div id="navi">   </div>

  <div id="inhalt"> <div id="content2">Hier ein langen Blindtext einfügen zum Test
</div>
</div>


 </div> <!-- Ende Mitte -->
</div> <!-- Ende Wrapper -->
    Hier mal eine Testseite: Seite enfernt
    Ich hoffe ihr könnt mir helfen. Vielleicht sehe ich ja mal wieder dem Wald vor Bäumen nicht
    LG tinchern06
    Geändert von tinchern06 (20.10.11 um 21:33 Uhr)
     
    Zitieren Zitieren
  2. 20.10.11 14:57 #2
    Avatar von Jan-Frederik Stieler
    Jan-Frederik Stieler Jan-Frederik Stieler ist offline JFS - aka DirtyWorld
    tutorials.de Moderator
    Registriert seit
    Nov 2003
    Ort
    Darmstadt
    Beiträge
    4.934
    Blog-Einträge
    1
    Hi,du hast mit den 100% ein Problem weil sich die Höhe 100% auf de nInhalt des DIV bezieht und nicht darauf wie groß das Browserfenster ist. Hier verhält sich der FF etc. richtig und der IE falsch!
    Das Verständnis für dieses Verhalten ist oftmals beim CSS-Schreiberling auch falsch vorhanden weshalb viele meinen der iE würde es richtig machen .
    Wie du das Div hin bekommst das es sich am Browerfenster orientiert kannst du hier: nachlesen:http://www.gn-webdesign.de/css-tutor...eight-100.html

    Ansonsten wenn du eine Webseite haben möchtest die sich dynamisch anpassen kann so solltest du dich auch mal mit der relativen Größenangabe em befassen und auch das CSS-3 Thema Medie-Queries könnte für dich interessant sein. Da gibt es auch schon vorgefertigte CSS-Dateien für.

    Viele Grüße
    tinchern06 bedankt sich. 
    Dirt is my World
    www.janstieler.de coming soon!
    Xing Profil (OpenBC)
    del.icio.us Profil
    flickr Profil

    Portfolio

    Bitte bewerte mich wenn ich dir weitergeholfen habe. Und makiere dein Beitrag als erledigt wenn das Problem geklärt wurde.
    Information zum neuen Bewertungsmodell.
    Zitieren Zitieren
  3. 20.10.11 21:31 #3
    tinchern06 tinchern06 ist offline Mitglied
    Registriert seit
    Sep 2011
    Beiträge
    17
    Guten Abend,

    habe mir die Seite angesehen und die fehlenden Code eingefügt. Funktioniert super, der Text wird jetzt abgeschnitten. Eigentlich ganz simpel, aber auf hidden im wrapper wäre ich wahrscheinlich nicht so schnell gekommen. Mit dem Elter/Tochterelemt Regel konnte ich auch die % Angaben bei overflow einfügen, so daß jetzt alles perfekt ist.

    Ja ich weiß das em Angaben nötig sind, habe ja auch schon damit angefangen und werde dies auch noch ändern.

    Vielen, Vielen Dank für die Hilfe
    LG tinchern06
     
    Zitieren Zitieren
« Problem beim Positionieren des Banners | Internet Explorer mag mich nicht :( »

Ähnliche Themen

  1. Laufschrift läuft über Seitenrand hinaus ... wie kann ich ihn begrenzen?
    Von shortyle im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 19.08.11, 12:29
  2. Text geht über den Tabellenrand hinaus
    Von diogenuss im Forum CSS
    Antworten: 5
    Letzter Beitrag: 03.04.10, 15:11
  3. Text über DIV hinaus
    Von L99P im Forum PHP
    Antworten: 3
    Letzter Beitrag: 09.08.08, 14:06
  4. iFrame height="auto" geht nicht
    Von DaRealMC im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 30.12.05, 20:25
  5. Menü wird nicht über Frame hinaus hinaus angezeig
    Von Plantus im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 19.11.04, 11:07