Html CSS Überschrift ausrichten?

Hallo,

ich habe in einer Zeile sowohl Button, als auch eine Überschrift. Wie kann ich die Button links lassen, die Überschrift aber in die Mitte ziehen? Denke das erklärt schon alles, ansonsten fragen.

Zweite frage:

Wie richte ich das Bild so aus, dass es über die gesamte Webseite reicht? Width 100% hat nicht funktioniert.

Comments

[Verelat777]

*Code

[Frodo7382]

Html und CSS bislang. JavaScript kommt aber auch noch.

Answer 1

[Verelat777]

Zur ersten Frage:

Die Unterschrift wird mittels text-align: center; zentriert:

<button>Button 1</button>
<button>Button 2</button>
<button>Button 2</button>
<h1>Überschrift</h1>

h1 {
    text-align: center;
}

button {
    float: left;
}

Wenn sich die Überschrift immer in der Bildschirmmitte befinden soll, muss man position: absolute; beim Button-Container setzen:

<div id="buttons">
	<button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
<h1>Überschrift</h1>

h1 {
    text-align: center;
}

#buttons {
    position: absolute;
}

Hierbei kommt es allerdings bei kleineren Bildschirmgrößen zu einer Überlappung der Buttons mit der Überschrift.

Comments

[Frodo7382]

Danke, das hat mein Problem gelöst!

Answer 2

[TechPech1984]

entweder buttons kleiner oder bild größer , denk mal drüber nach wie es mittig aussieht wenn der H titel über den buttons ist , oder du verschiebst das bild so das die überschrift mittig.

Comments

[JenzW]

Hi :)

zu Frage 1 wie schaut dein Code aktuell aus? Da gibt's mehrere Möglichkeiten das zu realisieren

2. Reagiert denn dein Bild generell auf width oder passiert da nichts?

[Frodo7382]

@JenzW

bei width passiert gar nichts.

[JenzW]

@Frodo7382

Okay dann müsste man sich den Code mal anschauen um den Fehler zu finden