Etwas mit CSS bauen

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

wer traut sich zu folgendes mit CSS nach zu bauen, ich selber habe es nicht geschaft. Ich habe da so eine Art Überschrift gesehen und würde gerne auch so etwas ähnlichers in meinen Seiten einbauen.

Eigentlich dachte ich mir dass es mit CSS ganz einfach wäre aber das scheint es nicht zu sein.

Da ich irgendwie in diesem Forum nicht mehr Bilder einbauen kann will ich es mal zeichnen was ich meine:





__________________________
Überschrift

____________________________



​
Naja, sieht ja ganz simpel aus, nisch.



Die Überschrift ist von zwei Linien umgeben, oben und unten. Rechts und links schneiden die Linien aber immer bündig ab.

Wenn man eine längere Überschrift eingibt sieht es auch immer so aus, nur das halt alles etwas länger gezogen ist, also die Linien usw.

Ich habe alles ausprobiert was ich an CSS drauf habe, selbst einigen positinon; absolute und relativ Attribut Tricksen hat es nicht geklapt.

Ich wett das nicht mal Stu Nicholsan dafür eine Lösung finden würde :-)

Das ganze muss nämlich immer mit der Überschrift darin parallel laufen.

Naja, aber vielleicht habe ich ja doch nur zu wenig Ahnung und jemand von euch fällt etwas ein, bin mal gespant. :)

gruß
feh
 
Zuletzt bearbeitet:
Die 'High-End' -Lösung habe ich (noch) nicht gefunden, aber mit den padding- und margin-Eigenschaften lässt sich solch ein Konstrukt nachbauen.

Der Haken an meinem Modell ist die variable Zeichenlänge der Überschrift, die im zweiten DIV .bottom für den linken Aussenabstand manuell bestimmt / ermittelt werden muss, Stichwort: Feineinstellung, Justierung :-)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body
{
padding: 10px;
margin: 10px;
font-family: verdana, sans-serif;
font-size: 18px;
}

div.top
{
width: 350px;
border-top: 1px solid #000000;
padding: 15px 0 0 0; /* Innenabstand oben - rechts - unten - links */
text-align: right;
}

div.bottom
{
width: 350px;
border-top: 1px solid #000000;
margin: 15px 0 0 255px; /* Aussenabstand oben - rechts - unten - links */
}
-->
</style>

</head>
<body>

<div class="top">Überschrift</div>
<div class="bottom"></div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01
 
Zuletzt bearbeitet von einem Moderator:
Ja, Ja,

so einfach ist das gar nicht, ich habe mir selber schon etwas den Kopf zerbrochen.

Sobald ich in deinem Beispiel die Überschrift länger schreibe ist es ja auch nicht mehr richtig.

Die beiden Linien oben und unten müssen nämlich immer so lang sein wie die Überschift die man darein schreibt.

___________________________________
Überschrift Überschrift
_____________________________________________
​
 
Bei unterschiedlicher Zeichenlänge muss für jede Überschrift ein 'individueller' Wert für margin-left ermittelt werden:

Code: 
div.bottom
{
width: 350px;
border-top: 1px solid #000000;
margin: 15px 0 0 255px; /* Aussenabstand oben - rechts - unten - links */
}

Somit wäre auch für jede Überschrift eine eigene CSS-Klasse (z.B. .bottom1, .bottom2 usw.) notwendig, um die unterschiedlichen Werte für den linken Aussenabstand zu bestimmen.

Wie gesagt, es handelt sich bei diesem CSS-Modell nicht um ein 'High-End-Produkt', das den linken Aussenabstand automatisch ermittelt.
 
Hi,

ja ist klar, ich wollte damit nur sagen dass es nicht ganz das ist was ich selber auch machen wollte, also automatisch hinbekommen ;-)

Ich wäre wirklich erstaunt wenn es wieder mal jemand besser kann als ich :)
 
Also das ist bis jetzt mein Ansatz! im Dreamweaver schauts schon aus wie es sollte nur im browser noch nicht!

Code: 
<style type="text/css">
<!--
.1 {
	border-top-width: 1px;
	border-top-color: #000000;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-style: solid;
}
.2 {
	border-top-width: 1px;
	border-top-color: #000000;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	border-right-style: none;
	border-left-style: none;
	border-top-style: solid;
	border-bottom-style: solid;
}
.3 {
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: solid;
}
-->
</style>


Code: 
<table width="80%">
  <tr>
    <td width="49%" class="1">&nbsp;</td>
    <td width="auto" class="2">&Uuml;berschrift</td>
    <td width="49%" class="3">&nbsp;</td>
  </tr>
</table>

Möglicherweise schafft das auch noch jemand
 
Hallo franz007,

das hast du super gelöst, vielen Dank. Da wäre ich vielleicht nie drauf gekommen :)

Die guten alten Tabellen :)
Für alle die es lieber ohne Tabelle wollen ist floaten mit CSS angesagt.

gruß
feh
 
Also ich baue meine Seiten auch mit CSS aber hier schien mir die Verwendung von Tabellen ideal!

Tabellen sind OK solange Sie nicht generell fürs Layout missbraucht werden!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück