Logo mit Text Zentrieren

lacido · 29. Dezember 2010

Hallo Zusammen,

ich habe versucht ein einfaches Banner mit Logo ( rechts und links ) zu erstellen, klappt auch, nur mit dem Text der zentriert zwischen die beiden Bilder soll klappt es einfach nicht. Ich habe es mit Float versucht aber leider ohne erfolg.

Hier mein Code:

Code

<!-- Begin Kopfbereich-->
    <div>
        <div style="border: solid 1px #3399FF; padding: 1px;
            margin: 1px; border: solid 6px #C65A84;">




            <div style="float left;">
                    <img src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"
                    width="250" height="188" style= "border: 0px;" />




                  <div style="float: right;">
                        <img src="Bilder-Tutorial/LogoCiara.JPG"
                        alt="Logo"
                        title="Logo"
                        width="250" height="188" style= "border: 0px;" />
                  </div>
            </div>
         </div>
      </div>
    </div>
    <!-- Ende Kopfbereich -->

Alles anzeigen

Ist es nur ein einfacher Denkfehler oder ist der Ansatz bereits Falsch? Wo und wie kann ich nun jeweils den Textteil einfügen?

Vielen Dank für Eure Mühe,

Gruß Lacido

neuling11 · 29. Dezember 2010

Hallo,

ich würde mal versuchen dem img eine id zugeben

Code

<img id="beispiel" .....

Oder im css dem einzelnen Div Container das Bild zuzuweisen

Code

#div1 {
background: url (dasbild.jpg/png...)

Wenn das auch nicht klappt, dann würde ich es so machen, dass du beide Beide Bilder zu einem machst,
soll heißen du nimmst einen div namens xy und packst div mit dem text darein.
Dann nimmst du den div xy und weist ihm das bild mit den 2 bildern zu, in der mitte ist es weiß, oder die farbe,
die der Hintergrund des textes haben soll.

Beim div mit dem Text dann einfach den abstand über margin angeben.

hoffe ich konnte helfen.

EDIT

schonmal so versucht:

Code

<!-- Begin Kopfbereich-->
        <div>
            <div style="border: solid 1px #3399FF; padding: 1px;
                margin: 1px; border: solid 6px #C65A84;">




                <div style="float left;">
                        <img src="Bilder-Tutorial/LogoCiara.JPG"
                        alt="Logo"
                        title="Logo"
                        width="250" height="188" style= "border: 0px;" />
</div>







            <center>     Der Text, der hier stehen soll </center>




                      <div style="float: right;">
                            <img src="Bilder-Tutorial/LogoCiara.JPG"
                            alt="Logo"
                            title="Logo"
                            width="250" height="188" style= "border: 0px;" />
                      </div>

             </div>

        <!-- Ende Kopfbereich -->

Alles anzeigen

lauras · 29. Dezember 2010

Ich denke deine Vorgehensweise allgemein ist ein bisschen falsch.
Das was du da produzierst, nennt man auch "div-Suppe" und bezeichnet das überflüssige einfügen von divs. Du schließt da fünf divs auf einmal, und das bei drei Elementen? Naja, da solltest du höchstens einen brauchen, den divs gruppieren lediglich Elemente, zusätzlich einen für den Textbereich, solltest du da mehrere Absätze haben.. Theoretisch hört es sich von der Funktion her aber eher nach einer Überschrift an, da bräuchte man dann keinen mehr..
Desweiteren würde ich dir empfehlen, die style-Informationen komplett auszulagern (auch zum ausprobieren), das schafft Übersicht.

Zur Lösung deines Problemes:
gib dem linken img ein float: left;, dem rechten ein float: right;.
Der Textbereich sollte dann eigentlich automatisch dazwischenflutschen, mit text-align: center; kannst du dann den Text zentrieren.

Gruß
Laura

lacido · 29. Dezember 2010

Hallo Neuling 11,

ich probiers mal aus,

ich hatte es inzwischen so probiert, geht auch allerdings muß dann jedesmal bei einem andern Text auf einer anderen Seite Padding und Margin angeglichen werden. Hier mein neuer versuch, sieht mir aber mehr nach Murks als nach annehmbaren Code aus.

Code

