I need put letters in a permanent site in a div like the next photo
as you can see I need to reduce the position of the letters
My code is this
<div class="col-md-4 col-xl-4 col-xs-4 col-sm-4 col-lg-4">
<div class="contenedor">
<center>
<h3>Helado de copoazú </h3>
</center>
<br />
<figure>
<img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
<div class="centrado2" name="disponible_helado" id="agotado_45"></div>
</figure>
<center>
<div id="adiciona45_mostrar" style="font-weight:bold; font-size: 22px;">
Bs.
10
</div>
<button id="stepDown-helado" type="button" style="border-radius: 15px;"
class=" btn btn-success"
onclick="cambiar_inputs();" product_id='45'>-</button>
<input type="number" name="numero_helado" id="numero_helado" value="0"
min="0" readonly="1" size="3"
style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
<button id="stepUp-helado" type="button" style="border-radius: 15px;"
class=" btn btn-primary"
onclick="cambiar_inputs();" product_id='45'>+</button>
</center>
</div>
<hr style="border: 5px solid #1db33b; width:100%" />
</div>
How can i do that?
using css this is simple
div::after{
content: 'anyLetter';
}
or
div::before{
content: 'anyLetter';
}
Edit: if you want to add it in the around the location marked in the image,
i would suggest around the <h3> or the <figure> tags.
also adding a class like after-word would make it more usable
Related
Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage https://aqwaa.net/product/constriction/:
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!-- .clearfix -->
</div><!-- .summary -->
</div>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.
Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.entry-summary {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
/* i added this */
#spacefill {
height: 10000px;
}
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1>
<p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
</span>
</p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>
.woocommerce-product-gallery__image {
width: 100% !important;
}
</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value">
<p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value">
<p>.925 Sterling Silver</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="spacefill">
</div>
</div>
<!-- .clearfix -->
</div>
<!-- .summary -->
<div id="spacefill">
<!-- I added this -->
</div>
</div>
Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.woocommerce-product-gallery__image{width: 100% !important;}
#media all and (min-width:1000px) {
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
}
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
margin: 0 0 0px;
}
.content_bottom {
padding-top: 80px;
background: #fff;
}
.woocommerce-page .content .container .container_inner {
padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
z-index: 99999999999;
background: #fff;
padding-top: 0!important;
display: table;
position: relative;
width: 100%;
margin-bottom: 0!important;
padding-bottom: 34px;
}
}
#media all and (min-width:1500px) {
.qode-single-product-summary {
width: 1300px; right:initial;
}
.woocommerce .summary {
width: 500px;
}
}
i am working on my html php game and i have a button design what do not contain button HTML tag. But i want to give it a button functionality.
Here is HTML code of button what works and do a function to reset time for specific amount of game gold.
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip" data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}" style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="" width="16" height="16">
</button>
</form>
And here is my new button style witch i need to apply the same function as i have set for the button before this.
<tr class="data">
<td colspan="2">
<a class="build-faster dark_highlight building disabled">
<div class="build-faster-img" alt="Reset time"></div>
<span class="build-txt">Reset time</span>
<span class="dm_cost overmark">{if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if} AM</span>
<span class="order_dm">Purchase with gold</span>
</a>
</td>
</tr>
Can someone please tell me what should i do in my case and is it even possible ?
Or i need to use only button tag ?
For semantic reasons (which help a lot of users who rely on screen readers and other assitive technologies), you really should use a <button>, but you can do what you want by simply applying a click event handler to the "fake button" and in that handler, you manually call the submit event of the form.
As a side note, you should definitely not be using a table for this. Tables are for tabular data rendering, not for layout.
var form = document.querySelector("form");
var fakeSubmit = document.getElementById("fakeSubmit");
fakeSubmit.addEventListener("click", function(){
form.submit();
});
#fakeSubmit {
border:1px solid #a0a0a0;
border-radius:1px;
padding:2px 5px;
background-color:#f0f0f0;
cursor:pointer;
box-shadow:1px 1px 1px rgba(0,0,0,.5);
}
#fakeSubmit:hover, #fakeSubmit:active {
box-shadow:-1px -1px 1px rgba(255,255,255,.5);
}
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</button>
<div id="fakeSubmit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</div>
</form>
I have 2 field, one is image upload and video upload.
I want the part of css to reflect only on video part. Can anyon help me to solve this.
HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let media of medias; let i = index">
<div class = "type-img" [hidden]= "selectedImage !='img'">
<img class="cat-img" src="{{media.image_path}}" style="width: 100px;margin: 10px 0px;" type='img' *ngIf="selectedImage=='img'" />
</div>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<video width="320" height="240" controls> <source src="{{media.image_path}}" type="video/mp4" *ngIf="selectedImage=='video'" ></video>
</div>
<p class="inputimg video">
<input type="file" name="{{media._id}}[i]" id="{{media._id}}[i]" class="inputfile" (change)="editPinImage($event,media)" style='display: none;' />
<label *ngIf="media._id" for="{{media._id}}[i]" class="img_change">Change</label>
<label *ngIf="!media._id" for="{{media._id}}[i]" class="img_change">Add</label>
</p>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<span style="margin-left: 12%;">or </span>
<input type="text" class="form-control form-textbox input-text" (change)="editPinImage($event,media)" style="width: 28%;margin-right: 24%;">
</div>
</div>
Here, <p class="inputimg video">, i need this part of css to work only for video
.video {
float: right;
margin-right: 56%;
margin-top: -2%;
}
Use NgClass for it. Hope you need video class when selected image is 'video'
<p class="inputimg" [ngClass]="{'video': selectedImage =='video'}">
I can't put a title to the page I tried to use the title tag again with no success.
the relevant code view:
<h2 align="left" class="w3-center">לוח מודעות</h2>
<tr align="left">
<div align="left" class="w3-content" style="max-width:400px">
<img align="left" class="mySlides" src="http://www.sapir.ac.il/files/7a790acebf3213f6928cb60fd488471a//styles/epsa_crop_hp_top_banner/public/030717_OPHW8.jpg?itok=dAGknih9" style="width:100%" height="450">
<img align="left" class="mySlides" src="http://cnd.ash-college.ac.il/.upload/Images/banner_500x251.jpg" style="width:100%" height="450">
<img align="left" class="mySlides" src="http://www.achva.ac.il/sites/default/files/imagecache/carousel_img/carousel/images/s-yom_new.jpg" style="width:100%" height="450">
</div>
</tr>
<br />
<br />
<button id="button1" style="background:#f90;
color:#fff;font-family:Calibri;
padding:6px 30px;border:none;
border-bottom:3px solid #925b08;
border-radius:10px;
font-size:200%;"
type="button"
onclick="location.href='#Url.Action("ShowSearch1","Institution")'">
חפש מוסד לימודים
</button>
<button id="button1" dir="rtl" style="background:#f90;
color:#fff;font-family:Calibri;
padding:6px 30px;border:none;
border-bottom:3px solid #925b08;
border-radius:10px;
font-size:200%;"
type="button"
onclick="location.href='#Url.Action("ShowSearch", "Degree")'">
חפש תואר
I want to increase the height and width of the inner box (Arrow is pointing) of the Overlay in the below image using DOJO.
Below is my code. Please let me know where I suppose to add in order to increase the height and width.
<div class="xx-common-overlay" id="overlay-0">
<div class="xx-head">
<p><a class="xx-common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="xx-body">
<div class="xx-main">
<a id="xx-access Accessibility anchor" class="xx-access"></a>
<div class="xx-title">
<h2 style="font-size: 1.6em;">Please select </h2>
</div>
<div class="xx-container">
<h2 style="padding-top: 10px;">Items:</h2>
<div class="xx-container-body">
<p style="padding-top: 5px;">
<select multiple="true" id="ItemsOverlay1" name="Items0" style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect" onchange="setValues(this, 'fromItems','');"></select>
</p>
<input class="xx-btn-arrow-pri" value="OK" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromPlatform','ok');return false;"/>
<input style="margin-left: 10px;" class="xx-btn-arrow-pri" value="Cancel" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromItems','cancel');return false;"/>
</div>
</div>
</div>
You provided code can not be parse, but you could try the following:
find dojoType="dojox.form.CheckedMultiSelect"
change to style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect"