zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden weisser Balken oben/rechts, Lösung für Text auf Banner

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2020, 12:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard 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/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.01.2020, 13:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
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
  #3 (permalink)  
Alt 19.01.2020, 16:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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!!
Mit Zitat antworten
  #4 (permalink)  
Alt 19.01.2020, 20:20
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 20.01.2020, 12:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
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!
Mit Zitat antworten
  #6 (permalink)  
Alt 20.01.2020, 13:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 21.01.2020, 12:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen

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

Geändert von Iago2 (21.01.2020 um 12:37 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 21.01.2020, 15:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Ich fürchte, da wird dir Bootstrap nicht weiter helfen.
https://www.bootstrapworld.de/was-ist-bootstrap.html
Mit Zitat antworten
  #9 (permalink)  
Alt 22.01.2020, 01:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.01.2020, 08:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:07 Uhr.