I'm working on a website and I have made an image clickable that takes the user to the same image but the full resolution, now the problem is that it generates empty text which is taking up a line and is quite annoying.
So is there a way to fix this preferably with html and css?
Thanks in advance.
This is the image for the problem with the intruder line highlighted, it is the tag with 4px * 20px size.
and the code is as follows streamlined to the relevant bits of-course;
<head>
<style>
.innerBox{
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:5px;
margin-bottom: 10px;
margin-top: 10px;
overflow: hidden;
}
.innerBox img{
width: 320px;
height: 180px;
float:left;
display:block;
padding-left:0px;
padding-right:10px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
}
.innerBox a{
display:inline;
font-family: Noto Sans;
color: rgb(230,230,230);
border-bottom: solid rgba(0,0,0,0) 3px;
text-decoration: underline;
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
}</style>
</head>
<div class=innerBox>
<img src="images/xx.png"></img>
<p>All the text goes here</p>
<p>and also here</p>
<p>as well as here</p>
</div>
see working fiddle. I have changed the <a> element from display:inline to display:block. Also please note that you don't need a closing tag for <img>.
Related
I am trying to align a button placed inside span, it looks fine in desktop browser but in mobile browser the button is not aligned centred, see attached image
I have simple css attached to the span
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:50px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
and the html look like below
For RIGHT navigation button
<span style='top: calc(45% - 10px); right:2%; position:absolute;' class='navigatebutton preview-next'><button aria-hidden='true' data-icon='\e62d;' class='icon-arrow-right2' style='margin-top: 7px; background: rgba(0,0,0,0);'></button></span>
For LEFT navigation button
<span style='position:relative;top: calc(45% - 10px); left: 2%; class='navigatebutton preview-previous'><button aria-hidden='true' data-icon='\e630;' class='icon-arrow-left2' style='margin-top: 7px; background: rgba(0,0,0,0);' ></button></span>
I am using icommon font for the arrows.
Please help to align the arrows perfectly.
Cheers.
This will work for you https://jsfiddle.net/ezj1Lfbw/11/
change .navigatebutton{display: flex}
change margin-top: 7px; to margin: auto
Thanks for your help.
I figured out the solution, culprit was border-radiuswhich supposed to be half the width to make circle, the value was greater and thus it was failing. So the correct css would be
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
Thanks.
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
I'm new to HTML/CSS and am in the process of learning it in hopes of transferring the knowledge to running an online newspaper that I am the editor of. Currently, I am working on my own website which has an image rollover on it. I have run into the issue where the rollover works perfectly, but I cannot move it left or right or up and down. For each new rollover I add, they will just stack one underneath the other all the way down the page. How do i solve this issue and be able to position the rollover around the page as if it were a normal picture. Below it the code. Thanks in advance.
if you notice any other discrepancies that i need to fix, I would gladly appreciate it.
the body
<div id="Chasity">
<img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" />
and css
body {
{block:IfNotDarkLayout}
width:100%;
height:100%;
color: #333;
color: rgba(0,0,0,.9);
{/block:IfNotDarkLayout}
{block:IfDarkLayout}
color: #fcfcfc;
color: rgba(255,255,255,.9);
{/block:IfDarkLayout}
background: {color:Content Background};
font-family: "Century Schoolbook", Century, Georgia, serif;
text-shadow: 0 0 1px {color:Content Background};
}
.Chasity{
left:300px;
top:400px;
position:fixed;
padding-top:10px;
padding-right:50px;
{CustomCSS}
simply use the div:hover selector to change the image and then you can move it wherever you want, see my example here
html:
<a href="http://google.com">
<div class="box"></div>
</a>
css:
a{
display:block;
padding:0;
width:200px;
height:500px;
margin:auto;
}
.box{
background:url('http://placekitten.com/200/500');
display:block;
height: 100%;
width:100%;
margin:auto;
}
.box:hover{
background:url('http://placekitten.com/200/501');
}
http://jsfiddle.net/KLxUy/
I am trying to make a large button with 2 lines of text that looks something like:
What I want
This is my current JSFiddle showing what I've "accomplished"
I am fairly new to asp.net and programming in general so excuse my poor CSS.
Thanks for any help that anyone can offer.
The HTML:
<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>
The CSS:
.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}
.bigGreenButton a:hover {
background-color:#cccccc;
}
button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Add this to your css:
.bigGreenButton a{
display: inline-block;
...
}
You can see it here.
Change display since there's not a block inside your link and set the width how you want it.
.bigGreenButton a{
...
display: block;
width: 400px;
}
Shown here
My Problem
We are using Sitecore, a content editor is filling in a rich-text box field.
This rich-text box field gives them an option to put in html to have more control over the content styles. So they decide to put in some CSS.
They provide the html and CSS below. The CSS adding images below relating to .button and .button145x28 do not work.
The odd thing is when we do the same method of adding an image using back-ground image for .cutOffCorner it works.
We are trying to see what would be stopping the below from actually working.
The rich text box control is an asp.net control from telerik. We are on Sitecore version 6.4.1 update 3.
My Code
HTML/CSS
Some of you may notice not all the html is there but if I can get the button image to appear on the link below I am pretty sure I can get it working on the rest of them.
<style>
.GenericSignupCallToAction .button a {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_off.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button a:hover {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_on.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button145x28 a {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_off_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button145x28 a:hover {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_on_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignUpCallToAction .cutOffCorner { background-image:url("~/media/Images/Landing-Pages/MyHiFX/corner_left_top.ashx"); position:absolute; top:-1px; left:-1px; background-repeat:no-repeat; height: 14px; width: 12px; }
</style>
<div class="GenericSignUpCallToAction">
<div class="box">
<div class="cutOffCorner">
</div>
<div class="headerText">
<h1>blah</h1><br /><br />
<p>blahblah</p>
</div>
<div class="button">
Proceed
</div>
</div>
</div>
You can override styles by making them more specific.
textarea .GenericSignUpCallToAction is more specific than .GenericSignUpCallToAction alone.
body .GenericSignUpCallToAction is more specific than most other declarations.
See: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Craziest game of spot the difference:
.GenericSignupCallToAction should be .GenericSignUpCallToAction
This resolved this issue.