Verwandte Themen

ghkshweu123
07.11.2019, 19:31
CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

HTML, IT, Webseite, CSS, Informatik
2 Antworten
Rolajamo
29.10.2019, 14:53
CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

<div class="intro">
</div>

<a class="testbutton" href="#">GO</a>

XXXXXXXX_____CSS_____XXXXXXXX

body{
 margin: 0;
 padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0%  {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0%  {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}
HTML, Webseite, CSS, JavaScript, Code, JQuery
3 Antworten
StefHi
04.10.2019, 11:01
Mit Links
HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

<div class="iframe-container">

 <iframe width="560" height="315" src="https://www.youtube.com/embed/b8UY9_h8Cm0"frameborder="0" class="embed-responsive-item"></iframe>

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

Computer, Technik, HTML, CSS, HTML5, iframe
2 Antworten
Ninalen
09.09.2019, 11:51
Mit Links
CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

<head><title> Test :)</title>

<script type="text/javascript>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script>

jQuery('#hoverdiv').hoverdiv( 

  function() {$('#Kindelement').show();},

  function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

  background-color: red;

  z-index: 1;

}

.Kindelement

{

  position: absolute;

  top:0;

  background-color: blue;

  -moz-transition: all 0.5s ease 0s;

  -webkit-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

  opacity: 0;

  z-index: 2;

   

}

.hoverdiv

{

  position: relative;

}

.hoverdiv:hover + .Kindelement

{

  opacity: 1;

}​

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey; 

color: white; 

border-radius: 50px !important; 

font-family: &quot;Helvetica Neue&quot;, 

Arial, sans-serif !important; 

float: none !important;" ;>

<a>+</a>

<div id="Kindelement" 

style="color: white; 

background: grey; 

position: absolute;

top: 770px !important; 

 opacity: 0;">

<a href="link" style="color: white; background: grey">Name</a>

</div>

 </div>

 

 

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

Computer, HTML, programmieren, CSS, JavaScript
3 Antworten

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS