hauli95: HTML / CSS / Überschriften nicht gleich!

Hallo zusammen!

ich habe folgendes Problem..Was muss ich tun, damit die beiden Überschriften gleich zentriert sind?

Alternativ-Text


<style>
body {font-family: Tahoma;
font-size: 10pt;
#top {color:white;}
				
# Host_Details {
background-color: yellow;
width: 49%;
float:left;
}

# Service_Details {
				
background-color: green;
margin-left: 500px;
width: auto;
}
				
</style>

<div id="Host_Details">
	<h1> Host details </h1> 
		<hr>
</div>

<div id="Service_Details">
	<h1> Service details</h1>
		<hr>
</div>

Vielen dank im Vorraus!

  1. @@hauli95

    ich habe folgendes Problem..Was muss ich tun, damit die beiden Überschriften gleich zentriert sind?

    Die rechte Box auch floaten.

    Oder besser gar keine von beiden, sondern Flexbox verwenden.

    # Host_Details {
    background-color: yellow;
    width: 49%;
    float:left;
    }
    

    Da wundert mich, dass die Box gelb wird. Syntaxfehler: Leerzeichen.

    # Service_Details {
    background-color: green;
    

    Dito.

    margin-left: 500px;
    

    Das passt nicht mit der Breite der ersten Box zusammen.

    <div id="Host_Details">
    	<h1> Host details </h1> 
    		<hr>
    </div>
    

    Ein Abschnitt mit einer ID und einer Überschrift ist ein Zeichen, dass vermutlich section das passende HTML-Element zum Strukturieren ist.

    LLAP 🖖

    NACHTRAG: Das nächste Mal bitte ein Online-Beispiel.

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. Danke für die Info... Jedoch ist der höhen Unterschied der beiden überschriften noch da..

      1. @@hauli95

        Danke für die Info... Jedoch ist der höhen Unterschied der beiden überschriften noch da..

        Danke für die Info. Jedoch kann ich damit nichts anfangen. Andere auch nicht.

        Womit wir was anfangen können, hatte ich dir bereits gesagt: mit dem Link zur problematischen Seite oder zu einem Nachbau des Problems auf Plattformen wie Codepen oder Dabblet.

        LLAP 🖖

        --
        “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  2. Hej hauli95,

    ich habe folgendes Problem..Was muss ich tun, damit die beiden Überschriften gleich zentriert sind?

    Darauf hat @Gunnar Rittersmann ja bereits geantwortet. Wenn du Hilfe brauchst bei der Umsetzung, frag einfach zu einem konkreten Punkt, am besten mit nachvollziehbarem Beispiel.

    Noch eine andere Sache: mit HTML werden Texte Ihrer logischen Bedeutung entsprechend ausgezeichnet. Jedes Element hat dabei einen Sinn. hr trennt z. B. Bereiche voneinander - ich bezweifle doch stark, dass du die Überschrift logisch von dem nachfolgenden Text trennen möchtest ;-)

    Marc