yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!
To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;
Related
When my website is on 100% zoom it looks alright but...
when I zoom in it all goes right
when I zoom out it all goes left
How do I make it so my website zooms in and out without effecting the layout of the website from the center?
e.g. Like this website http://www.johnlewis.com
I am a beginner at coding.
HTML and CSS is shown below.
HTML
<html>
<head>
<meta charset="utf-8"/>
<title> Josh Taylor</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
type='text/css'>
<link rel="shortcut icon" href="Icon.png"/>
</head>
<body>
<div id="nav-div">
<ul>
<h1>JOSH TAYLOR</h1>
<li>Contact</li>
<li>CV</li>
<li>Portfolio</li>
<li>Home</li>
</ul>
</div>
<div id="main-left">
<h2> A BIT ABOUT ME </h2>
<p> this crap is only here to show what it would look like mate I don't
want it sounding boring like my CV and needs some life so give it some josh
</p>
<h3> INTERESTS</h3>
</div>
<div id="main-right">
<img src="CopenhagenJosh.png">
</div>
<div id="main-social">
</div>
<div id="interests">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
</div>
<div id="intereststitles">
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
</div>
<div id="portfolio-left">
<h2> PORTFOLIO</h2>
</div>
<div id="portfolio-right">
<p> This is my creative work ayoooo below...</p>
</div>
<div id="portfolio-1">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
</div>
<div id="CV">
<div id="CV-left">
<h2> CV </h2>
</div>
<div id="CV-right">
</div>
<div id="CV-img">
<img src="CopenhagenJosh.png">
</div>
<div id="contact">
<div id="contact-left">
<h2> CONTACT </h2>
</div>
<div id="contact-right">
</div>
</div>
</body>
</html>
CSS
body {
font-family: 'Lato', sans-serif;
font-style:italic
}
html{
padding: 0px;
margin: 0px;
background: url(sky.jpg);
background-size:contain;
background-repeat:no-repeat;
display: inline-block;
}
/* FOOTER NAVIGATION */
#nav-div {
opacity: 1;
font-size: 15px;
}
#nav-div h1{
color: lightskyblue;
cursor: pointer;
width: px;
float: left;
margin-left: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-size: 25px;
}
#nav-div h1:hover{
color: white;
transition:all 0.40s;
}
#nav-div ul{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background: ;
line-height: 80px;
float:right;
border-bottom: px solid black;
margin-right: 300px;
}
#nav-div ul a{
text-decoration: none;
color: lightskyblue;
padding: 25px;
}
#nav-div ul a:hover{
color:white;
transition:all 0.40s;
font-style:italic;
}
#nav-div ul li {
list-style-type: none;
display: inline-block;
float: right;
font-style:normal;
font-size: 15px;
}
#main-left{
float: left;
display: inline-block;
width: 40%;
height: 250px;
margin-top: 100px;
}
#main-right{
float: left;
padding: px;
display: inline-block;
width: 22%;
height: 175px;
margin-top: 100px;
}
#main-right img{
float: left;
margin-left ;
width: 150px;
height: 150px;
padding: 10px;
display: inline-block;
}
#main-social{
float: left;
display: inline-block;
margin-left: 7%;
width: 10%;
height: 250px;
margin-top: 100px;
}
#main-left h2{
width: 300px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 300px;
margin-right: %;
margin-top: 0;
margin-bottom:0;
float: left;
}
#main-left p{
width: 250px;
height: 100px;
margin-top: px;
margin-left: 300px;
margin-right: 5%;
font-size: 17px;
color: darkgrey;
display: inline-block;
position: relative;
}
#main-left h3{
margin-top: px;
width: 150px;
height: 30px;
margin-left: 300px;
font-size: 20px;
color: white;
display: inline-block;
float: left;
}
#interests {
width: 100%;
height:125px;
margin-top:px;
margin-left: 300px;
display: inline-block;
}
#interests img{
padding: 14px;
Height: 100px;
Width: 100px;
margin-bottom: 0px;
}
#intereststitles{
width: 100%;
height:100px;
margin-top:0px;
margin-left: 300px;
display: inline-block;
color: white;
}
#intereststitles p{
padding: 14px;
margin-top:0px;
Height: 10px;
Width: 100px;
font-style: normal;
display: inline-block;
text-align: center
}
#portfolio {
width: 100%;
height: 100%;
background-color: gray;
opacity: 1;
}
#portfolio-left{
background-color: gray;
float: left;
width: 25%;
height: 100px;
}
#portfolio-left h2{
width: 200px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#portfolio-right{
background-color: gray;
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#portfolio-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 36px;
margin-bottom:0;
padding: 0px;
float: left;
}
#portfolio-1{
margin-left: 0%;
width: 100%;
display: inline-block;
text-align: center;
padding:0%;
margin:0;
background-color: gray;
}
#portfolio-1 img{
display: inline-block;
padding: 0px;
width:33%;
}
#CV {
width: 100%;
height: 900px;
background-color: skyblue;
opacity: 1;
}
#CV-left{
float: left;
width: 430px;
height: 100px;
}
#CV-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#CV-right{
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#CV-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 40px;
margin-bottom:0;
padding: 0px;
float: left;
}
#contact {
width: 100%;
height: 500px;
background-color: mediumpurple;
opacity: 1;
}
#contact-left{
float: left;
width: 50%;
height: 900px;
}
#contact-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#contact-right{
float: right;
width: 50%;
height: 900px;
}
You need a div as a wrapper for your webpage, and set a fixed width or max-width if you want the content to be able to become smaller on smaller screens with margin set as auto for margin-left and margin-right to keep the page centered.
Which is precisely what the webpage you mentioned does -
You can center center content horizontally in CSS by putting it inside a block-level element (like a div), with left and right margins set to "auto". Take a look at Centering in CSS: A Complete Guide > Horizontally > Block level element. In your case, you would probably want to add a div around all the content you currently have in the body, give it a set width, and add margin: 0 auto. Note that you probably want to use max-width instead of just width to support smaller browsers (see CSS Layout - width and max-width).
In the example site you mentioned, there's a div with an id of "wrapper" that contains all the centered content.
I'm trying to make a portfolio page. I've created a section with divs nested inside. The first two on the top of the section were set to relative and they work. I've tried to set the rest to relative and they show on top of the first two divs. Help!
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img{
float: left;
width: 100%;
margin-right: 10px;
position: absolute;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img{
float: left;
width: 100%;
position: absolute;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {
}
#playlist p {
}
<section id="portfolio">
<div id="blog">
<img src="assets/images/icon1.jpg">
<p>Blog</p>
</div>
<div id="hangman">
<img src="assets/images/icon2.jpg">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="assets/images/icon3.jpg">
<p>Playlist</p>
</div>
<div id="maps">
<img src="assets/images/icon4.jpg">
<p>Map Page</p>
</div>
<div id="pets">
<img src="assets/images/icon5.jpg">
<p>Pets</p>
</div>
</section>
The positon:absolute on your img tags in blog and hangman divs was causing this problem. Postion:absolute element do not pick height so thats why everything was overlapping.
Here is your updated code:
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img {
float: left;
width: 100%;
margin-right: 10px;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img {
float: left;
width: 100%;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {}
#playlist p {}
<section id="portfolio">
<div id="blog">
<img src="https://dummyimage.com/600x400/000/fff&text=blog">
<p>Blog</p>
</div>
<div id="hangman">
<img src="https://dummyimage.com/600x400/f00/fff&text=hangman">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="https://dummyimage.com/600x400/0f0/fff&text=playlist">
<p>Playlist</p>
</div>
<div id="maps">
<img src="https://dummyimage.com/600x400/00f/fff&text=maps">
<p>Map Page</p>
</div>
<div id="pets">
<img src="https://dummyimage.com/600x400/ff0/fff&text=pets">
<p>Pets</p>
</div>
</section>
My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.
http://codepen.io/leongaban/pen/ACJta
^ Updated (I can never get SASS to work right in Codepen)
Can't align to the middle my elements above. Using SASS, I want to avoid using position hacks
<main>
<div class="gradient">
<div class="hero">
<img src="http://placehold.it/350x150" alt=""/>
</div>
</div>
<section class="tagline">
<h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
<button>Learn More</button>
</section>
</main>
body {
font-family:Arial
}
.hero {
display: table-cell;
//position: relative;
margin: 0 auto;
// top: 42%;
// left: 10%;
text-align: center;
width: auto;
height: 447px;
vertical-align: bottom;
img {
width: 300px;
height: 280px;
text-align: center;
vertical-align: bottom;
border:0;
}
}
.tagline {
position: relative;
margin: 0 auto;
width: 100%;
height: 300px;
text-align: center;
color: blue;
background: gray;
z-index: 2;
h1 {
margin: 0 auto;
padding-top: 5%;
width: 80%;
font-size: 42px;
text-align: center;
}
em {
font-weight: bold;
}
button {
margin-top: 25px;
padding: 10px 20px;
font-family: Arial;
font-size: em(21);
color: white;
border: 0;
background: orange;
}
}
I was able to center your elements above my doing the following:
.hero {
margin: 0 auto;
text-align: center;
width: 50%;
height: 447px;
vertical-align: bottom;
}
It seems it did not want to center because you had specified width: auto
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;