I can't seem to get my Div container with my images to center. I tried margin 0 auto; and adding a width.
body{
margin: 0px;
}
.main{
height: 950px;
background: url(../Images/Mountain.jpg) center center/cover no-repeat;
}
#media screen and (min-width: 1000px;){
#container{
height: 1000px;
width: 1000px;
margin: 0 auto;
}
}
.header{
margin-top: 0px;
width: 100%;
}
.logo{
float: left;
margin-top: 10px;
margin-left: 50px;
}
nav{
float: right;
margin-top: 26px;
margin-right: 50px;
}
.navBar{
color: #fff;
font-size: 20px;
margin-left: 25px;
text-decoration: none;
}
.navBar:hover{
text-decoration: underline;
}
span{
width: 100%;
}
h1{
font-size: 80px;
color: #fff;
text-align: center;
clear: both;
padding-top: 200px;
}
h2{
font-size: 36px;
color: #fff;
text-align: center;
clear: both;
margin-top: 50px;
}
/*Header Section*/
#head{
width: 100%;
height: 400px;
background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat;
}
.port{
padding-top: 75px;
}
.portfolio{
width: 300px;
height: 250px;
}
.padding{
margin-left: 50px;
}
.container_port{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>-------</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
<link rel="stylesheet" href="CSS/Style.css">
</head>
<body>
<div id="head">
<div class="header">
<img class="logo" src=http://placehold.it/100x100>
<nav>
<a class="navBar" href="#">Home</a>
<a class="navBar" href="#">Portfolio</a>
<a class="navBar" href="#">Blog</a>
<a class="navBar" href="#">Testimonials</a>
</nav>
</div>
<span>
<h1 class="port">Portfolio</h1>
</span>
</div>
<div id="container_port">
<div class="one">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="two">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="three">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="four">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
</div>
</body>
</html>
This should get you close:
#container_port {
text-align: center;
}
EDIT: I also just noticed that you have .container_port in your CSS above while it's clearly an ID and not a CLASS.
the image element is an inline-block element. You could change it to a block-level element or you could use margin: 0 50%;
Related
I am trying to use overflow, but its not allowing me to scroll but it works as I need that popup on hover, is there any way so I can use overflow visible as well as scroll.
I tried position fixed too, for the span element inside server__list but it doesn't seems to work as well, rest of the elements going underneath, Is there any other property or a better way for doing this?
Here is my code
:root{
--blurple-color: #7289DA;
--lighter-color: #32363a;
--light-color: #2C2F33;
--white-color: #ffffff;
--dark-color: #23272A;
}
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
*{
font-family: 'Balsamiq Sans', cursive;
}
body{
background-color: var(--lighter-color);
}
.server__list{
position: fixed;
top: 0;
bottom: 0;
background-color: var(--dark-color);
width: 50px;
overflow-x: visible;
}
.server__list::-webkit-scrollbar {
display: none;
}
.channel__list{
position: fixed;
left: 50px;
width: 150px;
height: 100%;
background-color: var(--light-color);
}
.user__container{
position: fixed;
bottom: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: #26292c;
}
.user__container .profile{
display: flex;
margin: 10px;
}
.user__container .profile img{
width: 25px;
border-radius: 50%;
}
.user .user__name{
color: var(--white-color);
font-size: 10px;
padding: 0px 5px;
}
.user .user__discrim{
color: grey;
font-size: 8px;
padding: 0px 5px;
}
.profile #logout{
background: none;
outline: none;
border: none;
color: rgb(187, 55, 3);
margin-left: 40px;
transition: color;
transition-duration: 0.5s;
}
.profile #logout:hover{
cursor: pointer;
color: darkred;
}
/* Showing Servers */
.server__list .server{
margin: 10px;
}
.server__list .server img{
width: 32px;
border-radius: 50%;
}
.server:hover{
cursor: pointer;
}
.server span{
display: none;
background-color: #0f1011;
color: white;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
}
.server:hover > span{
display: inline-block;
position: absolute;
margin-top: -40px;
width: 100px;
margin-left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web</title>
<link rel="icon" href="./static/assets/icon.png" id="header__icon">
<link rel="stylesheet" href="./static/css/style.css">
<script src="https://kit.fontawesome.com/1144a6771a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="server__list">
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
</div>
<div class="channel__list">
</div>
<div class="user__container">
<div class="profile">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<div class="user">
<div class="user__name">
WiperR
</div>
<div class="user__discrim">
#3131
</div>
</div>
<button id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i></button>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>
Try this css :
.server__list {
overflow-x: auto;
max-height: 100%;
}
I am not sure if this is what you want, but if you want to allow overflow as well as hide the scrollbar, you can use:-
#my-element::-webkit-scrollbar {display: none;}
and
#my-element {overflow: scroll;}
I am trying to create a gallery using bootstrap, and I cant seem to keep all my images the same size both height and width wise.
How do I go about making all the images in the gallery the same size.
here is the jsfiddle- https://jsfiddle.net/j0z3sq5s/
Apologies for I am working on a localhost/localserver and the images cant be seen. however I have taken some screen shots.
enter image description here
enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="niceMJ.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jute.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="download.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="asper.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
here is the css
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
.thumbnail img{
height: 300px;
width: 100%;
object-fit : cover;
}
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
Here you have explain of object-fit :https://css-tricks.com/almanac/properties/o/object-fit/
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}
<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>
erase float:left; from #content and add margin: 0 auto to it.
You can either give your #content the CSS of margin: 0 auto;, like so:
#content {
margin: 0 auto;
}
(Maybe you will also have to not float it to the left)
Or you could take a look at other modern possibilities for centering an element:
https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css
So I am making this little game, where you need drag text under the images.
I need to make little tabs under the images where the text is needed to be dragged onto.
I thought of placing a div around the image, and another div in the div for the tab, in css I styled the tab to be 25px in height. but the 25px, isn't going under the image in the same div, it's above the other images in that row..
this is what I see, http://prntscr.com/9yv7m8
the red space is the tab, that needs to go under the pictures..
How can I fix this properly?
This is my code,
CSS
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
footer {
height: 5%;
border-top: thick solid grey;
}
.points {
float: right;
}
.container {
width: 100%;
height: 90%;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
width: 25%;
height: 25%;
float: left;
}
.img2 {
width: 25%;
height: 25%;
float: left;
}
.answer {
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div>
<img class="img" src="img/cat.jpg" alt="cat" />
<div class="answer">
</div>
</div>
<img class="img" src="img/beak.jpg" alt="beak" />
<img class="img" src="img/spoon.jpg" alt="spoon" />
<img class="img" src="img/milk.jpg" alt="milk" />
<img class="img2" src="img/egg.jpg" alt="egg" />
<img class="img2" src="img/thee.jpg" alt="tea" />
<img class="img2" src="img/meel.jpg" alt="meel" />
<img class="img2" src="img/passport.jpg" alt="passport" />
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
I'm not sure is this you looking for...
<html>
<title>test</title>
<head>
</head>
<body>
<style>
.top{background-color: #900; width: 100%; height: 100px;}
.middle{background-color: #090; width: 100%; height: 600px; float: left;}
.sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
.container{background-color: #000; width: 90%; height: 600px; float: left;}
.row{background-color: #fff; width: 100%; height: 100px; float: left;}
.footer{background-color: #090; width: 100%; height: 100px; float: left;}
.slice{background-color: #069; width: 33%; height: 100px; float: left;}
</style>
<div class="top">top</div>
<div class="middle">
<div class="sidebar">sidebar</div>
<div class="container">
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
I would like to know what's the best way to position buttons?
I'm trying to make this website teacher has asked me to do however I don't know how to position buttons correctly.
This is what I have:
[/img]
This is what I need to have:
src:
.css file
http://pastebin.com/3mZXzkzS
/*---------------*/ #logo {
width:167px;
height:96px;
margin-right: 200px;
float:left;
margin: 24px;
}
#info{
display: block;
float: left;
height: 175px;
width: 300px;
margin-right: 0px;
background-image: url('../images/info_box_1.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#mang1, #uusp, #jatka {
display: block;
float: left;
height: 45px;
width: 200px;
margin-right: 0px;
background-image: url('../images/Button_black_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool1, .kool3 {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#aru, #aru, #too, #teams, #sqn, #kalend, #plan{
display: block;
float: left;
height: 30px;
width: 150px;
margin-right: 0px;
background-image: url('../images/Button_3_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool2, .log {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test2.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
.lEnglish, .lEstonian, .lRussian , #clear{
margin-top:25px;
text-decoration: none;
}
#tile_mid, #tile_top , #tile_mid_pt2{
margin-left: 200px;
}
.but1, .but2, .but3{
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.but4, .but5 {
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.kool3 {
margin-right: 0;
}
.clear {
clear: both;
}
.html file
http://pastebin.com/VQZx44PG
<base href="http://dynama.eek.ee">
<div text="#000000" style="background:#ffffff url('http://dynama.eek.ee/images/background.png') repeat scroll top center; height:1000px;">
<div id="logo"><img src="./images/logo.png"/></div>
<div class="clear"></div>
<div id="info">Information:</div>
<div class="clear"></div>
<div id="mang1">Mäng 1 AKTIIVNE</div>
<div class="clear"></div>
<div id="uusp">Uus periood</div>
<div class="clear"></div>
<div id="jatka">Jätka</div>
<div class="clear"></div>
<div id="aru">ARUANDED</div>
<div class="clear"></div>
<div id="too">TOOTED</div>
<div class="clear"></div>
<div id="teams">TIIMID</div>
<div class="clear"></div>
<div id="sqn">SQNUMID</div>
<div class="clear"></div>
<div id="kalend">KALENDAR</div>
<div class="clear"></div>
<div id="plan">QPPEPLAN M+U</div>
<div class="clear"></div>
<div id="tile_top">
<div class="kool1">
Kool 1 </div>
Kool 2
Kool 3
Log out
<img class="lEnglish" height="25px" width="45px" src="./images/Flag_eng.png"/>
<img class="lRussian" height="25px" width="45px" src="./images/Flag_rus.png"/>
<img class="lEstonian" height="25px" width="45px" src="./images/Flag_est.png"/>
</div>
<div id="tile_mid">
Button 1
Button 2
Button 3
</div>
<img id="clear" height="25px" width="45px" src="./images/clear.png"/>
<div id="tile_mid_pt2">
Button 4
Button 5
</div>
<div class="clear"></div>
</div>
Try using this code...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynama </title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body text="#000000" style="background:#ffffff url('images/background.png') repeat scroll top center; height:1000px;">
<div id="logo"><img src="./images/logo.png"/></div>
<div class="clear"></div>
<div>
<div id="info">Information:</div>
<div id="tile_top">
<div class="kool1">
Kool 1 </div>
Kool 2
Kool 3
Log out
<img class="lEnglish" height="25px" width="45px" src="./images/Flag_eng.png"/>
<img class="lRussian" height="25px" width="45px" src="./images/Flag_rus.png"/>
<img class="lEstonian" height="25px" width="45px" src="./images/Flag_est.png"/>
</div>
<div id="tile_mid">
Button 1
Button 2
Button 3
</div>
<div class="clear"></div>
</div>
<div id="mang1">Mäng 1 AKTIIVNE</div>
<div class="clear"></div>
<div id="uusp">Uus periood</div>
<div class="clear"></div>
<div id="jatka">Jätka</div>
<div class="clear"></div>
<div id="aru">ARUANDED</div>
<div class="clear"></div>
<div id="too">TOOTED</div>
<div class="clear"></div>
<div id="teams">TIIMID</div>
<div class="clear"></div>
<div id="sqn">SQNUMID</div>
<div class="clear"></div>
<div id="kalend">KALENDAR</div>
<div class="clear"></div>
<div id="plan">QPPEPLAN M+U</div>
<div class="clear"></div>
<img id="clear" height="25px" width="45px" src="./images/clear.png"/>
<div id="tile_mid_pt2">
Button 4
Button 5
</div>
<div class="clear"></div>
</body>
</html>