Sponsor-Board.de
[S]Hilfe für mein HTML-Problem

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: [S]Hilfe für mein HTML-Problem (/showthread.php?tid=38378)

[S]Hilfe für mein HTML-Problem - moser96 - 28.04.2013 21:14

Hallo Leute,

Ich habe ein Problem und zwar möchte ich eine Box oben haben mit 80px und width: 100% und die 2. sollte darunter liegen mit overflow:hide und den Rest der Seite ausfüllen. Ich poste weiter unter meinen Quellecode ein sowie eine kleines Bild zur Veranschaulichung von meinem kleinen Problem.

Problem: Das habe ich soweit hinbekommen, jedoch geht die Scrollbar über das Browserfenster (Chrome, Firefox und IE) hinaus...

Bild:

http://1.2.3.9/bmi/www10.pic-upload.de/28.04.13/cb3snq2fuiy.png(!https)

Code:

Zitat:
<!DOCTYPE html>
<html>
<head>
<style>
#oben
{
background: red;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#unten
{
position: absolute;
top: 80px;
height: 100%;
width:100%;
background: yellow;
overflow: auto;
}
</style>
</head>
<body>
<div id="oben" />
<div id="unten">
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
</div>
</body>
</html>


Gegenleistung:

  • Danke
  • ...


Mit freundlichen Grüßen
Moser Michael

RE: [S]Hilfe für mein HTML-Problem - befla - 28.04.2013 22:14

URL zur Seite? Ich sehe kein Bild

RE: [S]Hilfe für mein HTML-Problem - Tealk - 28.04.2013 22:23

mit overflow:hide

height: 100%;
width:100%;
background: yellow;
overflow: auto;

also du widersprichst dir damit selber außerdem heißt es richtig overflow: hidden;
dazu gibt aber bitte eine feste höhe an

RE: [S]Hilfe für mein HTML-Problem - MeinEnergy - 29.04.2013 10:00

Hallo,

wenn ich mir das mal anschaue sieht das so aus:
[Link: Registrierung erforderlich]

Zitat:
Problem: Das habe ich soweit hinbekommen, jedoch geht die Scrollbar über das Browserfenster (Chrome, Firefox und IE) hinaus...


Bei mir geht da nichts über das Browserfenster hinaus. Die Obere Box ist nur getrennt von der unteren Wink

Evtl. hilft dir das ja weiter Wink Habe es mit Seitenrand aber fließend gemacht

Code:
<head>
<title>Yellow and Red</title>
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    margin: 0;
    padding: 0;
    color: #000;
}


ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    
    padding-right: 15px;
    padding-left: 15px;
}


.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FF0;
    margin: 0 auto;
}


.header {
    background-color: #F00;
}


.content {
    padding: 10px 0;
}


.content ul, .content ol {
    padding: 0 15px 15px 40px;
}


.footer {
    padding: 10px 0;
    background-color: #F00;
}

.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
  <div class="header">Header</div>
  <div class="content">
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br /></div>
  <div class="footer">
    <p>Fußzeile</p>
</div>
</div>
</body>
</html>



RE: [S]Hilfe für mein HTML-Problem - moser96 - 29.04.2013 14:14

Sry Leute wahrscheinlich habe ich es so schlecht erklährt. Ich versuche es nochmal. Eine Box (die rote im Bild) ist oben fixiert und soll nicht mitscrollen. (width: 100% und height: 80px)

Die 2.Box (gelb am Bild) soll darunter sein und der Content soll scrollbar sein, jedoch sollte die Scrollbar wirklich erst unter der roten Box anfangen und im Fenster aufhören.

Jedoch dadurch das die Höhe 80 px vom oberen ist move ich die gelbe Box 80px nach unten, dadurch ändert sich jedoch nicht die 100 % für die Höhe des gelben und die gelbe box wird 80 px außerhalb des Browserfensters geschoben.

Bild so sollte es aussehen:
[Link: Registrierung erforderlich]

RE: [S]Hilfe für mein HTML-Problem - MeinEnergy - 29.04.2013 14:46

Also bei mir macht dein Code genau das, was du auch möchtest. In meinem Browser sieht es genau so aus wie auf deinem Bild.

RE: [S]Hilfe für mein HTML-Problem - moser96 - 29.04.2013 14:52

MeinEnergy bitte beachte mal die Scrollbar genauer bzw. schiebe sie ganz nach unten... die wandert über das Fensterhinaus, jedoch nicht sichtbar.
MFG

RE: [S]Hilfe für mein HTML-Problem - MeinEnergy - 29.04.2013 16:30

Denn nimm doch einfach mein beispiel Wink