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
Related
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>.
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>
My first image is throwing off everything. Go to my website and see what I mean. The three images on the right should be in the middle of the page and the text should be under the picture. What am i doing wrong?
<div id="img"><img src="images/15442_193554864778_3851953_n.jpg" width="245" height="306" alt="Me"/></div>
<div id="Lefttext"><p>Hello there. My name is Michael Pelvay and I am a Web specialist. A Web Specialist is between a Web Master and a Web Developer. A Web specialtist possesses the skills and knowledge to develop and implement dynamic Web sites, develop content-rich intranets and secure Web communications and web sites. </p></div>
<div id="portfolio"><img src="images/Portfolio.png" width="876" height="148" alt="portfolio" /></div>
<div id="resume"><img src="images/Resume.png" width="750" height="148" alt="Resume" /></div>
<div id="aboutme"><img src="images/About Me.png" width="624" height="148" alt="About Me" /></div>
html, body{
width:auto;
height:auto;
margin:0;
background-color:#121212;
}
#container{
margin:100px 50px 100px 300px;
min-width:500px;
max-width:1300px;
height:652px;
background-color:#26353c;
clear:both;
}
#img{
float:left;
width:245px;
margin:60px 0 0 60px;
}
#Lefttext{
color: #B5D5FB;
position:relative;
float: left;
width: 424px;
top:380px;
left:80px;
}
#portfolio{
float:right;
margin:100px -70px 0 0;
clear:right;
}
#resume{
float:right;
margin:15px -70px 0 0;
clear:right;
}
#aboutme{
float:right;
margin:15px -70px 0 0;
clear:right;
}
#name {
color:#FFF;
float:left;
margin:50px 0px 0px 320px;
}
#nav {
font-size:20px;
float:right;
margin:64px 250px 0px 0px;
}
#nav li{
display:inline;
margin-right:75px;
}
#nav a:link{
color:#C1CECC;
text-decoration:none;
}
#nav a:visited{
color:#C1CECC;
text-decoration:none;
}
#links{
font-size:24px;
}
#links a:link{
color:#C1CECC;
text-decoration:none;
}
You could give your #Lefttext a left: -245px, it wil put your text under the image
I tried this out in Chrome Dev tools, seems to work like you want:
#img{
float:left;
width:245px;
margin:60px 0 0 60px;
position: absolute;
}
Adding position: absolute; to the #img div takes it out of the flow of the document so everything else goes where you want.
If someone would like to explain why they gave a downvote to an answer that works and explains why it works, please feel free to add a comment below. :D
Mike - your challenge is a few different things:
If you float left, you need to clear: left anything you want to show below it.
If you have position relative, you should not specify top. top (as is left, right, bottom) are the appropriate properties for something positioned absolute or fixed.
Here's some suggested edits:
#Lefttext {
color: #B5D5FB;
float: left;
clear: left;
position: relative;
width: 424px;
margin-left: 80px;
}
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
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.