I want to center the two images in the middle of the screen but don't want them touching eachother. This is for a school project and i'm not very experienced in HTML and CSS so if you could help me out it would be amazing! My teacher told me to create those display tables but i dind't understand how they work so if you could also give me a hint on how it works I would appreciate that! Thanks in advance! If you need me to send any other information please tell me as I'm not sure what to put in there other than what I told above.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Correia e Figueiredo</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<div id="imagens">
<div id="Morph1" class="images">
<img src="images/Morph1.png">
</div>
<div id="Morph2" class="images">
<img src="images/Morph2.png">
</div>
</div>
</body>
</html>
CSS code:
`*{
margin:0;
padding:0;
}
body{
background-color: beige;
}
#imagens {
display: table;
}
#Morph1 {
display: table-cell;
}
#Morph2 {
display: table-cell;
}
.images a img {
border-radius: 100%;
width: 30%;
margin: 0 auto;
text-align: center;
}
.images {
text-align: center;
width:50%;
}`
Try with this
#imagens {width:100%;}
.images {padding: 10px} /*delete text-align: center*/
#Morph1 {text-align: right;}
#Morph2 {text-align: left;}
Using padding on both #Morph1 and #Morph2, will do the job.
Just like:
#Morph1 {
display: table-cell;
padding: 0 10px;
text-align: right;
}
#Morph2 {
display: table-cell;
padding: 0 10px;
text-align: left;
}
Look at the snippet below:
*{
margin:0;
padding:0;
}
body{
background-color: beige;
}
#imagens {
display: table;
}
#Morph1 {
display: table-cell;
padding: 0 10px;
text-align: right;
}
#Morph2 {
display: table-cell;
padding: 0 10px;
text-align: left;
}
.images a img {
border-radius: 100%;
width: 30%;
margin: 0 auto;
text-align: center;
}
.images {
text-align: center;
width:50%;
}
<div id="imagens">
<div id="Morph1" class="images">
<img src="http://lorempixel.com/400/400">
</div>
<div id="Morph2" class="images">
<img src="http://lorempixel.com/400/400">
</div>
</div>
Hope this helps!
.img {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
<div id="images">
<a href="#">
<img class="img" border="0" alt="" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg"/></a>
<a href="#" target="_blank">
<img class="img" border="0" alt="" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /></a></div>
link:-https://jsfiddle.net/ghnthrbn/
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
How do I get the four little icons on the same line without interfering with the " account since" line? The images keep going on the top-right of that line. I want to create a separate line for these four images and they need to all be on that same line no matter the screen size.
Also, how do I stop the " account since" line from being responsive as in the sense that the font changes size when you change screen size?
.section {
background-color: #5ECCBA;
margin-left: 1%;
margin-right: 1%;
width: 97%;
white-space: nowrap;
height: 250px;
margin-top: 85px;
margin-bottom: 10px;
float: left;
display: block;
}
.section img {
display: inline-block;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 5%;
margin-top: -70px;
text-decoration: underline;
}
.accsince {
float: left;
display: inline;
margin-top: -30px;
margin-left: 30%;
font-weight:lighter;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 5%;
}
#map {
width:100%;
height:400px;
background:white;
margin-top:15px;
margin-bottom: 70px;
}
<div class="section">
<img src="img/Linda Profile.png" id="ProfilePic" alt="profile picture" height="40%">
<h2>Linda *lastname*</h2>
<p class="accsince">Account since Nov. 7th 2012</p><!--random date-->
<div class="inline-block">
<img src="img/002-big-map-placeholder-outlined-symbol-of-interface.png" alt="add trip" height="20px"></div>
<div class="inline-block">
<img src="img/004-recycling-bin.png" alt="delete account" height="20px"></div>
<div class="inline-block">
<img src="img/001-megaphone-outline-of-amplification-tool.png" alt="share account" height="20px"></div>
<div class="inline-block">
<img src="img/003-add-square-outlined-interface-button.png" alt="add pictures" height="20px"></div>
</div><!--End section-->
Added as a container div for all icons (images) that needs to be on separate row and added class clear to it. It clears entire row.
.section {
background-color: #5ECCBA;
margin-left: 1%;
margin-right: 1%;
width: 97%;
white-space: nowrap;
height: 250px;
margin-top: 85px;
margin-bottom: 10px;
float: left;
display: block;
}
.section img {
display: inline-block;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 5%;
margin-top: -70px;
text-decoration: underline;
}
.accsince {
float: left;
display: inline;
margin-top: -30px;
margin-left: 30%;
font-weight:lighter;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 5%;
}
#map {
width:100%;
height:400px;
background:white;
margin-top:15px;
margin-bottom: 70px;
}
.clear{
clear:both;
}
<div class="section">
<img src="img/Linda Profile.png" id="ProfilePic" alt="profile picture" height="40%">
<h2>Linda *lastname*</h2>
<p class="accsince">Account since Nov. 7th 2012<`enter code here`/p><!--random date-->
<div class="clear">
<div class="inline-block">
<img src="img/002-big-map-placeholder-outlined-symbol-of-interface.png" alt="add trip" height="20px"></div>
<div class="inline-block">
<img src="img/004-recycling-bin.png" alt="delete account" height="20px"></div>
<div class="inline-block">
<img src="img/001-megaphone-outline-of-amplification-tool.png" alt="share account" height="20px"></div>
<div class="inline-block">
<img src="img/003-add-square-outlined-interface-button.png" alt="add pictures" height="20px"></div></div>
</div><!--End section-->
Below is a simplified example. Hope it helps.
I'd strongly suggest using Bootstrap grid system. It's easy to work with and most importantly it is RESPONSIVE.
here is the link
body{
margin:0;
padding:0;
}
.wrapper{
width:80%;
background-color: gray;
margin:0 auto;
}
.pics {
text-align: center;
}
.inline {
display:inline-block;
padding: 0 15px 0 15px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="pics">
<div class="inline">HELLO1</div>
<div class="inline">HELLO2</div>
<div class="inline">HELLO3</div>
<div class="inline">HELLO4</div>
</div>
</div>
</body>
</html>
My buddy had a problem with a website for a school project. He wanted to make a small gallery.
The first 5 pictures worked as intentional:
but then they showed up like that:
We tested all sorts of stuff for an hour. We tried to put the bottom 3 ones in another div block with class="bilder" but it was the same. We also tried putting the pictures in a different order to see if it has something to do with the pictures themselves but also the same result.
div.wrapper {
font-family: Calibri;
width: 100%;
float: left;
color: white;
}
h1 {
color: #F99F00;
text-align: center;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
font-family: fantasy;
font-size: 120%
}
li a {
color: white;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: green;
}
.active {
backround-color: green;
}
li.selected a {
color: green;
display: block;
}
#tct {
top: 15%;
left: 5%;
padding: 1%;
color: #F99F00;
font-size: 200%;
}
div.bilder img {
padding: 1%;
width: 18%;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter-Strike: Global Offensive</title>
<link href="../css/waffenliste.css" rel="stylesheet" type="text/css">
<link href="pictures/csgotab.png" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div>
<h1>Counter-Strike: Global Offensive<h1>
</div>
<div>
<ul>
<li>Home</li>
<li class="selected">Waffenliste</li>
<li>Spray Patterns</a></li>
<li>Über</a></li>
<li>Impressum</li>
</ul>
</div>
<div id="tct">
<p>Kaufbar für: T und CT</p>
</div>
<div id="t">
<p>Kaufbar für: Terroristen</p>
</div>
<div id="ct">
<p>Kaufbar für: Antiterroreinheit</p>
</div>
<div class="bilder">
<img id="awp" src="pictures/awp.PNG">
<img id="scout" src="pictures/scout.PNG">
<img id="dual" src="pictures/dual.PNG">
<img id="p250" src="pictures/p250.PNG">
<img id="deagle" src="pictures/deagle.PNG">
<img id="nova" src="pictures/nova.PNG">
<img id="negev" src="pictures/negev.PNG">
<img id="m249" src="pictures/M249.PNG">
</div>
</div>
</body>
</html>
You can try using the following html and css structure,
section #imageGallery li {
display: inline-block;
margin: 20px;
list-style: none;
}
section #imageGallery li div {
width: 280px;
height: 290px;
color: black;
}
#imageGallery .one {
background-image: url(/Images1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .two {
background-image: url(/Images2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .three {
background-image: url(/Images3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .four {
background-image: url(/Images4.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .five {
background-image: url(/Images5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
<section>
<ul id="imageGallery">
<li>
<div class="Image one">
</div>
</li>
<li>
<div class="Image two">
</div>
</li>
<li>
<div class="Image three">
</div>
</li>
<li>
<div class="Image four">
</div>
</li>
<li>
<div class="Image five">
</div>
</li>
</ul>
</section>
Hope it helps.
Just use following css :
div.bilder {
font-size: 0px;
}
div.bilder img {
padding: 1%;
width: 18%;
display: inline-block;
vertical-align: top;
}
It happens because you float all images. You shoudnt use floats to dispaly images in the line. Display inline-block is enough.
If you wish to stick with floating use clearfix after end of line.
.clearfix:after {
content: "";
display: table;
clear: both;
}
I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.
All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>
I've decided to create my own blog, and am trying to work on the layout for it. I just started on it and I'm having trouble with the header already. I want a header that stretches all the way across the screen with no white spaces on top or on the sides and am planning on making my blog responsive. I've tried setting the margin to 0 and can't seem to get anything to work. I've tried to search the answer on here but couldn't get anything to work. this is my html and css. Thanks for any help!
p.s. The reason I did the logo in such a weird way is because I'm going to have one word in a bold font and one word in a skinny font and that was the only way I could think of to do it.
HTML:
<!DOCTYPE html>
<html>
<title>FatHead | Blog</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400itali" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<head>
</head>
<body>
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>
</body>
</html>`
CSS:
.header{
background-color: lightslategray;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: center;
display: block;
margin:15px;
}
#logo-large{
display: inline;
}
#logo-small{
display: inline;
}
You have to add
body
{
margin:0;
padding:0;
}
and change your css
.logo{
text-align: center;
display: block;
margin:15px;
}
to this
.logo{
text-align: center;
display: block;
margin:0 15px 15px 15px;
}
JSFiddle
Remove the appropriate margins from body and .logo.
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.header {
background-color: lightslategray;
margin: 0;
padding: 0;
width: 100%;
}
.logo {
text-align: center;
display: block;
margin: 0 15px 15px;
}
#logo-large {
display: inline;
}
#logo-small {
display: inline;
}
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1>
<h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>