How can I position 3 images like this with CSS?
I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width:100%;
float:left;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Gullible</title>
<link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
<link href="normalize.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>
<body>
<header>
<nav id="top-nav">
<h1 class="logo">Gullible</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<nav id="bottom-nav">
<ul>
<li>Men</li>
<li>Women</li>
<li>Denim</li>
<li>Suits</li>
<li>Dresses</li>
<li>Accessories</li>
</ul>
</nav>
<div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
<div id="" class="pic"><img src=""/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
</body>
</html>
Use CSS flexbox.
Very simple, using a nested flex container.
.outer-flex-container {
display: flex;
}
.inner-flex-container {
display: flex;
flex-direction: column;
margin-left: 5px;
}
<div class="outer-flex-container">
<div class="image">
<img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
</div>
<div class="inner-flex-container">
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
</div><!-- END .inner-flex-container -->
</div><!-- END .outer-flex-container -->
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Check the below code, hope it helps.. Note the style is inline, you can put it wherever you want. The best place is in the external CSS file but again it's your wish:-
<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">
<div class="overlay" style="float:left;width:30%;">
Left Hand Side Pic
<img src=""/></div>
<div id="right-side" style="float:left;width:70%;">
<div id="RightPicAbove" class="info" style="background:red;">
Left Hand Side Above Pic
</div>
<div id="RightPicBelow" class="info" style="background:green;">
Rigth Hand Side Below Pic
</div>
</div>
</body>
</html>
Try this
<div id="jacket" class="pics">
<div class="imgcont">
<img src="http://i.imgur.com/47iFqA1.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div class="imgcont">
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic">
<img src="http://i.imgur.com/YJMNEtS.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
</div>
<div id="" class="pic"><img src="" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
and css
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left: 0;
top: 45%;
right: 0;
text-align: center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width: 100%;
float: left;
}
.wrap {
position: relative;
margin: 0 auto;
width: 900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
.imgcont {
display: inline-block;
}
I think what you want to be using is called floats. If you float your #hoodie picture to the left and then put your #jacket pics inside a containing div (lets call it .jackets for simplicity's sake) then float that to the right, you should get the desired effect. See my jsfiddle.
Btw you're missing an enclosing div tag on your #jacket element.
.jackets {
float: right;
}
#hoodie {
float: left;
width: 50%;
}
#jacket {
float: right;
}
#jacket1 {
float: right;
clear: both;
}
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
For my webpage, I want three inline images, with my logo below and a horizontal menu below and that is it, but it won't let me center it all. Can anyone help me? Here's my code:
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
Just to reiterate, what I'm trying to do is have on the top center three images that are aligned (each image is 320px).
Below, trying to have my logo.
And right below it, a small menu.
Nothing to fancy, really. Thanks for the read.
Simply add justify-content:center; to the .row class. See my example below of it working
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
justify-content:center;
}
.column {
flex: 33.3%;
padding: 5px;
max-width: 320px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
justify-content:center;
display: flex;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Suisse" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Plaza" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Apart" style="width:100%">
</div>
</div>
<div class="logo">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="logor">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
I change a few lines from your css code:
Removed max-width property from column class.
Removed display: block; from li a class.
Modified ul and li styles with custom id="horizontal-list".
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="all">
<div class="row">
<div class="column">
<img src="images/hs.jpg" alt="Suisse" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pp.jpg" alt="Plaza" style="width: 100%;" />
</div>
<div class="column">
<img src="images/pa.jpg" alt="Apart" style="width: 100%;" />
</div>
</div>
<div class="logo">
<img src="images/logo.jpg" alt="logor" />
</div>
<div class="menu">
<ul id="horizontal-list">
<li>Home</li>
<li>News</li>
<li>Formations</li>
<li>Revue de Presse</li>
</ul>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.all {
text-align: center;
background: gray;
}
.row {
display: flex;
text-align: center;
}
.column {
flex: 33.3%;
padding: 5px;
filter: brightness(60%);
}
.column:hover {
filter: brightness(100%);
}
li a {
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: gray;
}
#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
#horizontal-list li {
display: inline;
}
.menu {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
Hope this helps you.
I need help with my grid layout for a free code camp project.
Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.
here is the link to the codepen just in case https://codepen.io/eddiepearson/pen/xMaaYX
* {
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400');
}
html, body {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
margin-top: 0;
width: 100%;
background-color: #002171;
}
nav ul li {
display: inline-block;
margin: 55px;
margin-bottom: 15px;
margin-top: 30px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
nav ul {
text-align: left;
height: 75px;
}
nav ul li {
margin: 20px;
height: 5px;
}
}
.intro {
top: 0;
background: #002171;
min-height: 55vh;
padding-top: 45vh;
}
.intro p {
text-align: center;
color: #fff;
}
.intro h1 {
text-align: center;
color: #fff;
}
.work {
margin-top: 50px;
}
.work-header {
text-align: center;
}
#projects {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
justify-content: space-evenly;
}
#third-p {
}
.project-pic {
width: 100%;
}
.project-title {
text-align: center;
}
<nav>
<ul style="list-style-type: none" id="navbar">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<section>
<div id="welcome-section" class="intro">
<h1>Hey i'am eddie</h1>
<p>a web dev with a focus on UX</p>
</div>
</section>
<section>
<h2 class="work-header">These are some of my projects.</h2>
<div id="projects" class="work">
<div id="first-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="second-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="third-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
</div>
</section>
First, you have a small issue (typo I assume) here in the CSS
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
Shouldn't that last part be grid-template-rows?
Also you could use this to manually control each element in the grid:
#first-p {
grid-row:1;
grid-column:3;
}
I am making a list that is similar as the sample
I tried to make css code to build a list style as above. However, my output does not look like it. Could you help me to look at my css and html and help me to obtain it?
This is my current output
This is what I tried. You can see the online demo at here
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="view">
<div id="container">
<ul>
<!-- row 01 -->
<a href="#"><li class="clearfix">
<h2>Wordpress desiger</h2>
<p class="desc">Wordpress and beyond </p>
<p class="location">NY.</p>
<p class="time">Jan.</p>
<span class="jobtype">Part time</span>
</li></a>
<!-- row 02 -->
<a href="#"><li class="clearfix">
<h2>CEO</h2>
<p class="desc">Think different</p>
<p class="location">Denver</p>
<p class="time">Feb.</p>
<span class="jobtype">Contract</span>
</li></a>
<!-- row 03 -->
<a href="#"><li class="clearfix">
<h2>Interactive desiger</h2>
<p class="desc">Designer.</p>
<p class="location">NY.</p>
<p class="time">May</p>
<span class="jobtype">Full time</span>
</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS code is
body{
font-family: 'Arial', sans-serif;
font-size: 12px;
overflow-x: hidden;
}
body.is-ontop{
margin-top: 53px;
}
h1{
font-size: 44px;
}
h2{
font-size: 20px;
}
h3{
font-size: 18px;
}
a{
color: #666;
}
a:hover{
color: #ff3366;
text-decoration: none;
transition: all 0.25s;
}
a:focus{
text-decoration: none;
}
.bold{
font-weight: bold;
}
a { text-decoration: none; }
/** content display **/
#view { display: block; padding: 0; margin: 0; height:600px; overflow:hidden; overflow-y:scroll;}
#container { display: block; margin-top: 10px; }
#container ul { }
#container ul a li {
display: block;
width: 100%;
border-bottom: 1px solid #b9b9b9;
border-top: 1px solid #f7f7f7;
background: #FFF;
}
#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.location { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.time { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
}#container ul li .jobtype { position: absolute; bottom: 0px; left: 0px; font-size: 1.2em; font-weight: bold; color: #6ea247; }
#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }
#container ul a:hover li {
background: #E8EAEA;
}
Don't use tables. It's 2016. Also just a pointer, a tags are usually inside li tags.
ul a {
display: flex;
flex-direction: column;
justify-content: center;
}
ul a .information {
display: flex;
flex-direction: row;
justify-content: space-between;
}
h2, .job-type {
margin-top: 15px;
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="view">
<div id="container">
<ul>
<!-- row 01 -->
<a href="#"><li class="clearfix">
<h2>Wordpress desiger</h2>
<div class="information">
<p class="desc">Wordpress and beyond </p>
<p class="location">NY.</p>
<p class="time">Jan.</p>
</div>
<span class="jobtype">Part time</span>
</li></a>
<!-- row 02 -->
<a href="#"><li class="clearfix">
<h2>CEO</h2>
<div class="information">
<p class="desc">Think different</p>
<p class="location">Denver</p>
<p class="time">Feb.</p>
</div>
<span class="jobtype">Contract</span>
</li></a>
<!-- row 03 -->
<a href="#"><li class="clearfix">
<h2>Interactive desiger</h2>
<div class="information">
<p class="desc">Designer.</p>
<p class="location">NY.</p>
<p class="time">May</p>
</div>
<span class="jobtype">Full time</span>
</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>
I personally like to use the Lemonade CSS grid,
I think if you built it using this, it would a lot more easier to get the look your going for. It say prebuilt styles to help you accomplish it.
This might help you visualize the divs using lemonade.
Here is the link for lemonade http://lemonade.im/
You can use display:inline for the li's:
ul.inline-list {width:100%;}
ul.inline-list li {display:inline; width:33%;}
then assign class="inline-list" to the ul.
Try to simulate de comportament of the tag table, or you can use display flex to make your grid more flexible
Ex:
<ul>
<li class="row">
<a href="#">
<div class="td function">
<h2>Wordpress desiger</h2>
<p class="desc">Wordpress and beyond </p>
<span class="jobtype">Part time</span>
</div>
<div class="td location">
<p>NY.</p>
</div>
<div class="td time">
<p class="time">Jan.</p>
</div>
</a>
</li>
</ul>
CSS ex:
.row a{
width: 100%;
display: flex;
justify-content: space-between;
}
.td{
padding: 5px;
}
.function{
width: 60%;
}
.location,.time{
width: 20%;
}
I am trying to create a footer where there is text to the left, center and right. So far I have done this but the issue is the divs in center are stacking up vertically rather than horizontally. I have tried applying float:left to the .entypo elements which works, but it moves all of them next to .footerslinks-left, instead of staying in the center.
http://jsfiddle.net/8uL2e4bw/
So the HTML is as followed:
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
Yes I am aware the code is not the tidiest, I should probably address this first to avoid unnecessary complications!
CSS:
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
The default display property for a div is block, which expands to 100% width.
Try with:
.footersocial-center div {
display: inline;
}
#import url(http://weloveiconfonts.com/api/?family=entypo);
footer {
text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}
.topfooter {
margin: 10px auto;
max-width: 720px;
}
.footerlinks-left, .footerlinks-left a {
float: left;
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;
}
.footersocial-center {
font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;
}
.footeraddress-right {
float: right;
}
.footeraddress-right p {
margin: 0;
padding: 2px;
}
.entypo-phone, .entypo-mail {
font-family: 'entypo', sans-serif;
padding: 2px;
}
.footersocial-center div{
display: inline;
}
<footer>
<div class="topfooter">
<ul class="footerlinks-left">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="footeraddress-right">
<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p>
<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello#salon.com</div>
</div>
<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>
</div>
</footer>
I am realtively new to HTML/CSS and working on a responsive site. I'm sure I have some improper techniques at this point but aesthetically things are working okay for me so far. MY problem is functional when my screen size gets below full view. Around 768 only 1 link (the contact link) seems to work and I'm not sure why. Any help would be much appreciated! Thanks!
HTML:
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>my<br/>name</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>Footer Text</p>
</div>
</div>
</body>
</html>
CSS:
body {
max-width: 90%;
margin: 0 auto;
font-size: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3em;
line-height: 85%;
color: #2d9471;
background-color: #1a5642;
float: left;
padding: 1em;
}
#header {
overflow: hidden;
z-index: "";
}
#nav {
position: relative;
top: 11em;
margin-bottom: 1 em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 4em;
}
#feature{
margin: 1%;
background-color: #1a5642;
padding: 5em;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
background-color: #1a5642;
}
.column3 {
margin-right: 0%;}
}
#feature, .article {
margin-bottom: 1em;
}
#media (max-width:480px){
#nav {
position: relative;
top:.05em;
width:200px;
}
}
#media (max-width:767px) and (min-width:481px){
#nav {
position: relative;
top: 5em;
}
}
The list items in your navigation have a large padding and they are also positioned inline. When they break on the next line (because there is not enough horizontal space) they overlap. The padding of the ones coming last in the list extend over the links above and cover them up. That's why you can't click them.
Try this as a quick fix:
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 0 4em; /* removed padding at the top and bottom */
}