Bild/Logo fixieren bei Browserfenster-Veränderung
3 1 
Gunnar Bittersmann
0 
dedlfix
0 Gunnar Bittersmann
0 0 dedlfix
Bild/Logo fixieren bei Browserfenster-Veränderung
Guten Abend!
ich hoffe hier richtig mit meinem Problem zu sein...
folgendes: ich beschäftige mich erst seit dieser Woche mit dem Programmieren und habe mich an ein Mini-Projekt für meine Webseite gewagt...Eine einfache "Webseite im Aufbau" Webseite... unter anderem habe ich ein SSL-Logo welches sich in einem Jumbotron befindet. Soweit so gut... jetzt möchte ich aber, wenn das Browser-Fenster verkleinert wird, egal in welcher Form, dass dieses Logo IMMER rechts unten im Eck von diesem Jumbotron ist.
zzt. springt es ab einer gewissen Fensterbreite immer aus dem Jumbotron heraus...und seit 4 Stunden sitze ich recherierend da und blicke nicht mehr durch... Vielen Dank auf jedenfall für eure Hilfe und wenn ihr noch Änderungsvorschläge bzw. Verbesserungsvorschläge habt, bin ich sehr gerne dafür offen!
die Homepage wäre Meine Homepage
Grüße, PHW
<!DOCTYPE html>
<html>
<head>
<title>Info!</title>
<meta name="content-language" content="de" />
<meta http-equiv="content-type"content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script src="4-jQuery/jquery-3.2.1.min"></script>
<script src="4-jQuery/jQuery-ui/jquery-ui.min"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css"></style>
<script language="javascript" type="text/javascript"></script>
<style>
.jumbotron{
position:relative;
text-align: center;
margin-top: 160px;
}
#mitte{
height: 250px;
width:auto;
margin-bottom: 20px;
}
.Copyright{
float:right;
position: inherit;
margin-right: 50px;
margin-top: 60px;
font-size: 140%;
}
.SSL{
position: inherit;
float:right;
margin-top:-40px;
margin-right:-80px;
}
#logo{
width:50%;
height:auto;
position:inherit;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Die Seite befindet sich gerade im Aufbau!</h1>
<p>Vielen Dank für deinen Besuch auf meiner Homepage! Sie befindet sich gerade im Aufbau und wird bald fertig sein!</p>
<img id="mitte" src="Maurer_Maxl.png">
<p><a class="btn btn-primary btn-lg" href="https://www.google.com" data-toggle="tooltip" data-placement="bottom" title="weiter zu www.google.com" role="button">Seite verlassen!</a></p>
<div class="SSL">
<a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a>
</div>
</div>
</div>
<div class="Copyright">
<p><b>© PHW</b><p>
</div>
</body>
</html>
-
Hallo,
schon mal mit absolute probiert?
Aber den ganzen Aufwand/Scripte betreibst du doch jetzt nicht wirklich für eine Baustellenseite? Ganz ehrlich, wenn Du dich gerade erst damit beschäftigst, schmeiß die ganzen Frameworksachen(Bootstrap) weg und beginne mit reinem HTML.
Gruss
Henry -
@@Phlix
Ich hab dein Posting mal lesbar gemacht. Das nächste Mal bitte selbst formatieren.
die Homepage wäre Meine Homepage
Dazu ein paar Anmerkungen:
<!DOCTYPE html> <html>Hier fehlt die Angabe der Sprache des Seiteninhalts:
<html lang="de"><meta name="content-language" content="de" />Diese Zeile ist sinnlos.
<meta http-equiv="content-type"content="text/html; charset=utf-8">Das kannst du kürzer haben:
<meta charset="utf-8">. Und das sollte als allererstes imheadstehen.<style type="text/css"></style> <script language="javascript" type="text/javascript"></script>Die Zeilen sind sinnfrei.
BTW,
type="text/css"ist in HTML5 ebenso unnötig wietype="text/javascript".language="javascript"war schon immer Unsinn.<body> <div class="container"> <div class="jumbotron">Diese Container-
divs brauchst du nicht; mithtmlundbodysind bereits zwei Container-Elemente vorhanden.<img id="mitte" src="Maurer_Maxl.png">Hier fehlt der Alternativtext
alt– für Nutzer, die keine Grafiken sehen können.Es sei denn, es handelt sich (wie hier) um eine Schmuckgrafik. Dann sollte das mit
role="none presentation"gekennzeichnet werden und es muss trotzdemalt=""vorhanden sein (andernfalls würden Screenreader den Dateinamen vorlesen).Noch besser wäre, wenn eine Schmuckgrafik gar nicht im HTML auftaucht, sondern als Hintergrunsgrafik im CSS.
<p><a class="btn btn-primary btn-lg" href="https://www.google.com" data-toggle="tooltip" data-placement="bottom" title="weiter zu www.google.com" role="button">Seite verlassen!</a></p>Ein Link ist ein Link ist ein Link – kein Button! Das Stylen eines Links als Button ist fragwürdig;
role="button"ist an der Stelle völlig falsch.Links führen zu anderen Seiten; Buttons lösen Aktionen auf einer Seite aus.
BTW, einen Link zu Google braucht niemand. Ein Sucheingabefeld ist im Browser bereits vorhanden. Und meins führt aus Gründen nicht zu Google.
<a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a>Das wäre wohl ein Button. Hier wäre
role="button"angebracht (zumindest wenn JavaScript ausgeführt wird) – oder noch besser gleich dasbutton-Element verwenden.<div class="Copyright"> <p><b>© PHW</b><p> </div>Das wäre besser ein
footer, keindiv.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Tach!
<body> <div class="container"> <div class="jumbotron">Diese Container-
divs brauchst du nicht; mithtmlundbodysind bereits zwei Container-Elemente vorhanden.Im Prinzip richtig, aber man braucht sie für Bootstrap. Sie müssen aber nicht unbedingt
divs sein.<a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a>Das wäre wohl ein Button.
Warum? Ist doch auch nur ein Link. Wenn auch einer, der einem ungefragt ein neues Fenster aufzuzwingen versucht.
dedlfix.
-
@@dedlfix
<a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a>Das wäre wohl ein Button.
Warum? Ist doch auch nur ein Link.
Ohne JavaScript ist es ein Link.
Wenn auch einer, der einem ungefragt ein neues Fenster aufzuzwingen versucht.
window.open()öffnet kein neues Browserfenster, sondern ein modales Fenster auf der bestehenden Seite. Das UI-Element für diese Aktion sollte ein Button sein.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
window.open()öffnet kein neues Browserfenster, sondern ein modales Fenster auf der bestehenden Seite.Ich habe keine Ahnung, wie du darauf kommst. Bei mir öffnet
window.open()erstmal gar nichts. Und auf Bestätigung dann ein neues Tab, bzw. in den Default-Einstellungen ein Browser-Fenster. Modal ist da gar nichts. Auch die MDN beschreibt das so:The open() method creates a new secondary browser window, similar to choosing New Window from the File menu. The strUrl parameter specifies the URL to be fetched and loaded in the new window. If strUrl is an empty string, then a new blank, empty window (URL about:blank) is created with the default toolbars of the main window.
Verwechselst du das vielleicht mit
alert()oderprompt()?LG,
CK -
Tach!
Wenn auch einer, der einem ungefragt ein neues Fenster aufzuzwingen versucht.
window.open()öffnet kein neues Browserfenster, sondern ein modales Fenster auf der bestehenden Seite. Das UI-Element für diese Aktion sollte ein Button sein.Bei mir öffnet es kein modales Fenster sondern ein normales Browserfenster mit ein paar ausgeblendeten Navigationselementen.
Der Inhalt der geöffneten Ziel-URL im Fensters hat auch keinen Bezug zu den Inhalten des Hauptfensters. Es dient nicht dazu, irgendetwas mit oder für die geöffnete Seite zu machen. Es ist eine fremde Seite, die lediglich etwas über die Domain erzählt und Werbung für den verwendeten Dienst macht. Man kann problemlos einen normalen Link setzen, ohne dass Funktionalität verlorengeht.
dedlfix.
-
-
-