 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: 
|
Verfasst Mi 23.11.2005 15:46
Titel
|
  |
|
1. Benutze deinen Edit-Button und lass die Mehrfach-Postings, da hat man sonst keinen Bock, sich mit deinen Panik-Attacken zu beschäftigen!
2. Gib den Webspace frei, da ist ne Passwortabfrage drauf und außerdem bringt es nichts, wenn du lokale Dateien verlinkst. 
3. Fang am besten nochmal ganz neu an:
Du willst also eine Seite, die HORIZONTAL mittig sitzt und "nach unten offen" ist. Demnach wäre also eine Höhenangabe völliger Quatsch, mal von min-height abgesehen, aber damit solltest du dich jetzt nicht beschäftigen.
Schritt 1
| Code: | <body>
<div id="wrapper"></div>
</body> |
dazu das CSS:
| Code: | #wrapper {
width: 900px;
margin: 10px auto 0 auto;
} |
Der DIV #wrapper ist jetzt immer so hoch wie sein Inhalt, da wir noch keinen haben, ist er also erstmal nicht sichtbar. Da dein rechter Bereich durchgehend, von oben nach unten, rot sein soll, würde ich da gar nicht groß mit DIVs rumprobieren, sondern einfach dem wrapper eine Hintergrundkachel zuweisen, 900px breit und 1px hoch, rechter Bereich bspw. 250px Rot.
| Code: | #wrapper {
width: 900px;
margin: 10px auto 0 auto;
background: url(images/tile_wrapper.jpg) repeat-y;
} |
Nun kannst du in deinem wrapper anfangen, weitere DIVs zu verschachteln. Ich nehme an, du willst den rechten Bereich über die volle Höhe, links daneben der head und darunter der content. Im HTML sieht das folgendermaßen aus:
| Code: | <body>
<div id="wrapper">
<div id="links">
<div id="head"></div>
<div id="content"></div>
</div>
<div id="rechts"></div>
</div>
</body> |
Um die DIVs nun vernünftig zu platzieren, sind im CSS folgende Deklarationen notwendig:
| Code: | #wrapper {
width: 900px;
margin: 10px auto 0 auto;
background: url(images/tile_wrapper.jpg) repeat-y;
}
#links {
float: left;
width: 650px;
}
#head {
width: inherit;
height: 100px;
background: #fc0;
}
#content {
width: inherit;
height: 500px; /* Nur zur Verdeutlichung / Höhe entfernen, wenn da wirklich Content drin ist */
background: #360;
}
#rechts {
float: left;
width: 250px;
height: 300px; /* Nur zur Verdeutlichung / Höhe entfernen, wenn die Grafiken drin sind (s.u.) */
background: #c00;
} |
Die Höhe des DIVs #rechts ist aufgrund der Kachel egal, es hat also den Anschein, als wäre der immer 100% hoch. wenn du da jetzt die Grafiken reinlegst, hört der DIV selbst zwar nach den Grafiken auf, was allerdings nicht auffällt, weil die Kachel weiterläuft bis zum Ende.
Zuletzt bearbeitet von way2hot am Mi 23.11.2005 15:48, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
miras
Threadersteller
Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 23.11.2005 16:18
Titel
|
|
|
danke erstmal, für deine Mühe und Geduld. Die links funzen jetzt.
also ich versuch nochmal den Aufbau zu erklären, der Wrapper soll ne Breite von 750 haben (waren erst 900), der soll nur weiß sein mit nem roten Rand der alles umschließt. Oben in den wrapper soll nen div (750) mit dem header. Darunter links (oh da fällt mir grad auf hatte immer von #rechts gesprochen, man bin ich doof, SORRY) soll nen DiV wo 2 pics untereinander sind, dieses soll immer so hoch sein wie der Wrapper, geht die Höhe über die Gesamthöhe der beiden Bilder hinaus soll es nicht weiß sein, sondern dieses rot (kann man ja auch mit dem Image machen was du meintest).rechts daneben der große Teil da soll der Content rein, ist dieser COntent mal größer (zum scrollen) soll sich der #wrapper dann mit der Höhe anpassen.
Hoffe ich habs jetzt ein wenig genaue rerklärt.
Soweit hauts ja hin eben blos nicht mit diesen Höhen das die sich anpassen an den Content.
Deinen Code und neu anfangen, werd ich mal wenn mer Zeit bleibt.
|
|
| |
|
|
|
Anzeige
|
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Mi 23.11.2005 17:40
Titel
|
|
|
| miras hat geschrieben: | | Darunter links (oh da fällt mir grad auf hatte immer von #rechts gesprochen, man bin ich doof, SORRY) soll nen DiV wo 2 pics untereinander sind, |
dann musst du nur im HTML meines Beispiels den DIV mit der ID #rechts über den mit der ID #links packen und es ist so, wie du das haben willst. IDs kannste ja nach Belieben benennen.
|
|
| |
|
|
miras
Threadersteller
Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 24.11.2005 09:10
Titel
|
|
|
hey super vielen Dank, mit dein Bsp. hat erstmal geklappt, muss ich halt nur noch meinen Kram reinpacken.
Aber ein paar Fragen hätte ich noch zum Verständnis (wills auch kapieren, damit ich beim nächsten mal weiß was ich tue):
Achso ich hab rechts jetzt links genannt und umgekehrt, nicht das du dich wunderst:
1) was hat es mit float auf sich? Hab schon im Netz geschaut, abe rich werd daraus irgendwie nicht schlau, check das nicht so wie die das beschreiben?
2) inherit heißt so viel wie vererben? Heißt das jetzt das wenn #content in #rechts liegt, rechts hat width:300px, content width: inherit -> soll heißen content übernimmt immer die größe von #rechts
3)Soll man so gut es geht auf positionieren verzichten !!??? Dachte dann ahut er sie ir sonst wo hin, da er ja nicht weiß wo ich die DIVs hinhaben will?!
Wie gesagt mega dank nochmal.
Würd zwar noch ne Weile dauern, bis ich so damit umgehen kann wie mit meinen Tabellen, aber abwarten und Tee trinken
lg die miras
Nachtrag:
Hab jetzt mal meine Inhalte angefangen einzubinden, im IE siehts ganz gut aus, im FF aber nicht. An was kann das liegen, was interpretiert der FF anders oder gar nicht als der IE??
Bitte mal im IE und FF anschauen.DANKE.
klick
Zuletzt bearbeitet von miras am Do 24.11.2005 14:39, insgesamt 3-mal bearbeitet
|
|
| |
|
|
miras
Threadersteller
Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 24.11.2005 14:40
Titel
|
|
|
hab jetzt mal gegoogelt, find aber nichts warum der Rahmen im IE angezeigt wird und im FF net, weiß da jemand weiter?
Bsp.:
link
THANX
|
|
| |
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Do 24.11.2005 16:48
Titel
|
|
|
| miras hat geschrieben: | | 1) was hat es mit float auf sich? Hab schon im Netz geschaut, abe rich werd daraus irgendwie nicht schlau, check das nicht so wie die das beschreiben? |
Float kommt von Umfließen, sprich: Zwei gefoatete Elemente mit einer festen Breite richten sich, sofern Platz vorhanden, nebeneinander aus. Wenn die Elemente zu breit sind, um auf der zur Verfügung stehenden Fläche nebeneinander zu floaten, rutscht eines der der beiden in die nächste Zeile. Mit Hilfe von margin lassen sich floatende elemente auch so positionieren, wei du das möchtest. Allerdings hat der IE da wie an so vielen anderen Stellen auch, "einpaar" Bugs, welche die Arbeit ungemein erschweren.
Geh also bitte bei deinen Layouts zuerst vom Firefox aus und schau danach erst, was der IE damit macht. Ganz wertvolle Erkenntnis. 
| miras hat geschrieben: | | 2) inherit heißt so viel wie vererben? Heißt das jetzt das wenn #content in #rechts liegt, rechts hat width:300px, content width: inherit -> soll heißen content übernimmt immer die größe von #rechts |
| miras hat geschrieben: | | 3)Soll man so gut es geht auf positionieren verzichten !!??? Dachte dann ahut er sie ir sonst wo hin, da er ja nicht weiß wo ich die DIVs hinhaben will?! |
Siehe 1.
Gewusst wie... wenn du es richtig anstellst, kannst du auch ohne absolute Positionierungen deine Layouts vernünftig realisieren. Gehört halt etwas Übung dazu.
| miras hat geschrieben: | Nachtrag:
Hab jetzt mal meine Inhalte angefangen einzubinden, im IE siehts ganz gut aus, im FF aber nicht. An was kann das liegen, was interpretiert der FF anders oder gar nicht als der IE?? |
Ich tippe jetzt spontan mal darauf, dass der FF die borders zur Breite hinzuzählt, der IE sie aber innerhalb des DIVs anzeigt, also von der Fläche des DIVs abzieht. Verlass dich aber etzt nicht auf die Aussage, müsste ich selbst mal genauer nach schauen.
|
|
| |
|
|
miras
Threadersteller
Dabei seit: 19.05.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 25.11.2005 08:28
Titel
|
|
|
heut werd ich es nicht schaffen mich daran zusetzen, vil. am WE. oder am Montag wieder. Kannst dir den Link ja trotzdem mal anschauen (natürlich nur wenn Zeit ist) und dann deine Meinung sagen, woran es liegen könnte.
thanx
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
mittig positionieren ...
CSS : Mittig positionieren. Hilfe!
grafik mit css mittig positionieren
Seite mittig positionieren via css
jquery slideshow mittig positionieren
HTML/CSS UL mit IMG mittig?
|
|
|
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.
|
|
