I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
Related
I would like to have my 4 social pictures (alt=test) in the center of my div (now they are appearing on the top center). I put text-align: center in .socials but it is not working. I also tried to put it in .socialdivs but it is also not working. The HTML and CSS code is below.
.socials {
width: 100%;
background-color: #5e6066;
text-align: center;
}
.socialdivs {
width: 100%;
margin: auto;
}
.fb {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover {
background-color: #4668b3;
}
.lin {
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover {
background-color: #00a0dc;
}
.insta {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover {
background-color: #405de6;
}
.golden {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover {
background-color: #fcbf17;
}
.info {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
Any help would be appreciated.
You can use line-height: 155px; to center it vertically. It needs to have the same height as the container. So, when the height of the container change, the line-height needs to be adjusted.
.socials
{
width:100%;
background-color: #5e6066;
text-align: center;
line-height: 155px;
}
.socialdivs
{
width: 100%;
margin: auto;
}
.fb
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover
{
background-color: #4668b3;
}
.lin
{
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover
{
background-color: #00a0dc;
}
.insta
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover
{
background-color: #405de6;
}
.golden
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover
{
background-color: #fcbf17;
}
.info
{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
</html>
You can use padding to set text in middle of div,(along with text-align:center;) like this:
.socialdivs
{
padding: 10%;
font-size: 18px;
text-align:center;
width:20%;
}
padding and margin by default show a good result in anchor tag so use display block in it
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
I have an logo in the header of the page and I want to make in centered.
This is my html:
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
You need to add a width to the logo-row class and use margin: 0 auto.
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row {
width: 250px;
margin: 0 auto;
}
.logo {
width: 100%;
height: 150px;
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Giving text-align: center to the .logo-row, you may achieve the desired output:
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row{
text-align: center;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Add a new CSS rule for the div containing your image:
.logo-row {
text-align: center;
}
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
.logo-row {
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Add this code to your CSS Section
.logo-row{ text-align: center; }
Try this.
img {
display:block;
margin-right:auto;
margin-left:auto;
}
Add the following CSS rule for the class applied to the img element (in your case .logo).
.logo {
display: block;
margin: 0 auto;
}
I put my div id="banner" and style it to give the color that matches the image but the color doesn't display. So, what should I do?
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Since #cloud (the child of #banner) is floated, #banner essentially collapses and it acts like it doesn't have content. You can remedy this by adding overflow:auto to #banner.
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
overflow: auto;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Simply give #banner some height. See the snippet.
#banner {
background-color: #78c8f0;
height: 40px;
}
Snippet
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
height: 40px;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
See this fiddle
Th background colour was not shown because, the element which contained the content was floated and thus the other elements were such that it doesnt even exist. thus,
Either change your css for #banner as follows
#banner {
float: left;
background-color: #78c8f0;
}
OR
change your css for #cloud as follows
#cloud {
/* float: left; */
padding: 0px;
margin: 0px;
}
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.