How can I create an icon and text in same div like table format
Tags: html,css,framework7
Problem :
I am using Framework 7. I need to create a div with this format.
I have the icon of height 80px x 80px and I can use it like this.
<i class="icon icon-clock-large"></i>
I have absolutely no idea of css. I tried using columns but they create a problem on small screen. How can I achieve this?
Solution :
Use Below code
.container {
padding: 10px;
width: 200px;
color: #09cd68;
background: #262223;
display: block;
font-family: verdana;
height: 50px;
}
.left{
float:left;
}
.clr{
clear:both;
}
.loadingtext{
width: 140px;
margin: 4px 0px 0px 15px;
}
.pleasewait{
font-size:13px;
}
.processing{
text-transform:uppercase;
font-size:20px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="left">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div class="left loadingtext">
<div class="pleasewait">Please wait<div>
<div class="processing">PROCESSING</div>
</div>
<div class="clr"></div>
</div>CSS Howto..
Old way: Use a table with 1 row (tr) and 3 cells (td), put your DIVs in those cells, make sure the cells are valign=top. People that shun table layout...
It is possible use transition #button { background-color: red; width: 100px; height: 50px; display: block; transition:0s 1s; } #button:active { background-color: green; transition:0s; } <!DOCTYPE html> <html lang="en"> <head> <meta...
Add the User Agent to the <html> element with a tiny bit of JavaScript: var doc = document.documentElement; doc.setAttribute('data-useragent', navigator.userAgent); IE 10's User Agent string is: Mozilla/5.0 (compatible; MSIE 10.0;...
Option 1 If page should be without any layout (which includes css and js), you can do something like this: class MyAwesomeController < ApplicationController layout false end Option 2 If...
One way to do this is to: Find the offending <link> using the constant part of the text in the href. Record that link's href. Delete that link. Use GM_xmlhttpRequest()...
If you want (true) italic, you need to specify an italic typeface. Your @font-face rules now refer to normal (regular) typefaces only.
Try this -> Working Demo I have put the settings and the register on a div and added float:right to push it to the right. If you want a image...
Try this out fiddle. HTML <ul class="mainmenu"> <li><a href=#>Test1</a> <ul class="submenu"> <li><a href=#>Test1</a></li> <li><a href=#>Test2</a></li> <li><a href=#>Test3</a></li> </ul> </li>...
I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this: ol { counter-reset: foo; display: table;...
You can use simply toggle() to view the dropdown :) I want to be able to click on .logo and have the ul dropdown Use this : $('.logo').click(function () {...
You can use following code to achieve what you want $(window).bind("load", function() { // code here });...
Your problem is here: #tabs #current a{ background:#f8f8f8; height:60px; position:relative; top:-4px; padding-top:4px; border-left-width:1px; color:#111; -webkit-border-radius:3px 3px 3px 3px; -moz-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px; margin:0 0 0 -1px;...
You can revert to the default behavior by setting display: '' $('.divDash').children('span').css('display', ''); Demo: Fiddle...
for block elements <textarea style="width:100px; word-wrap:break-word;"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </textarea> for inline elements <span style="width:100px; word-wrap:break-word;...
The selector would be label[for=email] { /* ...definitions here... */ } It's an attribute selector. Note that some browsers (versions of IE < 8, for instance) may not support attribute...
You'll have to check if it works in IE etc: <button type="submit" class="buttonR"> <span class="buttonL">Save Changes</span> </button> I try to avoid the button element, but it may be of help...
try following: #nav li:hover a{ color: #000000; } http://jsfiddle.net/zainshaikh/Hbf9D/3/...
I assume that you cannot manually alter the html and you want to add a specific class on a click event.I dont think there is a css method to add...
You can do it pretty easily by wrapping your #banner inside your #content container: <div id="content"> <div id="banner"></div> <p>Your content</p> </div> Then in your CSS, you have to explicitly set...
I think it should work like that, just set the sources for the two image elements: <html> <body> <style> li > img{ display:none; } li:hover img { display:inline-block; } a{...
Like this: .newsletter .newsletter-submit:hover { color: black;/*Or whatever Color*/ } ...
You can use a dev tool (like the one in chrome) and see the properties for a <p></p>, however if you're just going to use it as a <p>.. you...
There is no selector for previous element in css but you can change the order of the elements and use adjacent sibling selector: html <div class='test'>div here</div> <button id="sendBtn">hello</button> css...
You probably don't want fixed elements, but it is one way of making elements full width without changing the behaviour of it's parents. Note: similarly to absolute positioning, the elements...
@ Claudiu Yes it should be comment, but i dont have enough points to add comments div.btn2 { width: 20px; display: inline-block; color: white; font-weight: 100; text-align: center; cursor: pointer;...
You can use display: inline-block; instead of display: block; in every class for the a elements. You can also add vertical-align: middle to have the links centered in the h1...
Use the style property to set the style in javascript. LoadingImg.style.display = "block"; ...
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to...
Put the get command into a function fired by the load event of the stylesheet link. Maybe something like $('head').append( $('<link rel="stylesheet" type="text/css" />') .attr('href', 'css/profile_info.css').load(function(){ $.get( '/ajax/controllers/profile_info.php', {id: user_id},...
try this : .shape { width: 200px; height: 70px; background: #000; margin: 50px; position: relative; } .shape:before { display: block; content: ""; height: 0; width: 0; border: 50px solid #f00;...