Autor |
Nachricht |
Anna2202
Threadersteller
Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 16.02.2006 16:33
Titel [CSS] feste Spalten - Seite soll horizontal scrollen |
|
|
Hallo zusammen!
Ich versuche mich gerade an meinem ersten layout mit divs. So funktioniert auch alles, wie ich es mir vorgstellt habe, nur schiebt sich die rechte spalte unter die linke, sobald das browserfenster zu schmal wird.
aber erstmal zum aufbau
im moment habe ich zwei nebeneinander stehende spalten, die beide den gleichen style benutzen in dem "float: left" steht. (das ist aber wahrscheinlich schonmal falsch). beide haben eine feste breite von 300px.
- -
| |
| |
| |
- -
neue boxen sollen jeweils links stehen, die älteren rutschen nach rechts. und irgendwann soll die seite dann horizontal scrollbar sein. wenn die boxen nun aber immer vor dem rechten fensterrand flüchten und sich unter die anderen boxen verkrümeln wird das wohl kaum der fall sein.
gesucht habe ich schon im internet, aber immer nur sachen zu 3 spalten gefunden, bei denen die mittlere flexibel ist.
kann mir jm weiterhelfen?
Lg, Anna
Zuletzt bearbeitet von Anna2202 am Do 16.02.2006 16:38, insgesamt 1-mal bearbeitet
|
|
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 16.02.2006 17:49
Titel
|
|
|
Hab nicht wirklich verstanden was du vorhast.
Kannst du das mal in einer Grafik verdeutlichen?
|
|
|
|
|
Anzeige
|
|
|
logaan
Dabei seit: 05.02.2006
Ort: -
Alter: 36
Geschlecht:
|
Verfasst Do 16.02.2006 18:02
Titel
|
|
|
füg in der box rechts ein
Code: | margin-left: 300px; |
ein, müsse klappen
Zuletzt bearbeitet von logaan am Do 16.02.2006 18:02, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anna2202
Threadersteller
Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 16.02.2006 18:26
Titel
|
|
|
ok, die beschreibung war nicht wirklich gut. hier das ganze einfacher als bild:
wie gesagt, es sollen mehrere spalten mit den gleichen attributen nebeneinander stehen und sich nicht der fenstergröße anpassen.
geht das irgendwie?
|
|
|
|
|
bigdeal
Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 40
Geschlecht:
|
Verfasst Do 16.02.2006 18:52
Titel
|
|
|
kurz mal ins blaue geraten
bsp. Höhe 500 breite 300
#box {
position: relative;
height: 500px;
width: 300px;
top: -500px;
left: 20px; //für den Abstand oder 320, müsst man mal ausprobieren
}
Und in der ersten Box einfach top und left auf 0.
Oder wenn dus floaten willst
#containerdiv {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
}
#box {
float: left;
width: 300px;
height: 500px;
margin-right: 20px;
}
Der Aufruf dann
<div id=containerdiv>
<div id=box></div>
<div id=box></div>
<div id=box></div>
...
</div>
Zuletzt bearbeitet von bigdeal am Do 16.02.2006 18:56, insgesamt 3-mal bearbeitet
|
|
|
|
|
Anna2202
Threadersteller
Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Do 16.02.2006 20:30
Titel
|
|
|
das geht nicht. er bricht auch um, siehe:
mit dem anderen gings gar nicht... [/img]
|
|
|
|
|
datenkind
Dabei seit: 28.04.2003
Ort: Eisenach
Alter: 41
Geschlecht:
|
Verfasst Do 16.02.2006 22:25
Titel
|
|
|
Code: |
.box {
position: relative;
background: #ccc;
width: 300px;
height: 500px;
border: 1px solid #000;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
ul {
list-style: none;
display: inline;
}
</style>
|
Code: |
<ul>
<li><div class="box">schubidu 6</div></li>
<li><div class="box">schubidu 5</div></li>
<li><div class="box">schubidu 4</div></li>
<li><div class="box">schubidu 3</div></li>
<li><div class="box">schubidu 2</div></li>
<li><div class="box">schubidu 1</div></li>
</ul>
|
Pass dir's an, wie du es brauchst.
edit: Hach, toll. Merk grad, dass es nicht im IE geht ...
edit2: Richtig gemacht ...
Zuletzt bearbeitet von datenkind am Fr 17.02.2006 14:02, insgesamt 3-mal bearbeitet
|
|
|
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Fr 17.02.2006 00:19
Titel
|
|
|
Bitte mal den Unterschied von ID und Klasse klar machen...
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] Horizontal Scrollen
Horizontal Scrollen mit Previous und Next
Horizontal Scrollen - Dreamweaver
Automatisch horizontal scrollen
DIV dazu bringen per klick horizontal zu scrollen
automatisch mit javascript horizontal und vertikal scrollen
|
|