Zwei kleine Korrekturen an dem Script

basti1012 · 13. Februar 2018

Ich habe mal versucht das Script umzubauen in mein allseits gehassten FLEX BOXEN . Bis jetzt . Wer liest, lernt dazu, auch ich .

https://basti1012.bplaced.net/…rdner=html-seminar&id=304

Das Grundprinzip habe ich so weit verstanden.

Es gibt zwar noch Kleinigkeiten, die ich noch rausfinden muss, aber sonst so weit ok.

Und ich habe mich immer dafür gedrückt ,dieses Flexbox Thema zu erlernen.

Aber kann mir mal einer von euch Profis sagen, was ich daran noch verändern muss ?

Also so wie es ist, soll es bleiben. Außer das "links2" sich verschieben soll, wenn die Box zu voll ist ,aber ohne Javascript sehe ich da schwarz.

Es geht um den Rest . Ist das so weit ok oder muss ich da noch was ändern ,FLEX BOX mäßig ?

basti1012 · 14. Februar 2018

Habe bis jetzt 6.15 Uhr ( ich bin auch blöde ) mich mit den Thema Flexboxen beschäftigt und versucht rauszufinden ob mein Problem hier gelöst werden kann? Wenn ich richtig gelernt habe wird es ohne Javascript wohl nicht klappen ?

Wenn einer nee Idee hat bitte sofort sagen ?

Habe auch anderweitig gegoogelt ,ob es andere möglich keiten ausser Flex boxenb das problem beheben können. Ich habe leider nix gefunden.

Ich weiß aber auch nicht nach was ich suchen muß?

Hat dieses vorhaben von mir einen bestimmten Namen wo nach man suchen muß?

Edit do sieht es jetzt aus. http://sebastian1012.bplaced.n…_Scripte/ebayverkauf.html

djheke · 14. Februar 2018

Ja, es geht mit CSS. Werde aber keine Antwort darauf geben, Denn der Fragesteller soll sich mal so langsam alleine Gedanken machen.

Gruß Henry

basti1012 · 14. Februar 2018

Zitat von djheke

Ja, es geht mit CSS. Werde aber keine Antwort darauf geben, Denn der Fragesteller soll sich mal so langsam alleine Gedanken machen.

Gruß Henry

Kannst sumir mal ein Tipp geben wonach ich suchen muß ? ich habe gestern schon den ganzen Tag danach gesucht ,finde aber nichts vergleicbares. Wenn ich zumindest ein Zauberwort hätte wonach man suchen muß.

Ich bin einer ich gebe nicht auf bis ich nee Lösung habe .Wahrscheinlich suche ich nächste Woche noch . Die Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das er max höhe erreicht hat sich dann auf das doppelte aus dehnt.

Ich glaube nicht das der TO das selber rausfindet. Ich schaffes bis jetzt ja auch nicht

Sempervivum · 14. Februar 2018

Zitat

Die Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das

...

Ich schaffes bis jetzt ja auch nicht

Ich glaube, das würde ich auch nicht schaffen und ich bezweifle, dass es möglich ist.

djheke · 15. Februar 2018

Zitat von basti1012

Die Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das er max höhe erreicht hat sich dann auf das doppelte aus dehnt.

Sorry, dass habe ich nicht gelesen. Habe aber mal mit floats gespielt. Ist nicht optimal, aber es geht so.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>


* {
margin:0;
padding:0;
box-sizing:border-box;
}


#gal {
float: right;
height: auto;
overflow: hidden;
width:100%;
border:5px solid gray;
}


#border {
width:50%;
float:right;
border:10px solid #fff;
border-top:none;
border-right:0;
margin-left:10px;
}


#gal #ausgabe {
width: 500%;
float: left;
position: relative;
left: 0px;
-webkit-transition: 1s;
transition: 1s;
}


#gal a {
position: relative;
float: left;
width: 20%;
}


#gal img {
float: left;
width: 100%;
}


#ausgabe img {
width: 20%;
float: left;
}


#gal a img {
padding: 0 0 1px 1px;
}


#gal a:focus:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 1px;
bottom: 1px;
background: rgba(255, 255, 255, .3);
}




#gal a + a:focus ~ #ausgabe {
left: -100%;
}


#gal a + a + a:focus ~ #ausgabe {
left: -200%;
}


