Datenschutzerklärung

Verbesserungsvorschläge ||| Klappbare Blueboxes

Validome - Forum

 Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / HTML und XHTML-Forum /

Verbesserungsvorschläge ||| Klappbare Blueboxes

   Beitrag schreiben
Autor
Beitrag Seiten: 1
Illuminu
Gast
Hallo, ich hätte gerne für folgenden Code Verbesserungsvorschläge (wie man es kürzer/leichter/besser machen kann).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #efebde
}

legend {
font-size: 13px;
font-weight: bold;
color: #0000FF;
}

.regis {
font-size: 12px;
position: relative;
display:inline;
}

.test {
background-color: #f7f3ef;
position: relative;
border: 1px solid;
float: left;
padding-left:4px;
padding-right:4px;
margin-right: 5px;
font-family: Arial;
}

.test2 {
position: relative;
border: 1px solid;
margin: 2px;
}

.big {
position: absolute;
border:1.5px solid;
heigth:800px;
width:800px;
top: 25px;
padding:0;
margin:0;
font-family: Arial;
font-size: 12px;
background-color: #fff;
}

.big1 {
position: relative;
float:left;
width:400px;
padding:0;
margin:0;
}

.big2 {
position: relative;
float:left;
width:400px;
padding:0;
margin:0;
}

.bez {
position: relative;
width: 200px;
}

.sel {
width: 100px;
}

.sel2 {
width: 200px;
}

.buttons {
position: absolute;
top: 465px;
left: 575px;
}

</style>
</head>

<body>

<div class="regis">
    <div class="test">Artikeldaten</div>
    <div class="test">Beschreibung</div>
    <div class="test">Warengruppen</div>
    <div class="test">Lieferanten</div>
    <div class="test">Anhänge</div>
    <div class="test">Bilder</div>
    <div class="test">Varianten</div>
    <div class="test">Gruppenpreise</div>
    <div class="test">Zubehör</div>
    <div class="test">Eigenschaften</div>
</div>

<div class="big">
    <div class="big1">
        <p></p>
        <fieldset>
            <legend>Daten</legend>
            
            <strong>Hauptdaten</strong>
            
            <p><label>Name<label style="margin-left:65px;"><strong>:</strong></label>
                <input type="text" size="30" maxlength="30">
            </label></p>
            
            <p><label>Artikelnr<label style="margin-left:55px;"><strong>:</strong></label>
                <input type="text" size="30" maxlength="30">
            </label></p>
    
            <p><label>MwSt<label style="margin-left:70px;"><strong>:</strong></label>
                <select class="sel">
                    <option selected>19%</option>
                    <option>7%</option>
                </select>
            </label></p>

            <p><label>Mengeneinheit<label style="margin-left:18px;"><strong>:</strong></label>
                <select class="sel">
                    <option selected>Stück</option>
                    <option></option>
                </select>
            </label></p>

            <p><label>Währung<label style="margin-left:49px;"><strong>:</strong></label>
                <select class="sel">
                    <option selected>EURO</option>
                    <option></option>
                </select>
            </label></p>

            <p></p>

            <p><label>
 <strong>Standard-Preis</strong><label style="margin-left:55px">Netto</label> <label style="margin-left:45px">Brutto</label>
            </label></p>

            <p><label>Preis<label style="margin-left:70px;"><strong>:</strong></label>
                <input name="Netto" type="text" size="10" maxlength="15">
                <input name="Brutto" type="text" size="10" maxlength="15">
            </label></p>

            <p><label>Preis-UVP<label style="margin-left:42px;"><strong>:</strong></label>
                <input name="Netto2" type="text" size="10" maxlength="15">
                <input name="Brutto2" type="text" size="10" maxlength="15">
            </label></p>
            
            <p></p>
            <p><div><strong>Gewicht</strong></label></p>

            <p><label>Gewicht<label style="margin-left:55px;"><strong>:</strong></label>
                <input type="text" size="12" maxlength="30">
            </label></p>

            <p><label>Gewichtseinheit<label style="margin-left:11px;"><strong>:</strong></label>  
                <select class="sel">
                    <option selected></option>
                    <option>Liter</option>
                    <option>Kilogramm</option>
                    <option>Gramm</option>
                    <option>Tonnen</option>
                    <option>Zentner</option>
                    <option>Pfund</option>
                </select>
            </label></p>
            <p></p>
            <p></p>
        </fieldset>
    </div>

        <div class="big2">
            <p></p>
            <fieldset>
                <legend>Daten</legend>
                <div><strong>Kennzeichen</strong></div>
                <p><label>Status<label style="margin-left:80px;"><strong>:</strong></label>
                    <select class="sel2">
                        <option selected>Verfügbar</selected>
                        <option>Zur Zeit nicht lieferbar</option>
                    </select>
                </label></p>

                <p><label>Kategorie<label style="margin-left:62px;"><strong>:</strong></label>
                    <select class="sel2">
                        <option selected>Bärwurz</option>
                        <option>Blutwurz</option>
                        <option>  Bärwurz UK</option>
                        <option>    BW UK</option>
                    </select>
                </label></p>

                <p><label>Hersteller<label style="margin-left:61px;"><strong>:</strong></label>
                    <select class="sel2">
                        <option selected> </option>
                        <option></option>
                    </select>
                </label></p>

 <p><label>Positions-Nr<label style="margin-left:46px;"><strong>:</strong></label> <input type="text" size="12" maxlength="30"></label></p>
                <p></p>
                <p><label><strong>Bild-Positionierung</strong></label></p>

                <div>PositionListe<label style="margin-left:43px;"><strong>:</strong></label>
                    <select class="sel2">
                        <option selected>Bild-links</option>
                    </select>
                </label></p>

                <p><label>PositionDetail<label style="margin-left:38px;"><strong>:</strong></label>
                    <select class="sel2">
                        <option selected>Bild-links<option>
                    </select>
                </label></p>
                <p></p>
                <p><label><strong>Lager</strong></label></p>
                <p><label>Lagerüberwachung<label style="margin-left:8px;"><strong>:</strong></label>
 <input type="radio" name="Janein" value="Ja">Ja<input type="radio" name="Janein" value="Nein">Nein</label></p>
 <p><label>Bestand<label style="margin-left:69px;"><strong>:</strong></label> <input type="text" size="11" maxlength="30"></label></p>
 <p><label>Warnung<label style="margin-left:65px;"><strong>:</strong></label> <input type="text" size="11" maxlength="30"></label></p>
            </fieldset>
        </div>
    </div>
<div class="buttons"><input type="button" value="Ok">
<input type="button" value="Abbrechen">
<input type="button" value="Übernehmen"></div>
</body>
</html>

Außerdem wurde mir gesagt, dass man auf- und zuklappbare Blueboxes (Fieldsets?) erstellen kann (mit runden Ecken?). wär cool wenn ihr mir da weiterhelfen könntet.

MfG,

Illu
11.07.2007 10:07:33
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
Hallo

Bereinige erstmal Deinen invaliden Quelltext. Das ist die Vorraussetzung für weitere Schritte.
<label> im <label> geht nicht:
http://www.validome.org/doc/HTML_ge/htm ... .htm#label

Und dann kläre mich bitte mal auf, was eine Bluebox ist.
Die Suchmaschine meiner Wahl gab mir kein Ergebniss Deiner Intention zurück.

Eine Cross-Browser-Möglichkeit für "runde" Ecken gibt es hier: http://dkmd.de/tests/roundcorners/

Viel Spaß noch...

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
11.07.2007 10:53:30
http://dkmd.de | http://dkdenz.de Zitieren
Illuminu
Gast
seltsamerweise scheint <label> im <label> doch zu funktionieren Oo
aber gut, bastel ich eben mit divs drüber.

n paar andere fehler hab ich mittlerweile ausgebessert.

ich hab das soweit verstanden, dass eine bluebox ein fieldset ist.
runde ecken fürn fieldset gibts nach meinem verständnis leider nicht, aber ich wüsste nicht wie ich das <legend>-design sonst erbringen könnte. sonst hätte ich schon <border> verwendet.

das runde is erstmal nicht so wichtig, mir gehts mehr um das auf- und zuklappen.
11.07.2007 11:10:37
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
http://www.validome.org/doc/HTML_ge/htm ... .htm#label

Darf #PCDATA und folgende andere HTML-Elemente enthalten:
[Inline-Elemente] (außer label)

Für das Aufklappen gibt es jede Menge Beispiele im www. Einfach mal effizient danach suchen...

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
11.07.2007 11:20:00
http://dkmd.de | http://dkdenz.de Zitieren
Illuminu
Gast
das problem ist, dass ich nur aufklappmenüs finde und nicht das, was ich brauche.

bsp: meine fieldsets.

man klickt auf "Daten" oder einen kleinen pfeil daneben und der gesamte fieldsetkasten wird zu einem schmalen balken (textfelder usw. sind nicht sichtbar). klickt man nochmal darauf rollt er wieder auf und zeigt wieder die ganzen textfelder usw. an.
11.07.2007 11:48:04
  Zitieren
dkdenz
Administrator

Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605

Illuminu schrieb:

das problem ist, dass ich nur aufklappmenüs finde und nicht das, was ich brauche.

Das Gefundene musst Du doch nur noch an Deine Bedürfnisse anpassen, sprich, umschreiben.

_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
11.07.2007 12:27:58
http://dkmd.de | http://dkdenz.de Zitieren
Illuminu
Gast
wenn das so einfach wäre ;)

aber ich versuchs mal... Oo auch wenn ichs wahrscheinlich vollkommen verhau XD
11.07.2007 13:18:14
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01