XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   weisser Balken oben/rechts, Lösung für Text auf Banner (http://xhtmlforum.de/showthread.php?t=74015)

Iago2 18.01.2020 12:56

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/

Sailor56 18.01.2020 13:39

Zitat:

Zitat von Iago2 (Beitrag 554043)
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).

Iago2 19.01.2020 16:25

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!!

Sailor56 19.01.2020 20:20

Warum willst du so etwas komisches machen?
Fasse doch einfach die beiden Title und Subtitle zusammen...
HTML-Code:

<div id="title">
        <h1>Science Travel &nbsp;&nbsp;</h1>
        <h3><em>Just another travel site...</em></h3>
</div>


Iago2 20.01.2020 12:41

Zitat:

Zitat von Sailor56 (Beitrag 554046)
Warum willst du so etwas komisches machen?
Fasse doch einfach die beiden Title und Subtitle zusammen...
HTML-Code:

<div id="title">
        <h1>Science Travel &nbsp;&nbsp;</h1>
        <h3><em>Just another travel site...</em></h3>
</div>


Hi, ich möchte nur flexibel in der Gestaltung des Kopfbereiches sein.

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!

Sailor56 20.01.2020 13:14

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:

Hi, ich möchte nur flexibel in der Gestaltung des Kopfbereiches sein.
Was verstehst du in diesem Zusammenhang unter Flexibilität?

Iago2 21.01.2020 12:35

Zitat:

Zitat von Sailor56 (Beitrag 554048)

Was verstehst du in diesem Zusammenhang unter Flexibilität?

Dass ich die Elemente z.B. im Headbanner wie auf einer Zeichenfläche frei verschieben / anordnen kann, ohne (überraschende) Effekte.

Vielleicht mal bootstrap checken!?

Sailor56 21.01.2020 15:31

Ich fürchte, da wird dir Bootstrap nicht weiter helfen.
https://www.bootstrapworld.de/was-ist-bootstrap.html

Iago2 22.01.2020 01:53

Zitat:

Zitat von Sailor56 (Beitrag 554051)
Ich fürchte, da wird dir Bootstrap nicht weiter helfen.
https://www.bootstrapworld.de/was-ist-bootstrap.html

Naja hier steht's ja:
Zitat:

Zudem bietet Bootstrap alle Voraussetzungen um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden
Aber alles step by step.

Sailor56 22.01.2020 08:44

Das stimmt... aber das war ja nicht die Frage.
Zitat:

Es wäre auch letztendlich gut wenn der Kopfbereich nicht responsive wäre.
und
Zitat:

wie auf einer Zeichenfläche frei verschieben / anordnen kann


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023