tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
355
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.01.10 08:50 #1
    mareje Tutorials.de Gastzugang
    Hallo,

    mein Seitenaufbau sieht vereinfacht folgendermaßen aus (die Vereinfachung ist an dieser Stelle ok, da sie das Problem darstellt):

    format.css:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    /* Allgemein Body -> Fensterbreite usw*/
body, html
{
height: 20%;
margin: 0;
padding: 0;
overflow: hidden;
}
 
 
/* Navigation oben */
#nav_top 
{
width: 100%;
background-color: #7693CB;
padding-top: 7px; 
padding-bottom: 7px;
}
 
 
/* Navigation links */
#nav_left 
{
height: 90%;
width: 120px;
background-color: #7693CB;
float: left;
padding-top: 10px;
font-size:9pt;
}
 
 
/* Hauptfenster */
#content 
{
height: 90%;
overflow: auto;
background-color: #ebebeb;
width: auto;
padding: 20px;
}

    Die Seite sieht so aus:

    HTML-Code:
    <html>
<head>
<link rel="stylesheet" type="text/css" href="../css/format.css" media="screen">
</head>
<body>


<!-- NAVIGATION OBEN -->
<div id="nav_top">
Obere Navigation
</div>


<!-- NAVIGATION LINKS -->
<div id="nav_left">
Linke Navigation
</div>

<!-- CONTENT -->

<div id="content">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</div>
</body>
</html>
    Soweit wäre das ja ok. Wenn bei mir im "Content" jedoch eine recht breite Tabelle dargestellt werden muss, so wird der complette "Content" nach unten verschoben. Hier nachvollziehbar, indem man in einer Zeile mit den vielen "m" das Leerzeichen rausnimmt, sodass kein Zeilenumbruch stattfindet.

    Frage: Wie kann ich es lösen, dass bei breitem "Content" dieser an seinem vorgesehenem Platz mit horizontalem Scrollbalken dargestellt wird.
    Denn ist der "Content" höher als die Bildschirmhöhe, dann wird ja auch der vertikale Scrollbalken angezeigt.

    Für eure Hilfe wäre ich sehr dankbar!

    Viele Grüße
    Markus
     
    Zitieren Zitieren
  2. 21.01.10 09:08 #2
    Maik Tutorials.de Gastzugang
    Moin,

    wenn du für den DIV-Block #content bei überbreitem Inhalt (z.B. durch eine eingebundene Tabelle) einen horizontalen Scrollbalken in seinem Anzeigebereich erzwingen willst, hilft dir hier unser CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter.

    Siehe hierzu auch analog Stu Nicholls' Layout-Beispiele, an die sich die zweite vorgestellte Technik lehnt, was den erforderlichen Workaround für den damaligen aktuellen IE6 betraf:
    Denn ist der "Content" höher als die Bildschirmhöhe, dann wird ja auch der vertikale Scrollbalken angezeigt.
    Diese Aussage trifft mit deinem gezeigten Code ausschließlich auf die IE-Familie (Version 6 bis 8) zu, denn in allen übrigen gängigen Browsern sieht man, unabhängig vom Inhaltsumfang in #content, von der Seite lediglich die obere Navigation #nav_top, was mit deiner height:20%-Deklaration für <body> und <html> zusammenhängt, die die restlichen 80% des vertikalen Viewports "beschneidet".

    mfg Maik
     
    Zitieren Zitieren
« Css Problem in der Darstellung manchmal | horizontale Ausrichtung »

Ähnliche Themen

  1. Wenn "include" verwendet wird hab ich keine "body" Ansicht mehr
    Von solala123 im Forum PHP
    Antworten: 12
    Letzter Beitrag: 07.11.10, 19:51
  2. CSS-Container nach unten verschoben
    Von OkaminoChizu im Forum CSS
    Antworten: 3
    Letzter Beitrag: 16.05.10, 16:54
  3. Rechte Tabellenspalte komisch nach unten verschoben
    Von multimolti im Forum HTML & XHTML
    Antworten: 8
    Letzter Beitrag: 18.09.08, 10:16
  4. Text von unten nach oben "rollen"?
    Von GoogleFreak im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 28.03.08, 23:26
  5. "Fließband" mit scrollenden Bildern von unten nach oben?
    Von zinion im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 02.12.07, 10:47