zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS einfliegen per Klasse

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.08.2018, 10:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2018
Beiträge: 1
ITFreak befindet sich auf einem aufstrebenden Ast
Standard CSS einfliegen per Klasse

Hallo zusammen,
ich habe hier ein HTML, welches in für ein persönliches Lernprojekt habe (es handelt sich um einen simulierten Onlineshop).
Hier ist erstmal das HTML:

HTML-Code:
<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://fakeimg.pl/50x50/?text=cart+icon">
      </a>
    </div>
    <div class="body">
      <ul>
              </ul>
      <div class="cart-subtotals">
                  <div class="products">
            <span class="label">Partial sum</span>
            <span class="value">0</span>
          </div>
                  <div class="">
            <span class="label"></span>
            <span class="value"></span>
          </div>
                  <div class="shipping">
            <span class="label">Shipping</span>
            <span class="value">0</span>
          </div>
                  <div class="">
            <span class="label"></span>
            <span class="value"></span>
          </div>
              </div>
      <div class="cart-total">
        <span class="label">Total sum</span>
        <span class="value">0</span>
      </div>
    </div>
  </div>
</div>
Und hier das zugehörige CSS:

Code:
#blockcart-wrapper .cart-preview .header {
  border: none;
}
#blockcart-wrapper .cart-preview .header .cart-icon {
  width: 25px;
  height: 28px;
}
.cart-preview {
  float: right;
  position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
  text-decoration: none;
  color: inherit;
}
.cart-preview .header {
  display: block;
  font-weight: bold;
  border: 1px solid #808080;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
}
.cart-preview .body {
  display: none;
  width: 400px;
  background-color: #fff;
  right: 0;
}
.cart-preview:hover .body {
  display: block;
  position: absolute;
}
.cart-preview.cart-overview {
  width: 100%;
  position: inherit;
}
.cart-preview.cart-overview .body {
  display: block;
  position: inherit;
  width: 100%;
}
.cart-preview .header > :first-child {
  float: left;
}
.cart-preview .header > :last-child {
  float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
  clear: both;
  content: "\A0";
}
.cart-preview .body {
  border: 1px solid #808080;
  padding: 2px;
}
.cart-preview ul {
  margin: 0;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cart-preview li {
  list-style: none;
  margin-bottom: 15px;
}
.cart-preview li > * {
  display: inline-block;
  vertical-align: top;
}
.cart-preview li .product-quantity {
  color: #666;
  width: 10%;
}
.cart-preview .product-quantity::after {
  content: 'x';
}
.cart-preview li .product-name {
  width: 50%;
}
.cart-preview li .product-price {
  width: 20%;
}
.cart-preview li .remove-from-cart {
  text-indent: 100%;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  width: 2em;
  white-space: nowrap;
  float: right;
}
.cart-preview li .remove-from-cart::before {
  content: 'X';
  text-indent: 0px;
  border: 1px solid #ccc;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  padding: 2px;
  text-align: center;
  background-color: #333;
  color: #fff;
  float: left;
}
.cart-preview .cart-totals .label {
  float: left;
}
.cart-preview .cart-totals .value {
  float: right;
}
.cart-preview .cart-totals > div {
  clear: both;
  border-bottom: 1px solid #ccc;
}
.cart-preview .cart-totals > div:not(:last-child) {
  margin-bottom: 5px;
}
.cart-totals .label {
  font-weight: bold;
}
#blockcart-modal {
  position: fixed;
  background-color: rgba(255,255,255,0.1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
}
#blockcart-modal > div {
  padding: 20px;
  display: inline-block;
  min-width: 50%;
  min-height: 400px;
  margin-top: 200px;
  text-align: left;
  background-color: #fff;
  z-index: 100;
  border: 1px solid #ccc;
}
Damit bin ich eigentlich auch ganz zufrieden, nun möchte ich das ganze aber deisgntechnisch verschönern und den div body von rechts nach links an seine Position einfliegen lassen und dabei stehe ich voll auf dem Schlauch.
Kann mir jemand helfen, eine eigene CSS-Klasse für dieses Problem zu erstellen? Ich weiß dass es mit Transitions geht, aber wenn ich im Selektor .cart-preview:hover .body transition: 2s; hinzufüge, sieht es genauso aus wie vorher.
Daher würde ich gerne eine eigene Klasse machen, die man dann später auch mal per JavaScript hinzufügen und entfernen kann.

Vielen Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.08.2018, 11:28
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 86
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Zunächst mal eine Anmerkung... du solltest (darfst) keine Doppelpost machen
https://www.html-seminar.de/forum/th...1731#post51731
Sobald ein Admin/Moderator das sieht, wird in der Regel der Post gesperrt - das gilt für alle Foren, also bitte nur in einem Forum posten.

Als Zweite Anmerkung ... du nutzt als Klassennamen sowas wie 'body' und 'header'! Das ist unglücklich - Klassennamen sollten nicht wie HTML Elemente bezeichnet werden. Das führt sonst zu Verwirrung und möglicherweise auch zu Fehlern.

Zu deiner Frage:
Du definierst in deinem CSS für .body 'display: none; und für den Hover - Effekt 'display: block;'. Damit wirst du kein 'einfliegen' erreichen - nur ein 'An / Aus'.
Hier kannst du nur mit 'margin-right: -400px; und 'margin-right: 0px;' beim hover das gewünschte erzielen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.08.2018, 18:32
Benutzer
neuer user
 
Registriert seit: 17.06.2009
Beiträge: 43
sturmi2 befindet sich auf einem aufstrebenden Ast
Standard

Sollte sowas nicht auch mit einfach CSS Transitions zu lösen sein?
__________________
TYPO3 Freelancer
Pipettenservice
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Klasse nutzt andere CSS Klasse web4free CSS 5 14.03.2011 10:46
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
generierte Elemente per CSS vom Druck ausblenden uspri Javascript & Ajax 19 15.05.2009 15:54
CSS Klasse an anderer Stelle erweitern Pari CSS 5 06.03.2009 09:33
"Fusszeile" per CSS? derSESO CSS 3 02.02.2005 01:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:13 Uhr.