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>
Related
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
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>
So I spent a couple hours searching, but all I've seeing is just standard help with adding text over an image, nothing that will put the text over the image, as it "falls" off the image.
I've attached an example of what I'm referring to.
I'm trying to do it in a way so the images stay right under each other and not create space between the, added another photo for reference on what I mean.
I've tried creating an img-container and add text but that doesn't allow me to have the text "fall" off the image. This is what I have so far (not including the text".
I've attempted to make the images as the body background but that didn't have the same design I'm looking for unfortunately, as the text will also serve as links in the future.
images stacked with no space
text falling off the image
<!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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<div class="img-container">
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
</div>
<code>Designed by #PasettaStudios. </code>
</div>
</body>
</html>
And here is my CSS
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 100%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
/* links and text inside nav bar */
.navbar a {
float: left;
padding: 40px 0px 0px 0px;
background-color: #262c2c;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
p {
text-align: right;
font-size: 100px;
padding-left: 100px;
color: #dae1e7;
font-family: Modric;
font-size: 150px;
}
Try this:
<div class="img-container">
<div class="row">
<img src="images/top-image.jpg" alt="plants">
<span>Your text</span>
</div>
<div class="row">
<img src="images/second-image.jpg" alt="benches">
<span>Your text</span>
</div>
<div class="row">
<img src="images/third-image.jpg" alt="cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/last-image.jpg" alt="more cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/pasetta-studios" alt="pasetta studios">
<span>Your text</span>
</div>
</div>
.img-container {
width: 500px;
height: auto;
}
.row{
position: relative;
width: 100%;
}
.row span {
position: absolute;
color: white;
top: 0;
}
.row:nth-child(odd) span {
left: -20px;
}
.row:nth-child(even) span {
right: -20px;
}
What you have to do is put your Image in a Container, along with your text. The text is then positioned absolute and with a negative margin or left and right values instead of only setting top values.
<div class="img-container">
<img src="img1.jpg" alt="Image 1">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
<div class="img-container">
<img src="img2.jpg" alt="Image 2">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
For multiple images, just repeat this code.
And your CSS:
.img-container {
position:relative;
margin:0;
padding:0 40px;
}
.img-container img {
border:0;
}
.img-container p.lefttext {
position:absolute;
top:50px;
margin-left:-40px;
}
.img-container p.righttext {
position:absolute;
top:120px;
width:100%;
text-align:right;
margin-right:—40px;
}
Alternatively, you could do
.img-container p.lefttext {
position:absolute;
top:20px;
left:0;
}
.img-container p.righttext {
position:absolute;
top:120px;
text-align:right;
right:0;
}
If the position of the text over the image should change for each picture, simply remove the ˋtop:..pxˋ from your CSS and add ˋstyle="top:50px;"ˋ to each image tag.
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
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/