I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
Related
I would am attempting to take something I've seen before and recreate it with html/css. Here is a mockup I've made in Word.
Almost everything I find is about text inside circles, not an accent behind, like this drawing. I would like to have the circle and the text centered as much as possible.
Here is the best of my attempts: https://jsfiddle.net/FNdXz/559/
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
}
#inner
{
height:200px;
width:200px;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:25%;
border: 1px solid white;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<div id="inner">
</div>
</div>
Obviously, I can worry about fonts and coloring later - but I'm really struggling with the positioning and could use help from a pro.
Creating a circle with svg is straightforward. You can center everything in the container using flexbox.
Then center the svg behind the text using position: absolute and a lower z-index.
#container {
height: 400px;
width: 400px;
background-color: #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#container>div {
z-index: 1;
}
#test {
color: black;
font-size: 50px;
}
#sub-test {
color: blue;
font-size: 30px;
}
svg {
position: absolute;
z-index: 0;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<svg height="200" width="200">
<circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
}
#inner
{
height:200px;
width:200px;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:10%;
border: 1px solid white;
position : relative;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
position : absolute;
margin-top : 100px;
margin-left : 70px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
position : absolute;
margin-top : 160px;
margin-left : 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
<div id="inner">
</div>
</div>
<body>
</html>
Hope this is what you are requesting for
You need to utilize the position and z-index settings. With the position being set to absolute, you can define the margin from the top, right, bottom, and left sides of the parent container. z-index determines what "layer" to appear on - the higher the value, the higher precedence it gets. See the updated CSS here.
#container
{
height:400px;
width:400px;
background-color: #ccc;
display: table-cell;
position: relative;
}
#inner
{
height:200px;
width:200px;
position: absolute;
top: -2%;
left: -2%;
z-index: 1;
background:transparent;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
margin-left:25%;
margin-top:25%;
border: 1px solid white;
}
#test {
position: absolute;
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
top: 30%;
left: 15%;
z-index: 2;
}
#sub-test {
position: absolute;
top: 45%;
left: 15%;
z-index: 2;
color: blue;
text-align: center;
font-size: 30px;
}
Another idea is to simply use radial-gradient:
#container {
padding:50px 0;
width: 400px;
background:radial-gradient(circle at center,transparent 40%,#fff 40%,#fff calc(40% + 1px),transparent calc(40% + 1px)),
#ccc;
display: table-cell;
}
#test {
color: black;
text-align: center;
vertical-align: middle;
font-size: 50px;
}
#sub-test {
color: blue;
text-align: center;
font-size: 30px;
}
<div id="container">
<div id="test">
Hello World
</div>
<div id="sub-test">
Test, this is only a test
</div>
</div>
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
How do I make two (or more) floating divs appear like "big buttons" and let them float and be leveled? My problem is that the boxes are "partially leveled"... with one slightly lower than the other. I have tried to use float: left on the adminBox, but then they grow outside the container. Can anyone help me?
I have used this HTML code:
(http://jsfiddle.net/jf936/13/)
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
and this style:
.container{
background-color: light-blue;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
float: none;
text-align:center;
}
This has nothing to do with float, the issue is that you are using display: inline-block; and hence the element are aligned to the baseline, inorder to fix this, you need to use vertical-align: top;
Demo
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
vertical-align: top; /* Add this here */
}
Note: You don't have to use float: none; as nothing is floated here, so you can get rid of those unused properties.
Here you go.
WORKING DEMO
The CSS Code Change:
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: inline-block;
margin: 5px;
float:left;
}
Hope this helps.
Maybe this code will be helpful for you:
jsfiddle
.container{
background-color: light-blue;
overflow:hidden;
}
.adminBox{
height: 200px;
width: 200px;
background-color: green;
color: white;
border-radius: 7px;
padding: 7px;
display: block;
margin: 5px;
float:left;
}
.adminBox h2{
color:white;
font-size:20px;
text-align:center;
}
.adminBoxLargeContent{
font-size: 70px;
text-align:center;
padding: 0;
margin: 0;
line-height: 1;
}
.adminBox .adminBoxSmallContent{
text-align:center;
}
<div class="container">
<div class="adminBox">
<h2>Manage users</h2>
<div class="adminBoxLargeContent" data-bind="text: usersCount"></div>
<div class="adminBoxSmallContent">Registered users</div>
</div>
<div class="adminBox">
<h2>Manage templates</h2>
<div class="adminBoxLargeContent" data-bind="text: templateCount"></div>
</div>
</div>
I am trying to make a simple tile grid. Here is my HTML:
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>
And CSS:
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
And the result is:
My question is how can I prevent the third div to be inserted in new row and instead fill the gap?
Live demo in jsfiddle.
Split layout in columns if you don't need to expand items in columns, if not use something like masonry. In simple CSS you would probably ended with dozens with wrappers and javascript either way or with one item solutions.
If you change the .tile50x50 to float:right, it works out, but I'm not sure how much this could really be extended to include more tiles properly.
This should work for modern browsers (includes IE10) - http://jsfiddle.net/yqkt8/
Instead of float, display inline-block, then use css columns.
.tiles {
width: 100px;
-webkit-column-width: 50px; -moz-column-width: 50px; column-width: 50px;
-webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;
}
.tile25x50 {
display:inline-block;
width: 50px;
height: 25px;
background-color: red;
}
.tile50x50 {
display:inline-block;
width: 50px;
height: 50px;
background-color: blue;
}
change to float:right the float value of .tile50x50
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
You CAN use Float: right; but that would flow differently on different browsers. I would use a table with one row and multiple columns
<table>
<tr>
<td><div class="tile25x50">1</div></td>
<td><div class="tile50x50">2</div></td>
<td><div class="tile25x50">3</div></td>
<td><div class="tile50x50">4</div></td>
<td><div class="tile50x50">5</div></td>
</tr>
</table>
Ive included an edit here
EDIT:
Well if you do not want to use tables, try an un-ordered list here.
I would suggest to change the style of .tile50x50 from float left to float right.
I just fiddled around on your fiddle file and I was able to align the divs in a couple steps.
First place the div 3 between the other two divs
Now for the CSS:
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
clear: both; /* Clears both sides so the div 3 drops down */
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin-top: -25px; /* Pushes this div back up to align with the other one */
}
There is an easier/more flexible way to do this and that would be:
(This option also removes float on the 25X50 tiles making it easier to stack.)
<div class="your-class-here"> <!-- this div will hold the two in there without having to do negative margin values -->
<div class="tile25x50">1</div>
<div class="tile25x50">2</div>
</div>
<div class="tile25x50">1</div>
Simply change tile50x50 class from float:left; to float:right;:
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
DEMO:
http://jsfiddle.net/dirtyd77/LAR3x/
You have to change the .tile50x50 css class value float:left to float:right.
Here is the complete code -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>
</body>
</html>
Please don't use Jquery or hacks like using negative margins. HTML/CSS will be just fine :)
Depending on any further layout requirements, you can do one of two things:
1) Simply remove the 50px block from the ".tiles" container, float each of them left and change the 100px width constraint of ".tiles" to 50px
fiddle.net/HHeSW/3/
HTML
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile25x50">3</div>
</div>
<div class="tile50x50">2</div>
CSS
.tiles {
float: left;
width:50px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float:left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
2) Add a container div for each column. You can reuse the same column class for these and even drop the width constraints on ".tiles" and the column class for future flexibility :)
http://jsfiddle.net/wurwH/3/
HTML
<div class="tiles">
<div class="column">
<div class="tile25x50">1</div>
<div class="tile25x50">3</div>
</div>
<div class="column">
<div class="tile50x50">2</div>
</div>
</div>
CSS
.tiles {
width:100px;
}
.column{
float:left;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
clear:left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
}
i would suggest you two jQuery plugins:
http://masonry.desandro.com/
http://isotope.metafizzy.co/
EDIT:
Check out my cssdeck: http://cssdeck.com/labs/ojo7uw0l
I write HTML and CSS for this solution. I don't use table layout, float: right or position: absolute.
HTML
<h1>Example 1</h1>
<div class="tiles">
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
</div>
<h1>Example 2</h1>
<div class="tiles">
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
</div>
CSS
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
margin: 40px 0;
}
.tiles {
width: 400px;
overflow: hidden;
}
.tile {
text-align: center;
float: left;
border: 1px solid #f0f0f0;
}
.tile--one {
background-color: rgba(255, 20, 20, .6);
width: 200px;
height: 100px;
}
.tile--two {
background-color: rgba(20, 20, 255, .6);
width: 200px;
height: 200px;
}
.title--modified {
margin-top: -100px;
}
I hope it can help you. This is demo
Demo
I can't actually believe people here didn't figure this out. How on the earth's sake can 3 divs with a sum width of 150px show up in a single row that accepts a width of 100px. You simply need to adjust the width in the .tiles class.
.tiles {
width :150px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
The following is my CSS code:
<style type="text/css">
body {
background-color:#FFF;
font-weight:bold;
font-size:12pt;
font-family:Arial,sans-serif;
}
.container {
width: 800px;
margin: 0 auto;
}
#header {
text-align: left;
padding-top: 220px;
font-size: 60pt;
}
#subheader {
text-align:left;
font-size: 15pt;
color: #666;
margin-top: -5px;
margin-bottom: 15px;
}
#email {
width: 165px;
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
border: 2px solid;
color: #666;
border-color: black;
}
input[type=submit] {
height: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #000;
border-color: #fff;
color: #fff;
}
#socialMedia {
padding-top: 60px;
text-align:center;
}
#video {
padding-left: 600px;
margin-top: -260px;
}
</style>
The HTML divs are divided as follows:
<div class="container">
<div id="header">
<Content>
</div>
<div id="subheader">
<Content>
</div>
<Form Input Field>
<div id="video">
<Embedded Video>
</div>
<div id="socialMedia">
<Social Media Image Links>
</div>
</div>
</body>
</html>
The issue I'm having with this is that while the page attempts to center itself with browser rescale, only the left side of the content is really adjusting. The right side essentially hangs on to the edge of the page, thereby not centering it.
Any suggestions? I tried this using Chrome.
This may be the problem:
#video {
padding-left: 600px;
margin-top: -260px;
}
I'm not sure what size the video container is but maybe this is why it is not centering properly with everything else.
When you use this CSS instead, what happens?
#video {
text-align:right;
margin-top: -260px;
}
Maybe I'm misunderstanding what the problem is. Could you send a screenshot of the issue?
Try setting a max-width on the container:
.container {
max-width: 800px;
margin: 0 auto;
}
Here's a demo: http://jsfiddle.net/Ltf5U/