Hello i am trying to make an footer it have an image so i am not able to properly intent my webpage please help... I want to achieve something like this::
CodePen link :https://codepen.io/Sherrinford03/pen/yGKaQb
What i want
how far i have come
<div class="footer">
<div class="part">
<div class="body_of_part">
<img src="images/brochure.jpg" align="bottom">
</div>
</div>
<div class="part">
<div class="body_of_part">
<span class="Title_of_departments">ADDRESS</span>
<span class="Body_of_cap">SOMEADD</span>
</div>
</div>
<div class="part">
<div class="body_of_part">
<span class="Title_of_departments">Contact us</span>
<span class="Body_of_cap">
Email<br>
SOMEMAIL
</span>
</div>
</div>
</div>
...CSS
.footer{
display: table;
text-align: center;
margin:20vh 0vw 0 0 ;
padding:0 0 0 0;
background: #222222;
}
.part img{
vertical-align: middle;
display: table-cell;
width: 20vw;
}
.footer .part{
height: 40vh;
border-left: 1px solid #353535;
display: inline-block;
width:20vw;
}
.part .Body_of_cap{
font-size: 18px;
}
Can u please help me ! i have been looking for a solution for about 2 hours ... PLease help!
remove
inline-block
from
.footer .part{
and it should work
I think I got it, I modifierd 3 css classes:
.footer{
/*display: table;*/
text-align: center;
margin:20vh 0vw 0 0 ;
padding:0 0 0 0;
background: #222222;
height: 300px
}
.footer .part{
height: 40vh;
border-left: 1px solid #353535;
/*display: inline-block;*/
width:20vw;
/*display:table-cell; vertical-*/
display: inline-block;
align:top;
}
.Title_of_departments{
display:block;
font-family: "Sofachrome" !important;
font-size: 20px;
/*padding:20vh 0vh 5vh 0vh;*/
text-align: center;
color: #E50000;
}
https://codepen.io/lolpez/pen/zyWoxL
Related
I have tried below code to get desired output, how to display that lock in middle of that.
I have tried so many thing, which I found on SO, but nothing helpful.
I am not very experienced in CSS.
I want to display like this:
.inline-block {
display: inline-block;
}
.lock_image {
width: 30px;
height: 30px;
}
hr {
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title {
margin: 0px;
}
<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block">
<p class="title">Google Drive Integrated Email</p>
<hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
I added a wrapper around the content you had and made it a flexbox with vertical center alignment.
.wrapper {
display: flex;
align-items: center;
}
.inline-block {
display: inline-block;
}
.lock_image {
width: 30px;
height: 30px;
}
hr {
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title {
margin: 0px;
}
<div class="wrapper">
<div class="inline-block">
<img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image">
</div>
<div class="inline-block">
<p class="title">Google Drive Integrated Email</p>
<hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
</div>
Please add vertical-align:middle in inline-block class.
.inline-block{
display:inline-block;
vertical-align:middle;
}
.lock_image{
width:30px;
height:30px;
}
hr{
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title{
margin:0px;
}
<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
Try this code:
Here is the jsfiddle: https://jsfiddle.net/rhulkashyap/71a9uLvy/
.inline-block{
display:inline-block;
vertical-align:middle;
}
.lock_image{
width:30px;
height:30px;
}
hr{
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title{
margin:0px;
}
<div class="inline-block"><img src="https://cdn.pbrd.co/images/GHHKwv7.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
I've tried to make an About Us page for my website but it doesn't seem like I can make the pictures go side by side. And by the way, I have looked at other posts but I don't really understand it.
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
padding: 10px 25px;
text-align: center;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
text-color: black;
text-shadow: 2px 2px grey;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
h1 {
font-size: 400%;
color: Plum;
text-shadow: 4px 4px Black;
}
pre {
font-size: 100%;
color: Plum;
text-shadow: 2px 2px Black;
}
body {
background-image: url("lightning.gif");
background-repeat: no-repeat;
-webkit-transform: rotateX(0);
background-size: cover;
background-position: center center;
min-height: 100vh;
}
a:link,
a:visited {
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
.img-with-text {
text-align: justify;
width: [400px];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
pret {
font-size: 200%;
color: Plum;
text-shadow: 2px 2px Black;
}
<body background="background.jpg">
<form action="selve websiten.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">Frontpage</button>
<button type="button" class="Button">Buy now</button>
</div>
<font size=6>
<pre style="font-family:kenyan coffee;">
Hello, our names is William and Emal.
We've made this website for our own interest and trying to make a future for us.
We are 14 and 15 years of age and, we both live in southern Denmark.
On this website we will mostly be selling steam items, games and etc.
But in the future its possible we are going to be selling other stuff like clothing, cups and etc.</pre>
</font>
<div class="img-with-text">
<img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
<center>
<pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p>
</center>
</div>
<div class="img-with-text">
<img src="william.jpg" alt="William" style="width:400px;height:400px;" />
<center>
<pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p>
</center>
</div>
</body>
Let's try that :
.container_img {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
and
<div class="container_img">
<div class="img-with-text">
<img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
<center><pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p></center>
</div>
<div class="img-with-text">
<img src="william.jpg" alt="William" style="width:400px;height:400px;" />
<center><pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p></center>
</div>
</div>
You mean <img src="emal.png"> and <img src="william.jpg"> go side by side?
try put them into inline-block element
<div>
<span class="imgWrapper"><img src="emal.png"></span>
<span class="imgWrapper"><img src="william.jpg"></span>
</div>
<style>
.imgWrapper{
display:inline-block;
width:///;
height:///;
}
.imgWrapper img{
width:100%;
}
</style>
I want to remove the padding from just the status bar and have the padding on the text.
I added manual padding: 0; to the status bar but it didn't have any effects on it.
.list {
padding: 20px 0 20px;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
display: inline-block;
}
<div class="list">
<span class="status-bar"> </span>Test 1
</div>
You can use this code
HTML:
<div class="list">
<span class="status-bar"> </span>Test 1
</div>
CSS:
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
}
https://jsfiddle.net/bfktcehb/11/
Add another span and put padding in class
<div class="list">
<span class="status-bar"> </span>
<span clsss="l1"> Test 1 </span>
</div>
.l1{
padding: 0px 115px 0px 0px;
}
Remove the padding from list:
https://jsfiddle.net/bfktcehb/8/
I've created a simple footer content that have this structure:
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
Now I've applied this css:
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
}
Essentially what I did is stick the footer at the bottom of the page, and I tried to get the content of the footer in one line. This working nice, but when I resize the page, the footer content is disposed in a new line (if there is no space enough for the other item in the footer), the problem's that the new line does not get the left margin that I've set 15px what I can do for this?
Example:
I put a jsfiddle here.
Note that I'm also using Bootstrap. Thanks.
The | is not in any element, its plain text. That way the * in your CSS doesn't catch it.
Old and new example next to eachother:
The only difference is the div surrounding the |.
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 200px;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
}
#footer2
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
left: 300px;
width: 200px;
}
#footer2 *
{
padding: 10px 15px;
display: inline-block;
}
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
<div id="footer2">
<div id="footer-content">
<p>System developed by a developer</p>
<div>
| <!-- Over here -->
</div>
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
Are you trying to achieved something like this
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
vertical-align: top;
}
span#select-language {
margin-left:10px;
}
#footer p{padding-top:0px}
#media only screen and (max-width:350px) {
#footer p{width:65%; padding-top: 0; float:left;}
span#select-language {
margin-left:10px;
}
#footer-content {
width: 100%;
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
I am making a webpage using CSS when I encountered a problem. My menu bar doesn't center the links vertically in the bar. It should be really simple, but I need help. Sorry for making it so long, I just didn't want to leave anything out.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
background-color: CCFFFF;
text-align: center;
}
div.background
{
width: 90%;
height: 200px;
background color: #00FF66;
border: 2px solid black;
margin: 0 auto;
text-align: left;
}
div.background h3
{
margin: 0px 40px;
}
div.logo
{
width: 350px;
height: 75px;
background: url(logo.png);
margin: 30px 40px;
}
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
border-top: 0px solid black;
}
.menu
{
margin: 5px 10px;
background: #00CC66;
color: black;
-webkit-transition: color;
}
.menu:hover
{
color: red;
}
div.center
{
width: 90%;
height: 700px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: left;
}
div.column1 h1
{
margin: 30px 40px;
}
div.column1 p
{
margin: 30px 40px;
}
div.column1
{
width: 70%;
height: 100%;
float: left;
display: block;
border-right: 2px solid black;
}
div.column2
{
width: 30%
height: 100%;
float: left;
display: block;
text-align: left;
}
div.column2 a
{
margin: 30px 40px;
display: block;
text-decoration: none;
font-size: 30px;
font-color: black;
}
div.legal
{
width:90%;
height: 50px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a>
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
Video?
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
Just add a line-height to div.nav:
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
line-height: 30px;
}
Here's the JS Bin to test: http://jsbin.com/oliwit/1/
There are generally a lot of misconceptions on how to utilize the vertical-align within CSS, I found this post very helpful on how to get a full understanding of it... http://phrogz.net/css/vertical-align/