Hinweis?

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

HTML-Laie hat geschrieben: Di 9. Jun 2020, 22:40 So habe mal dein Design nachgebaut auf meinem Rechner und habe getestet. Das der Hintergrund des Bildes also der div in dem das Bild dargestellt wird so groß ist, liegt daran das schon ein Div mit der ID .container existiert. Das ich aber jetzt herausgefunden habe das du ein Bild mit Text verwendest, kannst du die geposteten CSS-Abschnitte wieder entfernen aus der CSS-Datei.

Dafür fügt du folgenden Abschnitt ein:

Code: Alles auswählen

img{
border-radius: 9px;
  margin: 1% auto;
  -webkit-box-shadow:0 0 2px #FF6A00, 0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 5px #FF6A00,0 0 5px #FF6A00,0 0 5px #FF6A00;
}
Damit kriegt das Bild seinen Rahmen. Jetzt noch folgendes anpassen: Den zuletzt eingefügten Div-Container wieder entfernen,
Wenn das Bild ohnehin von alleine weggeht, warum muss ich dann das Schließen noch drin haben?


habe ich ebenfalls entfernt, so das nur noch dieses übrigbleibt:

Code: Alles auswählen

<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
<img src="https://www.happy-halloween.karins-poserbilder.de/images/poserbilder/hinweis.png" alt="Snow" style="width:30%;">
</div>
Was mir gerade noch einfällt! Wenn das Bild weggegangen ist, bleibt dort eine recht große Lücke, kann man das ebenfalls noch ändern, oder ist das so? Weil dann kann ich das nicht nehmen. Sieht ja auf dauer dann nicht gerade schön aus!
Warum es nicht funktionierte:

Die CSS- Anweisungen für die fadeinbox haben gefehlt. Zumindest konnte ich sie nicht in deiner CSS-Datei finden.

LG Hape ;)
Schätzelein :lol: , ich hab das jetzt geändert!

Also den ersten Code habe ich in der CSS getauscht

Aus dem Haeder habe ich den Weggenommen und der zweiten Code ist auf der Index Seite! Nun geht der Hinweis aber nicht mehr von allein weg und nun habe ich um jedes Bild einen Rahmen! Schau bitten mal

https://www.test.karins-poserbilder.de

Musst weiter runter scrollen!

Irgendwas hab ich da falsch gemacht! Aber zumindest ist der weiße kasten schon mal weg!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

Aus dem Haeder habe ich den Weggenommen und der zweiten Code ist auf der Index Seite! Nun geht der Hinweis aber nicht mehr von allein weg und nun habe ich um jedes Bild einen Rahmen! Schau bitten mal
:roll: Schätzelein ich habe nochmal meine Äuglein über deinen Quellcode auf deiner Testseite schweifen lassen und konnte weder das Script finden, noch die dazugehörigen CSS-Anweisungen. Deswegen bleibt das Bild dort wo es ist.
Habe abermals deinen Quellcode, diesmal von der Testseite bei mir auf den Rechner gesaugt, beides eingefügt und was soll ich sagen bei mir funktioniert es.



Zu: Jedes Bild hat jetzt einen Rahmen:

du benennst den CSS-Abschnitt .img um in .einblenden, dann verpasst du dem img noch die ID einblenden

Code: Alles auswählen

<img id="einblenden" src="URL zum Bild/hinweis.png" alt="Snow" style="width:30%;">
LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Guten morgen hape schatz,
Ich werds probieren, ob ich es hinbekomme sehen wir dann :)
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

So, dass hat jetzt wohl funtkioniert, zumindest sind die Rahmen jetzt raus! Nun ist nur noch der Fehler, dass es jetzt nicht von alleine weg geht?! Da ich ja diesen Code aus dem Haeder nehmen sollte, oder hab ich das falsch verstanden gehabt?

https://www.test.karins-poserbilder.de/

Bis natürlich von dem Bild nicht, der sollte da ja drum bleiben!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

Dieses

Code: Alles auswählen

<style type="text/css">
#fadeinbox{
position:absolute;
width: 300px;
left: 0;
top: -400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
color:black;
}
</style>
und dieses:

Code: Alles auswählen

<script type="text/javascript">

/***********************************************
* Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Go to http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"

var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["yes", 5] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)

////////No need to edit beyond here///////////

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"

if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)

if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
objref.style.MozOpacity=1
controlledhidebox()
}
}
else
controlledhidebox()
}

function mozfadefx(){
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox(){
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction(){
setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}
</script>
muss natürlich vorhanden sein, wenn es denn funktionieren soll.

LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Achje hape schatz, :)
das erste in die css und das zweite in den haeder, richtig??

Ob ich das nochmal hinbekomme... himmel, warum muss das immer nur so kompliziert sein! :)

Ich versuchs heute abenf oder morgen noch mal! Ich kriegs noch... früher oder später, aber ich kriegs noch! :G
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Hallo Hape Schatz,

habs jetzt nochmal eingefügt! Das Bild geht jetzt zwar wieder von alleine weg, aber es bleibt die große Lücke! Dann gehts wohl nicht...

https://www.test.karins-poserbilder.de
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

habs jetzt nochmal eingefügt! Das Bild geht jetzt zwar wieder von alleine weg, aber es bleibt die große Lücke! Dann gehts wohl nicht...
Da haben wir doch mal wieder Blödsinn gemacht: :roll: Eine Style-Definition

Code: Alles auswählen

<style type="text/css">
und auch

Code: Alles auswählen

</style>
hat in einer CSS-Datei nichts zu suchen. Deswegen werden die CSS-Anweisungen die die fadeinbox steuern nicht ausgeführt.

Du musst also in deiner CSS-Datei nur das einfügen was zwischen der Style-Definition steht.

Falls jetzt Darstellungsfehler wie zu kleines BIld auftreten folgendes ändern:

Von:

Code: Alles auswählen

width: 200px;
auf:

Code: Alles auswählen

width: 100%;
und falls der Hintergrund wieder durchschimmert, dieses noch entfernen:

Code: Alles auswählen

border: 2px solid black;
background-color: lightyellow;
LG Hape ;)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Schätzelein,
das hat mich schon gewundert. Das ist aber bislang immer dran gewesen, wenn ich den code kopiert habe...

Werde ich nachher noch einmal,alles ändern! Danke dir erst einmal! Melde mich dann noch mal ob alles geklappt hat!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

HTML-Laie hat geschrieben: Do 11. Jun 2020, 18:27 Dieses

Code: Alles auswählen

<style type="text/css">
#fadeinbox{
position:absolute;
width: 300px;
left: 0;
top: -400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
color:black;
}
</style>
Den hatte ich hier kopiert! Da steht auch style ;)
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste