Ok, I have two buttons that need to sit side by side. I got that. But the right 'button' is sitting higher than the left one. Why? I believe that it is because of my right 'button' has two lines of text with it. My proponent will not budge on this button having two lines of text. Does anyone know how to do this better?
I put my code in jsfiddle: http://jsfiddle.net/energeticpixels/k7awcfts/
Here is my code:
<div id='tonyzBTNs'>
<a id='regCourse' class='btn' href='https://cloudlms.slhc.serco-na.com' target='_blank'>Register for Course</a>
<a id='regTest' class='btn' href='https://www.atrrs.army.mil/atrrscc/courseInfo.aspx?fy=2016&sch=910&crs=4E-F33%2f645-F17+(DL)&crstitle=ARMY+ELECTRICAL+EXPLOSIVE+SAFETY+(CERT)&phase=' target='_blank'>Register for Exam<span style="font-size: 10px;"><br />(after completing the course)</span></a>
</div>
And the css:
#tonyzBTNs {
margin-top: 20px;
margin-bottom: 20px;
}
#tonyzBTNs .btn {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#tonyzBTNs #regCourse {
background-color: #9EB95C;
border: 2px solid #708542;
border-radius: 10px;
padding: 10px;
color: black;
}
#tonyzBTNs #regTest {
background-color: #C54F4D;
border: 2px solid #6A4346;
border-radius: 10px;
padding: 1px 10px 1px 10px;
color: white;
display: inline-block;
}
Depending on how the rest of the site is layed out, Using float: left; in your #tonyzBTNs #regCourse will probably solve your issue.
Updated Fiddle
#tonyzBTNs .btn {
...
vertical-align: top;
display: inline-block;
}
Demo
Related
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
I might be missing something basic. It's so simple:
.items {
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
jsFiddle
Moving the class from the anchor to the div will make it (the border) disappear all together.
Well, your <a class="lamgswitch"> does not have any content... The float: left; makes the <div class="items">float out of it...
So try to remove it, and replace it with display: inline-block;, as the div is a block component, and you placed it inside an inline component (a)...
.items {
display: inline-block;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px;
}
.langswitch {
border: 3px solid #86D1DA;
border-radius: 5px;
}
<a href="#" class="langswitch">
<div class="items">Italiano</div>
</a>
Place the <a> tag inside the <div> rather than the other way around.
.items{
float: left;
font-family: 'Arial', sans-serif;
text-decoration: none;
color: black;
font-size: 30px;
margin: 25px 30px 0px 0px ;
}
.langswitch{
border: 3px solid #86D1DA;
border-radius: 5px;
}
<div class="items">Italiano</div>
Hope this helps.
Technically, placing the <a> inside the <div> is the semantically correct way to do this as described in the other answer.
If you really HAVE to do it this way, you need to change the display of the <a> tag from inline to inline-block.
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox
Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.
Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.
My text does not seem to want to go underneath this portion of text!
http://prntscr.com/1x2zju
No matter how hard we try to get it to go under it, it doesn't go below it.
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
float: left;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
float: auto;
}
HTML:
<div id='post'>
<img class='avatar' src='http://cppsgang.com/images/person.png'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
Thanks!
http://jsfiddle.net/QUFx5/
EDIT WITH WORKING
JSFIDDLE
HTML
<div id='post'>
<img class='avatar' src='http://lorempixel.com/output/people-q-c-35-35-9.jpg'>
<p class='name'>Thomas A.</p>
<p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
<a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>
</div>
CSS
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin: 0;
padding-left: 45px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 5px;
padding-left:45px;
margin:0;
}
I have tried with your jsfiddle.net.
This thing worked for me:
.avatar {
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
margin-top: 0;
padding-left: 5px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-left: 3px;
}
I have removed float from name and text class. Also, increased the width & height of avatar to 50px each.
The new code I tried which works according to your requirement:
.avatar {
float: left;
width: 35px;
height: 35px;
border: 1px solid #000;
}
.name {
color: #3B63DB;
font-size: 15px;
}
.text {
font-size: 12px;
color: #000;
font-family: Helvetica, 'SEGOEUIL', sans-serif;
margin-top:-15px;
}