Beiträge von vic951

vic951 · 11. Januar 2019

Ja genau das habe ich schon verstanden das es nur so aussieht.

Wenn ich mal Zeit habe versuche ich mich da mal rein zu lesen, vielleicht schaffe ich es ja hier eine funktionierende Lösung zu präsentieren.

vic951 · 10. Januar 2019

Hallo liebe Mitglieder,

ich plane in nächster Zeit für mich selbst ein paar Templates zu schreiben und da bin ich auf einer Seite auf etwas gestoßen was mir sehr gefallen hat.

Die Seite um die es sich handelt ist folgende https://www.glas-goetz.de/home und es geht um die Bilder unter UNSER PRODUKTPORTFOLIO.

Hier wird die Maus praktisch verfolgt von den Überblendungen in den Bildern bzw. die Überblendung beginnt da wo ich mit der Maus ins Bild fahre.

schafft man sowas rein mit HTML und CSS oder wurde der Effekt mit Javascript geschrieben?

Und wie ist der Ansatz, mir fällt nämlich nicht ein wie ich die Seite eines Bildes abfragen kann über die die Maus fährt?

vic951 · 10. Januar 2019

ich mache viel mit Bildbearbeitung und lasse hier noch einen kleinen Tipp.

Ich verwende Photoshop zum bearbeiten meiner Bilder habe auch kostenlose Alternativen versucht. Was mir aufgefallen ist ist das so Software wie Photoscape etc. die JPGs stark komprimiert, Photoshop hingegen nicht.

Also verwende ich PNG wenn es die Dateigröße hergibt ansonsten mit Photoshop abspeichern damit nicht /nur gering komprimiert wird.

vic951 · 10. Dezember 2018

ok habe jetzt aus

Code

width: 700px;

einfach

Code

max-width:700px;

gemacht und es klappt perfekt. Denn wenn man auf

Code

width:auto;

stellt wird es viel zu breit da der Container in dem es sich befindet 80% der Breite des Bildschirms nimmst.

vic951 · 10. Dezember 2018

Wow ok das sieht um einiges besser aus als meins

hier mal mein Code vielleicht nimmt sich jemand anderes etwas sinnvolles daraus

CSS:

Code

.chronikcontainer{
width: 80%;
margin: auto;
display: flex;
flex-direction: row;
}
.chronikbild{
margin: 20px;
}
.chronikbild img{
width: 100px;
}
.chronikcontainerrechts{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.chronikroterbalken{
display: flex;
flex-direction: column;
margin-top: 80px;
height: 5px;
float: right;
background-color: #F00;
}
.chronikcontainerinhalt{
display: flex;
flex-direction: row;
}
.chronikjahreszahl{
color: #F00;
line-height: 60px;
font-size: 2.5em;
margin: 10px 40px auto 40px;
}
.chroniktext{
color: #000;
margin: 10px;
}

Alles anzeigen

und dann in der HTML:

Code

<div class="chronikcontainer">
<div class="chronikbild"><img src="./images/10101.jpg"></div>
<div class="chronikcontainerrechts">
<div class="chronikroterbalken"></div>
<div class="chronikcontainerinhalt">
<div class="chronikjahreszahl">1980</div>
<div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
</div>
</div>
</div>
<div class="chronikcontainer">
<div class="chronikcontainerrechts">
<div class="chronikroterbalken"></div>
<div class="chronikcontainerinhalt">
<div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
<div class="chronikjahreszahl">1980</div>
</div>
</div>
<div class="chronikbild"><img src="./images/10101.jpg"></div>
</div>

Alles anzeigen

Aber ich werde diesen Code über Board werfen da mit der von Arne Drews besser gefällt.

Ich habe noch eine Frage Arne (ich weiß nicht wie man hier Namen verlinkt) , wie könnte man das in eine sinnvolle Smartphoneansicht gestalten?

vic951 · 7. Dezember 2018

Habe jetzt leider keine Zeit mehr, aber mein Ansatz sieht gut aus ich glaube es funktioniert ich poste dann den Code, wenn ich fertig bin.

vic951 · 7. Dezember 2018

ist doch viel komplizierter für mich als ich dachte, ich habe die Struktur jetzt nochmal anhand dieser Grafik geändert

temp24.jpg

jetzt sieht die Struktur so aus

Code

<div class="chronikcontainer">
<div class="chronikbild"><img src="images/background/main.jpg"></div>
<div class="chronikcontainerrechts">
<div class="chronikroterbalken">
<div class="chronikcontainerinhalt">
<div class="chronikjahreszahl">1980</div>
<div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
</div>
</div>
</div>

Versuche mir jetzt das CSS dazu zu basteln aber die Anordnungen ändern sich nicht.

ich muss doch im Container

Code

.chronikcontainer{
display: flex;
flex-direction: row;
}
.chronikcontainerrechts{
display: flex;
flex-direction: column;
}

angeben damit die divs "chronikbild" und "chronikcontainerrechts" von links nach rechts angeordnet werden.

und dann in CSS in der Klasse "chronikcontainerrechts" von oben nach unten.

oder?

vic951 · 7. Dezember 2018

wäre die Aufteilung so ungefähr richtig?

Code

<div class="chronik">
<div class="chroniklinks">
<div class="chronikbild"><img src="images/background/main.jpg"></div>
<div class="chronikroterbalken"></div>
<div class="chronikjahr">1989</div>
<div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
</div>
<div class="chronikrechts">
<div class="chronikbild"><img src="images/background/main.jpg"></div>
<div class="chronikroterbalken"></div>
<div class="chronikjahr">1989</div>
<div class="chroniktext">Hier kommt dann halt der Text der links unter dem roten Balken steht</div>
</div>
</div>

Alles anzeigen

vic951 · 7. Dezember 2018

Hallo liebes Forum,

ich habe folgende Idee schaffe es aber nicht sie zu realisieren, ich möchte folgende Darstellung in HTML/CSS schreiben

[Blockierte Grafik: https://s15.directupload.net/images/181207/wpo6iqgb.png]

Ich hätte es für jedes Jahr in zwei Boxen aufgeteilt, ich habe es mit Bootstrap Grid probiert da auf dieses auf meiner Template Seite sowieso verwendet wird nur will es nicht funktionieren vorallem auch mit dem roten Strich.

so in die Richtung dachte ich mir aber wie sieht das CSS dazu aus und habe ich das Bootstrap richtig verwendet weil die Anordnung dann auch nicht stimmt.

Code

<section class="col-md-3">
<img src="images/background/main.jpg" width="5%">
</section>
<section class="col-md3">
<h2>1980</h2>
<p>sdfsgsdfgdf dfgdg dfgfgdger dfgdfg sdfgdfgad we werwerhlsdfg sddfgdfg sdfgghruighrei gdfg erwtuierfg reuirgdfg</p>
</section>

vic951 · 13. Juli 2018

Alles klar super danke ich Speicher es mal ab

vic951 · 13. Juli 2018

Ok wie spreche ich es denn direkter an, damit ich !important verhindern kann?

vic951 · 13. Juli 2018

oh mein Gott es war so einfach vielen dank ich habe so lange rum probiert.

Fals noch jemand dieses Problem hat, ich habe es dann mit folgender Zeile gelöst:

Code

#menu li ul li{ float: right !important;}

ja mit flex habe ich schon etwas gearbeitet nur steige ich da noch nicht durch bzw. bin ich so schneller zum Ziel gekommen werde es aber nach dem diese Seite fertig ist angreifen.

vic951 · 13. Juli 2018

Hallo Leute,

ich schaffe es einfach nicht meine Untermenü-Punkte (.drpdwn-content) nach rechts zu bringen. Habe es sowohl mit text-align als auch float versucht jedoch bewegen sich die Unterpunkte keinen Millimeter.

Was mache ich falsch oder habe ich das Untermenü falsch aufgebaut?

meine html-datei

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<title>Alexej Kosilov</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./dist/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
<div class="wrapperh100">
<header>
<a href="./index.html" id="logo"></a>
<ul id="menu">
<li><a href="#">Radio</a></li>
<li><a href="#">1und1</a></li>
<li><a href="#">Kontakt</a></li>
<li class="drpdwn"><a href="#">Links</a>
<ul class="drpdwn-content">
<li><a href="#">Login FB</a></li>
<li><a href="https://kosilov.de">Homepage</a></li>
<li><a href="https://google.de">Google</a></li>
</ul>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./dist/jquery.slicknav.js"></script>
<script type="text/javascript">$(document).ready(function(){$('#menu').slicknav();});</script>
</header>
</div>
</body>
</html>

Alles anzeigen

Und meine css Datei

Code

body {
font-family: 'Muli', sans-serif;
margin:0;
padding:0;
font-size:100%;
}
.slicknav_menu {
display:none; /* Smartphoneansicht ausblenden */
}
.wrapperh100{
width: 100vw; /* Volle Breite des Bildschirms, bedeutet keine Scrollbalken */
height: 100vh; /* Volle Höhe des Bildschirms, bedeutet keine Scrollbalken */
}
header{
background-color: #FDFDFD;
width: 100vw;
height: 100px;
}
#logo{
background-image: url(../img/AllnetzLogo2.png); /*Link zu deinem Logo */
background-size: cover; /* Bild soll über das ganze Element gestreckt werden */
height: 60px; /* Die Höhe des Logos */
width: 175px; /* Die Breite des Logos */
float: left; /* Richtet das Bild auf der linken Seite aus */
margin-left: 5vw; /* Der Abstand zum linken Bildschirmrand beträgt 5% der Bildschirmbreite */
margin-top: 20px; /* Der Abstand zum oberen Bildschirmrand beträgt 20 Pixel */
}
#menu{
float: right; /* Richtet das Menü auf die rechte Seite aus */
list-style: none; /* Entfernt die Auflistungszeichen der Links im Menü */
margin-right: 5vw; /* Der Abstand vom rechten Bildschirmrand zum Menü sind 5% der Bildschirmbreite */
margin-top: 35px; /* Der Abstand zum oberen Bildschirmrand beträgt 20 Pixel */
}
#menu li{
float: left; /* Richtet die Elemente im Menü nach links aus */
padding-right: 3vw; /* Der Innenabstand nach rechts beträgt 3% des Bildschirms */
}
#menu li a{
text-decoration: none; /* Entfernt das Unterstreichen der Links im Menü */
color: #0071bc; /* Die Farbe der Links im Menü */
font-size: 1.5em; /* Schriftgröße des Menüs */
transition-duration: 0.4s;
}
#menu li a:hover{
color: #999;
}
.drpdwn-content {
display: none; /* Unterpunkte ausblenden */
position: absolute; /* Damit kann man Elemente einfach postionieren wo man will */
background-color: rgba(200,200,200,0.5); /* Farbe des Untermenüs */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Schatten des Untermenüs */
z-index: 1000; /* Damit das Untermenü immer über all den anderen Elementen ist */
list-style: none; /* Damit keine Auflistungszeichen gezeigt werden */
margin-left: -15vw; /* Damit das Untermenü 15% der Bildschirmbreite nach links verschoben wird */
margin-right: 0; /* Damit das Untermenü rechts bündig ist */}
#menu li ul a{ text-decoration: none !important;}
#menu li ul li:first-child{margin-top: 30px;}
#menu li ul li:last-child{margin-bottom: 30px;}
.drpdwn:hover .drpdwn-content{ display: block; }
/*--------------------------------------------------------------------------------------*/
/* Alles was hier steht wird geändert wenn die Seite auf dem Smartphone angeschaut wird */
@media screen and (max-width: 40em) {
.js #menu { display:none; /* Deaktiviert PC-Ansicht */}
header{ display: none; /* Deaktiviert PC-Ansicht */}
.js .slicknav_menu { display:block; /* Aktiviert Smartphonemenü */}
}

