Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 18.01.2020, 12:39
Sailor56 Sailor56 ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 130
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
An was kann das liegen?
Das liegt an der nicht sachgerechten Verwendung von 'float' - das führt sehr oft zu seltsamen Verhalten des Layouts.
Teste bitte mal folgendes - tausche das vorhandenen CSS für #title und #subtitle durch folgenden Code aus:
Code:
#title {
    margin-left: 266px;
    margin-top: 10px;
    color: white;
    display: inline-block;
}
#subtitle {
    position: relative;
    color: white;
    display: inline-block;
    margin-left: 20px;
}
Damit sollten die weißen Balken/Streifen oben und rechts verschwinden.

Um dann diesen beiden Elemente an das 960px Layout anzupassen,
müsstest du um diese Elemente ein weiteres <div> ... </div> einfügen
HTML-Code:
<div id="head-banner">
	<div class="inner">
	    <div id="title"><h1>Science Travel &nbsp;&nbsp;</h1></div>
	    <div id="subtitle"><h3><em>Just another travel site...</em></h3></div>
	</div>
</div>
Dazu noch im CSS für das 'neue' div...
Code:
div.inner {
  width : 100%;
  max-width: 960px;
  margin: 0px auto;
}
Zum Schluss kannst du dann das 'margin-left' für #title nach deinem Geschmack anpassen (zB 0px).
Mit Zitat antworten
Sponsored Links