<!-- Begin Kopfbereich-->
    <div>
        <div style="border: solid 1px #3399FF; padding: 1px;
            margin: 1px; border: solid 6px #C65A84;">




            <div style="position: static;">
                    <img src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"
                    width="250" height="188" style= "border: 0px;" />




                  <div style="float: right;">
                        <img src="Bilder-Tutorial/LogoCiara.JPG"
                        alt="Logo"
                        title="Logo"
                        width="250" height="188" style= "border: 0px;" />
                  </div>




                  <div style="float: right;  padding: 5px; margin: 50px 50px; border: solid 1px #000000;">
                        <p style="text-align: center;">
                            Modellieren eines Bausatzes
                        </p>
                  </div>
         </div>
      </div>
    </div>
    <!-- Ende Kopfbereich -->

Alles anzeigen

hier mal die Vorschau: http://www.vergel.kilu.de/Testseite.php
Gruß
Lacido

neuling11 · 29. Dezember 2010

Hallo,
sieht ja auch ziemlich chaotisch aus :shock: .

Ein doctype ist aber schon vorhanden?

Dann machst doch mal, wie lauras schon sagte, über eine css datei.

Gebe in diesem doch einmal

Code

<link href="hierkommtdascss.css" type="text/css" rel="stylesheet"/>

ein.

Und dann kannst du den einzelnen div's id's zuweisen,
die du dann in der css datei "ansprichst".

Außerdem sollte der End-tag vom div mit dem Bild auch direkt dahinter sein,
sonst bleibt das "bild ja offen" bis hinter dem text.

Edit: doctype ist ja vorhanden , verweis auf css auch.
Probiers mal so.

Warum benennst du die seite test.php ?
Nenn sie doch einfach htm/html und lasse die unterseiten mal validieren :wink:

Der Validator zeigt nämlich schon 25 Fehler an

lacido · 29. Dezember 2010

Hallo Zusammen,

erst mal vielen Dank für Eure Hilfe.

Hallo Lauras, mit Float right u. left geht es leider nicht, ich habe es jetzt mal so gemacht,

Code

<!-- Begin Kopfbereich-->
    <div>
        <div style="border: solid 1px #3399FF; padding: 1px;
            margin: 1px; border: solid 6px #C65A84;">




            <div style="position: static;">
                    <img src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"
                    width="250" height="188" style= "border: 0px;" />







              <div style="float: right;">
                    <img src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"
                    width="250" height="188" style= "border: 0px;" />
              </div>
                      <h1 style="float: right;">Modellieren eines Bausatzes</h1>
             </div>
      </div>
    </div>
    <!-- Ende Kopfbereich -->

Alles anzeigen

hier der Link: http://www.vergel.kilu.de/Testseite.php

allerdings sieht das ganze noch nicht richtig zentriert aus. Abgesehen davon dass ich den Code immer noch als Murks Betrachte.

Die CSS Formatierungen lagere ich immer erst zum Schluss aus, damit ich nicht dauernd hin und her schalten muss, Fehler korrigiere ich auch immer erst wenn der Code funktioniert.

Die Fehler die angezeigt werden rühren von dem Testserver her, habe ich schon mehrmals bemerkt.

viele Grüße
Lacido

lauras · 29. Dezember 2010

Wenn du nicht das machst, was ich sage kann es ja auch nicht funktionieren... Du hast immer noch die ganzen divs drin und man lagert Code aus, damit man Fehler besser findet und der Übersichtlichkeit halber.. das brauchst du dann am Ende auch nicht mehr machen..

neuling11 · 29. Dezember 2010

Hallo,

hier der Code zwar mehr schlecht als recht... aber du machst es ja ohne ausgelagertes css

HTML

<!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" xml:lang="de" lang="de">




<head>
    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="/bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />







      <style type="text/css">
      .bildrechts {
          float: right
      }
      .bildlinks {
          float: left
      }




      #top {
          padding-top: 5em
      }




      </style>
</head>




<body>




</body>
</html>



















 <div style="border: solid 1px #3399FF; padding: 1px;
            margin: 1px; border: solid 6px #C65A84; height: 190px;" >







                    <img class="bildlinks" src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"




                    width="250" height="188" style= "border: 0px;" />






















                    <img class="bildrechts" src="Bilder-Tutorial/LogoCiara.JPG"
                    alt="Logo"
                    title="Logo"
                    width="250" height="188" style= "border: 0px;"  />
                    <center id="top">blablablalaberlaberlaber</center>




              </div>

Alles anzeigen

Sarkkan · 29. Dezember 2010