#gal a + a + a + a:focus ~ #ausgabe {
left: -300%
}


#gal a + a + a + a +a:focus ~ #ausgabe {
left: -400%
}


.container {
margin:20px;
}


article {
float:left;
}


h3, p {
margin-top:10px;
}
.lu {
margin-top:10px;
padding:10px;
background:#ddd;
}


.lu + p {
background:#ddd;
margin-top:0px;
padding:10px;
}


.color {
background:#ddd;
padding:10px;
}


</style>
</head>
<body>
<section class="container">


<h1>Artikelname</h1>
<article>


<div id="border">
<div id="gal">
<a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1"> </a>
<a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2"> </a>
<a tabindex="0" href="#a3"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3"> </a>
<a tabindex="0" href="#a4"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4"> </a>
<a tabindex="0" href="#a5"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5"> </a>


<div id="ausgabe">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4">
<img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5">
</div>
</div>
</div>
<div class="color">
<h3>Happy Birthday - Schriftzug aus Folienballons 40 cm</h3>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<h3>Technische Daten:</h3>
<p>
13 Teiliges Set Größe: ca. 40 cm (pro Ballon) Farbe: siehe Bild mehrere Haltevorrichtungen an jedem Buchstaben Material: Folie Integriertes Automatikschließventil (nur Aufblasen - kein Knoten notwendig) Wiederverwendbar durch leichtes Ablassen der Luft ( mit einem Strohhalm) Anlass: Hochzeit, Geburtstag, Party, Silvester, Geschenk, uvm.  Befüllbar nur mit Luft (die Ballons fliegen nicht mit Helium)
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
<p>
Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?
</p>
</div>


<h3 class="lu">Lieferumfang</h3>
<p>
je nach Auswahl: 1x 13 teiliges Happy Birthday-Folienballon Set
Das Auffüllen ist ganz einfach:
Suchen Sie die silber-glänzende Stelle vom Ballon. Durchstechen Sie diese mit einem Strohalm oder einem Auffüllaufsatz  Füllen Sie den Ballon auf und ziehen den Aufsatz heraus und der Verschluss verschließt sich wieder automatisch. ACHTUNG: nicht für Kinder unter 3 Jahren geeignet!
</p>
</article>


</section>
</body>
</html>

Alles anzeigen

basti1012 · 15. Februar 2018

Das sieht doch super aus,damit kann ich arbeiten.( Nicht ganz was ich brauche aber genau so gut ).

Auf die Idee mit float bin ich auch schon gekommen ,aber hatte es nicht hin bekommen. Aber danke dir ,werde das später mit in den Script einbauen und dann mal sehen wie es kommplett aussieht.

Danke djheke

Eigentlich müßte der TO sich auch bedanken,ist ja mehr oder wenniger für ihn.

Obwohl ich mit dieser Funktion noch andere schöne eigene ideen habe.

EDIT : gibt es nee möglichkeit ,wenn ein container voll ist ( zb max-height ) erreicht hat das er dann an einer anderen stelle springt ? so wie @media qeries ,anstatt den screen max-height brauch ich ein @container max-height . ist sowas möglich ohne Javascript

basti1012 · 16. Februar 2018

So dein Script ist Fertig ( Vorerst,werde es noch versuchen zu verbessern ).Eigentlich ist es ja ehr ne html Seite als wie ein Script.

Farben border,und Bilder wirst du ja in Zukunft selber hin bekommen.Habe das alte Script jetzt kommplett neu gemacht ,weil das alte mitlerweile zu voll gemüllt wahr durch die ganzen änderungen.

Das ist wohl auch nicht Perfekt ,aber sollte alle zukünftigen änderungen erleichtern.

Wenn deine Box neben der Galerie zu voll ist läuft sie jetzt unter der Galerie her ,wie gewünsch von dir .

Besser geht es nicht ,weil einen ganzen Boxensprung gibt es nur bei @mediqueries und ist ohne Javascript wohl nicht möglich( zumindes noch nix gefunden )

http://sebastian1012.bplaced.n…_Scripte/ebayverkauf.html

Edit: Wenn die ganze Box unter der Galerie verschwinden soll ,must du die erste Box voll schreiben ,oder ihr ne feste grösse geben

Zwei kleine Korrekturen an dem Script

Jetzt mitmachen!

Teilen

Tags