Beiträge von P.Schmidt

Zitat von Lupus_III

Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.

Vielen dank für deine Info, dann habe ich leider etwa falsches verstanden.

Dann sucht er möglicherweise ein "Tooltipp", mit soetwas habe ich mir eine ganze Bilder-Galerie erstellt, weil ich auf Javascript so gut wie möglich verzichten wollte.

Mit einem sogenannten CSS-"Tooltip" kann er auch Bilder aufpoppen lassen, diese benötigen kein Javascript, und eignen sich hervorragend für solche Projekte.

Ich habe mir auch mehrere Dropdown-Menüs mit solchen "Tooltipps" erstellt....

Gerne nenne ich einen selbsterstellten CSS/Html-Code von einem solchen "Tooltipp", hier ist das Bild schon mit eingebaut und man muss nur noch die URL des Bildes ändern.

LG, Patrick

Edit: Hier mein Code des Tooltip-Fenster:

<style type="text/css">

/* Text, der berührt werden soll */

.tooltip {
   font-size: 14px;
   color: chocolate;
   cursor: help;
   margin: 20px 2% 0px 2%;
   display: inline-block; }

/* Tooltip Fenster */

.tooltip span { 
   width: 50%;
   height: auto;
   position: absolute;
   padding: 10px 10px 10px 10px;
   background-color: #FFFFFF;
   border-radius: 15px 15px 15px 0px;
   box-shadow: 2px 2px 12px 2px #aaaaaa;
   visibility: hidden; }

.tooltip:hover span {
   visibility: visible; }

.tooltip img {
width: 100%; }

</style>
<div class="tooltip">zum Bild<span> zum verlassen des Bildes oder Videos bitte mit der Maus/ dem Finger den Rand au&szlig;en ber&uuml;hren oder Seite neuladen: <img src="Bild.png" alt="Bild-Beschreibung" /></span></div>

Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.

Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:

