• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kann man einen scrollbalken verschieben

Jhonny

Neues Mitglied
Hallo Leute,

bei meinem derzeitigen Projekt habe ich die Ecken des Inhaltsbereichs mit dem neuen CSS 3 Befehl abgerundet. Wenn jetzt der Inhalt zu groß wird, wird natürlich automatische ein Scrollbalken eingebledet. Dieser Scrollbalken verdeckt aber die abgerundeten Ecken auf der rechten Seite oben und unten.

Meine Frage ist :

Kann man den Scrollbalken nach Innen verschieben, so dass die runden Ecken wieder zu sehen sind ???

Um sich das anzusehen und besser zu verstehen was ich meine, hier ein Screenshot:

Quelltext auf Anfrage ...

HP.JPG
 
Hi,

bei meinem derzeitigen Projekt habe ich die Ecken des Inhaltsbereichs mit dem neuen CSS 3 Befehl abgerundet. Wenn jetzt der Inhalt zu groß wird, wird natürlich automatische ein Scrollbalken eingebledet. Dieser Scrollbalken verdeckt aber die abgerundeten Ecken auf der rechten Seite oben und unten

das sieht man eh nur im FF. Der IE kann damit (noch) nix anfangen.
Warum reicht da nicht der Browserscrollbalken?

Könntest du bitte deine Bilder zurechtstutzen bevor du sie so groß hier reinstellst.

Quelltext auf Anfrage ...

Watt heißt hier "Quelltext auf Anfrage"? :?
Man kommt sich vor wie beim Juwelier wo sowas an den teuersten Stücken steht.

Stell einfach einen Link hier rein, wo man sich das mal anschauen kann.
 
Diese Seite muss auch nur in FF funktionieren weil sie als Präsentation für ein Schulprojekt dient ...

Die Seite steht nicht online, sonst hät ich ja keinen Screenshot gepostet.

Der Browserscrollbalken reicht in dem Fall nicht da der Inhaltsbereich eine festgelegte Höhe hat, wenn diese höhe nicht reicht dann kann man den Inhaltsbereich scrollen um weiter zu lesen, aber nur den Inaltsbereich.

CSS Quelltext:

Code:
[B]#head {

text-align: left;
text-shadow: #666666 3px 3px 5px; 
font-family: Monotype Corsiva; 
font-size: 18px; 
margin-left: 130px;
margin-top: 1%;

}

#content {

background-color: #FFFFFF;
height: 500px;
width: 90%;
margin-top: 1px;
margin-left: 5%;
-moz-box-shadow: #666666 10px 10px 20px 0;
-moz-border-radius: 30px;

}

#navi {

background-color: #666666;
width: 15%;
height: 98%;
float: left;
padding-bottom: 10px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomleft: 30px;
text-shadow: #FFFFFF 1px 1px 3px;

}

#main {

background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 83%;
height: 98%;
float: right;
overflow: auto;
padding: 5px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 30px;

}

#navi li {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-type: none;
text-align: center;
margin-top: 5px;
padding: 10px;

}

#fuss {

color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: oblique;
font-size: 12px;
text-shadow: #666666 3px 3px 5px;

}

[/B]

HTML Quelltext:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="../CSS/screen.css" rel="stylesheet" media="screen,projektion" />
  <title>Projekt Bierkasten-PC</title>
  <style type="text/css">
 
  h4 + li {
  
  background-color: #FFFFFF;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomleft: 30px;
  
  }
  
  a:hover {
  
  color: #000000;
  background-color: #FFFFFF;
  text-decoration: none;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomleft: 30px;
  
  }
  
  a:link {
  
  color: #00FF66;
  text-decoration: none;
  text-shadow: #666666 1px 1px 3px;
  
  }
  
  a:visited {
  
  color: #00FF66;
  text-decoration: none;
  
  }
  
  </style>  
 </head>
 <body>
 <div id="head">
  Bierkasten - PC
 </div> 
  <div id="content">
   <div id="navi">
     <ul>
      <br />
      <li><a href="index.html"><b>Home</b></a></li>
      <li><a href="planung.html"><b>Planung</b></a></li>
      <li><a href="umsetzung.html"><b>Umsetzung</b></a></li>
      <h4></h4>
      <li><span class="aktiv"><b>Bilder</b></span></li>
      <li><a href="im.html"><b>Impressum</b></a></li>
     </ul> 
   </div>
   <div id="main">
    <h1>Bildergallerie</h1>
    <br />
    <br />
    <div align="center">
     <img src="../Bilder/PC.jpg" alt="Bierkasten-PC" />
     <br />
     <img src="../Bilder/PC2.jpg" height="206" width="210" alt="Bierkasten PC" />
     <br />
     <img src="../Bilder/PC3.jpeg" height="206" width="210" alt="Bierkasten PC" />
    </div> 
   </div>
  </div>
  <div id="fuss">
   <br />
   <p><b>&copy; Jhonny</b></p>
  </div> 
 </body>
</html>
 
Der Browserscrollbalken reicht in dem Fall nicht da der Inhaltsbereich eine festgelegte Höhe hat, wenn diese höhe nicht reicht dann kann man den Inhaltsbereich scrollen um weiter zu lesen, aber nur den Inaltsbereich.
Wozu die festgelegte Höhe?

Wenn du davon nicht ablassen willst ziehe einen weiteren Container mit entsprechendem padding um die Scrollbox und weise diesem den Rahmen zu.
 
Zurück
Oben