|
|||
weisser Balken oben/rechts, Lösung für Text auf Banner
Hallo,
Ich arbeite an einer Science- Seite hier werden plötzlich oben und rechts weisse Balken angezeigt. Wenn ich das prüfe, sind diese außerhalb des body-Tags. An was kann das liegen? Ich habe mich für ein 960px Layout entschieden, hätte gerne oben das Banner fixed und die Heradline+ Subtitle dem 960px Layout angepasst. Hat da jemand einen Tip? Merci vielmals! Iago2 Hier ist der Link zu der Seite: http://science-travel-com.stackstaging.com/ |
Sponsored Links |
|
|||
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; } 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 </h1></div> <div id="subtitle"><h3><em>Just another travel site...</em></h3></div> </div> </div> Code:
div.inner { width : 100%; max-width: 960px; margin: 0px auto; } |
Sponsored Links |
|
|||
Sailor56 vielen Dank für den Hinweis!
Ich habe #title + #subtitel entsprechen geändert und .inner hinzugefügt. Jetzt habe ich das Layout aber nochmals geändert, eine Bild im Kopfbereich hinzugefügt. Jetzt komme ich aber um eine float:right nicht drumrum, wo wie ich das sehe. Float hier scheint keine negativen Auswirkungen zu haben. Wer sich das nochmals anschauen mag: http://science-travel-com.stackstaging.com/ Könnte ich #subtitle auch mit top/left positionieren, damit ich das auch unter den Hauptitel bekomme? Merci!! |
|
|||
Warum willst du so etwas komisches machen?
Fasse doch einfach die beiden Title und Subtitle zusammen... HTML-Code:
<div id="title"> <h1>Science Travel </h1> <h3><em>Just another travel site...</em></h3> </div> |
|
|||
Zitat:
Es wäre auch letztendlich gut wenn der Kopfbereich nicht responsive wäre. Mit einer Breite von 859px ist alles o.k., drunter werden Elemente eingerückt. Aber gut, das ist wieder eine anderes Thema! |
|
|||
Wenn du es nicht responsiv haben willst, dann gib dem div.inner einfach einfach eine feste Breite (width: 960px... das 'max-width' kannst du dann löschen.
Zitat:
|
|
|||
Dass ich die Elemente z.B. im Headbanner wie auf einer Zeichenfläche frei verschieben / anordnen kann, ohne (überraschende) Effekte.
Vielleicht mal bootstrap checken!? Geändert von Iago2 (21.01.2020 um 12:37 Uhr) |
|
|||
Ich fürchte, da wird dir Bootstrap nicht weiter helfen.
https://www.bootstrapworld.de/was-ist-bootstrap.html |
|
|||
Zitat:
Zitat:
|
Sponsored Links |
|
|||
Das stimmt... aber das war ja nicht die Frage.
Zitat:
Zitat:
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Video von youtube responsive in Webseite einbauen | R14 | (X)HTML | 1 | 28.01.2019 22:39 |
Hover effekt auf ganze TD zelle | gandalf_hh | CSS | 27 | 13.07.2011 20:06 |
gibt es eine andere Lösung ohne Tabelle? | online | CSS | 16 | 24.04.2009 09:41 |
Auf-/Zuklappen mit JS | crimi | Javascript & Ajax | 7 | 23.09.2008 17:27 |
Zeilenabstand bei font-Angabe wieder weg | nick | CSS | 7 | 16.02.2008 15:39 |