I'm trying to align the tab divs horizontally, but It doesn't work and I can't find my fault?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
</div>
</body>
</html>
style.css:
#tabs {
overflow: hidden;
}
#tab {
float: left;
}
You've mixed up classes and ID's. Modify your css to this:
.tabs {
overflow: hidden;
}
.tab {
float: left;
}
#tab should be .tab, according to your HTML
You have to float your class .tab instead of an id. Also, when you float elements you need to clear at one point. Like this:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#tabs {
overflow: hidden;
}
.tab {
float: left;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/hM62P/
You are using #tabs and #tab, which is not at all available in your HTML. # refers to ID. You need to use .tabs and .tab which refers to a class.
.tabs{
width:100%;
border:1px solid red;
}
.tab{
float:left;
}
Demo Link
Use this CSS,
.tabs {
width:100%;
}
.tab {
width:25%;
float:left;
}
The problem is that you are using #tab instead of .tab. Here id is not used. # is for id
Related
Hi I try to hide one of the chart from main page and want to show it at the time of print.But it is not working for me.
HTML:
<div class="bar-chart">
<div class="canvas-holder3"><canvas id="resultsChart7"></canvas></div>
</div>
CSS:
.bar-chart {
display: none;
}
#media print {
body,
html,
#wrapper {
width: 100%;
}
.bar-chart {
display: block;
visibility: visible;
}
}
It's working fine like this. you can just follow this pattern.
<!DOCTYPE html>
<html>
<head>
<title>Show element at print</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.print {
display: none;
}
#media print {
.print {
display: block;
}
}
</style>
</head>
<body>
<h1 class = "print">This section would not appear on screen but only in print.</h1>
<p>Show something during print.</p>
</body>
</html>
you need to add javascript for that.
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
html...
<div id="main">
<div class="news"></div>
</div>
How could I assign css for #main id which has .news class with pure css ?
Is there something like #main:only(.news){...}?
You could keep using the #main id and then apply a class to the same element with it's own styles that could override the default #main styles, something like
<div id="main" class="news">
</div>
Then you could write a css rule like this
#main.news {
/* your css rules go here */
}
I often use a body class to allow me to distinguish a common id from one page to another
<body class="news-page">
<div id="main">
<div class="news">
then your css can do thus
.news-page #main {
background: blue;
{
.another-page #main {
background: green;
}
.news {
background: red;
}
How about something like this? You can target id="main" with #main and class="news" with .news.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css"
#main { color: red; }
.news { color: blue; }
</style>
</head>
<body>
<div id="main">
This is #main
<div class="news">
This is .news
</div>
</div>
</body>
</html>
try a parent child relationship something like
#main > div {
color:pink;
}
I have some text and <span> tag, which are inside a <div>.
<span> is float: right; I need the text to be on the left side and <span> on right side.
In every browser it displays perfectly except ie7. How can I fix this bug?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Testing page</title>
</head>
<body>
<div style="border:2px solid #000; display:inline;">
welcome<span style="float:right"> demo</span>
</div>
</body>
</html>
move span before text, this should help.
Make span as block element and move it.
I.e.
span{
display: block;
float: right;
}
Would it be possible to enclose the text in a <p> and have that display: inline?
User the following css it will work. DEMO LINK
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
}
.container {
border:2px solid #000;
padding:20px;
overflow:hidden;
height:100%;
}
.container span {
display:inline-block;
*float:left;
}
How do i left and right align text on multiple lines, e.g.:
┌─────────────────────────────────────┐
│ Tums 29 │
│ Oxydativedecarboxilization ATP │
│ appdata C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘
e.g.:
Note: A single-line variant of this question has been asked before
Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
<UL>
<LI class='line1'><P class='left'>Tums<P class='right'>29
<LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
<LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</UL>
<DIV>
<P class='left'>Tums<P class='right'>29
<P class='left'>Oxydativedecarboxilization<P class='right'>42
<P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</DIV>
</BODY>
</HTML>
Which renders incorrectly as:
Desired rendering:
Bonus reading
HTML/CSS - Right and left align on the same line?
Cross-browser CSS for left align and right align on the same line
You just have to clear your floats. http://jsfiddle.net/P7KuB/2/
<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.wrap { clear:both; }
<DIV>
<P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
See: http://jsfiddle.net/thirtydot/HkybR/2/
HTML:
<div class="info">
<div>
<span class="left">Tums</span><span class="right">29</span>
</div>
<div>
<span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
</div>
<div>
<span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
</div>
</div>
Could probably be more semantic.
CSS:
.info {
margin: 16px;
padding: 8px;
background: #fff;
float: left;
font-size: 21px;
clear: both;
}
.info > div {
overflow: hidden;
text-align: right;
}
.info .left {
float: left;
padding-right: 10px;
}
<UL style="list-style-type: none;">
<LI class='line1'>Tums<div class='right'>29</div></LI>
<LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
<LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>
Renders as...
You may also need to change the margins of the UL element.
EDIT: I guess the clear method is a more elegant solution!
Your test case was way too complicated. Here is a working multi-line version:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
</DIV>
</BODY>
</HTML>
CSS add
p, li { overflow:hidden; }
Example : http://jsbin.com/asulih/