<div> wird bei "Überbreite" nach unten verschoben

<div> wird bei "Überbreite" nach unten verschoben

Beitragvon mareje » 21.01.2010, 08:38

Hallo,

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

format.css:

Code: Alles auswählen
/* 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:

Code: Alles auswählen
<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
mareje
neu hier
 
Beiträge: 3
Registriert: 21.01.2010, 08:33

Re: <div> wird bei "Überbreite" nach unten verschoben

Beitragvon sejuma » 21.01.2010, 09:44

Nimm beim body das "overflow: hidden;" raus und definiere #content so, wobei ich auch noch den height-Wert weglassen würde:

Code: Alles auswählen
#content {
height: 90%;
background-color: #ebebeb;
padding: 20px;
}
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: <div> wird bei "Überbreite" nach unten verschoben

Beitragvon mareje » 21.01.2010, 09:49

sejuma hat geschrieben:Nimm beim body das "overflow: hidden;" raus und definiere #content so, wobei ich auch noch den height-Wert weglassen würde:

Code: Alles auswählen
#content {
height: 90%;
background-color: #ebebeb;
padding: 20px;
}


Sorry, aber leider funktioniert das nicht. Bringt nicht den gewünschten Erfolg.

wegen overflow:hidden für den body: das funktioniert eigentlich sehr gut, da die Scrollbalken ja im "Content" angezeigt werden sollen. Die Navigationsleisten werden nie breiter oder höher als der Bildschirm sein.
Es ist auch Vorgabe, dass beim Scrollen die Navigation sichtbar bleibt!

Wie kann ich dies erreichen?
mareje
neu hier
 
Beiträge: 3
Registriert: 21.01.2010, 08:33

Re: <div> wird bei "Überbreite" nach unten verschoben

Beitragvon sejuma » 21.01.2010, 11:47

So?
Code: Alles auswählen
body, html
{
height: 20%;
margin: 0;
padding: 0;
width: 100%;
}

#content
{
height: 90%;
overflow: auto;
background-color: #ebebeb;
margin-left: 120px;
padding: 20px;
}
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: <div> wird bei "Überbreite" nach unten verschoben

Beitragvon mareje » 21.01.2010, 14:35

mareje
neu hier
 
Beiträge: 3
Registriert: 21.01.2010, 08:33


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "<div> wird bei "Überbreite" nach unten verschoben"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast