I have a table with single row that contains some text (with new-line chars), e.g.:
<td id='line-numbers'>
<span class="number" id="1">1</span><br>
<span class="number" id="2">123</span><br>
<span class="number" id="3">31111</span><br>
</td>
From CSS perspective I added css: margin-right: 15px to line-numbers.
Now I would like to insert images at the end of each row, e.g.:
<td id='line-numbers'>
<span class="number" id="1">1</span><img ...><br>
<span class="number" id="2">123</span><img ...><br>
<span class="number" id="3">31111</span><img ...><br>
where each image will be right-centered and displayed in 'margin' area on the right which height will match height of the font (width should be scaled to height). Please advise how to do it in the most effective way.
Thank you.
p.s. potentially I could introduce additional column on the right, but having no text (except line-break), I found it difficult to match (putting each line into separate table is currently not possible).
Why not put <img/> within the <span>?
Like:
<td id='line-numbers'>
<span class="number" id="1">
1 <img src="" />
</span>
</td>
Using CSS you can align the image to the right.
As you didn't provided any CSS I wasn't able to already implement it for you.
Related
I am trying to style certain buttons on my wordpress site by adding in custom css in the customiser.
The block of code where my buttons are nested is
<div class="xoo-cp-container">
<div class="xoo-cp-outer">
<div class="xoo-cp-cont-opac"></div>
<span class="xoo-cp-preloader xoo-cp-icon-spinner"></span>
</div>
<span class="xoo-cp-close xoo-cp-icon-cross"></span>
<div class="xoo-cp-content" style="opacity: 1;"><div class="xoo-cp-atcn xoo-cp-success"><span class="xoo-cp-icon-check"></span>Product successfully added to your cart</div>
<table class="xoo-cp-pdetails clearfix">
<tbody><tr data-xoo_cp_key="7f5d04d189dfb634e6a85bb9d9adf21e">
<td class="xoo-cp-remove"><span class="xoo-cp-icon-cross xoo-cp-remove-pd"></span></td>
<td class="xoo-cp-pimg"><img width="300" height="450" src="#" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="#"></td>
<td class="xoo-cp-ptitle">Gin - Case 12x 5cl
</td><td class="xoo-cp-pprice"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>99.00</bdi></span></td>
<td class="xoo-cp-pqty">
<div class="xoo-cp-qtybox">
<span class="xcp-minus xcp-chng">-</span>
<input type="number" class="xoo-cp-qty" max="" min="1" step="1" value="2" pattern="[0-9]*">
<span class="xcp-plus xcp-chng">+</span></div>
</td>
</tr>
</tbody></table>
<div class="xoo-cp-ptotal"><span class="xcp-totxt">Total : </span><span class="xcp-ptotal"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>198.00</bdi></span></span></div>
</div>
<div class="xoo-cp-btns">
<a class="xoo-cp-btn-vc xcp-btn" href="#">View Cart</a>
<a class="xoo-cp-btn-ch xcp-btn" href="#">Checkout</a>
<a class="xoo-cp-close xcp-btn">Continue Shopping</a>
</div>
</div>
and the buttons I'm trying to style are located at the end of the code block
<div class="xoo-cp-btns">
<a class="xoo-cp-btn-vc xcp-btn" href="#">View Cart</a>
<a class="xoo-cp-btn-ch xcp-btn" href="#">Checkout</a>
<a class="xoo-cp-close xcp-btn">Continue Shopping</a>
</div>
i've tried to style each of them in the following way
.xoo-cp-btn-vc{background:green!important; color:white!important;}
a.xoo-cp-btn-vc{background:green!important; color:white!important;}
.xoo-cp-btns .xoo-cp-btn-vc{background:green!important; color:white!important;}
a.xoo-cp-btns .xoo-cp-btn-vc{background:green!important; color:white!important;}
but none of them are correct, can someone please help me correctly target the correct elements please.
Much Appreciated!
a good way to find how they are currently styled is to hop in the inspector.
In the styles section you can see what the classes used to select the button currently are. So when trying to overwrite these classes you'll have to make sure your selectors are weighted more heavily than the existing ones.
The importance of css selectors is as follows
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000
points)
So if there is currently 5 classes pointing to your button those styles will have a weight of 50 while your a.xoo-cp-btn-vc class selector has a weight of 20 for having the a and the .xoo-cp-btn-vc
Adding specificity to your selectors should help, and if you use the exact same selectors that are currently used the !important should be enough to overwright them
I need to build some image in my html. I can't use css styles, because I want to use this markup for email mailing.
I need to build image like that:
I need doing it in HTML because I have some text that might be change.
Now I have this markup:
<td>
<div style="background-color: white;width: 702px;height:100px;border-radius:20px; ">
<img style="float: left;margin-top: 2%;margin-left: 2%;" src="rux.png" alt="" />
<p style="color:lightslategrey;font-size: 2em;padding-left: 5%;display: inline-block;">ДАЙДЖЕСТ НОВИН</p>
</div>
</td>
but I don't know how to add shape like right(orange one) and grey shape in bottom.
Appreciate for all kind of help.
First of all. I´m kind of a rookie when it comes to coding webdesign. Last time I made a website was 20 years ago, and I can say that a lot has happened :-)
To the topic. I´m trying to create a couple of boxes in . I want them all to stay in the middle with a Little space between them.
They need to go down in a row like this:
[] []
[] []
My problem is that when i add my third and fourth they overlap the top boxes!
Link to code on fiddle:
http://jsfiddle.net/2cZtH/7/ enter code here
Here you go. http://jsfiddle.net/2cZtH/8/
You shouldn't really be using position:absolute for this ideally, that takes them out of the DOM and you have to position them all manually. You can give them a width of a % of the containing div and float them left for the same effect with much more ease. :)
div { width:25%; float:left; border-radius: 25px; margin-right:2.5%;
border: 2px solid #A9B8C2;
padding: 20px;
height: 200px;
background: #ECECEC; }
Edit: Of course you can use a set width if you know the width of the containing div.
See the fiddle
Your HTML code had many problems which made it to malfunction.I have changed your code a little. See below for the changed code. Please replace your HTML with this one.
The main problem with your CSS was that you was using position:absolute; which made it look like that. So i've changed that to position:relative.
You can read more about CSS positioning here..
HTML
<div class="container">
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead"> Alger i våra kar</span>
<br /><br/>
<span class="fulldivp"> En artikel som beskriver ingående de vanligaste algerna i våra akvarier. Med många bra bilder tillsammans med Beskrivning/Orsak/Bekämpning gör denna artikel till
förmodligen den mest omfattande på webben.
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
</div>
I struggled to understand your code, is this something you are trying to create
http://jsfiddle.net/2cZtH/11/
I created a simple box that is repeated. Using display:inline-block; stacks them in order and causes a line break when it reaches the end of the viewport.
If you are just trying to create three columns using float:left is all you need.
http://jsfiddle.net/2cZtH/15/
Problem solved! By making the right box relative and edit margin-right plus margin-top. Plus link in clear after code. Thanks!
You could put them in a table:
<table>
<tr>
<td>
Top Left Content
</td>
<td>
Top Right Content
</td>
</tr>
<tr>
<td>
Bottom Left Content (Blank)
</td>
<td>
Bottom Right Content
</td>
</tr>
</table>
Put your divs in the table cells, and remove their absolute positioning property as this will prevent the table cells from sizing properly.
I have table where inside one column is name and level (number) - I want name on the left side and level "sticked" to right side.
Width of columns is dynamic.
If there is enough space everything is fine, but on smaller screens it makes ugly "line breaking" - shown on image.
Does anyone have some idea how to keep everything in one line?
Structure and style (very simplified)
...
<td>
<span class ="nowrap">
<a style ="float:left;">Name</a>
<span style ="float: right;" class ="level">10</span>
</span>
</td>
...
You can set positive right margin to the anchor and negative left margin to the span:
.nowrap > a {
margin-right: 30px;
}
.nowrap > span {
margin-left: -30px;
}
Look how it works: http://jsfiddle.net/ZF8mh/
Add the style to your list on the particular column with display: inline-block;
like
<td style="display:inline-block;">
<span class="nowrap">
<a style="float:left;">Name</a>
<span style="float:right;" class="level">10</span>
</span>
</td>
Apply the style in <td> tag as I have done or in <a> tag.
OK, so my title is terrible. Anyway-
I'm trying to style a simple "product info" template. The CMS I use is drawing in dynamic product information from tags. Looks like this- the divs are styled so they line up as two columns:
<div class="specslabel">
<strong>
{rs_size_lbl} <br />
{rs_material_lbl} <br />
{rs_application_lbl} <br />
{rs_fitting_system_lbl}
</strong>
</div>
<div class="specs">
{rs_size} <br />
{rs_material} <br />
{rs_application} <br />
{rs_fitting_system}
</div>
It all works fine when all those tags are pulling in information properly. However, sometimes one of those fields (it draws from a CSV file) is empty. The tags are smart and won't show the {_lbl} (field label) content if there is no content in the according field. Then there is a blank line, obviously because of the line break.
If I don't use line breaks, the "_lbl" tags all stack up (since the labels are generally short text). Is there another way to style this so that when no content is drawn in, there is no line break- but when there is content, there is a line break?
Rewrite your HTML to put the label with the item.
<div><span class="specslabel">{rs_size_lbl}</span><span class="specs">{rs_size}</span></div>
<div><span class="specslabel">{rs_material_lbl}</span><span class="specs">{rs_material}</span></div>
<div><span class="specslabel">{rs_application_lbl}</span><span class="specs">{rs_application}</span></div>
<div><span class="specslabel">{rs_fitting_system_lbl}</span><span class="specs">{rs_fitting_system}</span></div>
Then, define your CSS as
.specslabel {
display: inline-block;
width: 45%;
}
.specs {
}
What will happen is, when neither the label nor the data gets anything, your html for that line item will be rendered as <div></div>, which has no height by default. Thus the blank space will be collapsed when there is nothing in the div to show.
I'd recommend altering your markup to something like this:
<div class="specs">
<div class="spec">
<span class="label">{rs_size_lbl}</span>
<span class="data">{rs_size}</span>
</div>
<div class="spec">
<span class="label">{rs_material_lbl}</span>
<span class="data">{rs_material}</span>
</div>
<div class="spec">
<span class="label">{rs_application_lbl}</span>
<span class="data">{rs_application}</span>
</div>
<div class="spec">
<span class="label">{rs_fitting_system_lbl}</span>
<span class="data">{rs_fitting_system}</span>
</div>
</div>
Then style span.label and span.data to have a fixed width so they align properly. If they're empty, they should be invisible.
If you format it in the following manner there'd be no issues:
<style>
strong span { float:left; clear:left; }
</style>
<strong>
<span>{rs_size_lbl}</span>
<span>{rs_material_lbl}</span>
<span>{rs_application_lbl}</span>
<span>{rs_fitting_system_lbl}</span>
</strong>
Otherwise, you'd need to alter the server script to output the <br/> appropriately ...