Probleme mit einfacher Umpositionierung

mcdutch · #1 (**permalink**) 06.04.2014, 22:49

Ich habe eine Aufgabe, die eigentlich sehr einfach klingt. Aber irgendwie hänge ich total fest und brauche einen Rat.

Im Anhang sind 2 Bilder. Bild 1 zeigt, wie "Bezahlmethoden" derzeit aussehen. Bild 2 zeigt, wie sie aussehen sollen.

Im Grunde genommen sind es 4 Änderungen:

1. Statt einer Reihe, sollen die Bezahlmethoden in 2 Reihen dargestellt werden.

2. Unter den Bezahlmethoden soll ein Bild eingefügt werden.

3. Neben dem Bild soll auch noch ein Info-Bild eingefügt werden.

4. Bei einem Hover auf das "i" (info-Bild) soll ein kleiner Text mit Bezahlinformationen erscheinen.

Nun stehe ich aber gleich vor ganz vielen Problemen. Es handelt sich um einen Webshop und da ist alles in tpl-Files untergebracht.

So sieht meine Datei aus:

PHP-Code:


			
[{capture append="oxidBlock_content"}]

    [{* ordering steps *}]
    <div class="checkoutBG">
    [{include file="page/checkout/inc/steps.tpl" active=3 }]

    [{block name="checkout_payment_main"}]
        [{assign var="currency" value=$oView->getActCurrency() }]
        [{block name="change_shipping"}]
            [{ if $oView->getAllSets() }]
                [{assign var="aErrors" value=$oView->getFieldValidationErrors()}]
                <form action="[{ $oViewConf->getSslSelfLink() }]" name="shipping" id="shipping" method="post">
                    <div>
                        [{ $oViewConf->getHiddenSid() }]
                        [{ $oViewConf->getNavFormParams() }]
                        <input type="hidden" name="cl" value="[{ $oViewConf->getActiveClassName() }]">
                        <input type="hidden" name="fnc" value="changeshipping">
                    </div>
                    [{*<h3 id="deliveryHeader" class="blockHead">[{ if $oView->getAllSetsCnt() > 1 }][{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_SELECTSHIPPING" }][{else}][{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_SELECTEDSHIPPING" }][{/if}]</h3>*}]
                    [{*added*}]
                    <div><div class="orderlightBG">
                    <p>[{oxmultilang ident="hi_choose_shipping"}]</p>
            
                    [{*oxmultilang ident="hi_shipping_with_insurance"*}]
                    [{*/added*}]
                    [{*<ul>
                        <li>*}]
                            
                            [{block name="act_shipping"}]
                                <select [{*added*}]class="hiPaymentSelection" size="2"[{*/added*}] name="sShipSet" onChange="JavaScript:document.forms.shipping.submit();">
                                    [{foreach key=sShipID from=$oView->getAllSets() item=oShippingSet name=ShipSetSelect}]
                                        <option value="[{$sShipID}]" [{if $oShippingSet->blSelected}]SELECTED[{/if}]>[{ $oShippingSet->oxdeliveryset__oxtitle->value }]</option>
                                        [{if $sShipID == ''}]}
                                            [{ oxmultilang ident = "hi_shipping_with_insurance" }]
                                        [{/if}]
                                    [{/foreach}]
                                </select>
                                <noscript>
                                    <button type="submit" class="submitButton largeButton">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_UPDATESHIPPING" }]</button>
                                </noscript>
                            [{/block}]
                     [{*   </li>
                    </ul>*}]
                    </div></div>
                    [{*<div>*}]
    
                    [{if $oxcmp_basket->getDeliveryCosts() }]
                        [{if $oxcmp_basket->getDelCostNet()}]
                        <div id="shipSetCost">
                            <b>[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_CHARGE" }] [{ $oxcmp_basket->getDelCostNet() }] [{ $currency->sign }]
                            [{if $oxcmp_basket->getDelCostVat() }]
                                    ([{ oxmultilang ident="PAGE_CHECKOUT_BASKETCONTENTS_PLUSTAX1" }]
                                    [{ $oxcmp_basket->getDelCostVat() }] [{ $currency->sign }])
                            [{/if }]
                            </b>
                        </div>
                        [{ else }]
                        <div id="shipSetCost">
                            <b>[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_CHARGE" }] [{ $oxcmp_basket->getFDeliveryCosts() }] [{ $currency->sign}]</b>
                        </div>
                        [{/if}]
                    [{/if}]
                    [{*<div class="lineBlock"></div>*}]
                    
                </form>
                    
            [{/if}]
        [{/block}]
    
        [{block name="checkout_payment_errors"}]
            [{assign var="iPayError" value=$oView->getPaymentError() }]
            [{ if $iPayError == 1}]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_COMLETEALLFIELDS" }]</div>
            [{ elseif $iPayError == 2}]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_AUTHORIZATIONFAILED" }]</div>
            [{ elseif $iPayError == 4 }]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_UNAVAILABLESHIPPING" }]</div>
            [{ elseif $iPayError == 5 }]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_UNAVAILABLEPAYMENT" }]</div>
            [{ elseif $iPayError == 6 }]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_UNAVAILABLETSPROTECTION" }]</div>
            [{ elseif $iPayError > 6 }]
                <!--Add custom error message here-->
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_UNAVAILABLEPAYMENT" }]</div>
            [{ elseif $iPayError == -1}]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_ERRUNAVAILABLEPAYMENT" }] "[{ $oView->getPaymentErrorText() }]").</div>
            [{ elseif $iPayError == -2}]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_NOSHIPPINGFOUND" }]</div>
            [{ elseif $iPayError == -3}]
                <div class="status error">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_SELECTANOTHERPAYMENT" }]</div>
            [{/if}]
        [{/block}]
        [{block name="change_payment"}]
        
            [{oxscript include="js/widgets/oxpayment.js" priority=10 }]
            [{oxscript add="$( '#payment' ).oxPayment();"}]
            [{oxscript include="js/widgets/oxinputvalidator.js" priority=10 }]
            [{oxscript add="$('form.js-oxValidate').oxInputValidator();"}]
            <form action="[{ $oViewConf->getSslSelfLink() }]" class="js-oxValidate payment" id="payment" name="order" method="post">
                
                <div>
                    [{ $oViewConf->getHiddenSid() }]
                    [{ $oViewConf->getNavFormParams() }]
                    <input type="hidden" name="cl" value="[{ $oViewConf->getActiveClassName() }]">
                    <input type="hidden" name="fnc" value="validatepayment">
                </div>

                [{if $oView->getPaymentList()}]
                    <div class="orderlightBG">
                    <p id="paymentHeader" class="blockHead">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_PAYMENT" }]</p>
                    [{ assign var="inptcounter" value="-1"}]
                    [{foreach key=sPaymentID from=$oView->getPaymentList() item=paymentmethod name=PaymentSelect}]
                        [{ assign var="inptcounter" value="`$inptcounter+1`"}]
                       [B] [{block name="select_payment"}][/B]
                            [{if $sPaymentID == "oxidcashondel"}]
                                [{include file="page/checkout/inc/payment_oxidcashondel.tpl"}]
                            [{elseif $sPaymentID == "oxidcreditcard"}]
                                [{include file="page/checkout/inc/payment_oxidcreditcard.tpl"}]
                            [{elseif $sPaymentID == "oxiddebitnote"}]
                                [{include file="page/checkout/inc/payment_oxiddebitnote.tpl"}]
                            [{else}]
                                [{include file="page/checkout/inc/payment_other.tpl"}]
                            [{/if}]
                        [{/block}]
                    [{/foreach}]

                    [{* TRUSTED SHOPS BEGIN *}]
                    [{include file="page/checkout/inc/trustedshops.tpl"}]
                    [{* TRUSTED SHOPS END *}]
                    </div>
                    [{block name="checkout_payment_nextstep"}]
                        [{if $oView->isLowOrderPrice()}]
                            <div class="lineBox clear">
                            <div><b>[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_MINORDERPRICE" }] [{ $oView->getMinOrderPrice() }] [{ $currency->sign }]</b></div>
                            </div>
                        [{else}]
                            <div class="lineBox clear">
                                <a href="[{ oxgetseourl ident=$oViewConf->getOrderLink() }]" class="prevStep submitButton largeButton" id="paymentBackStepBottom">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_BACKSTEP" }]</a>
                                <button type="submit" name="userform" class="submitButton nextStep largeButton" id="paymentNextStepBottom">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_NEXTSTEP" }]</button>
                            </div>
                        [{/if}]
                    [{/block}]

                [{elseif $oView->getEmptyPayment()}]
                    [{block name="checkout_payment_nopaymentsfound"}]
                        <div class="lineBlock"></div>
                        <h3 id="paymentHeader" class="blockHead">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_INFO" }]</h3>
                        [{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_EMPTY_TEXT" }]
                        <input type="hidden" name="paymentid" value="oxempty">
                        <div class="lineBox clear">
                            <a href="[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=user" }]" class="prevStep submitButton largeButton">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_BACKSTEP" }]</a>
                            <button type="submit" name="userform" class="submitButton nextStep largeButton" id="paymentNextStepBottom">[{ oxmultilang ident="PAGE_CHECKOUT_PAYMENT_NEXTSTEP" }]</button>
                        </div>
                    [{/block}]
                [{/if}]
            
        </div>
        [{/block}]
    [{/block}]
    [{insert name="oxid_tracker" title=$template_title }]
    </div>
[{/capture}]

[{include file="layout/page.tpl" sidebar="Left"}]

Der Einfachheit halber, habe ich mir ein Modul geschrieben, welches den Select_payment Block überschreibt (ist fett markiert), der alle Bezahlmethoden abdeckt und somit genau das wäre, was ich benötige. Nun wird allerdings dort die Bezahlmethode Paypal nicht abgedeckt, weil sie anscheinend irgendwie anders auf die Seite kommt.

Wieso das so ist, ist mir ein Rätsel, weil das Paypal Modul auch über die Variable $sPaymentID reingeladen werden sollte. Falls jemand eine Idee hat, wieso sie nicht angezeigt wird, wäre ich euch sehr dankbar.

Nun sieht meine CSS-Datei derzeit so aus:

Code:

.popupTrigger + div.popup:hover{
   width: 153px;
   font-size: 12px;
   line-height: 120%;
}

div.hiO3Payment > div.popupTrigger:hover{
   display: inline-block;
}

#payment .popupTrigger + div.popup{
	width: 153px;
	font-size: 12px;
	line-height: 120%;
}
#payment .popupTrigger:hover + .popup {
	display: inline-block;
	opacity: 0;
}
#payment img.popupTrigger:hover + .popup {
	opacity: 1;
}

#payment div.hiO3Payment > div.popupTrigger{
	display: inline-block;
}

.info:hover + .popup { 
	display: inline-block; 
	}
	
 img.info{
   width: auto;
   height: 15px;
 }
 img.info:hover{
   display: inline-block;
 }
 


#payment {
	display: block;;

}

#payment img.info{
	width: auto;
	left:20px;
 }

#payment.payment dl{
	display:none;
}

.orderlightBG{

margin: 0 /*10px*/;
border:1px solid #737373;
background-color: #262626;
width: 98%;
border-radius: 5px;
margin-bottom: 25px;
padding-top:15px;
padding-left:8px;
padding-bottom:15px;
margin-top:20px;
}

input[type=radio] + label{

max-width: 630px;
}

.heremaybesomemorespacetotop{
display: block;
/* margin-top: 0; */
font-size: 10px;
}

Und zur vollständigungshalbern noch das Modul, welches den Block "select_payment" überschreibt:

PHP-Code:


			
<div class="hiO3Payment"> 
    <div class="popupTrigger">
    [{$smarty.block.parent}]
    [{oxstyle include=$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "src/styles/infotext.css")}]
        <br>
    [{if $paymentmethod}]
    <img class="paymet" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/nachnahme.png")}]"/>
    <img class="paymet" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/sofort.png")}]"/>
    <img class="paymet" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/teilzahlung.png")}]"/>
    <img class="paymet" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/voraus.png")}]"/>
    <img class="paymet" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/zielkauf.png")}]"/>
    [{/if}]
        <img class="info" src="[{$oViewConf->getModuleUrl("hi_orderstep3_infotextenew", "upload/i.png")}]"/>
    </div>
    
    <div class="popup">[{$desc|html_entity_decode}]
    </div> 
</div>

Problem ist jetzt, dass ich alles ja auch dynamisch einbinden möchte und das erfordert dann doch etwas mehr Denkarbeit, als ich als Beginner derzeit fähig wäre.

Der erste Schritt wäre, dass ich die Elemente in 2 Reihen bringen möchte. Nur wie? Natürlich ist mir klar, dass ich die einzelnen Elemente ansprechen könnte. Aber das wäre unter umständen falsch, weil die Seite dynamische Bezahlmethoden hat und nicht immer die selben angezeigt werden. Also erstelle ich zum Beispiel 2 Div-Container einen für links und wie sage ich ihm dann, welche Elemente in welche Seite gehören?

Bei den Bildern stelle ich mir auch die Fragen, wie ich diese zu meinen Bezahlelementen zuordnen kann. Sie werden nämlich nicht immer in derselben Reihenfolge angezeigt.

Ich hoffe, es kann mir jemand helfen, ich weiß nämlich sonst echt nicht mehr weiter.

explanator · #2 (**permalink**) 07.04.2014, 04:00

Wende dich an den Hersteller des Webshop.

Mit deinem Code kann hier keiner was anfangen.

mcdutch · #3 (**permalink**) 07.04.2014, 16:49

Ok, dann wie wärs mit einer Antwort darauf, wie man ein Layout, wo alle Punkte untereinander sind, zweispaltig bekommt?

Ich würde das ja gerne mit 2 divs machen, aber ich weiß nicht, wie ich die eintragen kann.

explanator · #4 (**permalink**) 07.04.2014, 17:06

Mit der CSS Eigenschaft column. Siehe auch https://developer.mozilla.org/en-US/...column_layouts

Unterstützung durch Browser kann man auf Can I use CSS3 Multiple column layout erfahren.

Thielo · #5 (**permalink**) 08.04.2014, 00:28

Zitat:

Zitat von explanator

Mit deinem Code kann hier keiner was anfangen.

Doch ich

Des is smarty-code von OXID

Und die mehrspaltigkeit: Floate einfach die umschließenden Elemente der inputs/labels.

mcdutch · #6 (**permalink**) 08.04.2014, 10:17

Zitat:

Zitat von Thielo

Doch ich

Des is smarty-code von OXID

Und die mehrspaltigkeit: Floate einfach die umschließenden Elemente der inputs/labels.

Wenn ich die Input/Labels floate, dann hab ich neben den Zahlschriten ja die Bilder und außerdem müsste ich die dann auch nochmals beibringen, dass ich nur 2 Elemente pro Zeile habe. Von daher finde ich den colomn-Befehl besser. Trotzdem danke für deinen Tip!

Versuche gerade die Bezahlüberschrift aus dem zwei-spaltigen Bereich herauszulassen. Klappt nur nicht so gut. :not() als Lösung finde ich nicht so schön. Und mit word-wrap krieg ich keinen Zeilenumbruch hin. Wie kann ich ihm das sonst noch beibringen?

Code:

form#payment .orderlightBG {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
}

.orderlightBG >p#paymentHeader{
	
	word-wrap: break-word;
	
}

Thielo · #7 (**permalink**) 08.04.2014, 10:21

Zitat:

Zitat von mcdutch

Wenn ich die Input/Labels floate, dann hab ich neben den Zahlschriten ja die Bilder und außerdem müsste ich die dann auch nochmals beibringen, dass ich nur 2 Elemente pro Zeile habe. Von daher finde ich den colomn-Befehl besser. Trotzdem danke für deinen Tip!