Neuling? Darf ich dich hauen? ;D
Mach sowas nie wieder! xD Der Code ist nicht besonders qualitativ..
du verwendest z.B. <center> ein absolutes no-go! Auch gehört der Kram immernoch in den <body> rein :wink:
Sry, wenn das was gemein wirkt, aber das geht echt nicht!

Zu dir Lacido: Dann schreib wenigstens alles in <style>, spart dir dann wenigstens die Arbeit alle Styleangaben aus dem Code raus zu kopieren und Id's und Class zu vergeben.

Code

/* Stylekram: */
div#Header {
          border: solid 1px #3399FF;
          padding: 1px;
          margin: 1px;
          border: solid 6px #C65A84;
          height: 190px;
}
div#Header > img {
      float: left;
}
div#Header > img + img {
      float: right;
}




<!-- HTML Code: -->
<div id="Header">
    Dies ist meine &Uuml;berschrift, die zwischen die Bilder kommt
    <img src="test.png" alt="" title="" />
    <img src="test.png" alt="" title="" />
</div>

Alles anzeigen

neuling11 · 29. Dezember 2010

Zitat

Neuling? Darf ich dich hauen? ;D
Mach sowas nie wieder! xD Der Code ist nicht besonders qualitativ..
du verwendest z.B. <center> ein absolutes no-go! Auch gehört der Kram immernoch in den <body> rein :wink:
Sry, wenn das was gemein wirkt, aber das geht echt nicht!

Dreimal darfst du raten, warum ich

Zitat

mehr schlecht als recht

geschrieben habe.

Klar muss das in den body rein.... habs übersehen.

lacido · 29. Dezember 2010

Hallo zusammen,

vielen vielen Dank für Eure Hilfe, Lauras, ich stand total auf dem Schlauch.

Kann man die Schrift noch in der Höhe innerhalb der Box zentrieren? Mit padding verschiebt sich alles.

Wird für das Floaten kein End-Tag benötigt, der das Floaten für diese Box/Seite beendet?

Habe es jetzt nach dem Vorschlag von Sarkkan gemacht:

Code

/* Stylekram: */
div#Header {
          border: solid 1px #3399FF;
          padding: 1px;
          margin: 1px;
          border: solid 6px #C65A84;
          height: 190px;
}
div#Header > img {
      float: left;
}
div#Header > img + img {
      float: right;
}




<!-- HTML Code: -->
<div id="Header">
    Dies ist meine &Uuml;berschrift, die zwischen die Bilder kommt
    <img src="test.png" alt="" title="" />
    <img src="test.png" alt="" title="" />
</div>

Alles anzeigen

Kann man die Schrift noch in der Höhe innerhalb der Box zentrieren? Mit padding verschiebt sich alles.

Wird für das Floaten kein End-Tag benötigt, der das Floaten für diese Box/Seite beendet?

nochmals, vielen Dank an alle die sich hier soviel Mühe gemacht haben.

Gruß

Lacido

Sarkkan · 29. Dezember 2010

Für das horizontale Zentrieren gibst du dem Header einfach ein line-height: 190px;

Gib am besten dem nächsten Objekt ein clear, also wenn direkt unter dem Header die Navi folgt, gib der Navi ein clear: both; o.Ä.

lacido · 29. Dezember 2010

Hallo Sarkkan,

vielen Dank für Deine HIlfe, ich muss noch viel lernen.

Meistens versuche ich es mit Ausprobieren, aber das klappt nicht immer.

Danke dass ihr mir so geholfen habt.

Grüße an alle,

Lacido

lauras · 29. Dezember 2010

Kannst ja mal den fertigen Code posten..

lacido · 29. Dezember 2010

Hallo Lauras,

Gerne

HTML

PHP

<!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" xml:lang="de" lang="de">







<head>
    <title>Testseite</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />




    <link href="dbd.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>







<!-- Begin Wrapper-->
<div id="wrapper">




    <!-- Begin Kopfbereich-->




<div id="Header">
    Modellierung eines Kopfes
    <img src="Bilder-Tutorial/LogoCiara.JPG" alt="" title="" />
    <img src="Bilder-Tutorial/LogoCiara.JPG" alt="" title="" />
</div>







    <!-- Ende Kopfbereich -->




    <div id="Inhalt">
    <!-- Begin Inhaltsbereich -->




        <!-- Begin Textbereich -->
        <div id="Textbereich">




        <div class="ZurueckMenu">
            <a href="Testseite.php">
                <img src="Bilder-Tutorial/ani-menu.gif"
                alt="Zurueck zur Startseite"
                title="Zurueck zur Startseite"
                width="76" height="20" style="border: 0;"/></a>
        </div>




            <h1>Modellierung eines Schlafbabies</h1>




            <p>
                Im folgenden versuche ich Ihnen den Werdegang eines Babykopfes mit Hilfe von
                Bildern zu beschreiben. Selbstverst&auml;ndlich ist es kaum m&ouml;glich
                jemanden das Modellieren Online, mit Buch oder per Video zu vermitteln. Jeder
                hat ein anderes Gef&uuml;hl daf&uuml;r bzw. auch andere Vorstellungen,
                St&auml;rken und Schw&auml;chen. Insgesamt sollte daher diese Anleitung
                nur als Hilfe und Orientierung verstanden werden, da es ein Buch erfordern
                w&uuml;rde um jeden einzelnen Schritt detailliert darzustellen und zu
                erkl&auml;ren.
            </p>




            <p>
                Im folgenden Beispiel benutze ich Prosculpt als Modelliermasse, Sie k&ouml;nnen
                jedoch auch mit jeder anderen Modelliermasse arbeiten. Welche Modelliermasse
                f&uuml;r Sie die richtige ist, k&ouml;nnen Sie am Besten durch ausprobieren
                feststellen.
           </p>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0137.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Als Grundlage dient ein einfacher Styroporkopf aus dem
                        Modellier - Zubeh&ouml;rhandel. Hierauf tragen wir zuerst eine
                        ca. 5mm starke Lage von Prosculpt auf um das Grundgesicht
                        zu formen. Sie m&uuml;ssen hierbei noch nicht auf die zuk&uuml;nftige
                        Kopfform achten.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <p>
                Sobald das Grundgesicht aufgetragen wurde, bringen wir als
                n&auml;chtes mit <span>zus&auml;tzlicher</span> Masse die Augen auf. Bitte
                versuchen Sie nicht die Augen aus dem Grundgesicht heraus zu
                Formen, die Folge w&auml;re ein sehr d&uuml;nner Untergrund der
                sp&auml;ter einreissen oder beim Backen des Kopfes brechen
                k&ouml;nnte.
            </p>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0139.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Achten Sie darauf dass die neue Masse handwarm ist, so
                        l&auml;sst sie sich einfacher und nahtlos anf&uuml;gen. Beim Ansetzen
                        immer darauf achten, gut andr&uuml;cken, damit
                        sich keine Luftpolster bilden. Die R&auml;nder mit den Fingern glatt
                        einstreichen. Sie werden schnell merken, dass sich die Masse gut
                        aneinanderf&uuml;gen und ansetzen l&auml;sst.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <p>
                Lufteinschl&uuml;sse beim Ansetzen bzw. Hinzuf&uuml;gen von Masse f&uuml;hren
                sp&auml;testens sp&auml;ter beim Backen des fertigen Kopfes zur Katastrophe.
                Wenn nur Blasen
                entstehen haben Sie noch Gl&uuml;ck, oft wird aber durch die Erhitzung
                der einmodellierten Luft das Modell regelrecht gesprengt oder es entstehen
                grossfl&auml;chige Risse.
            </p>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0143.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Nach dem Anf&uuml;gen der Augen, streichen Sie die Masse glatt und
                        versuchen schon den endgultigen Sitz der Augen  fest zu legen. Mit
                        einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
                        Augenlider fest. Im n&auml;chsten Schritt f&uuml;gen wir wieder neue
                        Masse f&uuml;r die Nase hinzu, und versuchen schon jetzt ann&auml;hernd
                        Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0146.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Nach dem Anf&uuml;gen der Augen, streichen Sie die Masse glatt und
                        versuchen schon den endgultigen Sitz der Augen  fest zu legen. Mit
                        einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
                        Augenlider fest. Im n&auml;chsten Schritt f&uuml;gen wir wieder neue
                        Masse f&uuml;r die Nase hinzu, und versuchen schon jetzt ann&auml;hernd
                        Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0147.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Nach dem Anf&uuml;gen der Augen, streichen Sie die Masse glatt und
                        versuchen schon den endgultigen Sitz der Augen  fest zu legen. Mit
                        einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
                        Augenlider fest. Im n&auml;chsten Schritt f&uuml;gen wir wieder neue
                        Masse f&uuml;r die Nase hinzu, und versuchen schon jetzt ann&auml;hernd
                        Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <div class="Bildkasten" style="width: 410px;">
                <div class="Bildbeschreibung_unten" style="width: 400px;">
                    <p>
                        <img src="Bilder-Tutorial/IMG_0148.JPG"
                            alt="Schaufensterpuppe ohne Fehlteile"
                            title="Schaufensterpuppe ohne Fehlteile"
                            width="400" height="300" style="border: 0px;"/>
                    </p>




                    <p>
                        Nach dem Anf&uuml;gen der Augen, streichen Sie die Masse glatt und
                        versuchen schon den endgultigen Sitz der Augen  fest zu legen. Mit
                        einem kleinen Spatel legen Sie auch gleich Anfang und Ende der beiden
                        Augenlider fest. Im n&auml;chsten Schritt f&uuml;gen wir wieder neue
                        Masse f&uuml;r die Nase hinzu, und versuchen schon jetzt ann&auml;hernd
                        Sitz und Form der Nase zu bestimmen, bzw vorzugeben.
                    </p>
                </div>
                <p style="clear:left"></p>
            </div>




            <div class="ZurueckMenu">
                <a href="Testseite.php">
                    <img src="Bilder-Tutorial/ani-menu.gif"
                    alt="Zurueck zur Startseite"
                    title="Zurueck zur Startseite"
                    width="76" height="20" style="border: 0;"/></a>
            </div>




        </div>
    <!-- Ende Textbereich -->




    </div>
    <!-- Ende Inhaltsbereich -->







    <!-- Beginn Fussbereich -->
    <div id="Update">
        <p>
            Letzes Update:
            <?php
                include("Php-include/Update.php");
                echo FileDate("Testseite.php");
            ?>
            Uhr
        </p>
    </div>




<!--     <div id="Fussbereich" style="text-align: center; color: #000000; font-size: 0.8em; padding: 25px 5px;">
        <?php
             include("Php-include/Copyright.php");
        ?>
    </div>
 -->




    <!-- Ende Fussbereich -->




</div>
<!-- Ende Wrapper-->







</body>
</html>

Alles anzeigen

CSS

/*==================================
            1. Kalibrierung
    ==================================*/




* { padding: 0;  margin: 0; } /*Komplettes Abschalten*/




h1,h2, h3, h4, h5, h6, hr, p, ul, ol { margin-bottom: 0; }




ol ul { margin-bottom: 0; }




li { margin-left: 0; }







body {
    height: 101%;
    width: auto;
    background-image: url(Bilder-Tutorial/tilegrainfade.jpg);
    background-repeat: repeat;
    /* background-color: #808080; */
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: small;
    text-align: justify;
    font-size: 0.8em;
    font-weight: bold;
    color: #66CCFF;
}




    body p {
        margin: 0 30px;
        padding: 8px 20px;
        font-family: Broadway, Verdana, Arial, Tahoma, sans-serif;
        font-size: small;
        text-align: justify;
        font-size: 1.0em;
        color: #000000;
    }




h1 {
    margin: 10px;
    padding: 30px 15px 20px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #0000FF;
    }




h2 {
    font-weight: bold;
    color: #0047BF;
    }




h3 {
    margin: 0 30px;
    padding: 8px 20px;
    text-align: justify;
    font-size: 0.9em;
    color: #66CCFF;
    }




h4 {




    color: #000000;
    font-size: 0.9em;
    }




hr {
    text-align: center;
    margin: 30px auto;
    border: 0px; /* Für Firefox und Opera */
    width: 700px;
    border-top: solid 3px #A8B3B7;  /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
    padding-bottom: 20px;
}




#wrapper {




    border: 2px solid #000000;
    margin: 10px;
    padding:2px;
    }




    #Kopfbereich {
        border: 1px solid #000000;
        margin: 1px 1px 0px;
        padding:5px;




    }




    #Update p {
        color: #0000FF;
        font-size: 0.8em;
        text-align: center;
    }




#Header {
          border: solid 1px #3399FF;
          padding: 1px;
          margin: 1px;
          border: solid 6px #C65A84;
          height: 190px;
          text-align: center;
          line-height: 190px;
          font-size: 1.8em;
}
#Header > img {
      float: left;
}
#Header > img + img {
      float: right;
}










.BildHeader {                         /* Einfache Bilder ohne Beschreibung, ohne Float-Attr. */
    background-image: url(Bilder-Tutorial/LogoCiara.JPG);
    background-repeat: no-repeat;
    background-position: left;
    padding: 3px;
    margin: 2px 0px 2px 2px;




    /*border: solid 2px #000000; */
    }
.Bild {                         /* Einfache Bilder ohne Beschreibung, ohne Float-Attr. */
    /*float: left; */
    text-align: left;
    margin: auto;
    padding: 0px;
}




.Bildbeschreibung {             /* Allgemeine Beschreibung für Bilder oben oder unten */
    text-align: center;
    width: 550px;
    margin: auto;
    padding-top: 10px;
    font-size: 0.9em;
    color: #808080;
}




.Bildbeschreibung_unten {       /* Bildbeschreibung unter den Bildern*/
    text-align: center;         /* Der Angabe der Bildbreite muss im*/
    font-size: 0.8em;           /* class Attr. style=width"xxx"  plus 10px*/
    padding-top: 5px;           /* hinzugerechnet werden!!! */
    padding-bottom: 5px;
    margin-bottom: 5px;
    float: left;
}




    .Bildbeschreibung_unten p {     /* Formatierung der Bildbeschreibung */
        margin: 0px;                /* Abstand von Text direkt unter dem Bild */
        text-align: justify;         /* Text ist zentriert unter dem Bild */
        padding: 0 5px;             /* Abstand vom Text rechts und links damit der Text nicht exakt mit dem Bildrahmen beginnt */
        color: #000000;             /* Textfarbe der Bildbeschreibung */
    }




.Bilder {                       /* Einfache Bilder Nebeneinander ohne Float-Attr. */
    margin: 10px 10px 25px 10px;
    padding: 10px;
    text-align: center;
}




.Bildkasten {                   /* Rahmen für Bilder mit Float-Attr. */
    height: auto;               /* Größe des Rahmens ergibt sich aus der */
    margin: auto;               /* Gesamtsumme aller Bildbreiten "width" */
    color: #C0C0C0;             /* die im div Bereich, Bildkasten,*/
    text-align: center;         /* enthalten sind  */
    padding: 5px;
}




    #Inhalt {
        margin: 0px;
        padding: 0px;
        background-image: url(Bilder-Tutorial/tilegrainfade.jpg);
    background-repeat: repeat;




    }




.Beispiel_Text_Rechts {                     /* Kasten mit Hintergrundgrafik für Beispieltexte*/




    color:#C0C0C0;
    font-size:0.9em;
    margin: 15px auto;
    padding:0px 40px 20px;
    text-align: left;
    width: 700px;
}




    .Beispiel_Text_Rechts p {           /* Formatierung von Text in der Beispielauktion */
        font-weight: bold;
        padding: 10px 0px;
        font-size: 0.9em;
        margin: 0 10px;




    }




    .Beispiel_Text_Rechts span {
         color: #FF1515 !important;
    }




    .Beispiel_Text_Rechts ul {              /* Einrückung der Listenelemente im Beispielkasten */
        line-height: 1.8em ;
        padding-left:20px;
    }




.rechts {
    float:right;
    font-size: 1.0em;
    width: 220px;
}
.rechts p {
    color: #C0C0C0;
    font-size: 0.9em;
}
.links {
    float:left;
    font-size: 1.0em;







}
.links p {
    color: #C0C0C0;
    font-size: 0.9em;
}
        #Textbereich span {
            font-size: 1.0em;
            color: #800080;
        }




.ZurueckMenu {
    text-align: center;
    margin: 10px auto;
    padding: 10px;
}

Alles anzeigen

http://www.vergel.kilu.de/Testseite.php

Sicher ist noch einiges/vieles verbesserungswürdig, aber ich arbeite daran.

Viele Grüße

Lacido

feinshdens · 15. Januar 2011

Hallo lacido,

du kannst einem a-tag per css, also

Code

a {
    background-image: url('in_diesem_ordner/liegt_die_datei.jpg');
}

eine grafik zuweisen

aufpassen tu ich bei groß geschriebenen datei extensions
also .JPG
hat schon so manchen laaange nach einem fehler suchen lassen

nur zwei gedanken

gruß

Sören · 15. Januar 2011

Er hats doch schon hinbekommen

feinshdens · 23. Januar 2011

Zitat von "Sören"

Er hats doch schon hinbekommen

Zitat von "Peter1978"

nur zwei gedanken

Logo mit Text Zentrieren

Jetzt mitmachen!

Teilen