I have 3 spans:
.see-more{
text-align: right;
padding-right: 20px;
display: inline-block;
}
.see-more .see-more-text{
display: inline-block;
padding-top: -2px;
}
.see-more .fa-angle-right{
display: inline-block;
margin-right:-6px;
}
<div class="see-more">
<a href="ground-stabilisation">
<span class="see-more-text">see more</span
<span class="fal fa-angle-right"></span>
<span class="fal fa-angle-right"></span>
</a>
</div>
efects of this code looks like this:
I am trying to lower the angle-right icons so that they are in the middle of the "see more" text, unfortunately in all tries always the whole div is moving , not the elements inside. Any ideas?
Try margin-top :20px (try to set the number as required) in fa-angle-right css
Related
I'm creating the links for the dropdown menu on a navigation bar using links with icons appearing to the left. Currently I'm able to display the links correctly as links, with icons appearing next to the text, however using the styling code I'm currently unable to change the font size or add padding to the text to add more space between the links.
I've included my code below - please note I'm still very much learning html/css so I'm sure this isn't the best way to do it.
.icon a {
float: left;
text-align: center;
padding: 12px;
color: black;
font-size: 50px;
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
.icon a targets any a element that is a descendant of an element that is a member of the icon class.
Your code has one member of the icon class and one a element but the a is an ancestor of the icon, not a descendant.
use a .icon instead of .icon a in your css
a .icon {
float: left;
text-align: center;
padding-right: 30px;
color: black;
font-size: 60px;
}
.icon::before {
content: "$"
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
I am making a webshop and have encountered a sort of weird bug.
I am trying to make a cart "badge" to easily view how many items that are in the cart. It's a responsive site and the badge is located on a a tag with two spans of display: block inside. On the desktop side the badges css looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Which works fine and the badge displays in the upper right corner. However on mobile, the a tags wrapper goes full-width and using the above css results in the badge flying off to the side of the screen.
Thus i wrote the following mobile code:
#media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
However. The top: -90% doesn't register properly.
If i enter the development tools and switch it off and on, it works perfectly. But if i refresh it goes right back down to the bottom of the icon.
JS-fiddle of the offending part: here
I agree with Shahil, you should set the position:relative to the element with the .count class and set position:absolute and top:-5px (let's say) to the .count::after
Like so:
.d-block{
display: block;
}
.d-inline_block{
display: inline-block;
}
.t-center{
text-align: center;
}
.menu{
width:100%;
text-align: center;
}
.count {
position:relative;
}
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: -5px;
right: 0;
}
<div class="col-xs-12 col-md-4 my-auto menu t-right">
<a href="/account/login" class="d-inline_block headerLink">
<i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
<span class="d-block t-center">Min konto</span>
</a>
<i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span>
<i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span>
</div>
This should work on both Desktop and mobile without using #media queries
I don't manage to center the second line of text with the first.
Here is the Demo: https://jsfiddle.net/DTcHh/27036/
HTML
<div id="deal-button">
<a class="btn btn-primary" href="www.yahoo.fr">
<span class="glyphicon glyphicon-star pull-left" aria-hidden="true"></span>
<span style= "font-weight: bold;font-size: 18px;text-transform: uppercase;">Take</span> <br/>
<span style= "font-style: italic">the deal</span>
</a>
</div>
CSS
#deal-button {
position: absolute;
width: 14%;
top: 50%;
right: 2%;
}
#deal-button a {
display: block;
margin-bottom: 10px;
font-size: 12px;
padding: 4px 12px;
white-space: normal;
line-height: 1.2;
}
#deal-button .glyphicon {
top: 8px;//override glitch in glyphicon vertical position
}
Note that I don't want to use a one line with wrap but really cut the first part from the second line with a <br/>. I always want the two components of the text to be split on 2 different lines inside the button. They will after be injected dynamically as text_part1 and text_part2
You can set the left margin on your bottom line.
margin-left: 8px;
Like so: https://jsfiddle.net/7s4cdy2t/
Alternatively set the position of your icon like so: https://jsfiddle.net/5dxjfL4v/
Although you should write it in the css;
<span style= "font-style: italic;padding-left:14%;">the deal</span>
Im wanting it to look like:
[BUTTON]
or
[Button 1] [Button2]
But im not sure how do so.
My code:
HTML:
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
CSS:
#bottom-btn1{
margin-top: 10px;
margin: 20px;
margin-left: 340px;
display: inline-block;
float: left;
}
#bottom-btn2{
margin-top: 10px;
margin: 20px;
margin-right: 40px;
display: inline-block;
float: right;
}
JSFiddle link: https://jsfiddle.net/d2L7ynu3/
Thank you to the people that help me. It means alot :D
So this is a good opportunity to learn in CSS positioning; something I've fought with for years in order to learn. There's two main methods of achieving this effect but they have some gotchas. Using the following HTML (I've taken out the p tags).
Get Started
<span>or</span>
Log In
Sign Up
The inline-block method will work here, but we'll need to make a small change in order to get the links to line up next to each other. inline-block preserves white space, so you'll see a gap between the elements. Adding HTML comments between the elements will remove the white space (or you can just put the elements side-by-side without the line break for readability).
Get Started
<span>or</span>
Log In<!--
-->Sign Up
Now we can add CSS.
a{
display:inline-block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
width:50%;
}
If you didn't put the HTML comments in, you'll notice the sign_up link drop below the log_in because of the hidden white space.
If you go with the float method instead, then you'll need some extra markup.
Get Started
<span>or</span>
<p class="cf">
Log In
Sign Up
</p>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
a{
display:block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
float:left;
width:50%;
}
The cf class stands for clearfix, which is a hack developed to help create height for parent elements with floated children.
The p element is making the buttons to be draw in different lines. You can try
p {
display: inline-block;
}
I suggest to place a selector class in those p so you will not need to overwrite the css for all th p elements
don't forget text-align : center; it saves most of the times.
i just tided up your code.. that might help you improve your coding.. just change the .wrap size if you do any changes on buttons. hope it helps
p, .back, h3 {
text-align: center;
}
.wrap {
margin: 0 auto;
width: 172px;
}
.btn {
float: left;
margin-left: 5px;
}
<p> ← Get Started
</p>
<h3>or</h3>
<p class="wrap">
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</p>
Try this
<div class="buttonbox">
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
</div>
CSS
.buttonbox {
text-align: center;
}
.buttonbox > p {
display: inline-block;
float: none!important;
}
don't call float: left; for those buttons.
HTML:
<div class="wrap">
← Get Started
<h3>or</h3>
<div>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</div>
</div>
CSS:
.wrap {
max-width: 1000px; /* any size you want */
width: 96%; /* 960px */
margin: 0 auto;
text-align: center;
overflow: hidden;
padding: 1%;
}
.wrap h3 {
margin: 10px 0;
}
.wrap a {
padding: 20px 0;
}
.wrap > a {
border: 1px solid #ddd;
display: block;
width: 60%;
margin: 0 auto;
}
.wrap div a {
width: 48%;
float: left;
outline: 1px solid #ddd;
margin: 0 1%;
}
Result looks like this:
[BUTTON]
or
[Button 1] [Button2]
#bottom-btn1, #bottom-btn2{
padding: 10px;
border: solid black 3px;
background-color: #83D8B7;
color: #134A1E;
}
a{
text-decoration: none
}
<br>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
Take a look at this image:
http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png
I want to get the "Test" below Profile, a BR html tag produces the above result and I don't want that.
Heres my code for this:
http://pastebin.com/raw.php?i=hW3jDrLu
<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i>
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span>
I would like the "Test" to be right below the Profile header
It's tough to say without seeing more of your code, but I imagine your best bet is putting the img in one div and the text in another. Then you can have a line break in the text within its div and still have the div to the right of the img.
Here is a mock up of how it should work.
Apparently I have to add the fiddle code here as well:
HTML:
<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div>
<div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div>
CSS:
.imgC{
display:inline-block;
float:left;
}
.textC{
display:inline-block;
float:left;
}
You may also want to preserve their block property by floating them and using the clear attribute (fiddle here):
HTML:
<div id="Container">
<img id="Icon" src="http://goo.gl/OJhO2s"/>
<div id="InfoContainer">
<span class="profile">Profile</span>
<span class="test">Test</span>
</div>
</div>
CSS:
#Icon {
width: 64px;
height: 64px;
float: left;
}
#InfoContainer {
float: left;
}
#InfoContainer span {
display: block;
clear: both;
}
.profile {
font-size: medium;
}
.test {
font-size: small;
color: #444;
}