CSS: Großes Problem mit float und Liste
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
bild
code
energiesystem
entwicklung
ergebnis
grafik
http
liste
pixel
position
problem
raten
setzen
solartechnik
system
text
umstehenden text
verpassen
ziel
-
Ich bin gerade ein Webdesing am erstellen.
Ich habe nun ein Bild das auf \"float: left;\" gesetzt ist, damit der Text schön links am Bild vorbeifließen kann. Das funktioniert auch wunderbar, aber wenn ich jetzt eine Liste unter z.B. einen Absatz setze, befinden sich die Bullets genau im Rand des Bildes.
Hier ist ein Link mit einer Grafik des Problems:
http://m84.lima-city.de/liste.jpg
... und hier ist der Syste der Grafik:
.bodyimg { padding: 3px; border: 1px #C0C0C0 solid; float: left; margin-right: 10px; }
Kann mir jemand sagen, wie man das behoben kriegt?? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das marign-right bezieht sich nur auf den Text. Die Bullets werden meines Wissens nicht mir einbezogen. Sollen die Bullets wirklich angezeigt werden?
Wenn ja, bleibt dir nichts anderes übrig als das margin-right anzupassen.
Grüße, Moritz -
Ich würd einfach mal raten, und der Liste nen margin-left verpassen :/
(AFAIK sind Elemente mit ner Float-Angabe automatisch position:absolute. Werdern also bei position:relative-Elementen nicht mit einbezogen. Deshalb würd ich einfach soviel margin-left probieren, wie das Bild breit ist und noch n paar Pixel mehr. (Ich glaub irgendwie, dass das falsch ist ._.)) -
Ich möchte halt ganz normal die Liste weiterbenutzen können. Was meinst Du damit, das margin-right anzupassen? Gibt es da irgendeine Möglichkeit?
-
Ich würd einfach mal raten, und der Liste nen margin-left verpassen :/
(AFAIK sind Elemente mit ner Float-Angabe automatisch position:absolute. Werdern also bei position:relative-Elementen nicht mit einbezogen. Deshalb würd ich einfach soviel margin-left probieren, wie das Bild breit ist und noch n paar Pixel mehr. (Ich glaub irgendwie, dass das falsch ist ._.))
Wenn ich margin-left so hoch setze, gibt es doch Probleme, wenn ich mal eine Liste unterhalb des Bildes setzen möchte. -
Kanns du den kompletten code posten? Also das Bild als auch die Liste, dann können wir besser helfen.
Mit:
ul { list-style-position:inside; }
müsste es funktionieren. -
Mit \"ul { list-style-position:inside; }\" siehts schonmal ganz gut aus. Allerdings bringt das noch nicht so ganz das gewünschte Ergebnis, weil ich bei einem Zeilenumbruch nicht eingerückt wird.
Hier ist nochmal ein Bild von dem jetzigen Stand:
http://m84.lima-city.de/liste2.jpg
\"body.php\"
<div id=\"content\"> <img src=\"images/main.jpg\" class=\"bodyimg\"> <?php if (isset($_GET[\'sec\'])) $_SESSION[\'sec\'] = $_GET[\'sec\']; if (!isset($menuitems[$_SESSION[\'sec\']])) $_SESSION[\'sec\'] = $defaultpage; include \'include/\' . $menuitems[$_SESSION[\'sec\']]; ?> <div style=\"clear: both;\"></div> </div>
Das Bild wird in der 2ten Zeile eingebunden.
Der PHP Code ist nur für das Menü. Gehen wir davon aus, das \"about_up.php\" geladen wird.
\"about_us.php\"
<?php echo ABOUT_US_TEXT; ?>
ABOUT_US_TEXT wird aus der jeweiligen Sprachdatei geladen. Gehen wir mal von \"deutsch.php\" aus.
\"deutsch.php\"
<?php /* ... unwichtig ... */ define(\'ABOUT_US\', \'Über uns\'); define(\'ABOUT_US_TEXT\', \'<h3>Informationen über unser Unternehmen</h3> <p>Soltronic liefert nach Kundenwünschen konzipierte Solarstrom Anwendungen wo:</p> <ul> <li>Schnelle Installation des LED System gefragt ist</li> <li>Wirtschaftliche Montagekosten, Wartung- und Betrieb des LED Systems wichtig sind</li> <li>Umweltverträglichkeit und der Einsatz erneuerbarer Energien Priorität haben</li> <li>Zuverlässigkeit entscheidend ist</li> <li>Ein autarkes Energiesystem die Lösung ist</li> </ul> <h4>Unser Ziel</h4> <p>Wir sind überzeugt davon dass die Solartechnik eine entscheidende Rolle bei der zukünftigen Entwicklung unserer Welt spielen wird. Deshalb haben wir es uns zum Ziel gemacht den Gebrauch der erneuerbaren Energie zu fördern indem wir Kosten reduzieren, die Leistung der Systeme erhöhen und das Bewusstsein für diese Technologie zu verstärken. Die Betreuung unserer Kunden von der Anfrage über das Produkt bis hin zum After Sales Service steht für uns an erster Stelle. Das Soltronic Team entwirft, testet, produziert und prüft alle Artikel um ein hohes Qualitätsniveau sicher zustellen.</p> <p>Mit hunderten installierter autarker Energiesysteme haben wir die Erfahrung uns mit jedem Projekt im Bereich der Solartechnik zu befassen. Wir beobachten genau alle Entwicklungen im Bereich der Photovoltaik, LED Technik, Windtechnik und Brennstoffzellen um jederzeit unsere Produkte und Dienstleistungen dem neusten Stand der Technik anzupassen.</p>\'); /* ... unwichtig ... */ ?>
Beitrag geändert: 29.5.2008 14:51:33 von m84
Beitrag geändert: 29.5.2008 14:52:16 von m84 -
m84 schrieb:
Wenn ich margin-left so hoch setze, gibt es doch Probleme, wenn ich mal eine Liste unterhalb des Bildes setzen möchte.
Was für Probleme gibt\'s denn dann?
Ryan
P.S: Wenn du kein margin-left setzen kannst... Wie wär\'s mit padding-left?
ul { padding-left: 2em; } -
<div style=\"width:200px;height:200px;border:1px solid black;float:left;\">
<img src=\"...\" height=\"100%\" width=\"100%\" />
</div>
<ul style=\"float:left;\">
<li>...djpa jasdp asdjpo <br /> jisa j0sa</li>
<li>...</li>
</li>
IE hat damit jedoch Probleme, welche sich durch XHTML als Doctype lösen lassen müssten.
Beitrag geändert: 29.5.2008 15:27:35 von trueweb -
<div style=\"width:200px;height:200px;border:1px solid black;float:left;\">
<img src=\"...\" height=\"100%\" width=\"100%\" />
</div>
<ul style=\"float:left;\">
<li>...djpa jasdp asdjpo <br /> jisa j0sa</li>
<li>...</li>
</li>
IE hat damit jedoch Probleme, welche sich durch XHTML als Doctype lösen lassen müssten.
Ich verstehe nicht ganz... Was soll dieser Code denn bezwecken?
Viel ändern wird sich da wohl nix, außer, dass die <ul> jetzt links gefloatet wird -.- .
Ryan -
Das mit dem Linksfloat habe ich auch schon ausprobiert. Dadurch wird aber alles nur noch schlimmer.
Naja ... da muss ich mich wohl mit dem jetzigen Ergebnis zufrieden geben. -
Hast du wenigstens versucht margin-left/padding-left der Liste zu erhöhen und dir den Effekt angesehen? Ich persönlich würde peddiing verwenden, wodurch die Liste \"in sich selbst\" eingerückt wird, was ganz schick aussieht und keine Probleme mit dem umstehenden Text macht.
-
Mit margin-left hab ich\'s schon probiert. Da müsste ich die ganze breite des Bildes nehmen ... und das ist ja blödsinn, denn wenn die irgendwann mal eine Liste unter dem Bild dargestellt wird, habe ich da einen riesen Abstand.
Mit padding-left hab ich\'s noch nicht probiert (ich weiss auch nicht wieso). Werde das mal morgen, wenn ich wieder bei der Arbeit bin ausprobieren. Ich hab\' die Dateien leider nicht hier.
Inhalt des 2. Posts:
Hast du wenigstens versucht margin-left/padding-left der Liste zu erhöhen und dir den Effekt angesehen? Ich persönlich würde peddiing verwenden, wodurch die Liste \"in sich selbst\" eingerückt wird, was ganz schick aussieht und keine Probleme mit dem umstehenden Text macht.
Jetzt habe ich\'s mal mit paddin-left versucht. Leider klappt das auch nicht. Ich habe jetzt mal die Hintergrundfarbe der Liste auf rot gesetzt, sodass man sehen kann, wie groß sie eigentlich ist.
Hier ist ein Bild davon: http://m84.lima-city.de/liste.jpg
Das ist genau das Ergebnis, was ich erwartet hatte. Die Liste erstreckt sich über die gesamte Breite und nur der Inhalt wird duch das float:left; des Bildes verschoben. Das ist totaler Mist.
Editiert von moritzpeuser: Doppelpost zusammengefasst. Bitte unterlasse zukünftig Doppelpostings!
Beitrag geändert: 30.5.2008 14:10:29 von moritzpeuser -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
