mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 13:25 Benutzername: Passwort: Auto-Login

Thema: [CSS] feste Spalten - Seite soll horizontal scrollen vom 16.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] feste Spalten - Seite soll horizontal scrollen
Seite: 1, 2, 3  Weiter
Autor Nachricht
Anna2202
Threadersteller

Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Do 16.02.2006 16:33
Titel

[CSS] feste Spalten - Seite soll horizontal scrollen

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 16.02.2006 17:49
Titel

Antworten mit Zitat Zum Seitenanfang

Hab nicht wirklich verstanden was du vorhast.
Kannst du das mal in einer Grafik verdeutlichen? *Huch*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
logaan

Dabei seit: 05.02.2006
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Do 16.02.2006 18:02
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anna2202
Threadersteller

Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Do 16.02.2006 18:26
Titel

Antworten mit Zitat Zum Seitenanfang

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? Menno!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bigdeal

Dabei seit: 14.07.2005
Ort: Aßlar
Alter: 40
Geschlecht: Männlich
Verfasst Do 16.02.2006 18:52
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anna2202
Threadersteller

Dabei seit: 18.04.2005
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Do 16.02.2006 20:30
Titel

Antworten mit Zitat Zum Seitenanfang

*hu hu huu* das geht nicht. er bricht auch um, siehe:




mit dem anderen gings gar nicht... * Nee, nee, nee * [/img]
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
datenkind

Dabei seit: 28.04.2003
Ort: Eisenach
Alter: 41
Geschlecht: Männlich
Verfasst Do 16.02.2006 22:25
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: Männlich
Verfasst Fr 17.02.2006 00:19
Titel

Antworten mit Zitat Zum Seitenanfang

Bitte mal den Unterschied von ID und Klasse klar machen... Meine Güte!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.