I've been working on this for days and feel like I've tried everything. Not sure if it's just something small that I'm missing or if I'm completely off track. I need to position my divs on the page like in this image the code I've got so far is this.
HTML:
body {
margin: 0px;
padding: 0px;
width: 1024px;
height: 768px;
float: left;
}
.pagebanner {
height: 200px;
width: 1024px;
}
.header {
background-color: aqua;
height: 50px;
margin-top: 0px;
padding-left: 200px
}
.navbar {
background-color: brown;
float: left;
height: 768px;
}
.subheading {
background-color: chartreuse;
padding-left: 420px;
margin-top: 0px
}
.content {
background-color: crimson;
height:
}
.footer {
background-color: darkgreen;
padding: 20px;
margin-bottom: 0px
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>The Club Site</title>
</head>
<body>
<div wrapper="mainwrapper">
<div class="pagebanner"><img src="HTML Pract A/images/banner.jpg" alt="PageBanner" width="1024px" height="200px">
<div class="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="header">
<h1 class="header">The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="content">
</div>
<div class="footer">
<p>blah blah blah</p>
</div>
</div>
</body>
</html>
Any help with this would be greatly appreciated. First time trying to use HTML and I'm not having much luck with it.
In this sample i try to introduction bootstrap framework to you, bootstrap can help you to make a lot of html templates with less time, try t read documentation of this framework and you will figure out how it's easy.
Good luck with it and always before you ask something search about it,
i'm sure you will get solved questions.
This sample based on bootstrap 4 framework
.nav {
background-color: #ccc;
min-height: 500px;
}
.header {
background-color: #eee;
}
.sub-header {
background-color: yellow;
margin-bottom: 15px;
}
.item {
border: solid 1px #ccc;
text-align: center;
height: 150px;
margin-bottom: 15px;
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>The Club Site</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>header</h1>
</div>
</div>
<div class="row">
<div class="col-4 nav">
<h3>nav</h3>
</div>
<div class="col-8">
<div class="row">
<div class="col header">
<h3>The Club Site</h3>
</div>
</div>
<div class="row">
<div class="col sub-header">
<h6>sub header</h6>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="item">
<h4>item 1</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 2</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 3</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 4</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 5</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 6</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<header>Header</header>
<div id="main">
<article>
<div class="my-container">
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
</div>
</article>
<nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
order: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
#main > nav {
background: #D7E8D4;
order: 3;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
.my-container {
display: flex;
flex-flow: row wrap;
align-content: flex-start; /* pack wrapping lines to the top */
width: 100%;
height: 300px;
}
.image {
flex: 0 0 30%;
margin: 5px;
}
img {enter code here
max-width: 100%;
}
</style>
Note: try to learn instead copy & paste it, to start try to write codes again.
I change and also add some css class in your codes, so pay-attention to different between old version and new css and html files.
Description: for start modeling your style you need to separate all partsyou need; for example here we need:
Header
Header > image
main > nav
main > content
main > content > header
main > content > subheading
main > content > area
main > content > area > items
main > content > area > items > item
etc...
and then start to html them, insert your div or what you want, and last step is manage them with css.
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 1024px;
margin: 0 auto;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
}
.navbar {
background-color: brown;
min-height: 500px;
width: 20%;
float: left;
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.navbar a {
color: #fff;
font-size: 20px;
}
.content {
width: 80%;
float: left;
padding: 0;
min-height: 500px;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.area h3 {
margin: 0;
text-align: center;
}
.item {
width: 33.33333333333333%;
float: left;
text-align: center;
}
.item div {
padding: 0 15px;
}
.item img {
height: 150px;
width: 100%;
}
.footer {
background-color: darkgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
</div>
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<div class="header">
<h1>The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="area">
<h3>discounted Items</h3>
<div class="items">
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image.
This was the youtube video : https://youtu.be/5bMdjkfvONE
I got up to 1:00:0 into the video after that it no longer worked like in the video.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's because there are no images at the URL's you are using. What's more, you need to apply a height to the elements that have the background images. I only did it for one of them below.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(https://via.placeholder.com/150); height: 200px"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am making myself a digital cv, and I can't get my images to show up on one of the pages.
The CSS and the HTML you can copy and use. Everything is working expect the images showing up, and I cannot understand why this is happening.
function openNav() {
document.getElementById("hamburger").style.display = "block";
}
function closeNav() {
document.getElementById("hamburger").style.display = "none";
}
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Crown Title;
}
h3 {
font-size: 30px;
}
.main {
max-width: 1500px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px-16px;
}
img {
background-color: none;
}
.content {
background-color: none;
padding: 15px;
}
.column {
float: left;
width: 50%;
}
#media screen and (max-width:900px) {
.column {
width: 50%
}
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<div id="hamburger" class="sidenav">
×
Home
My Story
Career
Education
Portfolio
Contact Us
<img alt="logo" src="https://us.123rf.com/450wm/krisdog/krisdog1709/krisdog170900122/85720771-stock-vector-lion-standing-rampant-heraldic-crest-coat-of-arms.jpg?ver=6">
</div>
<!--Burger Icon-->
<span style="font-size 30px; cursor: pointer" onclick="openNav()">☰</span>
<div class="main">
<!--Main Photo-->
<h1>See The World Through My Eyes</h1>
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQYOECNfDLyTYX5rEW8lFdhjTknabIrOH5amCPJYYIfWOFvNVLK&usqp=CAU" alt="happy" style="width:100%">
<h3>Wedding</h3>
</div>
<!--Table Grid smaller Photos-->
<div class="row">
<div class="column">
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTMejgEW9M5tYts8sPMXHj67KOW5_uzT2qR9A0gwpi660qqYVRD&usqp=CAU" alt="colors" style="width: 100%; height:50%">
<h3>Architecture</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR0rBotboUlDoTFx1iX0FsXpt4Z4VbvA_5E34b-jG1BSQqtJ6yO&usqp=CAU" alt="animals" style="width:100%">
<h3>Animals</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSVA6mUCorGmSCDsSY4qwZvG_CTbmh_N0db-4a_Z1HDcd25ulZR&usqp=CAU" alt="my_love" style="width:100%, height:50%">
<h3>Portrait</h3>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRowQXo7erqtYGz-3pOsPVLcD-baQ4Cyz1RUH5e30tUtS0crWFY&usqp=CAU" alt="my_loves_handmande_food" style="width:100%"></img>
<h3>Bento Box(M)</h3>
</div>
</div>
</div>
<div class="content">
<img src="https://i.pinimg.com/originals/16/58/bc/1658bcc4bc5a3976845372f7f8eddd00.jpg" alt="actually_Katsu_Dragneel" style="width:100%"></img>
<h3>Next Generation</h3>
</div>
I am in a bit of a pickle trying to vertically align a div. What I aim to achieve is to have 3 divs with height: 100% and width:33% to have a centered content div. Can anyone help? Here is the code:
.wrapper {
height: 100%;
width: 100%;
}
.window {
width: 33%;
float: left;
background-color: #666;
}
.windowContent {
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
</div>
</body>
</html>
Try this example
<div class="wrapper">
<div class="window">
<div class="windowContent">
1
</div>
</div>
<div class="window">
<div class="windowContent">
2
</div>
</div>
<div class="window">
<div class="windowContent">
3
</div>
</div>
</div>
CSS
.wrapper
{
height: 100%;
width: 100%;
display: flex;
}
.window
{
width: 100%;
min-height: 200px;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
.windowContent
{
background-color: #000;
color: #fff;
}
Demo - https://jsfiddle.net/xa3v1c3o/
I'm trying to develop a pretty simple site using twitter bootstrap. When adding content I noticed that all of the content with the container class was being shifted a bit to the left with the addition of a child div of the row class with image content. The padding/margin/width of the container div doesn't seem to be changing so I'm really not sure what's affecting this change.
The HTML and CSS is below and the issue can be seen if you comment out the divs with classes .row1 and .row2. Doing so returns the content of the container class to its regular location.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Header -->
<div id="header">
<div class="container">
<div id="leftHeader">
<h1>Title</h1>
<h1 class="subtitle"><small>Subtitle</small></h1>
</div>
<div id="rightHeader">
<h3>Declaration</h3>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Navbar Header -->
<div class="navbar-header">
<a class="navbar-brand" href="index.htm">Company Name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Services</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container">
<div class="row row1">
<div class="col-md-12">
<div id="countercont">
<div id="counter"><div>0</div></div><div id="introRest">Counter text</div>
<div id="edge">Other side</div>
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 img1">
<img src="computer.jpg" />
</div>
<div class="col-md-4 img2">
<img src="lightbulb.jpg" />
</div>
<div class="col-md-4 img3">
<img src="dome.jpg" />
</div>
</div>
<div class="row row3">
<div class="col-md-6">
<h1>Title</h1>
<p>Text</p>
</div>
<div class="col-md-6">
<h1>Title 2</h1>
<p>Other Text</p>
</div>
</div>
</div>
</body>
</html>
CSS
.subtitle {
margin-top: -15px;
}
#leftHeader {
float: left;
}
#rightHeader {
float: right;
}
#rightHeader h3 {
font-size: 28px;
padding-top: 40px;
}
#counter {
border-style: solid;
border-width: 1px;
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
#counter div {
font-size: 50px;
width: 82px;
margin: 0 auto;
}
#introRest, #edge{
font-size: 30px;
display: none;
}
#edge {
float: right;
font-style: italic;
}
#countercont {
height: 80px;
}
.img1, .img2, .img3 {
text-align: center;
}
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
}
.row2 {
padding-top: 10px;
padding-bottom: 30px;
}
.row3 ul {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.row3 li {
font-size: 13px;
}
Did you try adding a max-width to your images?
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
max-width:100%; /* Added these */
max-height:100%; /* Added these */
}
Example on Bootply
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}