I got this footer im wanting to go to the bottom of my display and stay there (not so much a fixed position as i want it to change with the content that is in it). at the moment its made to be a sticky footer and moves with the content, im just wanting it to be constantly positioned at the bottom of the display so there isnt this weird floating gap with a huge space beneath it.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contactspace"></div>
<!--close contactspace!-->
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
<div class="contactspace"></div>
<!--close contactspace!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
</i>
Layout CSS:
#charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header{
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333 ;
-webkit-box-shadow: 0px 10px 20px 0px #333 ;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo{
position: absolute;
min-width:60px;
top:4%;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social{
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img{
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu{
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt{
width:100%;
text-align: center;
background:#070707;
font-family: 'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
Content CSS:
#charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap{
margin-top:100px;
width:100%;
text-align: center; /* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content: "";
display: table;
clear: both;
}
.infotxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block; /* make it possible to use text-align */
width: 15%;
min-width: 180px; /* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img{
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%; /*bring back if needed*/
height: auto; /*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
position:relative;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
i wasnt too sure what code was needed and had 2 style sheets that may affect the footer div......So basically im wanting .footerwrap2 to be at the bottom of the browser even after device and browser size changes. Thanks in advance!
I copied all your code into a local page and added the following lines:
For the footerwrap2, I changed the position from relative to absolute, and positioned it at the bottom of the page.
position:absolute; bottom: 0;
As you've probably already found, that wasn't enough. The body, and wrapper div have no idea how TALL the content page is, therefore, they determine the size based on content.
I solved the problem by adding the following style to the main wrapper (.wrapper)
height: 100vh;
This uses the latest CSS3 view height so it will only work on modern browsers. If you must maintain compatibility with older browsers, you'll need to set the height for the body, wrapper, and possibly the html tags to be 100%.
I tested it locally and it works like a champ. If you can't get it to work, I'll move it to a fiddle.
Good Luck!
Related
So I have made a simple HTML and CSS website with the background image currently set as the ocean picture.
Here is the code for this website
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li>Cooking</li>
<li>Writing</li>
<li>Creative</li>
<li>Photography</li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
ARTICLES
ARTWORK
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
ul li.active a{
background-color: #fff;
color: rgb(115, 196, 233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
For this website I want the background image to be a slider showing three images. I have built the slider separately. Here is the code for the slider:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS:
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
Could someone please tell me how I can make the slider of pictures the background of my website?
Thank you!
Make use of position:absolute and set the container height and width to 100%. (I used vh & vw to take the device/view height and width).
I hope you can take it forward. Cheers!!!
// no change here
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML!
help would be appreciated
HTML
<div id="con">
<div id="box1">
<p id="text1">
DESTINATIONS
</p>
</p>
<p id="text2">
AMALFI<BR>SORRENTO<BR>POSITANO</a>
</p>
<p id="text3">
THINGS TO DO
</p>
</p>
<p id="text4">
TOURS<BR>MUSUEMS<BR>SHOPPING</a>
</p>
</div>
css
#con {
width:1024px;
height:670px;
background-color: #161717;
}
#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}
#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center;
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}
This can be done with :before or :after
#box1{
position:relative;
}
#box1:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:black;
opacity:0;
z-index:0;
}
#box1:hover:before{
opacity:.6;
transition: all 0.5s;
}
#box1 > *{
position:relative;
z-index:1;
}
http://jsfiddle.net/4bo4zju7/3/
CS3 is great! You no longer need JS for simple rollover effects. Gopalraju's above code should work and so does my example below. You can have a fiddle with it and use the code as you see fit.
The parent div, has a black page background, and the imgdiv changes everything inside it to a opacity by 50% on the mouse rolling over the div. In this case the image is inside the div.
There are a few ways of doing this. This is just another one to ad into the mix. Good luck.
.parentdiv {
background-color:#000;
height:100%;
width:100%;
}
.imgdiv {
padding:30px;
}
.imgdiv a{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}
.imgdiv a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.5s linear;
}
<div class="parentdiv">
<div class="imgdiv">
<a href="http://www.domain.com.au/link.html">
<img src="http://placehold.it/350x150" alt="image" height="150" width="350">
</a>
</div>
</div>
JSFIDDLE: http://jsfiddle.net/7zk1bbs2/
If you look at the jsfiddle product you ll see the icons are fitted in an orange box. However, you have to scroll vertically to search through them and im trying to scroll horizontally. How do i do this?
HTML
<!DOCTYPE>
<HTML>
<head>
<meta charset="UTF-8">
<title> My Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="banner">
<h1> Welcome!<span style="color:#FF009D" class="dot">•</span><span style="color:#12E00B" class="dot">•</span><span style="color:#FF9D00" class="dot">•</span> </h1>
</div>
<div class="wrap">
<div class="item">
<a href="https://www.youtube.com/user/maxxchewning">
<img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/PhysiquesOfGreatness">
<img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.reddit.com">
<img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ebay.com">
<img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.facebook.com">
<img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png"/>
<div class="button"></div>
</a>
</div>
</div>
<div class="footer"></footer>
</body>
</HTML>
CSS
body {
margin-top:-3px;
}
.banner {
width:100%;
height:200px;
background-color: rgba(64, 201, 255, 1);
margin-left:-10px;
}
h1 {
font-size:80px;
margin-left:30px;
font-family:Futura;
line-height:120px;
color:rgba(255, 255, 255, 1);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
width:100%;
letter-spacing:1px;
padding-top:30px;
}
h1:hover {
font-size:80px;
font-family:Futura;
color: rgba(64, 201, 255,.8);
text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
width:100%;
padding-top:30px;
}
.wrap{
margin-top:20px;
width: 100%;
background-color: rgba(255, 190, 77, 1);
height:200px;
margin-left:-10px;
overflow:auto;
}
.item {
float:left;
width:25%;
padding:0px;
margin-left: 60px;
margin-top: 20px;
}
.item img {
width:100%;
padding-top:10px;
max-height:100px;
opacity:1;
}
.item img:hover {
opacity:.4;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.button {
background-color:rgba(64, 201, 255,1);
height:50px;
width:100%;
border-bottom-right-radius:.5em;
border-bottom-left-radius:.5em;
transition: background-color 0.3s linear;
}
.item:hover .button{
background-color: rgba(255, 0, 157, 1);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
you change your .wrap class overflow with
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
and change your .item class float with
display: inline-block;
.wrap and item final look like this
.wrap{
margin-top:20px;
width: 100%;
background-color: rgba(255, 190, 77, 1);
height:200px;
margin-left:-10px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
display: inline-block;
width:25%;
padding:0px;
margin-left: 60px;
margin-top: 20px;
}
May be your problem is solved
With little tweaks you can do this check the updated fiddle
enter link description here
.wrap-in { width:2000px; }
.item {width:200px}
.wrap{overflow:hidden;overflow-x:scroll;width:960px}
Your h1 is bleeding past the .banner. (in particular, the margin-left on the h1 is causing the page to get a horizontal scroll)
Two solutions:
Have the .banner hide anything beyond its bounding box(http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/3/)
.banner {
overflow:hidden;
}
It kind of looks ugly without additional styling...
Remove the left-margin from the h1 (http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/2/)
h1 {
margin-left: 0;
}
But with this, you lose the padding you were attempting.
Or a combination of the above (I cleaned up the code a little):
http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/4/
Also, as minor css improvement for your fiddle, when using {selector}:hover, you only need to add the css styles that you want changed, you don't have to redefine what already exists with {selector}.
Trying to put my header button in the center of the page
This is my css:
header div {
height: 250px;
width:950px;
background-color: white;
border-width: 5px;
border-style: solid dark-blue 5px;
border-radius: 10px;
margin: auto;
padding-top: 50px;
clear: both;
float: center;
vertical-align: middle;
}
my html:
<header>
<div> <img src="test.png"> </div>
</header>
float takes only three values: left, right and none.
Change the float: center to text-align: center and replace border-width: 5px; border-style: solid dark-blue 5px; with border: 5px solid darkblue;
header div {
height: 250px;
width:950px;
background-color: white;
border: 5px solid darkblue;
border-radius: 10px;
margin: auto;
padding-top: 50px;
clear: both;
text-align: center;
vertical-align: middle;
}
<header>
<div>
<img src="http://dummyimage.com/300x200/000/fff" />
</div>
</header>
update
As you added your code (in an answer?) i see what you want and here is what you want:
.gradient {
/* can be treated like a fallback */
background-color: #F8F8FF;
/* will be "on top", if browser supports it */
background-image: linear-gradient(#F8F8FF, #00BFFF);
/* these will reset other properties, like background-position, but it does know what you mean */
background: #F8F8FF;
background: linear-gradient(#F8F8FF, #00BFFF);
}
* {
/* Reset the default styles.
Use border-box because it's easier! */
padding:0;
margin:0;
box-sizing:border-box;
text-align: center;
}
body {
background:#DCDCDC;
color:aliceblue;
font-family:'Open Sans', sans-serif;
font-weight:300;
margin:0 auto;
/* Click-and-drag or text-selection doesn't make sense. */
/* Or long-tap on webkit phones. */
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
main {
/* Use a max-width so that we have 4 columns */
max-width:680px;
margin:auto;
padding:20px;
}
header {
text-align:center;
margin:0 5px 36px 5px;
font-size:24px;
background:white;
}
ul {
/* We don't need actual bullets */
list-style:none;
}
li {
float:left; /* So that they wrap */
height:150px;
width:150px;
margin:5px; /* The gaps between them */
text-transform:capitalize;
/*transition may need prefixes in some browsers */
-webkit-transition:.2s -webkit-transform, 1s opacity;
-moz-transition: .2s -moz-transform, 1s opacity;
-o-transition: .2s -o-transform, 1s opacity;
transition: .2s transform, 1s opacity;
/*transform*/
-webkit-transform:perspective(800px);
-moz-transform:perspective(800px);
-ms-transform:perspective(800px);
-o-transform:perspective(800px);
transform:perspective(800px);
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin-x:50%;
-webkit-transform-origin-y:50%;
text-align:center;
cursor:pointer;
}
/* When moused over, rotate it! */
li:active {
/*transform*/
-webkit-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-moz-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-ms-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
-o-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
}
/* It'd be neat to have double-width tiles */
.span2{
width:310px;
}
/* Icon and number */
li i{
font-size:60px;
margin:35px 0 0;
}
/* Text label on tiles */
li span{
position:absolute;
bottom:8px;
left:8px;
}
a:link {
text-decoration: none;
color: black;
}
/* Specialized background colours */
.smartwatches{
background:yellow;
color: black;
}
.tabletpc{
background:rgb(27, 161, 226);
}
.inktoner{
background:rgb(240, 163, 10);
}
.kenton{
background:rgb(119, 158, 203);
}
.Healthfitness{
background:rgb(0, 80, 239);
}
.accessories{
background:rgb(119, 221, 119);
}
.cellc{
background:rgb(0, 192, 0);
}
.mweb{
background:rgb(27, 161, 226);
}
.messages{
background:rgb(240, 163, 10);
}
.contacts{
background:rgb(119, 158, 203);
}
.internet{
background:rgb(0, 80, 239);
}
.maps{
background:rgb(119, 221, 119);
}
.jobcard{
background:rgb(130, 111, 214);
}
.asktechguy{
background:rgb(100, 118, 135);
}
.register{
background:rgb(255, 105, 97);
}
.agentsreseller{
background:rgb(162, 0, 37);
}
header {
position: relative;
height: 250px;
border: solid blue 5px;
}
header div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
footer div {
height: 100px;
background-color: grey;
border: solid darkblue 5px;
border-radius: 10px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 50px;
clear: both;
float: center;
}
<!-- ontouchstart makes :active work in mobile Safari -->
<body ontouchstart="" class="gradient" >
<main>
<header>
<div> <img src="img.png" /> </div>
</header>
<!-- Now make the tiles! -->
<!-- Use the <i> to make the icon and number -->
<!-- Move the <span>s in CSS so they appear in the bottom left corner -->
<ul>
<li class="smartwatches"><i class="fa fa-smart-watches"> <img src=""/> </i><span> <a href="#"> Smart Watches<a/></span></li>
<li class="tabletpc"><i class="fa fa-tabletpc"> <img src=""/> </i><span> Tablet pc's</span></li>
<li class="inktoner"><i class="fa fa-inktoner"> <img src=""/> </i><span>Ink & Toner</span></li>
<li class="kenton"><i class="fa fa-kenton"> <img src=""/> </i><span> Kenton products</span></li>
<li class="Healthfitness"><i class="fa fa-healthfitness"> <img src=""/> </i><span> Health & Fitness</span></li>
<li class="Accessories"><i class="fa fa-accessories"> <img src=""/> </i><span> Accessories</span></li>
<li class="cellc"><i class="fa fa-cellc"> <img style="position: absolute; top: 15px; left:20px; right:20"src="http://logo.jpg" height="80px" width="100px"/> </i><span> CellC Deals </span> </li>
<li class="mweb"><i class="fa fa-mweb"> <img style="position: absolute; top: 15px; left:20px; right:20" src="http://eeb-logo.jpg" height="80px" width="100px"/></i><span> WEB </span></li>
<li class="photos"><i class="fa fa-instagram"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="settings"><i class="fa fa-gears"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="phone"><i class="fa fa-phone"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="messages"><i class="fa fa-comments"> <img src=""/></i><span><a href="#"> Smart Watches<a/></span></li>
<li class="jobcard"><i class="fa fa-jobcard"> <img src=""/></i><span><a href="#"> Job Card Bookings<a/></span></li>
<li class="asktechguy"><i class="fa fa-asktechguy"> <img src=""/></i><span><a href="#"> Ask Tech Guy<a/></span></li>
<li class="register"><i class="fa fa-register"> <img src=""/></i><span><a href="#"> Register here<a/></span></li>
<li class="agentsresellers"><i class="fa fa-map-agentsresellers"> <img src=""/></i><span><a href="#"> Agents & Resellers<a/></span></li>
</ul>
</main>
<footer>
<div>
<p></p>
<p> All rights reserved E-C </p>
<p> Designed by Eng </p>
</div>
</footer>
</body>
Just use css attribute text-align.
text-align: center;
See http://jsfiddle.net/g7hecLjo/
There is no float:center.
try something like this:
<div class="outer">
<div class="inner">
<img src="somwhere.html"> <!-- this will be centered -->
</div>
</div>
the CSS
div.outer {
text-align:center;
}
div.inner {
display:inline-block;
}
display:inline-block causes the inner div to shrink-wrap the image (or whatever you want to center). The text-align:center; moves it to the middle of the outer full-width div. HTH.
Also while the simple text-align:center works for inline elements, the technique I show here allows you to center block level elements such as menus created from unordered lists.
user4285276, I have encountered this exact problem on numerous sites of mine. Many of the other answers are more complex than they need to be, so I’d recommend trying this method first. Let me tell you how to center an image, regardless of a div, nav, or header around it, and then we can work from there. The CSS needed to center a single item is very simple.
img {
position: absolute;
left: 50%;
margin-left: -Xpx
}
In this code, X is equal to half of the width of your image or other object. So the code for your image if it was 100 pixels wide would show X as 50.
img {
position: absolute;
left: 50%;
margin-left: -50px
}
In other words, this code tells the image to move halfway across the page, then move half of the image’s width back towards the side of the page, centering it perfectly. To execute this in your code, do the following steps.
A. Set header width to 100%.
B. Add the following code to the div nested within your header, where X is equal to half of your div’s width.
div header {
position: absolute;
left: 50%;
margin-left: -Xpx
}
C. Add the same code to the image nested within your div, where X is equal to half of it’s width.
#yourimage {
position: absolute;
left: 50%;
margin-left: -Xpx
}
So at the end of all this, your basic HTML would look like this:
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<img id="yourimage" src="image.png">
</div>
</header>
</body>
</html>
...and your CSS would look like this:
header {
width: 100%;
}
header div {
position: absolute;
width: 400px;
right: 50%;
margin-right: -200px;
}
#yourimage {
position: absolute;
width: 100px;
height: 100px;
right: 50%;
margin-right: -50px;
}
My website is composed of a fixed sidebar and a wrap which contains a gallery. The gallery is successfully centered within the wrap, but my problem is that the text-align:center property is also applied to the pictures
I haven't enough reputation points to post a second picture, but basically I would like the fifth picture to be under the first one.
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Jean Iturralde</title>
<meta name="description" content="Portfolio de Jean Iturralde"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.backstretch("img/wooden.png");
});
</script>
</head>
<body>
<div id="sidebar">
<header>
<h1>Jean Iturralde</h1>
<ul>
<li><a class="active" href="#">Portfolio</a></li>
<li>Blog</li>
<li>CV</li>
<li>Contact</li>
</ul>
</header>
<div id="circle_pic">
<div id="circle_pic_hover"><p>Jean<br />62 ans<br />Peintre<br /></p></div>
</div>
<section>
<div class="sidebar_title"><img src="img/quotes.png" class="icon" /><h2>Bienvenue,</h2></div>
<p class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae magna quam, commodo vulputate nulla. Mauris fringilla mi sapien, in semper turpis. Aliquam consequat magna nec magna egestas vitae aliquet turpis lacinia. Praesent commodo commodo scelerisque. Maecenas dui urna, egestas vel commodo quis, adipisci.</p>
</section>
<footer>
<p>
Jean Iturralde<br />
Tous droits réservés<br />
</p>
</footer>
</div>
<div id="wrap">
<div id="content">
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_1.jpg">
<div class="meta">
<h2>Tableau 1<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_2.jpg">
<div class="meta">
<h2>Tableau 2<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_3.jpg">
<div class="meta">
<h2>Tableau 2<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_4.jpg">
<div class="meta">
<h2>Tableau 4<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
<div class="box">
<a href="#"><div class="boxcontent">
<img src="img/tableau_5.jpg">
<div class="meta">
<h2>Tableau 4<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
#font-face {
font-family: 'museo_sans500';
src: url('fonts/museo_sans_500-webfont.eot');
src: url('fonts/museo_sans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/museo_sans_500-webfont.woff') format('woff'),
url('fonts/museo_sans_500-webfont.ttf') format('truetype'),
url('fonts/museo_sans_500-webfont.svg#museo_sans500') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin:0;
}
a{
text-decoration:none;
}
#sidebar{
position:fixed;
left:0;
height:100%;
min-height:720px;
background-color:white;
padding:15px 30px 0 30px;
width:260px;
text-align:center;
}
header h1{
margin:0 0 10px 0;
}
header h1 a{
color:#303030;
font-family: 'Lobster', cursive;
font-size:40px;
font-weight:normal;
margin:0;
}
header ul{
list-style:none;
margin: 0 0 0 -25px;
}
header li a{
float:left;
font-family:'museo_sans500';
font-size:15px;
color:#afafaf;
transition: all 500ms;
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
-ms-transition: all 500ms;
border-top:solid 7px #ababab;
padding:8px 8px 0 8px;
}
header li a:hover{
color:black;
border-top:solid 7px #303030;
}
header li a.active{
color:black;
border-top:solid 7px #303030;
}
#circle_pic{
width:174px; height:174px;
-webkit-border-radius: 87px; -moz-border-radius: 87px;
background:url(img/profilepic.png) no-repeat;
margin:70px 0 20px 0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#circle_pic_hover{
background-color:rgba(0,0,0,0.5);
width:auto; height:175px;
margin-top:175px;
overflow:hidden;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#circle_pic_hover p{
font-family: 'Open Sans', sans-serif;
color:white;
font-weight:400;
font-size:16px;
line-height:27px;
margin-top:45px;
}
#circle_pic:hover #circle_pic_hover{
margin-top:0;
}
section{
margin-bottom:40px;
}
.sidebar_title{
text-align:left;
}
.icon{
margin-bottom:-2px;
margin-right:10px;
display:inline;
height:30px;
}
#sidebar h2{
display:inline;
margin:0;
font-size:29px;
color:#d9d9d9;
font-family: 'Open Sans', sans-serif;
font-weight:400;
}
.main_text{
font-family:'museo_sans500';
color:#252525;
margin-top:0;
font-size:13px;
text-align:justify;
line-height:25px;
}
footer {
width:260px;
position:absolute;
left:50%;
bottom:5px;
margin-left:-130px;
}
footer p{
text-align:center;
font-family:'museo_sans500';
color:#959595;
font-size:11px;
margin-bottom:25px;
}
footer a{
color:#353535;
}
#wrap{
position:absolute;
left:320px;
top:30px;
right:0;
}
#content{
text-align:center;
color:white;
}
/*******/
.box {
position:relative;
display:inline-block;
width:24%;
padding-bottom:31%;
}
.boxcontent {
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
overflow:hidden;
}
.boxcontent img{
width:100%;
}
.boxcontent .meta{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom:-52px;
background: #000;
background: rgba(0, 0, 0, 0.7);
color: #FFF;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
font-family:'museo_sans500';
}
.meta h2,h3{
color:#b0b0b0;
margin:0;
}
.meta h2{
font-weight:bold;
font-size:15px;
margin-bottom:3px;
}
.meta h3{
font-weight:normal;
font-size:11px;
font-style:italic;
}
.boxcontent:hover .meta{
margin-bottom:0;
}
#media only screen and (max-width : 650px) {
/* Smartphone view: 1 tile */
.box {
width: 76%;
padding-bottom: 100%;
}
#sidebar{
position:static;
margin-top:0;
width:100%;
min-height:0;
height:120px;
}
header{
width:280px;
margin:0 auto;
}
nav ul{
margin:0 0 0 -15px;
}
#circle_pic, section, footer{
display:none;
}
#wrap{
position:static;
margin-top:30px;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 76%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 1390px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 38%;
padding-bottom: 50%;
}
}
Thanks for your help.
I would change the way you are positioning #sidebar and #wrap to start with.
I would change the styles on #sidebar to be:
#sidebar {
background-color: #FFFFFF;
float: left;
height: 100%;
left: 0;
min-height: 720px;
padding: 15px 30px 0;
position: fixed;
text-align: center;
width: 16%;
}
All I have done on this is removed the hard-coded width: 260px to make the design a little bit easier to work with and removed the redundant left: 0. If I was to continue refining the design I would change other declarations slightly but that is beyond the scope of the question.
Next, I would change the style of #wrap to be:
#wrap {
float: right;
margin-right: 1%;
width: 78%;
}
And finally change the style of .box to be:
.box {
display: inline-block;
float: left;
padding-bottom: 31%;
position: relative;
width: 25%;
}
Obviously you can play with the margins and widths to get the design looking exactly as you want but this should get you into a rough position.
Try changing text:align: center to text-align:left for #content, unless this introduces a problem I cannot see (?)
Rather than aligning the images with a text-align, you can use float:left; instead. However, based one your current CSS/HTML, this moves the images too far to the left. What you can do instead, if change the way the entire list is being centered.
So:
#content {
padding:0 12%;
/* remove the text-align declaration */
}
.box {
float:left;
width:50%;
}
This would be a more flexible layout. Play with the values to get the sizes you want (the padding value, for example... this can be a % or em or px value here, because the .box is % based.)
Try using the last-child pseudo-class:
.box:last-child {
float: left;
left: 121px;
}
You could create a table in the place of using the divs in order to force the images into the layout you want. Then no need to worry about the text-align: center; in your content block.