Formulare: Stylefrage

[Quetschi]

nein, damit sind die div's mit der id="header" gemeint - du darfst eine id IMMER nur 1mal verwenden.

[Lexus_Ks]

warum nur 1 mal???? Lol okay, ich habe bei 3 elementen folgendes gemacht:

div#header
{
margin: 0px auto;
border-width= 0px;
}

.headeroben
{
background-image: url(dusklounge.PNG);
height: 132px;
width: 762px;
}

.headermitte
{
background-image: url(dusklounge_unter.PNG);
width: 762px;
height: 23px;
}

.headerunten
{
background-image: url(dusklounge_unter_menue.PNG);
padding: 0px;
width: 762px;
height: 46px;
}


So und um es valid zu kriegen habe ich jetzt einfach die klassen zu ids gemacht und umgekehrt. Hätte ich gewusst das man jede id nur einmal verwenden darf hätte ich es doch gleich so gemacht ^^


http://validator.w3.org/check?uri=ht...Fnew_index.php

[Quetschi]

weil eine id dazu da ist, um etwas eindeutig zu identifizieren - und das geht halt ned, wenn da plötzlich zwei oder mehr Elemente die gleiche id haben...

aber du hast das schon sehr schnell umgesetzt

Wirst im Laufe der Zeit aber noch auf die eine oder andere Tücke stoßen - aber das Netz liefert eigentlich zu allem ne Antwort und hier kann man auch noch fragen.

[Lexus_Ks]

Okay, wenn man den Aspekt betrachtet, ist es natürlich sinnvoll es nur einmal nutzen zu können *lol*

[Lexus_Ks]

Humm... wollte jetzt in dem kästchen rechts unten ein weiteres menü einbauen und habe folgendes überlegt: Mit Tabelle is ja nicht ^^ Also sollte ich es wohl wieder als Liste einfügen, aber irgendwie habe ich ja dafür gesorgt dass die Listeneinträge nebeneinenader und nicht mehr untereinander angezeigt werden´...... kann mir jemand von euch zeigen wo ich das gemacht habe?

a.menulink
{
background-color: transparent;
border: solid 1px #cccccc;
font-style: normal;

text-decoration: none;
display: block;
text-align: left;
font-family:arial;
font-size:12px;
color: #000000;
width: 110px;
}

a.menulink:hover
{
background-color: #DDBBBB;
border: solid 1px #361111;
font-style: italic;

color: #000000;
}

body
{
background-color: #333333;
font-family: verdana;
font-size: 10px;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

li
{
float: left;
margin: 5px;
margin-top: 10px;
text-align: center;
}

li a
{
text-decoration: none;
color:#000000;
display: block;
width: 100%;
background-color: #eee;
padding: 0px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}

li a:hover
{
color: #eee;
background-color: #333333;
}

[Quetschi]

Jetzt kommen id's ganz nett ins Spiel

<div id="navioben"><ul><li><a..... </div>
<div id="navirechts"><ul><li><a..... </div>

#navioben ul
{
   bla
}

#navioben li
{
   blub
}

#navirechts ul
{
   bla
}

#navirechts li
{
   blub
}

[Lexus_Ks]

damit habe ich allerdings in problem, da ich nicht nur eine solche menuebox machen will...... ich kann das ganze auch mit klassen machen oder? Also so ungefähr:

ul.menueoben
{
bla
}

li.menueoben
{
bla
}

il.menuebox
{
bla
}

ul.menuebox
{
bla
}

und wenn ich dann die klasse eingebe, dann sucht er sich automatisch raus obs z.B. nen ul tag oder nen li tag ist und weist die entsprechenden Eigenschaften zu, odeR?

Übrigens müsste die liste doch eigentlich untereinander dargestellt werden:

li a
{
text-decoration: none;
color:#000000;
display: block;
width: 100%;
background-color: #eee;
padding: 0px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}

da habe ich doch display:block noch drin, was dafür sorgt, dass die a tags in blöcken dargestellt werden, also fängt doch jedes a tag eine neue zeile an oder? machts ja aber in meiner navi nit -_-

[Lexus_Ks]

Kann mir mal bitte jemand die letzte Frage beantworten??? Vor allem das mit dem block... ich kansn nicht nachvollziehen....

[ghostgambler]

Original geschrieben von Lexus_Ks
Kann mir mal bitte jemand die letzte Frage beantworten??? Vor allem das mit dem block... ich kansn nicht nachvollziehen....

vielleicht ist auf li oder a ein float:left|right?

[Lexus_Ks]

jaaaaaaa ist es.... aber was hat das mit dem display befehl zu tun? wird des dadurch beeinflusst?

[wahsaga]

Original geschrieben von Lexus_Ks
jaaaaaaa ist es.... aber was hat das mit dem display befehl zu tun? wird des dadurch beeinflusst?

Hör ganz fix auf, in Verbindung mit CSS von Befehlen zu reden :-)


Und ja, natürlich wird es davon "beeinflusst".
Kannst du hier nachlesen: http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

[Lexus_Ks]

Danke für die Hilfe

[Lexus_Ks]

Der altbekannte code ^^:

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dusklounge - oriental beats in germany</title>

<style type="text/css">
    div#seitenbegrenzung
        {
        position: relative;
        text-align: left;
        margin: 0 auto;
        width: 772px;
        padding: 5px;
        border: 2px ridge silver;
        background-color: #4E5454;
        }

    div.header
        {
        margin: 0px auto;
        border-width= 0px;
        }
    
        #headeroben
            {
            background-image: url(dusklounge.PNG);
            height: 132px;
            width: 762px;
            }
    
        #headermitte
            {
            background-image: url(dusklounge_unter.PNG);
            width: 762px;
            height: 23px;
            }

        #headerunten
            {
            background-image: url(dusklounge_unter_menue.PNG);
            padding: 0px;
            width: 762px;
            height: 46px;
            }
    div.menuebox
        {
        padding: 4px;

        margin-top: 8px;
        margin-right: 3px;

        float: right;

        width: 170px;

        background-color: #7F5454;

        border-style: dashed;
        border-width: 1px;
        }

    div#inhalt
        {
        padding: 4px;

        margin-top: 8px;
        margin-left: 3px;
        margin-right: 3px;

        float: left;

        background-color: #333333;

        width: 562px;

        border-style: dashed;
        border-width: 1px;
        }

    span#menuestart
        {
        margin-right: 16px;
        display: block;
        font-size:12px;
        background-color:#eeeeee;
        border: solid 1px #888888; 
        width: 130px;
        }
        

    a.menulink     
        {
        background-color: transparent;
        border: solid 1px #cccccc;
        font-style: normal;        

        text-decoration: none;
        display: block;
        text-align: left;
        font-family:arial;
        font-size:12px;
        color: #000000;
        width: 110px;
        }

    a.menulink:hover 
        {
        background-color: #DDBBBB;
        border: solid 1px #361111;
        font-style: italic;

        color: #000000;
        }

    body 
        {
             background-color: #333333;
             font-family: verdana; 
             font-size: 10px;
        }

    ul
        {
           list-style-type: none;
           margin:    0;
           padding: 0;
           }

    li
        {
           float: left;
        margin: 5px;
        margin-top: 10px;
           text-align: center;
        }

    

    li a
        {
           text-decoration: none;
           color:#000000;
           display: block;
           width: 100%;
           background-color: #eee;
           padding: 0px;
           border-bottom: 1px solid #000;
           border-right: 1px solid #000;
        }

    li a:hover 
        {
           color: #eee;
           background-color: #333333;
           }
</style>

</head>

<body>

<div id="seitenbegrenzung">



<div class="header" id="headeroben"></div>        

<div class="header" id="headermitte">            
    <table border="0" rules="none" width="762">
        <tr>
            <td align="left">
            <?
            include ("./include/usersonline.inc");
            ?>    
            </td>
            
            <td align="right">
            <?
            include ("./include/counter.inc");
            ?> 
            </td>
        </tr>
    </table>
</div>

<div class="header" id="headerunten">            
    <?
        include ("./include/menueoben.inc");
    ?>
</div>

<div class="menuebox">

    <?
        include ("./include/menueseite.inc");
    ?>

</div>

<div id="inhalt">

    <?
        if($site) 
            {
            include("./include/$site.inc");
            } 
        else 
            {
            include("./include/index.inc");
            }
    ?>    

</div>


</div>

</body>

</html>

Ich habe einen div-tag mit der class menuebox.... http://dusklounge.du.funpic.de (das ist das menue rechts) und wenn ich unter diesem div Tag noch so einen einfüge wird der leider nicht am rand eingefügt sondern unter dem div-tag mit der class inhalt.. wie kann ichdafür sorgen, dass der nächste div-tag mit der class "menuebox" unter der ersten menuebox angezeigt wird?

Wäre toll wenn ich heute noch ne Antwort bekomme ^^ Ich habe nämlich mein erstes eigenes Loginscript gebuat und würde es gerne integrieren... dann hängt es wegen so was -.-

[wahsaga]

Original geschrieben von Lexus_Ks
Ich habe einen div-tag mit der class menuebox.... http://dusklounge.du.funpic.de (das ist das menue rechts) und wenn ich unter diesem div Tag noch so einen einfüge wird der leider nicht am rand eingefügt sondern unter dem div-tag mit der class inhalt.. wie kann ichdafür sorgen, dass der nächste div-tag mit der class "menuebox" unter der ersten menuebox angezeigt wird?

Wenn du zwei Elemente nebeneinander haben willst, reicht es idR. aus, eins davon zu floaten. In diesem Falle würde ich den Inhaltsbereich floaten, damit sich die nachfolgenden Divs daneben untereinander aufreihen können.

Btw: Bei deiner Beispielseite lande ich in einem Endlos-Redirect auf http://dusklounge.du.funpic.de/index.php?fehlerid=0

Wäre toll wenn ich heute noch ne Antwort bekomme ^^ Ich habe nämlich mein erstes eigenes Loginscript gebuat und würde es gerne integrieren... dann hängt es wegen so was -.-

Deswegen muss es nicht hängen.
Dein Script gibt HTML aus, das kannst du auch so testen.

Grundsätzlich gilt sogar, dass man mit der Darstellung (CSS) erst anfängt, wenn die Struktur (HTML) steht. Klar kann man das praktisch nicht immer zu 100% einhalten, aber man sollte es versuchen.

[Lexus_Ks]

Das funktioniert nicht ganz wie es funktionieren sollte ^^

Dann sieht es so aus:

XXXXXXXXXXXXXXXXX
XMenuebox X
X X
X X
X X
X X
X X
XXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXxXXX
X X
XXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
X Inhalt X
X X
X X
X X
X X
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aber ich mach jetzt mal einen div-tag um die menuedivs drum... dann mach ich diesem "Rahmendiv" mit float: right; und mach das float bei den menueboxen raus. Wenn das funktioniert wäre wohl bewiesen, dass sich verschachtelung doch nicht ganz vermeiden lässt ^^