Ergebnis 1 bis 8 von 8

Thema: CSS Objekt mittig positionieren auf 100% Background

  1. #1
    Der kleine Frosch
    Gast

    Standard CSS Objekt mittig positionieren auf 100% Background

    Hallöchen,

    und wiedermal ist man am Ende des Lateins.


    Ich habe einen Background mit 100% Auflösung. (Weil es sich um eine Indexseite handelt und die Seite sich jeder Bildschirmauflösung anpassen soll)
    Das hat bis jetzt ganz gut geklappt, weil sich eine Seite des Hintergrundes immer zu 100% anpasst und man dadurch nicht scrollen braucht.
    (Besserer Vorschlag?)

    Darüber will ich mittig ein Logo mit klar definierten Werten legen. Ich komme aber zu keiner Lösung...weil sich der Background ja vollkommen verändern kann in seiner Größe - kann man da eigentlich keine Angaben machen - oder?

    Die Sache wäre gegessen wenn man den Mittelpunkt des Hintergrundes irgendwie markieren könnte und das Bild dann dort draufpinnt dann könnten sich die Ränder verändern wie sie wollen....

    Eine Lösung mit CSS wäre großartig, ich hab bis jetzt rein mit Html gearbeitet, sah aber teilweise nicht gut aus und sind ja mittlerweile auch unerwüschte Attribute.

    Vorerst einmal einen guten Rutsch ins 2012! Ich werde versuchen mich zu revangieren
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Am einfachsten löst du das mit einem zusätzlichen HTML-Element. Da es sich um ein Logo handelt, wäre wohl h1 passend, geht aber grundsätzlich mit jedem Blockelement. Markup wie folgt:

    HTML-Code:
    <div id="background">
       <h1 id="logo">
       </h1>
    </div>
    Code:
    #background {
       width: 100%;
       height: 100%
       background: green;
    }
    
    #logo {
       width: 100px;
       height: 35px;
       margin: 0 auto;
       background: url('pfad/zum/bild.jpg');
    }
    Die Rot markierten CSS-Regeln sind eigentlich alles was du brauchst. mit margin: 0 auto zentrierst du das Element horizontal im umgebenden Element. Mit background wird wie gewohnt das Bild als Hintergrund gewählt.

    Alternativ kannst du auch mit background-position arbeiten, das funktioniert aber nur dann, wenn der 100%-Hintergrund nur eine Farbe, kein Bild, ist.

  3. #3
    Der kleine Frosch
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Ich werde leider nicht schlau daraus.

    Hast du deinem body, oder div container fixe werte gegeben?

    (Wenn ich es mit den Werten mache, klebt das Logo in der linken oberen Ecke)

    Lg

  4. #4
    Bandit
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Poste mal einen Link zur Seite

  5. #5
    Der kleine Frosch
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    http://uniskant.com/

    der Quelltext ist allerdings der alte grausige und der Grund warum ich ihn ändern möchte
    Je nach Bilschirm sollte das Logo in der Mitte sein-

  6. #6
    Bandit
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Bei mir ist das Logo in der Mitte

  7. #7
    Der kleine Frosch
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Ok sorry, ich habe glaub ich die Frage nicht klar gestellt.

    Index Screen.jpg

    Seht auch die Vorschau an, sie ist hässlich.
    1. Wenn man schon eine Indexseite hat sollte man zumindest nicht herumscrollen müssen.
    2. CSS scheint dafür zu wenig zu sein, weil sich das Bild wenn ich es "fixe" schlimm verzerrt! (Ich wusste im Vorhinein nicht dass es wirklich so schlimm ist)

    Wie stelle ich es also an, dass ich eine Indexseite mit selbstanpassender Auflösung erstelle, wo das Layout auf allen Auflösungen* so bleibt wie ich es haben will!?

    *Maximal würde ich eh nur 1024px * .....px nehmen.

    Wie gesagt bei einer super Lösung sind mir alle Arten von Codes recht.
    Geändert von Der kleine Frosch (06.01.2012 um 21:08 Uhr)

  8. #8
    Der kleine Frosch
    Gast

    Standard AW: CSS Objekt mittig positionieren auf 100% Background

    Das Problem wurde jetzt vorerst mit CSS Layout gelöst und jetzt kommt noch eine "Auflösungsweiche" (JavaScript) drauf, dann kann ich zumindestens 3 Bildschirmgruppen einteilen was die Auflösung angeht.

    Spontane Frage: Wenn ich ein Mobilversion (Smartphone) der Site machen will, ist dass dann eine Erweiterung des Originalcodes (Wie Fremdsprachen) oder eine richtige Änderung ähnlich Auflösungsweiche?

Ähnliche Themen

  1. JS, ... Objekt erwartet.
    Von OJMD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 17.06.2008, 14:37
  2. PHP - Objekt in $_SESSION
    Von The User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 20.05.2008, 22:56
  3. Image zum Objekt
    Von im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 3
    Letzter Beitrag: 09.04.2008, 13:09
  4. Objekt zentrieren???
    Von Chico im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 17.07.2007, 12:35
  5. Tabelle mittig positionieren
    Von nhl-hockey-king im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.04.2007, 16:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •