How to move
<div class="rate1"></div>
<div class="info"></div>
<div class="rate2"></div>
to center of div class="bottom" ?
.bottom {
float: left;
width: 100%;
border: 1px solid #ccc;
}
.rate1 {
width: 70px;
height: 70px;
border-radius: 70px;
border: 5px solid #f0f0f0;
float: left;
box-shadow: 1px 1px 1px 0px #e9e9e9;
background: url(http://web.arjentienkamp.com/codepen/tinder/delete.png);
margin-left: 4px;
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
.info {
width: 40px;
height: 40px;
float: left;
}
.rate2 {
width: 70px;
height: 70px;
border-radius: 70px;
border: 5px solid #f0f0f0;
float: left;
box-shadow: 1px 1px 1px 0px #e9e9e9;
background: url(http://web.arjentienkamp.com/codepen/tinder/heart.png);
margin-left: 4px;
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
<div class="bottom">
<div class="rate1"></div>
<div class="info"></div>
<div class="rate2"></div>
</div>
Use flexbox
.bottom{
width: 100%;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.rate1{
width: 70px;
height: 70px;
border-radius: 70px;
border: 5px solid #f0f0f0;
box-shadow: 1px 1px 1px 0px #e9e9e9;
background: url(http://web.arjentienkamp.com/codepen/tinder/delete.png);
margin-left: 4px;
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
.info{
width: 40px;
height: 40px;
}
.rate2{
width: 70px;
height: 70px;
border-radius: 70px;
border: 5px solid #f0f0f0;
box-shadow: 1px 1px 1px 0px #e9e9e9;
background: url(http://web.arjentienkamp.com/codepen/tinder/heart.png);
margin-left: 4px;
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
}
<div class="bottom">
<div class="rate1"></div>
<div class="info"></div>
<div class="rate2"></div>
</div>
You can do this easily with flexbox :
.bottom {
display : flex;
justify-content : center;
}
You should also consider to remove the float : left; in the inner divs.
You can also check the css-tricks's centering guide for other use case.
Related
For a current project of mine, I'm working on a website for a clan of sorts. They've asked me to create a grid of games that they play, and I seem to be struggling with that.
Each individual div considsts of a background-image and a p element for the title of the game. Currently, for every different game, I have to create a new div and a new class in my style sheet, and I only end up changing the left-margin a bit and changing that background image's filepath. It feels like a bit of a waste of time to me.
The code is as follows:
(HTML)
<div id="content" align="center">
<div class="content-box">
<div class="content-box-game-one">
<p>Just Cause 2</p>
</div>
<div class="content-box-game-two">
<p>War Thunder</p>
</div>
<div class="content-box-game-three">
<p>Borderlands 2</p>
</div>
<br />
<div class="content-box-game-four">
<p>Heroes and Generals</p>
</div>
<div class="content-box-game-five">
<p>Grand Theft Auto V</p>
</div>
<div class="content-box-game-six">
<p>Dirty Bomb</p>
</div>
<br />
<div class="content-box-game-seven">
<p>PayDay 2</p>
</div>
<div class="content-box-game-eight">
<p>Team Fortress 2</p>
</div>
<div class="content-box-game-nine">
<p>Coming soon...</p>
</div>
</div>
(CSS)
#content {
margin-top: 3px;
}
.content-box {
width: 1150px;
height: 100%;
}
.content-box-game-one {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://i.imgur.com/ZZtELB6.png');
background-size: 400px;
}
.content-box-game-two {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://war-thunder-hack.marioapps.net/assets/cheatmp/images/background.jpg');
background-size: 400px;
}
.content-box-game-three {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
background-size: 400px;
}
.content-box-game-four {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://www.gamewallpapers.com/previews_480x300/wallpaper_heroes_and_generals_01.jpg');
background-size: 400px;
}
.content-box-game-five {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/audio/video/2012/11/15/1352984366518/Grand-Theft-Auto-V-005.jpg');
background-size: 400px;
}
.content-box-game-six {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('https://metrouk2.files.wordpress.com/2012/11/article-1354195970386-16454a86000005dc-11033_636x353.jpg');
background-size: 400px;
}
.content-box-game-seven {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-image: url('http://www.gamechup.com/wp-content/uploads/2013/08/payday-2-featured-1.jpg');
background-size: 400px;
}
.content-box-game-eight {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('https://upload.wikimedia.org/wikipedia/en/5/59/TF2_Group.jpg');
background-size: 400px;
}
.content-box-game-nine {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 20px;
background-image: url('http://www.exoticindia.com/religious/sfa47.jpg');
background-size: 400px;
}
.content-box p {
margin-top: 80px;
font-family: Lobster;
font-weight: bold;
font-size: 30px;
color: white;
}
Is there anyway I can just create one class on my stylesheet and have it so that the background image will change? Any other ways around this problem?
Thanks!
Since all other properties are same other than background-image you can create one general class like:
.content-box-game {
border: 3px solid black;
border-radius: 5px;
margin-top: 20px;
width: 300px;
height: 200px;
float: left;
margin-left: 80px;
background-size: 400px;
}
Then you only need to specify a background-image property in your other classes.
.content-box-game-one{
background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
}
Add both classes to your div
<div class="content-box-game content-box-game-one">
<p>Borderlands 2</p>
</div>
When I adjust the width of the window
I want to A B C Block sequentially arranged vertically down,
I tried for a long time, may I ask how to solve, thank you help
like below ....
A
B
C
div#menu {
border: 1px solid red;
padding: 7px 7px 7px 7px;
}
div#navigation {
border: 1px solid black;
background: #A9F5A9;
height: 495px;
margin: 2px 2px 2px 2px;
float: left;
text-align: center;
line-height: 250px;
font-size: 100px;
width: 31%;
}
div#content {
height: 495px;
border: 1px solid black;
background: #F2F5A9;
margin: 2px 2px 2px 2px;
width: auto;
text-align: center;
line-height: 500px;
font-size: 100px;
margin-right: 33%;
}
#wrapper {
float: right;
width: 100%;
margin-right: -33%;
}
div#footer {
border: 1px solid black;
background: #81F7F3;
color: #000;
height: 50px;
margin: 1px 1px 1px 1px;
text-align: center;
line-height: 50px;
font-size: 50px;
clear: both;
width: auto;
}
<div id="menu">
<div id="container">
<div id="wrapper">
<div id="content">A</div>
</div>
<div id="navigation">B</div>
<div id="footer">C</div>
</div>
</div>
i think you can try this one
div#menu {
display: table-row;
}
I would like to a 4 blocks layout like this:
I've been trying things with float but I really don't master it.
How can I do that ?
Thanks
My HTML code:
<div id="colonne_gauche">1</div>
<div id="colonne_gauche2">2</div>
<div id="colonne_droite">4</div>
<div id="colonne_centre">3</div>
My CSS code:
#colonne_gauche
{
margin-top: 5px;
-float: left;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: red;
}
#colonne_gauche2
{
float: left;
margin-top: 5px;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: orange;
}
#colonne_centre
{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
width: 310px;
height: 295px;
border: 1px solid #818181;
background: green;
}
#colonne_droite
{
float: right;
margin-top: 5px;
width: 220px;
height: 295px;
border: 1px solid #818181;
background: blue;
}
I just played a little with the floating and see what that does.
This should help you: DEMO.
HTML:
<div id="header">Header</div>
<div id="stackleft">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="stackright">
<div id="three">3</div>
<div id="four">4</div>
</div>
CSS:
#header {
width: 960px;
padding: 50px 0px;
color: black;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#one {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#two {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#three {
width: 310px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#four {
width: 220px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#stackleft, #stackright {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/xam558e3/
Using DIV's inside of other DIV's you can easily control how they appear, and where they appear. You should look up the box model, it may shed some light for you on this.
<div style="width:310px">
<div style="width:303px; height: 100px; background-color: #6495ed;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>
I'm trying to make it so the boxes are next to each other, but when I add another box it goes to the bottom. I'm fairly new to html and css, how would you do that? If you could code that part for me and explain it, I'd be really grateful.
Image:
http://i61.tinypic.com/9lj0ox.png
<div id="leftside">
<div id="portrait"></div>
<div id="leftbox"><b>About Me</b><p>test</p></div>
<style>
#leftside {
position: fixed;
margin-left: 0px;
top: 125px;
width: 220px;
height: 485px;
padding: 20px;
background: rgba(255,255,255,0.5);
background-repeat: repeat;
background-attachment: fixed;
border: 1px solid #000;
border-radius: 5px;
}
#portrait {
margin-left: 0px;
width: 200px;
height: 200px;
padding: 10px;
background: url(http://i861.photobucket.com/albums/ab179/treeskywind/profile/kidosmall2_zps57444730.png );
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
}
#leftbox {
height: 230px;
width: 200px;
margin-left: 0px;
margin-top: 20px;
background-color: #6855A7;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
font-family: Century Gothic;
text-align: justified;
overflow: auto;
}
</style>
</div>
<div id="rightside">
<div id="box1"><b>Links</b></div>
<div id="rightbox"><b>My Interests</b></div>
<div id="box2">test</div>
<style>
#rightside {
position: fixed;
margin-left: 0px;
top: 125px;
width: 600px;
height: 485px;
padding: 20px;
background: rgba(255,255,255,0.5);
background-repeat: repeat;
background-attachment: fixed;
border: 1px solid #000;
border-radius: 5px;
margin-left: 280px;
}
#box1 {
margin-left: 0px;
width: 200px;
height: 160px;
padding: 10px;
background: #6855A7;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
}
#rightbox {
height: 260px;
width: 200px;
margin-left: 0px;
margin-top: 20px;
background-color: #6855A7;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
font-family: Century Gothic;
text-align: justified;
overflow: auto;
}
#box2 {
width: 200px;
height: 160px;
padding: 10px;
background: #6855A7;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
margin-left: 250px;
}
</style>
</div>
you can use:
display: inline-block;
btw put your above your page html!!
I have a design question.
I need to create a progress bar for a video player.
I have a div container (id videoManager) with all the div about the PLAY, the STOP, the progress bar, the VOLUME, other buttons, all one beside the other (floating left).
i would like the div of the progress bar (id playerSlider) resizes depending on the remained space. i wrote down this code, but if use "width: 100%;" for this div, it doesn't get the remained space, but the 100% of the container.
suggestions?
HTML:
<div id="videoManager">
<div id="playpauseCommand">Play</div>
<div id="stopCommand">Stop</div>
<div id="playerSlider">
<div id="objSlider"></div>
</div>
<div id="timeElement">10:12:12</div>
<div id="volumeSlider"></div>
<div id="displayCommand">Command</div>
</div>
CSS:
div#videoManager{
margin-top: 30px;
width: 980px;
height: 44px;
background: transparent url('bg.jpg') center center repeat-x;
position: relative;
color: #fff;
}
div#playpauseCommand, div#stopCommand{
width: 44px;
height: 44px;
float: left;
border-right: 2px solid #555;
}
div#playerSlider{
float:left;
height: 44px;
width: 100%;
padding: 15px 10px 0px 10px;
}
div#objectSlider{
float: left;
clear: left;
width: 100%;
}
div#timeElement{
float: left;
height: 44px;
width: 80px;
border-right: 2px solid #555;
}
div#volumeSlider{
float: left;
height: 44px;
width: 180px;
border-right: 2px solid #555;
}
div#displayCommand{
float: left;
height: 44px;
width: 70px;
border-right: 2px solid #555;
}
and this is a link to my site.
try this css code, not sure if this is exactly what you want though:
div#videoManager{
margin-top: 30px;
width: 980px;
height: 44px;
background: transparent url('bg.jpg') center center repeat-x;
position: relative;
color: #fff;
}
div#playpauseCommand, div#stopCommand{
width: 44px;
height: 44px;
float: left;
border-right: 2px solid #555;
}
div#playerSlider{
float:left;
height: 44px;
width: 53%;
padding: 15px 10px 0px 10px;
position:absolute;
left:178px;
}
div#objectSlider{
float: left;
clear: left;
width: 100%;
}
div#timeElement{
float: left;
height: 44px;
width: 80px;
border-right: 2px solid #555;
}
div#volumeSlider{
float: right;
height: 44px;
width: 180px;
border-right: 2px solid #555;
}
div#displayCommand{
float: right;
height: 34px;
width: 70px;
top:10px;
border-right: 2px solid #555;
position:relative;
}