img {
width: 50%;
height: auto;
padding: 3%;
-webkit-transition: ease-in-out 0.9s all !important;
-moz-transition: ease-in-out 0.9s all !important;
-ms-transition: ease-in-out 0.9s all !important;
-o-transition: ease-in-out 0.9s all !important;
transition: ease-in-out 0.9s all !important;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: 1px dotted #999999; }

img:hover {
-webkit_transform: scale( 1.08, 1.14 );
-moz-transform: scale( 1.08, 1.14 );
-ms-transform: scale( 1.08, 1.14 );
-o-transform: scale( 1.08, 1.14 );
transform: scale( 1.08, 1.14 );
background-color: #999999; }

</style>
<img src="bild.jpg" alt="" />

Wenn fragen sind, gerne her damit, ich bin selbst an CSS interessiert.

Liebe Grüße, Patrick

Zitat von Kalle112

Das ist der HTML Text:

<img src="https://xxxxxxxxxxxpng" title="xxxxxxxxx" alt="xxxxxxxxx" class="elementor-animation-grow">

Mit "title" hast Du doch eigentlich schon eine Art Beschreibung, daher stehe ich jetzt gerade auf dem Schlauch was Du genau meinst beziehungsweise wonach Du nun suchst.

Das einzigste was Du machen könntest, um eine Beschreibung anzeigen zulassen, wäre, wenn Du dem Bild ein sogenanntes Tooltip vergibst, das wird dann beim darüber Hovern des Bildes dann angezeigt.

Habe so etwas auf meiner Webseite, leider kann und darf ich keinen Link hier einfügen, da keine Werbung gewünscht ist.

Du kannst mir aber gerne eine PN senden, wenn Du dabei hilfe benötigst, dann helfe ich Dir gerne weiter.

LG, Patrick

basti1012 , ja da haben Sie auch wiederum vollkommend Recht, da gebe ich Ihnen auch meine volle Zustimmung dazu.

Das mit dem display flex werde ich mir auf jeden Fall merken und ans Herz legen.

Zur Not habe ich es mal so gemacht, damit das padding mitbrerechnet wird:

Beispiel:

<style>

.container {
    max-width: 90%;
    width: 500px;
    margin: 0 auto;
    padding: 10px;
    background: #555555; }

.box {
   width:96%;
   padding: 10px 2% 10px 2%;
   background: #bbbbbb; }

</style>
<div class="container">
<div class="box">Hier der Boxen-Inhalt hinein</div>
</div>

Somit werden die 2 Prozent von innen mit gerechnet, da ich der Box nur 96 Prozent gegeben habe - ( 2 × 2 = 4 + 96 = 100 Prozent ).

Na ja, wird schon irgendwie gehen

Schönen sonntagabend noch...

Liebe Grüße, Patrick

Zitat von Stef

Hey,

Es ist so, dass eine Webseite 100% breit ist.

Nun gibst du deinem Container 100% Breite aber dazu noch Padding. Das heißt, dass die eigentliche Breite des Containers größer als 100% ist und es aus diesem Grund dazu kommt.

Bei der Angabe der Breite musst du immer das Margin und Padding mitberechnen.

Grüße,

Stef

Alles anzeigen

Hallo Stef,

erstmal vielen dank für Ihre hilfreiche Antwort.

Nun, ich ginge immer davon aus, dass die 100% sich automatisch an den äusseren Container verteilen.

Jetzt habe ich wenigstens wieder etwas dazu gelernt.

Das komische eben an der ganzen Sache ist, dass es auf meiner 50% - fertigem Theme-Design funktioniert, nur leider nicht in einer ganz leeren HTML-Seite.

Daher muss ich jetzt schon daran denken, wenn ich irgendwann mal meinen Homepage-Anbieter wechseln tue oder auch müsste, und dann muss ich mein 50% erstelltes Template auf der Webseite abändern, so, dass es weiterhin gut ausschaut.

Liebe Grüße, Patrick

Zitat von basti1012

du könntest es auch mit Flex machen. Ich komme da auch immer durcheinander mit. Aber flexbox berechnet padding und border glaube ich schon ab. Aber du müßte ich jetzt selber goggeln gehen bevor ich das falsch sage.

Mit Flex geht es auch zb so

Code

<style>
.container {
    display:flex;
    max-width: 90%;
    width:500px;
    margin:0 auto;
    padding: 10px;
    background: #555555;
}
.box {
   width:100%;
   padding: 10px;
   background: #bbbbbb; 
}
</style>
<div class="container">
<div class="box">Hier der Inhalt hinein</div>
</div>

Alles anzeigen

Gute Idee, vielen dank dafür

Nur wird, so vermute ich es mal, display: flex noch nicht von allen Browsern unterstützt, und ich möchte schon meine Webseite wenn möglich so handhaben, dass sie auf fast allen Browsern gleich aussieht.

Naja, ich werde jetzt doch erstmal zu "auto" zurückgreifen müssen.

Nochmals vielen dank für die Hilfe

Liebe Grüße, Patrick

Zitat von basti1012

zu dein ersten Problem. Meinst du die paar Pixel die da drüber ragen?

Dann zieh doch mal den padding ab.

Code

<style>
.container {
   max-width: 90%;
   width:500px;
   margin:0 auto;
   padding: 10px;
   background: #555555;
}
.box {
   width: calc(100% - 20px);
   padding: 10px;
   background: #bbbbbb; 
}
</style>
<div class="container">
<div class="box">Hier der Inhalt hinein</div>
</div>

Alles anzeigen

Fals du noch was anderes meintest dann müßtest du mal den rest Code posten weil in den Code kann ich in meinen Browserjetzt nix erkennen was du meinen könntest

Nun so könnte ich es auch machen, jedoch müssten sich doch auch die 100% von der Box eigentlich automatisch an den Container anpassen oder?...

Sorry, aber wie ich schon oben geschrieben habe, habe ich nur Grundwissen in Sachen CSS und HTML.

Ihr Code sieht auf jeden Fall besser aus als meiner und gehen tut es auch - vielen herzlichen dank schon mal dafür

Liebe Grüße, Patrick

Hallo, ich bin neu hier und hoffe ich kann mein Anliegen hier veröffentlichen.

Ich bin seit einigen Jahren bei einem Homepage-Baukasten Anbieter angemeldet, von hier aus wird auch meine Webseite gehostet, nun habe ich ein "großes" Problem, was mich schon seit einigen Tagen so richtig beschäftigt und mir keine Ruhe lässt.

Eines vorweg, ich habe hier die Forum-Suche bedient, nur finde ich nicht dass, was mein Problem "beruhigen" tut.

Und zwar, ragt die Div-Box über den Div-Container hinaus, obwohl ich der Div-Box eine Weite von 100% gegeben habe.

Da ich auch nur wirklich ein paar Grunderfahrungen in Sachen CSS und HTML habe, daher meine Frage an alle wo sich besser mit CSS und HTML auskennen, wieso ragt die innere Div-Box aus dem Div-Container hinaus?.. was muss ich beachten, damit die Box im Container bleibt, ohne dass sie über den Container hinaus geht?...

Hier ein Beispiel:

<style type="text/css">

.container {
max-width: 90%;
width: 500px;
height: auto;
margin: 0px auto 0px auto;
padding: 10px 10px 10px 10px;
position: relative;
background-color: #555555; }

.box {
width: 100%;
padding: 10px 10px 10px 10px;
display: inline-block;
background-color: #bbbbbb; }

</style>
<div class="container">
<div class="box">Hier der Inhalt hinein</div>
</div>

Nun, dass komische an der ganzen Sache ist, dass das auf meiner Webseite zwar geht - ( Webseite besteht aus 50% Fertg-Theme und 50% selbst erstellt ) - aber sobald ich das ganze beispielsweise im "Basisdesign CSS-Design für Profis" des Homepage-Anbieters oder im normalen Windows-Editor eingebe, und hier mir das ganze anschaue, dann funktioniert das ganze nicht.

Noch ein Beispiel:

Ich habe mir das hier: ( siehe Video-Link )

- auf manchen Seiten nachgebaut, nur die Breite des Span-Elements ragt ebenso bei mir über den Container beziehungsweise über das Hintergrundbild hinaus, obwohl auch hier die Angabe 100 Prozent gemacht wurde, und der Herr im Video hat auch die Breite von 100 Prozent angegben und hier scheint es auch funktioniert zu haben.

Ich könnte hier zwar die Breite auf "auto" setzen, das aber nicht Ziel der Sache ist, da sich dann das Span-Element dem Inhalt anpasst, und nicht auf die volle Breite angezeigt wird, und dass wünsche ich mir so eben nicht.

Das macht mich noch Wahnsinnig, da ich nun auf meiner Webseite alle Breite-Angaben "100%" gegebenenfalls jetzt ändern muss, und ich habe dieses schon auf mehreren Seiten so schon erstellt beziehungsweise benutzt .

Ich hoffe jemand kann mir weiter helfen, und würde mich über Antworten sehr freuen.

Liebe Grüße, Patrick