I have the following snippet of code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-stack-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
</body>
</html>
This is from a larger project (simplified the code), and I need to have the style="width:auto" on the parent span class.
Without removing the style="width:auto", I am trying to achieve three things:
center the "1" in the box
make the 1 on the same line as "This is a sentence"
make the "This is a sentence appear next to the box instead of overlapping inside it.
This would look similar to the image here, except that the 1 isn't on the same line as "This is a sentence" - would anyone know how to achieve this?
Replace class fa-stack-2x with fa-2x in span.fa
fa-stack-2x class has position:absolute so that text is overlay it
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
Or You can do this without using font-awesome
.square {
display: inline-block;
border: 2px solid #000;
border-radius: 5px;
text-align: center;
width: 20px;
height: 20px;
font-weight: bold;
line-height: 20px;
}
<ul>
<li>
<span class="square">1</span>
This is a sentence.
</li>
</ul>
Related
I'm trying to make button fixed using margin-bottom but it's not working if there is longer title.
My example: photo
<div class="post-detail-container-div">
<br />
<div class="post-content-div">
<h3 class="post-title entry-title">
<?php echo $p['naslov']; ?>
</h3>
<div class="spusti">
<ul class="list-unstyled list-inline post-metadata">
<li>
<i class="far fa-calendar"></i> Mon, 06-09-2018 |
</li>
<li>
<i class="far fa-comment"></i>
Comments(10)
</li>
</ul>
<p class="post-excerpt"> <?php echo $p['uvodni_tekst'];?> </p>
<hr>
<div class="view_detail">
Pročitaj više
</div>
</div>
If you check photo you can see that button's are not in same line because title is longer.
My CSS class view_detail:
.view_detail {
text-align: center;
margin-bottom: 30px;
}
I'm using bootstrap too, so every suggestion is welcome.
The simplest way:
add position: relative; to the main card container
add position: absolute; bottom: 0; to the button container
to avoid the overlap of the button set the margin-bottom of the text part as the height of the button container
I am relatively new to Front-end development and am trying to make a webpage. I am using Materialize.css as my framework. Problems I am facing:
I have placed four custom logos on top of each other to crossfade them. However, the menu that is supposed to appear below them is placed from the beginning of the webpage. I can use margin-top on the menu, but, I want to know an alternate solution that automatically places the menu (id="menu1") just after the images. Please see the images to see what I'm trying to achieve.
Current layout:
What I am trying to achieve:
Also, is there a wrapper class for side-navigation bar in materialize.css
The one I'm using is without any wrapper class (id="menu1") and the second one is hidden and has to be shown using jquery (id="mobnav"). I want a side navigation bar that is always shown. Any help will be greatly appreciated.
The font icons and the text are not vertically aligned. Meaning the home icon and the text "Home" are at different heights. Same goes for all the menu items. How best to address this?
Lastly, I want to center my menu (id="menu1") to the center of the class="col s4 m4 l2". For this, I change the height of the div to 100vh and use the class "valign-center" on the menu (id="menu1"). But, it is not working. Why won't it work?
Am I missing anything?
Jquery code (js.script):
$(window).on("load", function(e) {
$(".pre-loader").fadeOut("slow");
});
$(function() {
$(".button-collapse").sideNav();
});
CSS code(style.css):
.logo img {
position: absolute;
}
.nav1 li {
background-color: yellow;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
}
.flarge {
font-size: 36px !important;
}
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div class="pre-loader"></div>
<section id="home" class="page-section">
<div class="row">
<div class="col s4 m4 l2" style="background-color: teal;">
<div style="position: relative;" class="logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
</div>
<div id="menu1" class="hide-on-med-and-down">
<ul class="nav1">
<li><i class="material-icons flarge valign" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</div>
<nav style="background-color: transparent; box-shadow: 0px 0px 0px 0px;">
<i class="material-icons flarge">menu</i>
<ul class="side-nav" id="mobnav">
<li><i class="material-icons flarge" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</nav>
</div>
</div>
</section> <!--end of home -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<!-- end snippet -->
try to add a class divider underneath it asw shown on the website of materialize.css , i think it might be able to create a large enough spacer underneath the "logo" for your goal that your trying to achieve here. :)
I just wants to display a font awesome icon and text in a line:
<th>
<span>
<a>
<i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
<span> Add Task</span>
</th>
It's working but the problem is =>
If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?
Target the element containing the font-awesome icon. Set position as relative and adjust top value;
a {
text-decoration: none;
font-family: Arial;
color: #333;
}
/*Example 1*/
i {
color: green;
vertical-align: sub;
font-size: 50px;
}
i::before {
font-size: 30px;
}
/*Example 2*/
span {
color: green;
font-size: 50px;
position: relative;
top: 4px;
}
span::before {
font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--Example 1-->
<a href="#">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>
<br>
<!--Example 2-->
<a href="#">
<span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>
Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100
In your case, you just need to use font size property at parent level.
Working example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>
At the bottom of the page, I would like a yellow bar to go across and have social media links and other small details. I want the links to be on the right and small details to be on the left.
HTML:
<footer>
<div class="one-third"></div>
<div class="one-third"></div>
<div class="one-third">
<img src="images/facebook.svg" />
</div>
</footer>
CSS:
footer {
width: 100%;
background-color: #f5c300;
}
.one-third {
float:right;
}
As I was writing this, I figured that the .one-third is incorrect for the CSS part and maybe it should be footer a img {...}.
Update: No even as I did this ^ it still got rid of the background color of the footer. I then threw a BG color on the footer a img style and it only changed behind the icon, not the whole footer.
When you float an element you take it out of the current document flow. What does that mean? Well, as far as container elements are concerned those floated elements don't take up space. If the container element doesn't have any content taking up space (height), then the height of the container is 0 and no background color. Even though floated elements don't take up space, other elements will "see" them and flow around them.
How to fix? Clear the float. The most popular method is to use a clearfix. A clearfix is typically a CSS class. I use the micro clearfix by Nicolas Gallagher.
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<footer class="cf"><!-- floated elements --></footer>
Another clearfix solution is to apply overflow: hidden; to the element containing floated elements. This has some drawbacks as sometimes you don't want to hide content that overflows the parent.
footer {
width: 100%;
background-color: #f5c300;
overflow: hidden;
}
Hi please check the plunker https://plnkr.co/edit/Zmp66hXeiYAhS3VUyl8E?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Basic plunk!</h1>
<!-- Put your html here! -->
<div class="footer">
<div class="pull-right">
<ul class="list-icons">
<li>
<a href="">
<em class="fa fa-twitter-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-facebook-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-google-plus-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-instagram"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-flickr"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-pinterest-square"></em>
</a>
</li>
</ul>
</div>
<div>
<strong>Copyright</strong> Example
</div>
</div>
</body>
</html>
and CSS
/* Put your css in here */
h1 {
color: red;
}
.footer {
background: none repeat scroll 0 0 yellow;
border-top: 1px solid #e7eaec;
bottom: 0;
left: 0;
padding: 10px 20px;
position: absolute;
right: 0;
}
ul
{
list-style:none
}
ul li
{
float:left;
padding-right:20px;
}
So i've been working on a little project, and noticed that i have to do more media queries than i would like to?
From my understanding, bootstrap should be taking care of the responsiveness for me, so i'm sure i have done something wrong. Describing the problem in words is hard, so you can take a look at this image:
Here is how it looks, desktop size:
http://gyazo.com/be1c1d6f7af31adf6cf2c21fe1697f67
Here is how it looks, when scaled down to mobile:
http://gyazo.com/27bb7da880fd7a789e8b57c88e0b9759
As you can see, the content moves OUT of the white box, and doesn't go down to the next line, which i think it should do by default, or am i overestimating Bootstrap?
Here is some of the code that makes the box:
.overview {
height: 500px;
background: white;
margin-top: 40px;
box-shadow: 5px 5px 5px #f2f2f2;
border-left: 2px #f2f2f2 solid;
border-top: 2px #f2f2f2 solid;
border-radius: 7px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 velkommen">
<i class="glyphicon glyphicon-cog topglyph"></i>
<h1>Kontrolpanel</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-4 brugeroplysninger">
<h1><span class="glyphicon glyphicon-user orange"></span> Oplysninger</h1>
<div class="brugeroplysninger-divider"></div>
<ul>
<li><span class="glyphicon glyphicon-envelope orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">mail#mail.com</span>Skift
</li>
<li><span class="glyphicon glyphicon-tag orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-tags orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-asterisk orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">******</span>Skift
</li>
<li><span class="glyphicon glyphicon-picture orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">Billede</span>Skift
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="overview">
fdsfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</div>
</div>
</div>
</div>
What am i doing wrong? Please tell me if i need to show more code, i'm sure i'm doing something wrong.
Or do i just have to keep doing media queries?
Note:
I tried assigning a width to the class overview, no result. THat includes an auto width, a max-width and a fixed width.
Thanks for your time!
It hasn't got to do with Bootstrap. By default browsers don't break words into two parts when they don't fit on a line anymore. In order to be able to do hyphenation properly they would need to have knowledge about the language and how to split words into syllables. Browser support isn't there yet but
hyphens: auto;
should do it in the future. If you don't care where the word is split simply add
word-break: break-all;
to the overview class. And if you simply don't want to show the part of the word that overflows add
overflow: hidden;
to the overview class.
You may also look into the wbr tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
represents a position within text where the browser may optionally break a line