zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Relative DIV-Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2011, 21:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil Relative DIV-Breite

Ich möchte ein Icon vor einem DIV in einer Reihe platzieren.
Leider funktioniert das so einfach nicht, weder im Firefox noch im Internet Explorer ( 6 / 7 / 8 ).



Schon einmal vorweg: Die Seite ist noch offline und ich kann keinen Link bereitstellen.

Ich verwende das folgende HTML-Konstrukt:
HTML-Code:
[...]
<ul class="list">
[...]
<li><a href="/test2">
<img alt="Symbol" src="/img/static/test/icon.png" class="icon" />
<div class="stripe">
Text Text Text<br />
Text Text Text
</div>
</a></li>
[...]
</ul>
[...]
Code:
[...]
.icon {
float:left;
}

.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
float:right;
width:80%;
height:150px;
}
[...]
Leider bricht der DIV, wie oben aus der Skizze ersichtlich, um. Genau das aber möchte ich eben nicht.

Ich sollte zudem erwähnen, dass dieses Problem bereits in einem anderen Forum besprochen wurde:
http://www.phpforum.de/forum/showthread.php?p=1438655

Vielen Dank für eure Antworten im Voraus!
Mit freundlichen Grüßen
Innocentus

Geändert von Innocentus (23.01.2011 um 21:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2011, 22:11
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Aus deinem Schnipsel ist nicht ersichtlich wie breit .icon ist.
Zeige besser einen Link.

Div in a ist kein valides HTML.
__________________
MfG
Jens

Geändert von plastiko (23.01.2011 um 22:15 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2011, 22:16
Benutzer
neuer user
 
Registriert seit: 02.01.2011
Beiträge: 66
Luziefer befindet sich auf einem aufstrebenden Ast
Standard

also bei mir gehts wenn ich dem ico eine feste breite gebe, dann bleibt alles in der oberen zeile.
Zitat:
.icon {
float:left;
width: 200px;
}

.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
float:right;
width:80%;
height:150px;
}

<body>
<div class="list"><a href="/test2"><img alt="Symbol" src="/img/static/test/icon.png" class="icon" /></a>
<div class="stripe">Text Text Text<br />Text Text Text
</div>
</div>
und das ganze ohne ul oder li

Geändert von Luziefer (23.01.2011 um 22:23 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.01.2011, 22:26
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Das halte ich für Zufall.
Woher willst du wissen das .icon (width:200px) neben .stripe (width:80%) passen?
__________________
MfG
Jens
Mit Zitat antworten
  #5 (permalink)  
Alt 23.01.2011, 23:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil

Vielen Dank zunächst einmal für eure Antworten!

Wie kann ich jetzt vorgehen?
Sollte ich einen völlig anderen Lösungsansatz anstreben?
Ich habe jetzt alles mögliche mit Floating versucht, funktionieren tut es leider nicht.

Es wäre sehr nett, wenn ihr mir hierbei helfen könntet.
Mit freundlichen Grüßen
Innocentus
Mit Zitat antworten
  #6 (permalink)  
Alt 23.01.2011, 23:11
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.024
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Lass .stripe nicht floaten, entferne die Breitenangabe und gib ihm einen entsprechenden Margin nach links.

Solange du nicht HTML5 einsetzt, ist dein Code allerdings immer noch nicht valide. Alternativ zu dem Div könntest du ein Span nehmen und es zum Blockelement machen.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.01.2011, 16:55
Benutzerbild von jetwes
Coder
neuer user
 
Registriert seit: 17.02.2010
Ort: Soest
Beiträge: 56
jetwes wird schon bald berühmt werden
Standard

wie inta richtig gesagt hat:

nimm das float: right; raus und benutze dafür ein margin-left: 20%;

also:

Code:
.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
margin-left: 20%;
width:80%;
height:150px;
}
Gruß
jetwes
Mit Zitat antworten
  #8 (permalink)  
Alt 02.02.2011, 15:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil

Vielen Dank, es hat funktioniert.

Mit freundlichen Grüßen
Innocentus
Mit Zitat antworten
Antwort

Stichwörter
break, breite, div, float, relative, umbruch, unerwünscht, width

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div horizotal zentriert, aber Breite variable(abhängig von inhalt) dagod CSS 3 28.04.2010 20:46
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 22:35
Was übersehe ich? Psyclown CSS 2 19.10.2008 13:00
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite Dwarf CSS 10 12.06.2007 17:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:01 Uhr.