How can I get the "Run" button below the divs?
Here is the code: http://jsbin.com/ehurit/10/edit
Same code copy-pasted below.
<!DOCTYPE html>
<html>
<head>
<style>
div.boxes { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<div class="boxes"></div>
<div class="boxes" id="mover"></div>
<div class="boxes"></div>
<button class="clearfix" id="run" >Run</button>
</body>
</html>
Try display: block and clear: both in your .clearfix CSS class
Demo
Update: I just checked again and you should probably set the clearfix around your floating divs like this: http://jsfiddle.net/dC7GL/1/
Change your style
.clearfix {
clear:both;
}
Then above the button add a div tag and apply the clear fix style it will push the button down below the boxes
<div class="clearfix"></div>
<button id="run" >Run</button>
Related
I'm learning now CSS.
As a practice, I am trying to create a simple html5 template with the header, section, footer, aside, nav tags - in there correct location.
in every tag area, I put the tag name with a different background and font color.
the problem is, that I can't vertical-align the tag text to the middle.
I tried to create a inner element - span, and set it like this:
span {
height:100px;
line-height:100px;
vertical-align:middle;
}
or like this:
span {
height:100%;
line-height:100%;
vertical-align:middle;
}
but it only sets the text exactly in the vertical middle of a element, when the browser is in a specific size. every change, changes the location of the text.
this is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script>
</script>
<style>
body,html{
height:100%;
width:100%;
}
header{
text-align:center;
color:blue;
background:violet;
height:15%;
}
aside{
text-align:center;
float:left;
width:20%;
height:100%;
display:inline-block;
color:red;
background:lime;
}
section{
text-align:center;
float:left;
width:60%;
height:100%;
display:inline-block;
color:pink;
background:tan;
}
nav{
text-align:center;
float:left;
width:20%;
height:100%;
display:inline-block;
color:cyan;
background:orange;
}
footer{
text-align:center;
color:gold;
height:15%;
background:yellow;
}
span {
height:100%;
line-height:100%;
vertical-align:middle;
}
#center-page{
height:70%;
font-size:150%;
}
</style>
</head>
<body>
<header>
<span>header</span>
</header>
<div id="center-page">
<aside>
<span>aside</span>
</aside>
<section>
<span>section</span>
</section>
<nav>
<span>nav</span>
</nav>
</div>
<footer>
<span>footer</span>
</footer>
</body>
</html>
thanks!
You can try flexbox:
header, aside, section, nav, footer {
display: flex; /* Magic begins */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-width: 0; /* Ignore the width of the content */
}
body, html {
height: 100%;
margin: 0;
}
header, aside, section, nav, footer {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
header {
color: blue;
background: violet;
height: 15%;
}
#center-page {
display: flex;
}
aside {
flex: 2;
color: red;
background: lime;
}
section {
flex: 6;
color: pink;
background: tan;
}
nav {
flex: 2;
color: cyan;
background: orange;
}
footer {
color: gold;
height: 15%;
background: yellow;
}
#center-page {
height: 70%;
font-size: 150%;
}
<header>header</header>
<div id="center-page">
<aside>aside</aside>
<section>section</section>
<nav>nav</nav>
</div>
<footer>footer</footer>
Here's an alternate solution, and is awesome to keep as a reference. Taken from: http://vanseodesign.com/css/vertical-centering/
CSS Table Method
"...vertical-align applies to table cells which leads us to this method. We’ll display our elements as table and table cell and then use the vertical-align property to center the content."
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
I have a menu with four links, as H4 elements, plus an image. They are all in the same div with the class menu. How would I proceed, in CSS, to make all these form one line?
This is my html:
<html>
<head> <title>Testing menu</title> </head>
<body>
<div class="menu">
<img src="img/logo.png">
<h3>Program</h3>
<h3>Informasjon</h3>
<h3>Aktiviteter</h3>
<h3>Kontakt</h3>
</div>
</body>
</html>
What kind of CSS should I use to make all of the items in the div get next to each other?
Demo
use display: inline-block;
css
.menu a {
display: inline-block;
}
Add Following css Rule in your code:
.menu a {
float: left;
padding: 10px;
}
Try using inline-block:
.menu a {
display: inline-block;
width: 200px;
}
<style type="text/css">
.menu a {
display: inline-block;
}
</style>
Here is a Fiddle
css inline-block will help
.menu a{
display: inline-block;
float:left;
}
I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: http://jsfiddle.net/XhwJU/
Here is the markup for reference:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
</head>
<body>
<h1> test </h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /> </div>
<div class="clear"></div>
</div>
</body>
</html>
Here is the styles used:
.inputdata {
border: thin solid gray;
padding: 0.1em;
margin: 0.1em;
vertical-align: middle;
}
div .inputdata label {
width:auto;
float:left;
color: gray;
line-height: 2;
padding-top: .4em;
}
input[type='text']{
overflow:hidden;
line-height: 2;
box-shadow: none;
border:none;
vertical-align: middle;
background:none;
width:100%;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size:0pt;
margin-top: -1px;
}
As you can see in the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width.
appreciate any help
I've done some changes in your CSS and i think i got what you want, here is an example and below HTML and CSS.
CSS
div.inputdata{
border:thin solid gray;
padding:0.1em;
margin:0.1em;
}
div.inputdata label{
float:left;
margin-right:10px;
padding:5px 0;
color:gray;
}
div.inputdata span{
display: block;
overflow: hidden;
}
div.inputdata input{
width:100%;
padding-top:8px;
border:none;
background:none;
}
.clear {
clear: both;
}
HTML
<h1>test</h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<span><input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /></span>
<div class="clear"></div>
</div>
To understand better the reason of overflow:hidden in span you can read this: The magic of "overflow:hidden"
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/