Alles anzeigen

vic951 · 29. Juni 2018

Die Page ist noch lange nicht Online, aber ich habe kurz darüber nachgedacht und eine Lösung gefunden.

Mein Problem war das Bilder in einem Div das Div nicht immer ausgefüllt haben, es läuft in diesem Div eine Javascript Slideshow. Und folgedenermaßen sieht mein funktionierender Code aus:

Code

<script>
resizepicture();
function resizepicture() {
var i;
var verhaeltnisdiv;
var verhaeltnispic;
var pics = document.getElementsByClassName("picheight");
var divs = document.getElementsByClassName("box");
verhaeltnisdiv = divs[1].offsetWidth/divs[1].offsetHeight;
for (i = 0; i < pics.length; i++){
verhaeltnispic = pics[i].offsetWidth/pics[i].offsetHeight;
if(verhaeltnispic<verhaeltnisdiv){
pics[i].style.width = "100%";
pics[i].style.height = "auto";
} else {
pics[i].style.height = "100%";
pics[i].style.width = "auto";
}
}
}
</script>

Alles anzeigen

vic951 · 29. Juni 2018

Also ich habe leider immer noch keine Lösung gefunden. Sollte sich da was ändern werde ich sie natürlich preisgeben.

vic951 · 28. Juni 2018

Um mein Vorhaben zu verstehen muss man sich vorstellen das es mir darum geht den Browser zu verschieben und das Bild füllt ein div IMMER aus.

Code

<div class="line">
<div class="box">
<div class="slideshow-container">
<div class="fade">
<img class="picheight" src="./img/private.jpg">
</div>
<div class="fade">
<img class="picheight" src="./img/image1.jpg">
</div>
<div class="fade">
<img class="picheight" src="./img/image2.jpg">
</div>
</div>
</div>
<div class="box">
<p>Profitieren Sie von unseren jahrelangen Erfahrungen mit Servern, Netzwerken und Telefonanlagen, indem Sie sich auf die <b>wesentlichen Dinge</b> konzentrieren, während unsere EDV sich um den Rest kümmert.</p>
<a href="./html/business.html#wrapper"><button><b>Leistungen Firmenkunde</b></button></a>
</div>
</div>

Alles anzeigen

Das hier sind zwei von insgesamt vier boxen, diese sind IMMER über den ganzen Bildschirm gespannt. Wenn ich bei der Klasse Box ein Hintergrundbild hinzufüge erziehle ich genau den Effekt den ich haben will. Nur habe ich eine Slideshow in jeweils eine Box gebaut also kann ich im CSS das Hintergrundbild nicht mehr angeben.

vic951 · 27. Juni 2018

Danke für die Antworten,

ich war nur mit JavaScript schon so weit und es funktioniert jetzt sogar bis auf eine große Kleinigkeit die ich nicht lösen kann

Unten stehend erst mal der aktuelle funktionierende Code:

Code

<script>
resizepicture();
function resizepicture() {
var i;
var pics = document.getElementsByClassName("picheight");
var divs = document.getElementsByClassName("box");
for (i = 0; i < pics.length; i++){
if(pics[i].offsetHeight<divs[1].offsetHeight){
if(pics[i].offsetWidth>divs[1].offsetWidth){
pics[i].style.height = "100%";
pics[i].style.width = "auto";
} else {
pics[i].style.height = "auto";
pics[i].style.width = "100%";
}
} else {
pics[i].style.height = "auto";
pics[i].style.width = "100%";
}
}
}
</script>

Alles anzeigen

ABER das ist die Bildhöhe der Datei, d.h. verschiebe ich das Fenster und aktualisiere funktioniert das leider wieder nicht weil nicht die AKTUELLE Bildhöhe ausgelesen wird.

Ich bin gerade im Internet am Suchen, vielleicht kennt jemand von euch eine Lösung um die aktuelle Bildhöhe auszulesen die dynamisch vom Browser zugeteilt worden ist.

vic951 · 27. Juni 2018

Nein ich nutze keinen z-index, es spricht aber nichts dagegen dem div noch eine class zu geben um zu zu identifizieren. Ist meiner Meinung nach nur nicht so schön

dachte es gebe da vielleicht was damit ich den code in eine Zeile bekomme.

Ich probiere das mal aus, danke aber schon mal für die Gedankenstütze!

Dürfte ich mal eben doch noch eine Frage stellen, ich habe folgenden Code, sobald ich aber die for-Schleife aktiviere geht kein alert mehr.

Code

<script>
resizepicture();
function resizepicture() {
var i;
var pics = document.getElementsByClassName("fade");
var divs = document.getElementsByClassName("slideshow-container");
alert("Ich bin vor der Schleife");
//for (i = 0; i < pics.length; i++){
//alert("Bin in der Schleife");
//if (1<2) {
//alert("Bin kleine als Höhe");
//pics[i].style.height = "100%";
//pics[i].style.width = "auto";
//} else {
//alert("Bin größer als Höhe");
//pics.[i].style.height = "auto";
//pics.[i].style.width = "50%";
//}
//}
}
</script>

Alles anzeigen

Ich hoffe ich habe es geschafft mich richtig auszudrücken, wenn ich die kommentierten Zeilen aktiviere dann geht nicht mal mehr der alert vor der Schleife.

vic951 · 27. Juni 2018

Hallo liebe Freunde,

ich hänge an einer Kleinigkeit und kann diese leider nicht lösen, vielleicht könnt ihr mir helfen.

Ist es möglich in Javascript das überliegende DIV auszulesen?

Ich möchte nämlich Bilder anpassen nach ungefährer folgender Formel:

width=100%

if (picture.height < darüberliegendes_div.height) { picture.height = 100%; picture.width = auto; }

kann meine Lösung so funktionieren oder ist das gar nicht möglich in Javascript?

vic951 · 18. April 2018

Oh ja spitze das war korrekt.

was bedeutet flex: 3 oder 7?

ich finde nur:

Code

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Beiträge von vic951

Animationsfrage Mausverfolgung in Bildern

Animationsfrage Mausverfolgung in Bildern

Bilder optimieren für Webseiten

Chronologische Darstellung realisieren

Chronologische Darstellung realisieren

Chronologische Darstellung realisieren

Chronologische Darstellung realisieren

Chronologische Darstellung realisieren

Chronologische Darstellung realisieren

Navigation Untermenü will nicht nach rechts

Navigation Untermenü will nicht nach rechts

Navigation Untermenü will nicht nach rechts

Navigation Untermenü will nicht nach rechts

Überliegendes DIV ermitteln

Überliegendes DIV ermitteln

Überliegendes DIV ermitteln

Überliegendes DIV ermitteln

Überliegendes DIV ermitteln

Überliegendes DIV ermitteln

div in zwei Teile mit Bild