Zu unterscheiden zwischen "Floate einfach die umschließenden Elemente" und "Floate einfach die Input/Labels" ist schwer

Zitat:

Zitat von mcdutch

Klappt nur nicht so gut. :not() als Lösung finde ich nicht so schön. Und mit word-wrap krieg ich keinen Zeilenumbruch hin. Wie kann ich ihm das sonst noch beibringen?

Was heißt "Klappt nur nicht so gut."? Mit einem Link zum Problem hilfst du jedem mehr als mit Handybildern und Smartycode. Wir müssen das sehen, wie es derzeit aussieht. (und kein Bild davon)

mcdutch · #8 (**permalink**) 08.04.2014, 10:55

Da das Projekt derzeit nur Lokal ist, habe ich mal ein Bild davon angehängt, wie es derzeit aussieht.

Ich dachte mein Code sei richtig, aber ich schaffe es nicht, dass mir das Element "Bitte wähle deine Zahlungsart" nicht in die mehrsprachigen Spalten gezählt wird.
Normalerweise müsste ich ja den Selektor anders setzen und zwar statt: form#payment .orderlightBG, etwas genaueres. Aber immer wenn ich es versuche genauer anzusprechen, dann wird es mir nicht mehr angezeigt.

HTML-Code:

div class ="hiO3Payment">
<p id="paymentHeader" class="blockhead">
<b>Bitte wähle deine Zahlungsart:</b></p>
												    
<div class="hiO3Payment"> 
	<div class="popupTrigger">
	  
									<dl>
    <dt>
        <input id="payment_sofortueberweisung" name="paymentid" value="sofortueberweisung" type="radio">
        <label for="payment_sofortueberweisung"><b>Sofortüberweisung
        
        </b></label>
    </dt>
    <dd class="">
        <ul>
                </ul>                 
    </dd>
</dl>							
	
		<br>
	<img class="paymet" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/sofort.png">

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

	</div>
	
	<div class="popup">
	</div> 
</div>
								    	
   
  

<div class="hiO3Payment"> 
	<div class="popupTrigger">
	  
									<dl>
    <dt>
        <input id="payment_oxidpayadvance" name="paymentid" value="oxidpayadvance" type="radio">
        <label for="payment_oxidpayadvance"><b>Vorauskasse
        
        </b></label>
    </dt>
    <dd class="">
        <ul>
                </ul>

        
                    
    </dd>
</dl>							
	
		<br>
	<img class="paymet" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/voraus.png">

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

	</div>
	
	<div class="popup">
	</div> 
</div>
								    

    <dl>
        <dt>
            <input id="payment_oxidpaypal" name="paymentid" value="oxidpaypal" type="radio">
            <label for="payment_oxidpaypal"><b>PayPal
            </b></label>
        </dt>
        <dd class="">
                       

                        <p class="paypalExpressCheckoutMsg">
                <input name="displayCartInPayPal" value="1" checked="" type="checkbox">
                Warenkorb in PayPal anzeigen
            </p>
                    </dd>
    </dl>

								    	
   
  

<div class="hiO3Payment"> 
	<div class="popupTrigger">
	    <dl>
      <dt>
          <input id="payment_termPurchase" name="paymentid" value="termPurchase" type="radio">
          <label for="payment_termPurchase">Zielkauf auf 6 Monate </label>
      </dt>
      <dd class="">

          
		  
      </dd>
  </dl>
  
	
		<br>
	<img class="paymet" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/zielkauf_de.png">

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

	</div>
	
	<div class="popup">
	</div> 
</div>
								    	
   
  

<div class="hiO3Payment"> 
	<div class="popupTrigger">
	  
									<dl>
    <dt>
        <input id="payment_oxSantander1" name="paymentid" value="oxSantander1" type="radio">
        <label for="payment_oxSantander1"><b>Warenkorbfinanzierung (Teilzahlung)
        
        </b></label>
    </dt>
    <dd class="">
        <ul>
                </ul>

        
                    
    </dd>
</dl>							
	
		<br>
	<img class="paymet" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/teilzahlung.png">

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

	</div>
	
	<div class="popup">
	</div> 
