Formulare: Stylefrage

**Lexus_Ks** · 31-05-2006, 18:20

http://www.css4you.de/posproperty.html Gibt es nichts für "in der mitte"? nur rechts und links find ich -_- sowieso volkommen unlogisch für mich. ich will meine ganze seite in einem rahmen, also mache ich ein <div> mit id="seitenbegrenzung"

und dann hab ich

div#seitenbegrenzung
{
text-align: left;
margin: 0 auto;
width: 772px;
padding: 5px;
border: 2px ridge silver;
}

und dann habe ich in dem div ein anderes div (für den header) mit der id="header"
dementsprechend auch

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

So, also ist das div das alles einschließt 10 px breiter als das darin enthaltene, da ich ein padding von 5 px angebe müsste doch das eingeschlossene div mittig sein oder

Ist es aber leider nicht http://dusklounge.du.funpic.de/new_index.php

**Lexus_Ks** · 31-05-2006, 18:53

Ich verstehe zwar noch nicht richtig warum, aber ich habe das Problem gelöst:

habe bei div#header aus "margin: 0px;" ein "margin: 0px auto" gemacht....... aber meine Logik eben hat doch gestimmt.. warum musste ich da ejtzt noch auto hinterhängen?

**wahsaga** · 31-05-2006, 20:53

Weil Block Elemente nun mal über margin:auto zentriert werden.

**Lexus_Ks** · 31-05-2006, 21:02

*lol* okay, dann speicher ich des mal ab ^^

Schon ist die nächste Frage da.

Ich möchte eine Element durch position: absolute; an einer bestimmten stelle haben. In der Beschreibung von css4you steht, dass die angaben die ich hier mache (left: wert; top: wert

an dem Eltern-Element ausgemacht werden.... ich habe das angewendet auf eine div in einer div....... sagte ja schon... ich habe meine gesamte seite in eine div gemacht um meine seite zu begrenzen, und jetzt will ich darin ein menü positionieren, aber offensichtlich werden die koordinaten die ich angebe nicht am Elternelement sondern am gesamten Fenster (am body) gemessen. Hier ist der code:

PHP 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

        {

        text-align: left;

        margin: 0 auto;

        width: 772px;

        padding: 5px;

        border: 2px ridge silver;

        }



    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);

            width: 762px;

            height: 46px;

            }

    div#menue

        {

        position: absolute;

        left: 577px;

        top: 206px;

        width: 190px;

        background-color: #333333;

        }

        



    body 

        {

             background-color: #333333;

             font-family:verdana; 

             font-size:10px;

        }





</style>



</head>



<body>



<div id="seitenbegrenzung">







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



<div class="headermitte" id="header">            

    <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="headerunten" id="header">            

    <?

    include ("./include/menueoben.inc");

    ?>

</div>



<div id="menue">







</div>



</body>



</html>

Die unwichtigen selektoren habe ich mal rausgenommen um die länge des codes zu begrenzen.

**wahsaga** · 31-05-2006, 22:05

Original geschrieben von Lexus_Ks
In der Beschreibung von css4you steht, dass die angaben die ich hier mache (left: wert; top: wert an dem Eltern-Element ausgemacht werden....

Da ist css4you in dem Punkt zu ungenau, SELFHTML ist da präziser:

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert.

http://de.selfhtml.org/css/eigenscha...g.htm#position

**Lexus_Ks** · 31-05-2006, 22:14

Ah ^^ also mus ich das Elternelement auch mit einem der drei Werte positionieren.

**wahsaga** · 31-05-2006, 22:18

Ja - es reicht vollkommen aus, wenn du ihm nur position:relative verpasst, ohne Angaben zu top, left o.ä.
Damit bleibt es an seiner normalen Position im Elementfluss - aber seine absolut positionierten Nachfahrenelemente richten sich dann an ihm aus, anstatt am Viewport.

**Lexus_Ks** · 31-05-2006, 22:33

Danke, es funktioniert ^^ *lol http://dusklounge.du.funpic.de/new_index.php

**Lexus_Ks** · 31-05-2006, 22:54

Ich nehme jetzt schon an, dass meine nächste Frage nicht positiv zu beantworten ist. Ich weiß dass man für background-color den wert transparent nehmen kann, dass lässt den hintergrund eben transparent erscheinen, aber kann man auch eine farbe mit einer transparenz ausstatten?

**Quetschi** · 01-06-2006, 08:28

Theoretisch ja - praktisch aber fast nie nutzbar:

http://www.css4you.de/trickkiste/tr00018.html

Das Problem ist, dass auch alle Kind-Elemente des transparenten Elements die Transparenz erben und sich quasi nicht mehr auf 100% Deckkraft zurückstellen lassen.

in Css3 soll sowas glaub ich ganz sinnvoll implementiert sein (kann mich täuschen aber glaub dass sich da die Kind-Elemente wieder zur vollen Deckkraft überreden lasse) - aber das nutzt wenig, solang viele Browser noch nicht mal Css2 so richtig können.

BTW:
Sieht schon ganz gut aus

- aber die Navi braucht auch keine Tabelle - eine Navi ist eigentlich eine Liste von Links -> http://de.selfhtml.org/css/layouts/n...onsleisten.htm

**Lexus_Ks** · 01-06-2006, 11:50

Schade, um nicht zu sagen TRAURIG, dass es nichtmal einen einzigen Browser gibt, der alles richtig interpretieren kann. Genauso wie mit der background-color für checkboxen und so.....

Na ja okay dann will ich mal mein Menü umstellen ^^

**Lexus_Ks** · 01-06-2006, 12:35

Ich habe grade ein paar Bedenken -_- Also ich hatte mit HTML die Tabelle so ausgerichtet, dass es so war:

XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX

Sprich das erste Menükästchen war ganz links am Rand und 130px breit, zwischen dem ersten und dem zweiten war viel platz, dann waren fünf Kästchen 110px breit und zwischen ihnen war weniger Platz und das letzte kästchen war ganz rechts am Rand...... Das ist mit CSS Total umständlich finde ich..... dann muss man ständig id und class zuordnen und man weiß nie genau was man grad formatiert. Ich habe meine links ja in einer liste und habe ständig versucht die links mit margin auszurichten, dabei hätte ich es, wie sich dann rausstellte, an den li elementen machen müssen -_____________________-

**Lexus_Ks** · 01-06-2006, 12:56

Ich habe fertig: http://dusklounge.du.funpic.de/new_index.php

**Quetschi** · 01-06-2006, 13:02

noch nicht ganz

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

**Lexus_Ks** · 01-06-2006, 13:31

Neiiiiiiiiiiiiiiiiiiiin *rofl*

Okay ein div war nicht geschlossen das habe ich kapiert aber diesen fehler verstehe ich nicht:

Zeile Spalte: 30
184 Fehler: ID "header" bereits definiert
Fehlerstelle: <div class="headerunten" id="header">

Mir ist klar, dass div#header schon definiert ist im <head> tag, aber ich muss ihn doch auch zuordnen -____- wie sollte ich das sonst machen?

Formulare: Stylefrage

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Loading... Please wait.

Formulare: Stylefrage

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment