I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}
Related
Hi to all out there familiar with materialize.
I would like to make the divider:
<div class="divider"></div>
Look similar to this:
It is basically the divier with text in the middle.
Does anyone have a solution? If not with material divier even with other html and css would be fine
Thanks
I am a fan of wrapping the text with a div with a fixed height. Then position: relative the text inside the div. See the snippet below.
.wrapper {
background-color: black;
height: 1px;
margin: 32px 0 0;
text-align: center;
}
span {
position: relative;
top: -8px;
padding: 0 15px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
font-size: 1em;
color: #000000;
background: #ffffff;
}
<div class="wrapper">
<span>OR</span>
</div>
I have researched this problem for several days now and have found no solution so far. If this is just a beginners questions with a lot of answers out there I apologise, and please point me in the right directions.
I am trying to developp a "Headline" or "Banner" to be displayed at the top of my website.
I have a colored box, in which i want to display an image (a little off the left side), right next to it some text (the name of the website) and then centered in the middle of the box again some very short text (the name of the document, Home, Contact, things like that).
So it should look like this:
<-space-><-Image-><-Website name-><----------centered text------------------------>
So far whatever I have tried just gets me this:
<-space-><-Image-><-Website name-><-text at the left--------------------------------->
I am currently using a div element for the box with three different elements so i can format them separately in the style sheet. The main problem seems to be that the last header (Centered Text) is just created around the text, and not until the right edge of the box. So aligning left, right or in the center makes no difference.
<div class="box blue-box ">
<img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon">
<h8 class="white-text-header">Website name </h8>
<h9 class="white-text-main-header"> Centered Text</h9>
</div>
with css style sheet:
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon{
width: 120px;
height: auto;
align-items: left;
}
</style>
If anyone knows a better solution, I would be very grateful. Thank you for spending your time helping me.
You've duplicated "white-text-header" class definition. Also , left out "blue-box" class' closing brace. The code should be written as followed.
<style>
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
</style>
h8 and h9 probably aren't the elements you want to be using. Update these and you will get what you want. You need to update your css classes. You have some bad syntax and duplicated names.
.blue-box {
background-color: #401841;
padding: 10px;
border:1px solid white;
border-radius: 4px;
}
.white-text-header {
font-family: Arial;
color: white;
font-size: 24;
vertical-align: middle;
text-align: left;
}
.white-text-main-header {
font-family: Arial;
color: white;
font-size: 24;
display: inline-block;
text-align: center;
}
img.icon {
width: 120px;
height: auto;
align-items: left;
}
Here is the fiddle closer to what you want: https://jsfiddle.net/475sdf9w/26/
h8 and h9 are not standard heading tags. Related question
You can reuse text styling properties by adding the rules to the parent (font-family, font-size, and color.
font-size needs a unit -- 24px
You can create your layout with Flexbox. Learn more here.
body {
margin: 0;
}
.blue-box {
background-color: #401841;
padding: 10px;
border: 1px solid white;
border-radius: 4px;
font-family: Arial;
font-size: 24px;
color: white;
display: flex;
align-items: center;
}
.blue-box img {
/* adds space to the left of the image */
margin-left: 20px;
}
.white-text-main-header {
margin: auto;
}
<div class="box blue-box ">
<img class="icon" src="https://unsplash.it/120" alt="icon">
<h5 class="white-text-header">Website name </h5>
<h6 class="white-text-main-header"> Centered Text</h6>
</div>
On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1
I'm having the following code:
<a class="my-profile" href="link">
<div class="my-picture">[picture]</div>
<div class="my-fields">
<span class="my-name">[name]</span>
<span class="my-medal">[medal]</span>
</div>
</a>
It has the following theming:
.my-profile {
background-color: black;
color: white;
display: inline-block;
height: 35px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.my-picture {
display: inline-block;
padding-top: 5px;
height: 25px;
width: 25px;
}
.my-fields {
display: inline-block;
font-size: 13px;
padding-left: 5px;
padding-top: 8px;
vertical-align: top;
}
.my-medal {
padding-left: 5px;
height: 16px;
width: 16px;
}
I'd like to add some more top padding to the medal field, but when I add padding-top: 5px to the .my-medal class, the name field is moved too.
Why does this happen and how can I prevent it?
Simply set vertical alignment to the top on both the .my-name and .my-medal elements:
.my-name, .my-medal {
vertical-align: top;
}
JSFiddle demo.
(Note that to show this working I've had to also specify display: inline-block as you haven't provided any styling for those two elements in your question).
Every time I include the code for the facebook friends like box the div element box below it goes wacky. I cannot control where its positioned. It either disappears or overlaps a different div. Originally I just wanted specials, events, then fbFriends in a row then the box div below the three divs. I have been trying to wrap the divs to control everything better but am still unsuccessful. Any help would be appreciated
specials events fbFriends
box -------------------box
<div id="specialsWrapper">
<div id="specials" ><p>Featured Specials</p></div>
<div id="events" ><p>What's happening at the hub</p></div>
<div id="fbFriends">
<div class="fb-like-box"
data-href="https://www.facebook.com/pages/********"
data-height="395" data-width="250" data-show-faces="true"
data-colorscheme="dark" data-stream="false" data-header="true" />
</div>
</div>
</div>
<div id="box" ></div>
#specialsWrapper
{
height: 450px;
width: 920px;
color: white;
}
#specials {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 10px 0px 48px;
}
#specials p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#events {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 15px 15px 15px;
}
#events p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#fbFriends {
float: left;
margin: 25px 15px 15px 15px;
width: 250px;
height:390px;
}
#box
{
clear: left;
border: 2px dashed white;
height: 60px;
width: 853px;
color: white;
margin: 25px 15px 15px 48px;
}
Here's anwser for your question
EXAMPLE ON CODEPEN
Your build of these box's is weird thats why I had to use top: 40px; with position: relative;
btw. that's how you do on jsfiddle or codepen exampl, thats all community ask. Spend 5 min for your question isnt much to ask?
hope thats help.
EDIT:
I found what what the issue, you didnt closed specialsWrapper div thats why margin dint work.
I also cancel margin-botton from boxes inside specialWrapper and put overflow: auto to specialWrapper to countheight.
Now top: no need to be writen.
I think what you might want it display: inline-block; but without something to see I can't really know what's going on. And your description isn't enough. Could you post what's going on on js.fiddle.net or give us an example site?