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>
Related
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
so i've tried to make this website the past two days with my friend. Everyone has been going smooth and we have gotten a lot of help from here. Though we are having a problem about the scaling on the website. When our website is in fullscreen everything is okay but if you have the window open so that it only covers half the monitor there is a white block under the website.
You can see what i mean here: https://gyazo.com/103cf6b312512a2ce9fdac7e23788fdf
Thank you
<style>
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
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;
}
body {
background-image: url("lightning.gif");
background-repeat: no-repeat;
-webkit-transform: rotateX(0);
background-size: cover;
background-position: center center;
}
a:link, a:visited {
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Our Future</title>
</head>
<body background="lightning.gif">
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed>
<center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/>
<br></br>
<br></br>
</picture>
Add min-height: 100vh to body so it extends to the bottom of the window if the content is shorter than the browser viewport. You might also add margin: 0 so the default margin doesn't make the window vertically scroll if the browser is taller than the content.
<style>
.Button {
background-color: Plum;
border: 1px solid;
border-color: black;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
border-radius: 8px;
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;
}
body {
background-image: url("http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg");
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;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Our Future</title>
</head>
<body background="lightning.gif">
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed>
<center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/>
<br></br>
<br></br>
</picture>
Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps
This is the look:
How do I move the text up? So its centered besides the image?
CSS:
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
padding: 0px 190px;
font-size: 17px;
vertical-align: middle;
line-height: 20px;
}
.logopng{
width: 35px;
height: 35px;
}
HTML:
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>
EDIT: added vertical-align:middle to the image class
The easiest way is to set display: flex and align-items: center on parent element.
header {
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1 {
color: white;
font-size: 17px;
display: flex;
align-items: center;
}
.logopng {
width: 35px;
height: 35px;
margin-right: 20px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">Rocket League Prices
</div>
</header>
you can use css3 flexbox concept.just add
display:flex;
align-items:center;
justify-content:center;
to your .header-1 it works fine.I'm added the snippet below.
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
font-size: 17px;
display:flex;
align-items:center;
justify-content:center;
}
.logopng{
width: 35px;
height: 35px;
margin-right:10px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>
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/