Logo mit Text Zentrieren

  • 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:



    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

  • 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:

  • 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

  • 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.



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

  • 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

  • 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,



    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

  • 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..

  • Hallo,



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

  • 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.


  • 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.

  • 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:


    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

  • 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.Ä.

  • 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

  • Hallo Lauras,


    Gerne


    HTML



    CSS



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


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



    Viele Grüße


    Lacido

  • 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 :D


    nur zwei gedanken


    gruß

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!