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.
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.
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?
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.
Wow ok das sieht um einiges besser aus als meins
hier mal mein Code vielleicht nimmt sich jemand anderes etwas sinnvolles daraus
CSS:
.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:
<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?
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.
ist doch viel komplizierter für mich als ich dachte, ich habe die Struktur jetzt nochmal anhand dieser Grafik geändert
html-seminar.de/woltlab/attachment/1740/
jetzt sieht die Struktur so aus
<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
.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?
wäre die Aufteilung so ungefähr richtig?
<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
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.
Alles klar super danke ich Speicher es mal ab
Ok wie spreche ich es denn direkter an, damit ich !important verhindern kann?
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:
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.
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
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> <!-- deine Schriftart wird von Google bereitgestellt -->
<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
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
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:
<!--START Bildanpassung -->
<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>
<!--ENDE Bildanpassung -->
Alles anzeigen
Also ich habe leider immer noch keine Lösung gefunden. Sollte sich da was ändern werde ich sie natürlich preisgeben.
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.
<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.
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:
<!--START Bildanpassung -->
<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>
<!--ENDE Bildanpassung -->
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.
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.
<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.
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?
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.