I want the text to flow around my images without creating empty elements so I tried using :before and after. The before works, but the text doesn't flow around the after. Is this possible? Here is my sample code.
#shape {
margin: 0px auto;
overflow: hidden;
position: relative;
font-family: serif;
font-size: 20px;
width: 100%;
}
#shape-content:before {
width: 30%;
height: 500px;
float: left;
content: "";
background: url("https://dummyimage.com/200x500/000000/fff") no-repeat;
-webkit-shape-outside: url("https://dummyimage.com/200x500/000000/fff");
}
#shape-content:after {
content: "";
width: 40%;
float: right;
height: 600px;
background: url("https://dummyimage.com/200x500/000000/fff") no-repeat;
-webkit-shape-outside: url("https://dummyimage.com/200x500/000000/fff");
position: absolute;
top: 10px;
right: -100px;
opacity: 0.5;
}
#shape-content {
padding: 10px;
}
<div id="shape">
<span id="shape-content">
Now, the fact is, if it's a woman in front of you that's
writing the cheque, you will not be waiting long. I have noticed that
women are very *fast* with cheques, y'know, 'cuz they write out so many
cheques. The keys, they can never find in their purse, they don't know
where that is, but the cheque book they got that. They never fumble for
the cheque book-- the cheque book comes out of a holster: ["draws" imaginary
book from an imaginary holster] ``Who do I make it out to?... There's my
ID...''. There's something about a cheque that, to a man, is not masculine.
I don't know exactly what it is... I think to a man, a cheque is like a note
from your mother that says ``I don't have any money, but if you'll
contact these people, I'm sure they'll stick up for me... If you
just trust me this one time I don't have any money but I have
these... I wrote on these; is this of any value at all?''
</span>
</div>
Related
I want to display a list of email addresses like this:
a#domain1.com
asd#domain1.com
dsasadsd#domain2.com
gg#domain2.com
cc#g.com
hinxterpexterpoxterfinter#e.com
j#foxyfarmfetched.com
So, first sorted by domain, then by account, and all aligned by the # sign. The sorting part is trivial, but how do I get the addresses to line up like that?
I tried making a <table> and putting the parts in different cells, but the result was that when copy-pasting them there was an extra TAB character:
a #domain1.com
asd #domain1.com
dsasadsd #domain2.com
gg #domain2.com
cc #g.com
hinxterpexterpoxterfinter #e.com
j #foxyfarmfetched.com
Not cool. And for bonus points, it would be nice to make each email address a clickable mailto: link as well, which is impossible if the address is split into two cells.
Is there any other way to achieve this effect, or am I out of luck? I'm fairly proficient at HTML/CSS, but in this case nothing comes to mind.
You can try something like below. It should work fine for the copy/paste and the link too:
a {
display:table-row;
}
a span {
display:table-cell;
text-align:right;
}
<span>a#</span>domain1.com
<span>asd#</span>domain1.com
<span>dsasadsd#</span>domain2.com
<span>gg#</span>domain2.com
<span>cc#</span>g.com
<span>hinxterpexterpoxterfinter#</span>e.com
<span>j#</span>foxyfarmfetched.com
You can also achieve by css position property something like below.
Tested copy/paste on Chrome, FF & EDGE working fine also mailto: link as well.
.links{
width: 100%;
max-width: 1000px;
display: block;
margin: 0 auto;
background-color: #f9f9f9;
text-align: center;
padding: 10px;
box-sizing: border-box;
font-family: Arial;
font-size: 15px;
}
a{
display: table;
white-space: nowrap;
text-align: center;
position: relative;
padding: 4px;
margin: 0 auto;
}
a span{
position: absolute;
}
a span:nth-child(1){
right: 50%;
margin-right: 9px;
}
a span:nth-child(2){
left: 50%;
margin-left: 9px;
}
<div class="links">
<span>a</span>#<span>domain1.com</span>
<span>asd</span>#<span>domain1.com</span>
<span>lucknow</span>#<span>domain2.com</span>
<span>gg</span>#<span>domain2.com</span>
<span>cc</span>#<span>lorem.com</span>
<span>loremispsomdolor</span>#<span>test.com</span>
<span>nameofmail</span>#<span>nameofdomain.co.in</span>
<span>good</span>#<span>hello.in</span>
</div>
I am creating content cards which need to be clickable. Clicking on these cards take you to the page where you can see the full content. Additionally, for some users, the cards also have links inside which go through different pages (like to edit or report). You can see the desired design here:
https://jsfiddle.net/4s8b5kb1/1/ (the card would go to more details page).
Looking through older questions, I came across methods that either make the card div clickable by adding an onClick handler or having a persistent 'View More' link. Ideally, I am want to just use plain CSS without wanting to add onClick handlers that do the job of links, and not have a persistent 'View More' button either.
I have also read of strategies where you create a link within a div and then using z-index you can let it act as the link for the entire div, and having other more specific links have higher z-index.
I have tried it but with not much luck. Here is the code so far: https://jsfiddle.net/4s8b5kb1/1/
Any ideas are much appreciated!
I put position: relative on edit class
.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}
You can check it here:
.parent {
display: flex;
justify-content:center;
align-items:center;
height: 100vh;
}
.card {
height: 200px;
width: 260px;
background: #FFF;
border: 1px solid #FAFAFA;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
border-radius: 20px;
overflow-y: auto;
padding: 2em;
font-family: Courier New;
font-size: 0.7rem;
cursor: pointer;
position: relative;
}
.card p {
z-index: 10;
}
.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}
.view {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0;
}
<div class ="parent">
<div class="card">
<a class="edit" href="#edit">EDIT</a>
<a class="edit" href="#edit">REPORT</a>
<p>
For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us. As
we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with
a finger it would crumble and fall apart. Seeing this has to change a man. When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
</p>
<a class = "view" href = "#view">View</a>
</div>
</div>
I am in NO SHAPE or form a coder, but have made some tweaks to my BigCartel site that is expected to come out in the next few weeks. I have a clothing line, and I wanted enable consumers who have selected a product, to be able to hover over the image of the product to view it magnified... (here is an example from Nike of what I mean: http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220 ) I wanted to know what code to use to make the image/product that a consumer has clicked on and is viewing larger/magnify when hovering over a certain area... I saw some codes uploaded, but SINCE I am not a professional coder, I was wondering WHERE to insert it in the custom coding . I have a CSS option, and HTML and I don't know if I should go to "Products" or the over all coding...(Sorry for the rookie question)...
I also want to know (If I can slide this question in there as well) How to speed up the speed of the slide show on my BigCartel site, and possibly even change it to a dissolve option... And, again, where would I insert that code..
I've made some minor changes on my own, but again, I am NO CODER and there are a few additional tweaks, I would love to make to not make my site so "cookie cutter" The good folks at BigCartel, sent me this link to search and ask questions on. Thanks so much in advance for your help!
Have you tried this this always works for me https://codepen.io/ccrch/pen/yyaraz
JS
$('.tile')
// tile mouse actions
.on('mouseover', function(){
$(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
$(this).children('.photo').css({'transform': 'scale(1)'});
})
.on('mousemove', function(e){
$(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
// tiles set up
.each(function(){
$(this)
// add a photo container
.append('<div class="photo"></div>')
// some text just to show zoom level on current item in this example
.append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
// set up a background image for each tile based on data-image attribute
.children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
})
HTML
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700);
body {
background: #fff;
color: #000;
margin: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
I am attempting to create a business webpage with a two column design. I am trying to have an about us section on one side with some bullets underneath of it. It looks good in the browser in full window view, but when I resize the browser window, my text gets all jumbled and stacked over itself. I am using divs and a container, along with % to place things, but nothing I have tried is working. Any ideas?
Here is the html:
<div class = "aboutuscontainer">
<div class = "abouthead"><h2>About us:</h2></div>
<div class = "aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class = "qualityhead"><h4>Quality:</h4></div>
<div class = "qualityinfo"><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
<br>
<div class = "valuehead"><h4>Value:</h4></div>
<div class = "valueinfo"><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
<br>
<div class = "servicehead"><h4>Service:</h4></div>
<div class = "serviceinfo"><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
And here is the css:
.aboutuscontainer {
position: relative;
top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.abouthead {
position: absolute;
color: yellow;
}
.aboutinfo {
position: absolute;
color: white;
top: 90%;
left: 0px;
line-height: 1.5em;
}
.qualityhead {
position: absolute;
color: yellow;
top: 370%;
left: 2%;
}
.qualityinfo {
position: absolute;
color: white;
top: 370%;
left: 13%;
line-height: 1.5em;
}
.valuehead {
position: absolute;
color: yellow;
top: 570%;
left: 2%;
}
.valueinfo {
position: absolute;
color: white;
top: 570%;
left: 13%;
line-height: 1.5em;
}
.servicehead {
position: absolute;
color: yellow;
top: 790%;
left: 2%;
}
.serviceinfo {
position: absolute;
color: white;
top: 790%;
left: 13%;
line-height: 1.5em;
}
There was enough changes / suggestions that I thought it was worthwhile to create a fiddle for you: https://jsfiddle.net/aaenyenq/
Please note the major revisions to the code:
Rather than absolute, use relative positioning.
Rather than left / top, allow things to flow, and use some widths.
Get the desired left / right arrangement with a method such as display: inline-block or float: left (I tend to prefer display: inline-block).
Simplify the code. Eliminate unnecessary divs (such as around the h2 and h4 elements), and use container classes and more generic markup.
Removed <br> tags. You should never use them for spacing. Use margins / padding instead.
Simplified / revised HTML:
<div class = "aboutuscontainer">
<h2>About us:</h2>
<div class="aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class="listitem">
<h4>Quality:</h4>
<div><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
</div>
<div class="listitem">
<h4>Value:</h4>
<div><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
</div>
<div class="listitem">
<h4>Service:</h4>
<div><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
</div>
Simplified CSS:
.aboutuscontainer {
position: relative;
margin-top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.aboutuscontainer h2 {
color: yellow;
}
.aboutinfo {
color: white;
line-height: 1.5em;
}
.listitem h4 {
display: inline-block;
vertical-align: top;
width: 20%;
color: yellow;
}
.listitem div {
display: inline-block;
vertical-align: top;
width: 78%;
color: white;
}
NOTE: IF you want different spacing for different sections, you can easily just add a class to the listitem div element, then address the different spacing like so:
(Assuming you added a class "service" - <div class="listitem service">):
.listitem.service h4 {
width: 25%;
}
.listitem.service div {
width: 73%;
}
Try not to use position absolute. I fixed some css for you here. I used float left, and % on the width.
https://jsfiddle.net/gefp9bnd/
.qualityhead {
color: yellow;
width: 30%;
float:left;
}
Hope that helps.
I am trying to fix a CSS issue, there's and "i" icon image on which the hovering effect is placed. As the mouse moves over it the tool-tip should appear. But the problem is that tool-tip appears but its fixed on one place there are many "i" icons and as we hover on each due to the tool-tip being displayed in one place, hovering on some "i" images is useless as the tool-tip is not visible. These "i" images are placed in an iframe plus there are many "i" icons so scroll-bar appears so the more bottom of the iframe we reach the tool-tip is not available. Any suggestions and help? Only pure CSS no JS, jquery...says my boss.
The "i" image code:
<div class="sa_statusIn"> Reward Earned
<span id="sa_status8">
<img class="sa_status_tooltip" src="i_image_link.png" alt="help" value="help" width="15" height="15" border="0"><br> Claim Reward <span id="sa_tooltiptxt">Congrats! Another Company system is up & running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.</span></span>
Claim Reward <span id="sa_tooltiptxt">Congrats! Another Company system is up & running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.</span></span>
</div>
And here's the relevant CSS:
.sa_statusIn {
float: left;
width: 29%;
padding: 16px 0 0 24px;
color: #C25A59;
}
img.sa_status_tooltip {
width: 19px;
height: 18px;
position: relative;
top: 4px;
left: 5;
}
img.sa_status_tooltip {
width: 19px;
height: 18px;
position: relative;
top: 4px;
left: 5;
}
#sa_tooltiptxt {
display: none;
background: ffffcc;
margin-left: 145px;
margin-top: 0px;
padding: 3px 0px 9px 3px;
position: absolute;
z-index: 1000;
width: 115px;
height: 10px;
}
Regards.