</div>
								    	
   
  

<div class="hiO3Payment"> 
	<div class="popupTrigger">
	  
									<dl>
    <dt>
        <input id="payment_oxidcashondel" name="paymentid" value="oxidcashondel" checked="" type="radio">
        <label for="payment_oxidcashondel"><b>Nachnahme</b></label>
    </dt>
    <dd class="activePayment">
                                    49,00 €
                            Nachnahmegebühr

        
                            <div class="desc">
                    <p>Das ist Nachnahme</p>

                </div>
                    
    </dd>
</dl>							
	
		<br>
	<img class="paymet" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/nachnahme.png">

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

	</div>
	
	<div class="popup">
	</div> 
</div>
								    	

				
	   
  

<div class="hiO3Payment"> 
	<div class="popupTrigger">
	  
									<dl>
    <dt>
        <input id="payment_oxQPayCCard" name="paymentid" value="oxQPayCCard" type="radio">
        <label for="payment_oxQPayCCard"><span class="popupTrigger"><b>MasterCard / Visa
        
        		</b></span>
		<span class="popup" style="margin-left: 150px;">Nur mit Secure Code (PIN-basierter Authentifizierung)</span>
	</label>
    </dt>
    <dd class="">
        <ul>
                </ul>

        
                            <div class="desc">
                    <p>Bezahlen sie bequem mit ihrer Kreditkarte.</p>

                </div>
                    
    </dd>
</dl>							
	
		<br>

		<img class="info" src="https://localhost/modules/hi_orderstep3_infotextenew/upload/i.png">

Code:

form#payment .orderlightBG {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
}

.orderlightBG >p#paymentHeader{
	
	word-wrap: break-word;
	
}

ps: sorry für die hässliche Anzeige!

Thielo · #9 (**permalink**) 08.04.2014, 13:55

Zum einen ist nirgends im HTML ein form mit der ID "payment" und ein Element mit der Klasse "orderlightBG" aber hey, ist ist ja einfacher zu sagen "ist nicht online" als sich mal 15 minuten arbeit zu machen.

Des Weiteren: ich bleibe bei meiner float-Lösung. Die funktioniert.

mcdutch · #10 (**permalink**) 08.04.2014, 14:25

Zitat:

Zitat von Thielo

Zum einen ist nirgends im HTML ein form mit der ID "payment" und ein Element mit der Klasse "orderlightBG" aber hey, ist ist ja einfacher zu sagen "ist nicht online" als sich mal 15 minuten arbeit zu machen.

Des Weiteren: ich bleibe bei meiner float-Lösung. Die funktioniert.

Ok, da muss ich dir recht geben. Wäre jetzt auch nicht so ein Problem das hochzuladen. Ich habe mit der Float-Lösung das Problem, dass ich unter dem Label noch Bilder einfügen möchte. Deshalb müsste ich in meinem Fall eigentlich die Klasse hiO3Payment floaten. Das widerum zerschießt mir meinen Hintergrundrahmen, den ich neu bauen müsste und die Ausrichtung müsste ich dann auch neu machen.

Also versuche ich weiterhin eine Lösung mit column hinzukriegen.

Aber um nochmals zurück auf das Problem zu kommen.

Ich habe eine Klasse OrderlightBG, die hat 2 Unterelemente. Eines ist die Bezahlüberschrift und eines die Bezahlschritte. Ich möchte, dass das hier:

.orderlightBG {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
}

erst bei den Bezahlschritten beginnt. Wie kann ich die Überschrift aus dieser Regelung rausnehmen?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
paar Probleme mit dem CSS Layout	SimonK.	CSS	6	05.10.2008 14:57
IE: Probleme mit ul-Menü	Ares	CSS	4	18.10.2006 11:42
Probleme bei Umsetzung.	Salz`	CSS	2	14.09.2006 16:34
Layout Probleme	SchwarzerMagier	CSS	18	01.08.2006 13:06
Probleme mit Bild-Positionnierung	lexXx`lu	CSS	7	19.07.2006 22:03