I am trying to make my own web page.
so what i want is text on left and image on right.
problem 1: image will not change the size to 300px
problem 2: i am trying to have the image on the right side, I tried using float and it did not work.
p,
h1 {
margin: 0px;
padding: 0px;
}
.top {
margin-left: 20%;
}
.top img {
float: right;
margin-right: 35%;
width: 300px;
height: 300px;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting my page.
</p>
<br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
Try this:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.words, .list{
width: 100%;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
try this code:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
height: auto;
background-color: aqua;
padding: 20px;
display: inline-block;
width: 100%;
}
.top img{
float:right;
width:300px;
height:300px;
}
<body>
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</ul>
</div>
</body>
The image gets 300px width, but for making it better add a .image class in your css. Use flex display instead of using float. to set your image on right you can simply add rtl direction to div with top class or put it after div with word class.
p,h1{
margin: 0px;
padding: 0px;
}
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
justify-content: center;
align-items: center;
}
.top .image img{
width:300px;
height:300px;
}
<div class="top">
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
<div class="image">
<img src="http://simpleicon.com/wp-content/uploads/user1-256x256.png" />
</div>
</div>
Related
I am creating a website that currently uses css and html and I am running into the problem where my grid in css is created inside the .middle element, but it is also moving elements inside the neighbouring .header element. To see this, change the first margin value inside of the css to see what happens.
h1 {
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: lightgray;
z-index: -1;
}
li{
display: inline;
margin-right: 10px;
}
.nav{
position: fixed;
z-index: 10;
padding:10px;
width: 15px;
left: 48%;
}
.friends{
}
.user-post{
padding-top: 20px;
}
.posts{
background-color: lightgrey;
}
.post:nth-child(odd){
background-color: grey;
}
.bottom{
position: fixed;
bottom: 0%;
}
.headings{
position: fixed;
z-index: 100;
right: 0%;
}
.middle{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: minmax(150px, auto);
padding: 15px;
margin: 10% auto;
width: 100%;
grid-gap: 20px;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="Main_Page.css">
</head>
<body>
<div class="header">
<h1 id="top">Search Media</h1>
<div class="nav">
<input type="text" placeholder="Search...">
</div>
<div class="headings">
<ul>
<li>Messages</li>
<li>Friends</li>
</ul>
</div>
</div>
<div class="middle">
<div class="user-post">
<br />
Create post:<br>
<textarea id= "create_post"rows="10" cols = "50" name = "post"></textarea><br>
<input type="submit" value="Post">
</div>
<div class="friends">
<h2 id="friend">Friends</h2>
<h5>Friend1</h5>
<p>status: active</p>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p><img src="Example.jpg" alt="manchester" width="50" height="50">This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
</div>
</div>
<div class="bottom">
<p>Return to top</p>
</div>
</body>
I am creating a portfolio page in which I am showing my 6 projects, 3 in a row using flexbox. The items inside are flowing out of the flexbox even though I have used flex-wrap. I am relatively new to this so I don't know what is happening.
The red border is my flexbox container and it contains six div elements. Inside each div element, there is one image and another div element which is like a caption. Each image is of a different size
HTML Code:
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
CSS Used:
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
There is one particular line which is enabling equal height for all images height: calc(100% );. I don't know how it works, I took it from the internet. It was used to have the equal height for each image.
Also, the bottom and the top margin between blocks is not working.
I want some help in wrapping content inside container properly and understanding how height: calc(100% ); works.
Complete Code: https://codepen.io/tushar_432/pen/poyxmyZ
Don't make the image height:100%, this will make the image take all the space pushing the text outside thus the overflow. Use flexbox to make it fill all the space minuse the text space:
#work-container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block {
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block {
width: 45%;
}
}
.work-block {
display:flex; /* here */
flex-direction:column; /* here */
}
.work-block img {
width: 100%;
margin: 0;
padding: 0;
object-fit: cover;
flex: 1; /* here */
}
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
</section>
Your caption is overflowing, you can add
display: flex;
flex-direction: column;
to your .work-block
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Catamaran:wght#400;600&family=Raleway:ital#1&display=swap');
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
top:0;
}
body{
background-color: bisque;
font-family: 'Catamaran', sans-serif;
text-align: center;
}
#header{
position: sticky;
top:0px;
margin:0;
}
#navbar{
color:white;
width:100%;
display: flex;
background-color:#12343b;
flex-direction: row;
justify-content: flex-end;
padding:18px;
font-family: 'Catamaran', sans-serif;
font-size: x-large;
font-weight: 450;
border-bottom: 2px solid white;
}
.nav-block:hover{
color:#e1b382;
}
.nav-block{
padding:0 20px;
}
#about h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 700;
font-size: 65px;
color: #fefefe;
}
#about h3{
font-size:24px;
font-family: 'Raleway', sans-serif;
color: #e1b382;
}
#about{
text-align: center;
padding:250px;
background-color:#2d545e;
color:white;
}
#work{
padding:50px 0;
background-color: #e1b382;
}
#work h1{
font-weight: 600;
font-size: 40px;
color: #12343b;
}
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
display: flex;
flex-direction: column;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
#contact{
padding:150px;
background-color: #2d545e;
}
#contact-container{
display: flex;
}
#footer{
padding:40px;
background-color:#2d545e;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<header id="header">
<nav id="navbar">
<div class="nav-block">About</div>
<div class="nav-block">Work</div>
<div class="nav-block">Contact</div>
</nav>
</header>
<section id="about">
<h1>Hey I am Tushar</h1><br>
<h3>a computers <br>and technology enthusiast</h3>
</section>
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<div id="contact-container">
<div class="contact-block">
<i class="fab fa-facebook"></i><span>Facebook</span>
</div>
<div class="contact-block">
<i class="fab fa-github"></i><span>Github</span>
</div>
<div class="contact-block">
<i class="fas fa-hashtag"></i><span>Twitter</span>
</div>
<div class="contact-block">
<i class="fas fa-at"></i><span>Send a mail</span>
</div>
<div class="contact-block">
<i class="fas fa-mobile-alt"></i><span>Call me</span>
</div>
</div>
</section>
<footer id="footer">
<span>**This is just a fake portfolio. All the projects and contact details given are not real.</span>
<span>© Created for freeCodeCamp </span>
</footer>
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>
How would I make it so the banners along the top and bottom of this page (http://i.imgur.com/SxjbCJV.jpg) are instead at both sides of the page?
I currently have them both fixed to the top and bottom of the page:
#header {
position: fixed;
top: 0;
width: 100%;
height: 66px;
z-index: 999;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 66px;
z-index: 999;
}
And the HTML:
<body>
<div id="wrapper">
<a href="project.html">
<div id="header">
<button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i>
</button>
</div>
</a>
<div id="main">
<div id="splash">
<div id="name">
<h1 class="wow animated flipInX">Max Wilson</h1>
</div>
<div id="profile">
<img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s">
</div>
<div id="subtext">
<h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2>
</div>
</div>
</div>
</div>
<a href="project.html">
<div id="footer">
<button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i>
</button>
</div>
</a>
Have you tried floating the header and footer to the left?
For example:
#header {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#footer {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#wrapper{ text-align: center;
margin-left: auto;
margin-right: auto;
}
#main{ width: 800px;
float:left;
}
Here's a simple and interesting method: giving the body display: flex and the content flex-grow: 1 so it occupies all the available space and pins the other elements to either side.
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
<div id="content">
<p>asdfasdf</p>
</div>
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
body {
display: flex;
}
.side, #content {
padding: 10px;
}
.side {
background: blue;
}
#content {
flex-grow: 1;
background: grey;
}
https://jsfiddle.net/JackHasaKeyboard/rz86xwxh/2/
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;
}