I am trying to use Material Design Lite library.
What's the best way to put an icon in one of the tabs and have the tab text below it (keeping in mind best practices and scalability).
https://codepen.io/anon/pen/BzAEQb
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<i class="material-icons">person</i><span class="MY-CLASS-2">TAB 1</span>
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
html
<div class="item">
<img src=""/>
<span class="caption">Tab</span>
</div>
css
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 50px;
}
img {
width: 30px;
height: 30px;
background-color: blue;
}
.caption {
display: block;
}
http://jsfiddle.net/ZhLk4/360/
I can do it by structuring one of the divs like so:
<i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span>
And adding the following styles:
.MY-CLASS-1 {
position: relative;
width: 60px;
}
.MY-CLASS-2 {
display: block;
position: absolute;
bottom: -12px;
font-size: smaller;
left: 198px;
}
https://codepen.io/anon/pen/XKEQZr
How can I make this code better overall?
ul,
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
}
ul li a {
background: #efefef;
padding: 0 15px;
text-decoration: none;
line-height: 40px;
display: inline-block;
}
ul li a span {
background: url('http://findicons.com/files/icons/2255/cologne/32/user.png') no-repeat #ccc;
width: 30px;
height: 30px;
margin: 0 15px 0 0;
display: inline-block;
vertical-align: middle;
}
<html>
<head>
</head>
<body>
<ul>
<li><span></span>aaaa</li>
<li><span></span>bbbb</li>
<li>cccc</li>
<li><span></span>dddd</li>
</ul>
</body>
</html>
Related
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
So I've been searching and searching for guidance in this with no avail.
Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar.
My HTML code for the sidebar is this:
<nav class="col-sm-3 ">
<div class="col-sm-12" id="fixed-sidebar">
<!-- <img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"> -->
<ul>
<li class="fuente-fjalla ul-personalizada">Animación</li>
<li class="fuente-fjalla ul-personalizada">Ilustración</li>
<li class="fuente-fjalla ul-personalizada">Interacción</li>
<br>
<li class="fuente-fjalla ul-personalizada">Blog</li>
<br>
<li class="fuente-fjalla ul-personalizada">Acerca</li>
<li class="fuente-fjalla ul-personalizada">Contacto</li>
</ul>
</div>
</nav>
My CSS:
#fixed-sidebar {
position: fixed;
max-width: 20%;
color: white;
}
I have no idea how to get that into a navbar. All I know is how to make the navbar from start, but I don't want that! I don't want any of that fancy animated-overlay-multicolor-accordion-whatever things, please-
Thank you :)
Bootstrap 5 (update 2021)
Some of the classed have change for Bootstrap 5, but the concept is still the same. Here's an updated Bootstrap 5 sidebar to navbar example
Bootstrap 4 (original answer)
It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.
Bootstrap 4 Sidebar switch to Top Navbar on mobile
<div class="container-fluid h-100">
<div class="row h-100">
<aside class="col-12 col-md-2 p-0 bg-dark">
<nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
<div class="collapse navbar-collapse">
<ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Link</a>
</li>
..
</ul>
</div>
</nav>
</aside>
<main class="col">
..
</main>
</div>
</div>
Alternate sidebar to top
Fixed sidebar to top
For the reverse (Top Navbar that becomes a Sidebar), can be done like this example
Big screen:
Small screen (Mobile)
if this is what you wanted this is code
https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview
CSS + HTML + JQUERY :
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #7386D5;
color: #fff !important;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color:white;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style2.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Header as you want </h3>
</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Animación
</li>
<li>
Ilustración
</li>
<li>
Interacción
</li>
<li>
Blog
</li>
<li>
Acerca
</li>
<li>
contacto
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
if this is what you want .
If this isn't a good solution for any reason, please let me know. It worked fine for me.
What I did is to hide the Sidebar and then make appear the navbar with breakpoints
#media screen and (max-width: 771px) {
#fixed-sidebar {
display: none;
}
#navbar-superior {
display: block !important;
}
}
I have a div that surrounds a bootstrap form.
When I define a background-color to that div the background-color is not seen in the form.
ADD: I added the three major divs before the wrapper_form - div so that you get the full picture. Before the first major div there starts the body tag.
This is my code:
.wrapper {
min-height: 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0;
display: inline-block;
}
.main-wrapper {
height: 100%;
overflow-y: auto;
padding: 50px 0 0px 0;
}
.content {
position: fixed;
top: 50px;
bottom: 36px;
left: 0;
right: 0;
padding: 0 15px;
overflow:auto;
}
.wrapper_form {
background-color: yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="main-wrapper">
<div class="content">
<div class="wrapper_form">
<div class="form-group form-inline">
<div class="col-md-4">
<label class="control-label">Input:</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="myInput" id="myInput" value="" />
</div>
</div>
</div>
</div><!-- /.content-->
</div><!-- /.main-wrapper -->
</div><!-- /.wrapper -->
.wrapper_form {background-color: yellow !important;}
Your inside elements are floated - try toggling the float property on the columns and you'll see the styling takes.
If you float the wrapper element it'll take the yellow background.
.form-group:after,.form-group:before{
clear:both;
content:'';
display:table;
}
.wrapper_form {
background-color: yellow !important;
}
Try this
How can I horizontally and vertically center text above font awesome icon?
Example code:
<div>
<i class="icon-circle"></i>
<span>text</span>
</div>
Just set display:table-cell, vertical-align: middle and text-align: center to the div
CSS
div{
display: table-cell;
text-align:center;
vertical-align: middle;
}
p {
<!-- set the paragraph position as absolute -->
vertical-align: bottom;
display: inline-block;
position: absolute;
}
i {
<!-- set the image position relatively -->
vertical-align: top;
margin-top: 6%;
margin-left: 0.7%;
position: relative;
}
<head>
<!--let's assume u chose the fa-camera-retro icon-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="icon_labeled">`
<p>Truc</p>
<i class="fa fa-camera-retro"></i>
</div>
</body>
Is this what you're trying to achieve?
HTML:
<div>
<div class="content">
<span>text</span>
<i class="fa fa-camera-retro"></i>
</div>
</div>
CSS:
div{
width: 200px;
height: 80px;
background-color: #ddd;
text-align: center;
display: table;
}
div .content {
display: table-cell;
vertical-align: middle;
}
div .content span {
display: block;
}
http://jsfiddle.net/63ovh9xk/
Using Bootstrap 2.3 I achieved it like this:
<span class="icon-stack" style="text-align:center;">
<i class="icon-circle icon-2x"></i>
<span class="icon-stack"><strong>Some text</strong></span>
</span>
I want to add my clickable company logo to the header, which will redirect them to homepage. I tried this, but it makes the whole header clickable.
<div id="header">
<a style="display:block" href="profile.php" >
<label>
<img src="images/logo.png" height="50x" width="180px" />
</label>
</a>
</div>
I have added the CSS associated with it:
div#header a
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
Use CSS.
Don't use INLINE CSS STYLE. Instead create css file and paste code and include it in page.
<style type="text/css">
div.header
{
display: block;
height: 40px;
position: absolute;
width: 100%;
}
div#header a img
{
cursor:pointer;
}
.header .logo
{
display: block;
float: left;
padding: 4px 3px;
}
img
{
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
</style>
<div class="header">
<a href="action.php" class="logo">
<img title="Title" alt="Alter" src="img/4.png">
</a>
</div>
Please remove display: block from anchor :-
<div id="header">
<a href="profile.php" ><label><img src="images/logo.png" height="50x" width="180px" /></label></a>
</div>
try this
</style>
div#header
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
</style>
<div id="header">
<a s href="profile.php" > <img src="slider-button-left.png" height="50x" width="180px" /></a>
</div>