border-bottom ausrichten

Status
Nicht offen für weitere Antworten.

Peter Klein

Erfahrenes Mitglied
Hallo

Ist es möglich einen border so auzurichten mit CSS das er rechts am DIV anfängt und bis in die Mitte bzw. z.B. 300 px von rechts nach links?

Falls nicht, gibt es eine sonstige Lösung für solche Problemchen?


Grüße
Peter
 
Nein, die Grenzen eines Elements umfassen das gesamte Element und nicht nur einen Teil. Soetwas wäre aber mit einer Hintergrundgrafik möglich.
 
:confused:
So richtig werd ich nicht schlau aus deiner Fragestellung, vor allem, was links und rechts mit "bottom" zu tun hat....aber meinst du vielleicht so?
HTML:
<div style="border:1px solid #000;border-right-width:300px;">DIV</div>
 
Für einen oberen oder unteren halben Rahmen könnte man relativ leicht mit einem "Hilfselement" arbeiten:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
<title>Beispiel: Halber Rahmen</title>
<style type="text/css" media="all">
    .halfBorder {
        width:50%;
        margin:0 auto 0 0;
        height:1px;
        overflow:hidden;
        background:#f00;
    }
</style>
</head>
<body>
<h1 id="title">Ein Beispiel</h1>
<div class="halfBorder"></div>
<p>Nulla vel nunc.
    Vestibulum ante ipsum primis in faucibus orci luctus et
    ultrices posuere cubilia Curae; Integer at dolor.
    Mauris eleifend condimentum ligula.
    Nullam sed velit eget orci egestas facilisis.
    Praesent aliquet diam in neque. Aenean a enim.
    Donec nec augue eu arcu ornare euismod.
    Integer vel arcu. In non nisi. Duis ac ligula.
    Maecenas auctor arcu id magna.
    Praesent quam neque, porta at, tempus vel,
    aliquet in, sapien.
    Mauris et est. Sed nisi velit, dignissim ullamcorper,
    tincidunt vitae, iaculis sit amet, purus.
    Fusce enim dui, eleifend in, dignissim vitae, lobortis
    at, arcu.
    Praesent egestas pharetra leo.
    Ut condimentum leo et orci.</p>
<div class="halfBorder"></div>
<p>Nulla vel nunc.
    Vestibulum ante ipsum primis in faucibus orci luctus et
    ultrices posuere cubilia Curae; Integer at dolor.
    Mauris eleifend condimentum ligula.
    Nullam sed velit eget orci egestas facilisis.
    Praesent aliquet diam in neque. Aenean a enim.
    Donec nec augue eu arcu ornare euismod.
    Integer vel arcu. In non nisi. Duis ac ligula.
    Maecenas auctor arcu id magna.
    Praesent quam neque, porta at, tempus vel,
    aliquet in, sapien.
    Mauris et est. Sed nisi velit, dignissim ullamcorper,
    tincidunt vitae, iaculis sit amet, purus.
    Fusce enim dui, eleifend in, dignissim vitae, lobortis
    at, arcu.
    Praesent egestas pharetra leo.
    Ut condimentum leo et orci.</p>
<div class="halfBorder"></div>
</body>
</html>
Gruß hpvw
 
@hpvw

Deine Lösung kommt schon fast hin. Der 1px rahmen soll in meinem Fall halt nur von rechts nach links gehen, bzw. bis ca in die Mitte.

Werde das gleich mal mit deiner Version versuchen.

Danke
 
Von rechts nach links ist auch nicht schwer:
Code:
    .halfBorder {
        width:50%;
        margin:0 0 0 auto;
        height:1px;
        overflow:hidden;
        background:#f00;
    }
Gruß hpvw
 
Status
Nicht offen für weitere Antworten.
Zurück