Benutzerdefinierter Feld-Typ: Abbildung positionieren horizontal und nicht vertikal

dydu · 2. Mai 2013

Hallo Zusammen

Nach einigem Aufwand habe ich nun meine Benutzerdefinierter Feld-Typ: Abbildung hinbekommen
(aller anfang ist schwehr:-)

nun möchte ich gerne diese optionsfelder nebeneinander, also horizontal platzieren
ich habe nun um das überschreiben meines CSS zu verhindern in dem ich im Shop das org CSS deaktiviert, so dass nun nur noch meine CSS aktiv sind

Code

/* in Datei default_addcart.php
ACHTUNG Virtuemart CSS deaktivieren in der shop konfig Ansonsten kann es sein dass die CSS überschrieben werden*/
div.addtocart-area{
/* zum ausrichten ob die Optionsgruppe links oder rechts oder Unterhalb des Pruduktebildes Angezeigt wird */
clear: both; /* clear löschen od ev, float einsetzten Width anpassen */
overflow: hidden;
padding:5px;
width: 100%;
/* height: 250px; nicht nötig geht aber */
border:5px solid red;/*--kontrolle*/
}
div.product-fields{
padding:5px;
border:5px solid black;/*--kontrolle*/
}
div.product-field {
padding:5px;
border:5px solid blue;/*--kontrolle*/
}
span.product-fields-title-wrapper{
/* Die Titelformatierung ist im H3 template.css */
display: block; /* über gesammte Breite stellen width geht nicht*/
padding-top:15px;
padding-bottom:15px;
border:5px solid green;/*--kontrolle*/
}
span.product-field-desc{
display: block; /* über gesammte Breite stellen width geht nicht*/
border: 5px solid Teal;/*--kontrolle*/
}
.product-field-display{
position:relative;
display: block;
height: 250px;
width: 100%;
text-align: left;
border:5px solid aqua;/*--kontrolle*/
}
label.other-customfield {
display: inline;
margin: 0px;
padding: 0px;
width:150px; /* -----------------------------------------------funzt nicht */
padding-top:30px;
text-align:center;
border: 5px solid Lime;/*--kontrolle*/
}
.product-fields .product-field input[type=radio] {
margin: 0px;
padding: 0px;
width: 40px;
}
.product-fields .product-field .vm-img-desc {
font-size:9px;
border: 5px solid Maroon;/*--kontrolle*/
}

Alles anzeigen

ich habe das ganze nun horizontal hinbekommen
möchte aber den Text, den Preis und auch den Radiobutton unter meinem Bild haben

vielen dank für eure hilfe dydu

dydu · 3. Mai 2013

Hallo zusammen

ich habe eine lösung gefunden:-) sie ist noch nicht ganz perfeckt. Gut Ding will weile haben

Es kann nun genutzt werden zusammen mit dem Standart CSS des Virtuemart, also das CSS muss nicht deaktiviert werden

Code

/* -------------------------------------------------------------------------------optionen waggerech oder senkrecht anordnen
diese CSS sind in Datei default_addcart.php bereits vorhanden
ACHTUNG Virtuemart CSS e.v zum Testen CSS im Shop deaktivieren */
div.addtocart-area{
/* ----------------------------------------------------------------------------------------------------------Ausrichten Wagrech oder senkrecht clear löschen float einsetzten und width anpassen*/
clear: both;
overflow: hidden;
padding:5px;
width: 100%;
/* height: 250px; nicht nötig geht aber */
border:5px solid red;/*--kontrolle*/
}
div.product-fields{
padding:5px;
border:5px solid black;/*--kontrolle*/
}
div.product-field {
padding:5px;
border:5px solid blue;/*--kontrolle*/
}
span.product-fields-title-wrapper{
/* Die Titelformatierung ist im H3 template.css */
display: block; /* über gesammte Breite stellen width geht nicht*/
padding-top:15px;
padding-bottom:15px;
border:5px solid green;/*--kontrolle*/
}
span.product-field-desc{
display: block; /* über gesammte Breite stellen width geht nicht*/
border: 5px solid Teal;/*--kontrolle*/
}
.product-field-display{
position:relative;
display: block;
height: 200px;
width: 100%;
text-align: left;
border:5px solid aqua;/*--kontrolle*/
}
.product-fields .product-field label.other-customfield {
width: 110px;
float: left;
position: relative;
top: 20px;
left: -18px;
margin-bottom: 27px;
text-align: center;
border: 5px solid Lime;/*--kontrolle*/
}
.product-fields .product-field input[type=radio] {
float: left;
margin: 0px;
padding: 0px;
width: 40px; /* ACHTUNG wenn keine breite dann zeigt der IE den radiobutton nicht an */
}
.product-fields .product-field .vm-img-desc {
font-size:9px;
width: 100%;
border: 5px solid Maroon;/*--kontrolle*/
}

Alles anzeigen