mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Di 23.04.2024 14:56 Benutzername: Passwort: Auto-Login

Thema: CSS: drei <div>-tags ausrichten vom 26.07.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> CSS: drei <div>-tags ausrichten
Seite: 1, 2  Weiter
Autor Nachricht
MicoMalukoo
Threadersteller

Dabei seit: 24.03.2004
Ort: 36037 Fulda
Alter: 45
Geschlecht: Männlich
Verfasst Di 26.07.2005 14:45
Titel

CSS: drei <div>-tags ausrichten

 Antworten mit Zitat Zum Seitenanfang
für einen header habe ich drei bilder:
das linke und das rechte besitzen jeweils eine feste breite, das mittlere ist 1px breit und soll den restlichen whitespace auffüllen bis zum rechten bild.
das linke besitzt float:left; das rechte float:right.

hab schon mehrere versuche gestartet: drei divs in einem, alle drei bilder in einem div, bilder im background..
aber das funzt nicht so richtig. problem macht vor allem das mittlere (width:100%). wie geht sowas?

grase schon den ganzen tag das iNet ab (suche, foren), finde aber nix!

kann mir wer helfen?

greetz
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
copic

Dabei seit: 09.07.2004
Ort: Stuttgart
Alter: 42
Geschlecht: Männlich
Verfasst Di 26.07.2005 14:57
Titel

Antworten mit Zitat Zum Seitenanfang
hiflt dir das?

http://www.stunicholls.myby.co.uk/layouts/3cols.html
  View user's profile Private Nachricht senden
Anzeige
Anzeige
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: Männlich
Verfasst Di 26.07.2005 15:03
Titel

Antworten mit Zitat Zum Seitenanfang
So spontan würd ich mal sagen:

Code:
<div id="head">
   <div id="left"><div>
   <div id="right"><div>
</div>


Code:
#head {
   width: 500px;
   background: url(1pixelgrafik.jpg) repeat-x;
}
#left {
   width: 250px;
   background: url(links.jpg) no-repeat left top;
}
#right {
   width: 250px;
   background: url(rechts.jpg) no-repeat right top;
}



// Unter der Voraussetzung, dass dein Header eine feste Breite hat *zwinker*

Zuletzt bearbeitet von way2hot am Di 26.07.2005 15:08, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
modstyle

Dabei seit: 29.05.2005
Ort: Münster
Alter: 40
Geschlecht: Männlich
Verfasst Di 26.07.2005 15:09
Titel

Antworten mit Zitat Zum Seitenanfang
Hi!

Also so sollte es funktionieren:

Code:

<div style="width: 100%; height: 50px; background-color: black;">
<div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>


Also die beiden linken und rechten mit der festen Größe im "Raumfüller". Beim Linken und Rechten kannst du dann die Bilder einfügen und im umhüllenden 100%-Breiten legste das Pic als Background fest.
  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 Di 26.07.2005 15:13
Titel

Antworten mit Zitat Zum Seitenanfang
modstyle hat geschrieben:
Hi!

Also so sollte es funktionieren:

Code:

<div style="width: 100%; height: 50px; background-color: black;">
<div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>


Also die beiden linken und rechten mit der festen Größe im "Raumfüller". Beim Linken und Rechten kannst du dann die Bilder einfügen und im umhüllenden 100%-Breiten legste das Pic als Background fest.


Ich wage zu bezweifeln, dass die gleichzeitige Nutzung von float:left und float:right zum Erfolg führt. Entweder wird etwas links oder rechts umflossen, aber sich gegenseitig umfließen ist dann doch recht abstrus...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 26.07.2005 15:19
Titel

Antworten mit Zitat Zum Seitenanfang
way2hot.de hat geschrieben:
modstyle hat geschrieben:
Hi!

Also so sollte es funktionieren:

Code:

<div style="width: 100%; height: 50px; background-color: black;">
<div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>


Also die beiden linken und rechten mit der festen Größe im "Raumfüller". Beim Linken und Rechten kannst du dann die Bilder einfügen und im umhüllenden 100%-Breiten legste das Pic als Background fest.


Ich wage zu bezweifeln, dass die gleichzeitige Nutzung von float:left und float:right zum Erfolg führt. Entweder wird etwas links oder rechts umflossen, aber sich gegenseitig umfließen ist dann doch recht abstrus...


du hast recht. sinnvoller ist es nur dem rechten div: float right zu geben. funktionieren tut die andere lösung aber trotzdem.
  View user's profile Private Nachricht senden
MicoMalukoo
Threadersteller

Dabei seit: 24.03.2004
Ort: 36037 Fulda
Alter: 45
Geschlecht: Männlich
Verfasst Di 26.07.2005 15:38
Titel

Antworten mit Zitat Zum Seitenanfang
Au weia! Menno! *Huch* Grins

* huduwudu! * * huduwudu! * * huduwudu! * 1000danks!! * huduwudu! * * huduwudu! * * huduwudu! *

es funzt. dachte dass ich das am anfang auch so aufgebaut habe, aber irgendwo muss ja der fehler gelegen haben.

kann man jetzt noch irgendwie unterbinden, dass beim zusammenziehen des browserfensters die rechte grafik nicht umbricht und in einer zweiten zeile angezeigt wird?

* huduwudu! * * huduwudu! * * huduwudu! *
  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 Di 26.07.2005 15:46
Titel

Antworten mit Zitat Zum Seitenanfang
MicoMalukoo hat geschrieben:
Au weia! Menno! *Huch* Grins

* huduwudu! * * huduwudu! * * huduwudu! * 1000danks!! * huduwudu! * * huduwudu! * * huduwudu! *

es funzt. dachte dass ich das am anfang auch so aufgebaut habe, aber irgendwo muss ja der fehler gelegen haben.

kann man jetzt noch irgendwie unterbinden, dass beim zusammenziehen des browserfensters die rechte grafik nicht umbricht und in einer zweiten zeile angezeigt wird?

* huduwudu! * * huduwudu! * * huduwudu! *


Wie hast du es denn jetzt aufgebaut? Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Drei Bilder in DIV-Tag oben ausrichten?
Drei DIVs in einem DIV
Drei Punkte für Corel 12 ? - CD + RGB + EPS = farbenblind
[Hilfe] Javascript Rollover mit drei Bildern
Photoshop: Mehr als zwei (drei) Farben?
Drei Div-Container nebeneinander- nur das innere skalierbar?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Tipps & Tricks für 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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB