✔ Frage zum Border

Status
Nicht offen für weitere Antworten.
Mew

Mew

Erfahrenes Mitglied
Hallo, ich habe folgendes auf einer Homepage gesehen. Wie mache ich das, das der Text (Hier ist es: Einloggen und Passwort vergessen) oben im Border steht und der Border da eine Lücke hat. Oder geht sowas garnicht?

frageif0.gif


Vielen Dank MFG Mew
 
Hi,

hierbei handelt es sich um ein fieldset-Element zum Gruppieren von Formularelementen, und die Gruppenüberschriften ("Bitte einloggen", "Haben Sie Ihr Passwort vergessen?") sind wiederum im legend-Element notiert.
 
Man kann diesen Effekt aber auch mit CSS reproduzieren ;-)

Code: 
* {
margin:0;
padding:0;
}

div.fieldset {
position:relative;
margin:2em 0;
width:400px;
padding:0.5em 0 0 0;
border:1px solid #c5c5c5;
color:#000;
background:#fff;
}

div.fieldset h1 {
position:absolute;
top:-0.5em;
left:1em;
font-size:1.2em;
font-weight:normal;
}

div.fieldset h1 span {
padding:0 0.5em;
color:#000;
background:#fff;
}

div.fieldset p {
padding:1em 1em 1em 1.5em;
color:#000;
font-size:1.2em;
}
Code: 
<div class="fieldset">
     <h1><span>Legend</span></h1>
     <p>some dummy text</p>
</div>
 
die haben da aber auch ein form element ^^ haben die das so mit css gemacht wie du sagtest ?
 
Da ich nicht den Link zu der Seite kenne, vermute ich mal, dass es dort traditionell mit dem fieldset- und legend-Element umgesetzt wurde.

Mein Beispiel ist auch nur mehr eine "Spielerei" mit CSS. :-)
 
Dann werf doch einfach mal einen Blick in den HTML-Code der Seite, um zu erkennen, dass hier mit den beiden erwähnten Elementen gearbeitet wurde:

Code: 
<TD><fieldset class="login"><legend>Bitte Einloggen</legend>

...

<TD><fieldset class="login"><LEGEND>Haben Sie Ihr Passwort vergessen?</LEGEND>
Und von welcher Lücke sprichst du?
 
also da auf der seite ist keine aber bei mir kam immer einer hmm, egal ich mache das lieber so wie du das da gezeigt hattest mit css danke nochmal^^
 
Jetzt weiß ich aber noch immer nicht, welche Lücke du nun konkret meinst.

Übrigens wird die Doctype-Deklaration vor dem <html>-Tag notiert:

Code: 
<!-- aus -->
<html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!-- wird -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück