✔ li-Höhe bei float:right Inhalt

Mark · 2. Mai 2007

Hallo Ihr Lieben,

habe versucht zu suchen, aber irgendwie weiß ich gar nicht wonach

Ich stehe einfach auf dem Schlauch und bin mir gleichzeitig sicher, daß folgende Frage leicht zu lösen ist, also bitte nicht schlagen

Ich habe eine Liste, die bei Mouse-Over rechts einen orangen Boarder erhalten soll. In jedem Listen-Element ist ein Span mit float:right, dessen Inhalt also rechtsbündig in der Liste liegt.
Wenn nun aber der Span mit float:right "höher" ist, als das li-Element, wird eben das li nicht höher. Folge ist, daß der orange Boarder nicht über das gesamte li inklusive span reicht, sondern nur über den Inhalt des li...

Siehe auch Screenshot.

CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>list-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.list li {
    border-top: 1px dotted #aaa;
    border-right: 3px solid #fff;
    clear: both;
}

.list li:hover, .list li.activ {
    border-right-color: #f80;
}

.right {
    float: right;
    display:block;
}
-->
</style>
</head>

<body>

<ul class='list'>

<li onMouseover="this.className='activ';return false;" onMouseout="this.className='';return false;"
    onClick="location.href='index.php?id=1';">
    <span class="right">rechts11</span>
    <a href='index.php?id=100'>links1</a></li>
    
<li onMouseover="this.className='activ';return false;" onMouseout="this.className='';return false;"
    onClick="location.href='index.php?id=2';">
    <span class="right">rechts21<br>rechts22</span>
    <a href='index.php?id=100'>links2</a>
    <br>testtest</li>

<li onMouseover="this.className='activ';return false;" onMouseout="this.className='';return false;"
    onClick="location.href='index.php?id=3';">
    <span class="right">rechts31<br>rechts32<br>rechts33</span>
    <a href='index.php?id=100'>links3</a></li>
    
</ul>

</body>
</html>

Weiß jemand, wie ich den Border auch über die Höhe des Span bekomme?
Für jeden Hinweis äußerst Dankbar!

Liebe Grüße,
Mark.

Maik · 2. Mai 2007

Hi Mark,

die einzelnen Floats müssen wieder aufgehoben (gecleart) werden, damit der Inhalt des span-Elements nicht über den unteren Rand des li-Elements hinausläuft.

Clearing a float container without source markup empfiehlt hierfür folgendes CSS:

Code:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse clearfix wird dann jeweils im li-Element aufgerufen und in den beiden Event-Handlern aufgenommen:

Code:

<ul class="list">
<li class="clearfix" onMouseover="this.className='activ clearfix';return false;" onMouseout="this.className='clearfix';return false;"
    onClick="location.href='index.php?id=1';">
    <span class="right">rechts11</span>
    <a href='index.php?id=100'>links1</a></li>

<li class="clearfix" onMouseover="this.className='activ clearfix';return false;" onMouseout="this.className='clearfix';return false;"
    onClick="location.href='index.php?id=2';">
    <span class="right">rechts21<br>rechts22</span>
    <a href='index.php?id=100'>links2</a>
    <br>testtest</li>

<li class="clearfix" onMouseover="this.className='activ clearfix';return false;" onMouseout="this.className='clearfix';return false;"
    onClick="location.href='index.php?id=3';">
    <span class="right">rechts31<br>rechts32<br>rechts33</span>
    <a href='index.php?id=100'>links3</a></li>
</ul>

Mark · 2. Mai 2007

Hi Michael!

Uff, ich dachte schon, ich wäre einfach nur zu blöd

...auf die Lösung wäre ich natürlich im Leben nicht gekommen und wie's ausschaut, werde ich nie ein richtiger Freund vom CSS: die ganze "Ausnahmen", "Tricks & Kniffe" könnt ich mir gar nicht alle merken

Jetzt funktioniert es jedenfalls und dafür danke ich Dir sehr herzlich!

Liebe Grüße,
Mark.

✔ li-Höhe bei float:right Inhalt

Mark

Cinema4D

Anhänge

Maik

Mark

Cinema4D

Neue Beiträge