Lord Lommel
New member
Hallo,
ich versuche mich das erste Mal damit, eine Seite komplett ohne Tabellen aufzubauen. Nur habe ich einige Startschwierigkeiten. Da ich normalerweise das Design anderen überlasse und mich aufs Programmieren von JS und serverseitiger Skripte beschränke ist meine CSS-Erfahrung ein wenig verkümmert.
Hier erstemal die Seite, um die es geht:
http://www.starfleetonline.de/test/
Das ist eine Design-Studie, deshalb keine Schrift und so.
Hier noch der Code:
und die CSS-Datei:
Jetzt das Problem:
Das Design ist ja so gebaut, daß es immer schön bildschirmfüllend ist. Dummerweise gibt es Probleme, wenn es kleiner wird. Jeder kann das sehen, wenn er das Fenster verkleinert und nach rechts scrollt.
Prinzipiell möchte ich das folgende: Sollte der innere Bereich des Fensters unter 1000x500 Pixel fallen, so sollen Scrollbalken angeboten werden, so daß der Bereich der Seite weiterhin 1000x500 Pixel groß ist. Dann sollen die Elemente unten beim Scrollen auch nicht unten am Bildschirm hängen, sondern mit reingescrollt werden, ebenso die rechte Seite. Der untere Bereich der rechten Grafik soll aber ruhig abgeschnitten werden, der ist nicht so wichtig.
Ich habe jetzt schon probiert, aber so richtig kommen ich nicht weiter. Das Design soll mindestens unter FF2+3 und IE6+7 ohne JS funktionieren.
Ich hoffe ich habe mich nicht zu umständlich ausgedrückt. Schonmal vielen Dank im Voraus !
ich versuche mich das erste Mal damit, eine Seite komplett ohne Tabellen aufzubauen. Nur habe ich einige Startschwierigkeiten. Da ich normalerweise das Design anderen überlasse und mich aufs Programmieren von JS und serverseitiger Skripte beschränke ist meine CSS-Erfahrung ein wenig verkümmert.
Hier erstemal die Seite, um die es geht:
http://www.starfleetonline.de/test/
Das ist eine Design-Studie, deshalb keine Schrift und so.
Hier noch der Code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="lcars.css">
<style type="text/css">
</style>
</head>
<body>
<div class="main_div">
<div class="left_menu">
<div class="sub_menu" style="top:120px;height:80px;">
<a href="" style="top:4px;"><img src="submenu_button.png" /></a>
<a href="" style="top:29px;"><img src="submenu_button.png" /></a>
<a href="" style="top:54px;"><img src="submenu_button.png" /></a>
</div>
<div class="sub_menu" style="top:220px;height:130px;">
<a href="" style="top:4px;"><img src="submenu_button.png" /></a>
<a href="" style="top:29px;"><img src="submenu_button.png" /></a>
<a href="" style="top:54px;"><img src="submenu_button.png" /></a>
<a href="" style="top:79px;"><img src="submenu_button.png" /></a>
<a href="" style="top:104px;"><img src="submenu_button.png" /></a>
</div>
<div class="status_top">
<img src="status_button.png" style="top:5px;" />
<img src="status_button.png" style="top:30px;" />
</div>
<div class="status_bottom">
<img src="status_button.png" style="top:5px;" />
<img src="status_button.png" style="top:30px;" />
<img src="status_button.png" style="top:55px;" />
</div>
</div>
<div class="top_left"></div>
<div class="right_label"></div>
<div class="main_menu" style="width:270px;">
<a href="" style="top:0px;left:6px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:27px;left:6px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:54px;left:6px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:0px;left:94px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:27px;left:94px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:54px;left:94px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:0px;left:182px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:27px;left:182px;"><img src="mainmenu_button.png" /></a>
<a href="" style="top:54px;left:182px;"><img src="mainmenu_button.png" /></a>
</div>
<div class="effect">
<img src="effect_blue.png" style="bottom:0px;left:0px;" />
<img src="effect_silver.png" style="bottom:20px;left:0px;" />
<img src="effect_blue.png" style="bottom:40px;left:0px;" />
<img src="effect_silver.png" style="bottom:60px;left:0px;" />
<img src="effect_blue.png" style="bottom:80px;left:0px;" />
<img src="effect_silver.png" style="bottom:0px;left:36px;" />
<img src="effect_blue.png" style="bottom:20px;left:36px;" />
<img src="effect_silver.png" style="bottom:40px;left:36px;" />
<img src="effect_silver.png" style="bottom:60px;left:36px;" />
<img src="effect_silver.png" style="bottom:80px;left:36px;" />
<img src="effect_blue.png" style="bottom:0px;left:72px;" />
<img src="effect_blue.png" style="bottom:20px;left:72px;" />
<img src="effect_blue.png" style="bottom:40px;left:72px;" />
<img src="effect_silver.png" style="bottom:60px;left:72px;" />
</div>
</div>
</body>
</html>und die CSS-Datei:
HTML:
body {
background-color: #000000;
background-image: url(background.png);
background-repeat: repeat-x;
}
div.main_div {
}
/* Haupt-Bilder */
div.left_menu {
position: absolute;
background-image: url(left_menu.png);
background-repeat: repeat-y;
top: 0px;
left: 0px;
height: 100%;
width: 121px;
}
div.top_left {
position: absolute;
background-image: url(top_left.png);
background-repeat: no-repeat;
top: 21px;
left: 121px;
height: 120px;
width: 296px;
}
div.right_label {
position: absolute;
background-image: url(right_label.png);
background-repeat: no-repeat;
top: 0px;
right: 0px;
height: 100%;
width: 267px;
}
/* feste Elemente */
div.status_top {
background-color: #000033;
position: absolute;
top: 15px;
left: 15px;
height: 55px;
width: 90px;
}
div.status_top img {
border-width: 0px;
position: absolute;
left: 5px;
height: 20px;
width: 80px;
}
div.status_bottom {
background-color: #000000;
position: absolute;
bottom: 15px;
left: 15px;
height: 80px;
width: 90px;
}
div.status_bottom img {
border-width: 0px;
position: absolute;
left: 5px;
height: 20px;
width: 80px;
}
div.effect {
position: absolute;
bottom: 0px;
left: 126px;
height: 100px;
width: 100px;
}
div.effect img {
border-width: 0px;
position: absolute;
height: 20px;
width: 31px;
}
/* dynamische Elemente */
div.main_menu {
background-color: #000033;
position: absolute;
top: 20px;
left: 450px;
height: 82px;
}
div.main_menu a {
background-color: transparent;
position: absolute;
height: 26px;
width: 82px;
cursor: pointer;
}
div.main_menu a:hover {
background-color: #FF0000;
}
div.main_menu a img {
border-width: 0px;
position: absolute;
height: 24px;
width: 80px;
top: 1px;
left: 1px;
}
div.sub_menu {
background-color: #000033;
position: absolute;
left: 15px;
width: 90px;
}
div.sub_menu a {
background-color: transparent;
position: absolute;
height: 22px;
width: 82px;
left: 4px;
cursor: pointer;
}
div.sub_menu a:hover {
background-color: #FF0000;
}
div.sub_menu a img {
border-width: 0px;
position: absolute;
height: 20px;
width: 80px;
top: 1px;
left: 1px;
}Jetzt das Problem:
Das Design ist ja so gebaut, daß es immer schön bildschirmfüllend ist. Dummerweise gibt es Probleme, wenn es kleiner wird. Jeder kann das sehen, wenn er das Fenster verkleinert und nach rechts scrollt.
Prinzipiell möchte ich das folgende: Sollte der innere Bereich des Fensters unter 1000x500 Pixel fallen, so sollen Scrollbalken angeboten werden, so daß der Bereich der Seite weiterhin 1000x500 Pixel groß ist. Dann sollen die Elemente unten beim Scrollen auch nicht unten am Bildschirm hängen, sondern mit reingescrollt werden, ebenso die rechte Seite. Der untere Bereich der rechten Grafik soll aber ruhig abgeschnitten werden, der ist nicht so wichtig.
Ich habe jetzt schon probiert, aber so richtig kommen ich nicht weiter. Das Design soll mindestens unter FF2+3 und IE6+7 ohne JS funktionieren.
Ich hoffe ich habe mich nicht zu umständlich ausgedrückt. Schonmal vielen Dank im Voraus !
Zuletzt bearbeitet: