• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Logo in Blog zentrieren

E

el_manu

Neues Mitglied
Hallo Forumsmitglieder,

ich versuche gerade, das Logo im Header eines Blogs bei Blogger.com zu zentrieren. Leider kann man es nicht einfach in den Einstellungen zentrieren. Man kann es einfach nur hochladen, wobei es dann linksbündig angezeigt wird. Man hat allerdings die Möglichkeit, über eine Maske CSS hinzuzufügen. In das CSS-Feld habe ich dies hier eingefügt:

#header {
margin:0 auto;
width:354px;
}

Die 354px sind die Breite (und Höhe) des Logos. Auf der Startseite des Blogs wird das Logo nun auch zentriert angezeigt. Sobald man aber einen Blogbeitrag aufruft, wir das Logo plötzlich rechtsbündig (und auch ein wenig höher) angezeigt. Habt ihr eine Idee, woran das liegen könnte? Gibt es noch eine andere Möglichkeit, ein Logo zu zentrieren?

Vielen Dank!

Manuel
 
Werbung:
Aaron3219 schrieb:
Also du machst den Header auf width 100%


Dann arbeitest du mit mit Flexboxen:
img {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
jetzt ist es vertical und horizontal zentriert.
Zum Vergrößern anklicken....

Dank dir, funktioniert aber nicht. Gebe ich es so ein, wird mein Logo auf Übergröße gestreckt. Gebe ich statt der Prozentangabe die genauen Pixel an, ist das Logo in der richtigen Größe, allerdings links bündig. Ich bin ratlos. ist doch verrückt, dass Google es einem so schwer macht, oder? Noch jemand eine Idee?
 
Werbung:
Kannst du mal den Link der Seite posten oder zumindest den Html-Code + CSS

Edit:
Ach quatsch was ich da gepostet hatte.
Also dein Header muss diesen Flexkram haben.
Ich bin gerade am Handy. Ich poste es gleich richtig
 
Also du wirst um dein logo ja irgendeine Art von Container haben.
Wahrscheinlich so:

HTML: 
<header>
     <img alt="logo" src="./path/to/image">
</header>

oder so:
HTML: 
<div class="header">
     <img alt="logo" src="./path/to/image">
</div>

so muss dann dein CSS aussehen:

Code: 
header {  //also header, wenn du <header> hast, bei einem div musst du dann den Name der class="" nehmen. Ist die Klasse so: class="test" schreibst du .test (ACHTE AUF DEN PUNKT!!!)
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;    //Also wenn du dein Header über den ganzen Bildschirm geht, dann 100%, ansonsten halt eine feste Pixelgröße
   height: 100px; //kannst du beliebig anpassen
}

//Hier jetzt dein Logo
.logo {
   height: 80%; //Beliebig anpassbar
}

Wie gesagt. Ein Link oder der HTML-Code wäre hilfreich, da .logo ja nur ausgedacht ist.
 
Funktioniert nicht. HTML-Code gibt's ja quasi nicht, weil es eben ein WYSIWYG-Angebot von Google ist. Mit der schwachsinnigen Ausnahme, dass ich das Logo nicht per "Knopfdruck" zentrieren kann. CSS-Code kann ich allerdings über ein Eingabefeld hinzufügen. Gibt auch zig Anleitungen für das Zentrieren eines Logos über CSS-Code, bloß funktieren die meisten bei mir überhaupt nicht, d.h. das Logo bewegt sich keinen Millimeter. Ich bin ratlos.
Wobei man sich den Code der Designvorlage schon anzeigen lassen kann. Soll ich dir den mal zeigen? Alles oder nur einen bestimmten Teil? Man kann ihn wohl auch bearbeiten.
 
Werbung:
Doch du kannst den HTML-Code anschauen. Mit den developer-Tools von Google-Chrome, IE, Firefox, etc.
einfach rechtsklick auf deinen Header und dann auf "Element untersuchen". Das kopierst du hier rein.
Außerdem geht auch noch: Seitenquelltext anzeigen.

Edit:
Oh warte...
WysiWyg...
...
...
Verdammt.


2. Edit:
Doch es MUSS eine Möglichkeit geben.
Du musst ja um es zu veröffentlichen auf einen FTP-Server uploaden. Dann kannst du es über die Domain abfragen und die Seite aufrufen. Diesen Link brauche ich.
 
Okay also so sieht es bei mir aus:
Unbenannt.png

Es ist also mittig zu dem Header (so weit so gut)

Hier sieht es schon ganz anders aus:
Unbenannt.PNG

ich schätze mal, dass das der Punkt ist den du Ansprichst.

Kannst du bei deinem Programm Klasse verteilen?
Also:
.test-Klasse {}

oder nur auf ein Objekt raufklicken, um ihm CSS attribute zu geben?
 
Werbung:
Genau, das ist mein Problem. Ich nutze ja gar kein spezielles Programm, sondern nur meinen Browser. Wenn ich mich ich mein Google-Konto einlogge und zum Blog wechsle, kann ich dort unter Design->Anpassen->Erweitert->CSS hinzufügen Code in ein Feld eingeben. Das war's.

Dank dir für deine Hilfe! :-)
 
Code: 
#item-view #header {
   margin: 0 auto;
}

.item-view .Header {
  margin: 0;
}

probier das mal aus.

Edit:
Hatte mal wieder was falsches gepostet...
habe jetzt geändert und so siehts jetzt aus:
Unbenannt.PNG
 
Zuletzt bearbeitet:
Werbung:
welchen Browser benutzt du?

Meinst du jetzt die Seite, wenn du auf "mehr anzeigen" klickst oder die Startseite

Schick mal nen Screenshot
 
Ich nutze Chrome. Das Logo wird auf der Startseite und in den Postings falsch angezeigt. Wo kann ich den Screenshot denn hochladen?
 
Werbung:
Da steht unten im Textfeld datei hochladen.

Probier das nochmal:

Code: 
#item-view #header {
   margin: 0 auto !important;
}
 
.item-view .Header {
  margin: 0 !important;
}

Edit:
komisch, denn ich benutze ebenfalls Chrome und bei mir läuft es einwandfrei
 
Wie fügst du denn den Code ein? Du kannst ihn ja nicht über das Formularfeld einfügen wie ich. Könnte es vielleicht daran liegen?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben