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}.
Related
I have 4 images and want them to be displayed 2 on each row. Each of them has a width:50% and also a float:left.
HTML
<section class="opportunity">
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="clearfix"></div>
</section>
CSS:
.clearfix{
clear: both;
}
section{
text-align: center;
}
.main{
float:left;
width:50%;
text-align: center;
border:10px solid white;
width:306px;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:active .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover
{
opacity: 0.5;
}
The problem is that all of the image are displayed within the same row. The width:50% does not seem to applied. How can I display the images two by two instead of having them all displayed on the same line?
You added width twice, with percentage and pixels, you should remove that:
.clearfix{
clear: both;
}
section{
text-align: center;
}
.some-container {
float:left;
width:50%;
position: relative;
}
.main{
text-align: center;
border:10px solid white;
width:306px;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:active .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover
{
opacity: 0.5;
}
<section class="opportunity">
<div class="some-container">
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
</div>
<div class="some-container">
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
</div>
<div class="some-container">
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
</div>
<div class="some-container">
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
</div>
<div class="clearfix"></div>
</section>
The float cannot work because the elements dont fit into a row. You have set a margin. The complete width of an element is width+margin-left+margin-right. That must be smaller than 50%
Instead of using float everywhere, try using a HTML table, with 2 rows and 2 columns.
<table>
<tr>
<td>img1</td>
<td>img2</td>
</tr>
... etc
</table>
Then set all your table cells to be 50% wide using CSS.
You are using float as well as margin:0 auto replace the main css with the following;
.main{
float:left;
width:50%;
text-align: center;
border:10px solid white;
width:306px;
height:306px;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
You have added the width twice remove that 306px and give box sizing border-box to make sure that borders are taking from inside see this fiddle https://jsfiddle.net/pwfucx16/
<section class="opportunity">
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="phone.jpg">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="clearfix"></div>
</section>
Style sheet is
.clearfix{
clear: both;
}
section{
text-align: center;
}
.main{
float:left;
text-align: center;
border:10px solid white;
height:306px;
width:50%;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:active .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover
{
opacity: 0.5;
}
Your main problem is the fact that you have two width properties on the CSS rule for .main. You're setting the width to 50% but then overriding it again a few lines later to a value of 306px:
.main{
float:left;
width:50%;
// ...
width:306px;
// ...
}
Secondly, the 10px border that you're applying to your .main element will not be taken into account when the 50% width is calculated and so your elements will be 20px (2 x 10px) wider than 50%. To fix this, you'll need to set the box-sizing property value to `border-box':
.main {
// ...
-moz-box-sizing: border-box;
box-sizing: border-box;
}
There are a few other kinks to sort out as well but this will solve your requested issue. I'm not sure exactly what you're going for here so when you run into more issues feel free to create another question and link to it here.
Here's a snippet with my proposed fixes to display 2 images in a row:
.clearfix{
clear: both;
}
section{
text-align: center;
}
.main{
float:left;
width:50%;
text-align: center;
border:10px solid white;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:active .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 100%;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height: inherit;
width: inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover
{
opacity: 0.5;
}
<section class="opportunity">
<div class="main">
<img src="http://placehold.it/650x350" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="http://placehold.it/650x350">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="http://placehold.it/650x350">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="main">
<img src="http://placehold.it/650x350">
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
<div class="clearfix"></div>
</section>
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!
Under "School" the second image isnt the same size as any of the other images on my website. How do i resize the image?
JSFIDDLE: http://jsfiddle.net/54k90fof/
(ignore the messed up banner at the top. It looks different in my browser but it looks bad in JSfiddle)
HTML
<!DOCTYPE>
<HTML>
<head>
<meta charset="UTF-8">
<title> My Home Page</title>
<link rel="stylesheet" type="text/css" href="css/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 class="Navi">
<nav>
<ul>
<li>About me! </li>
<li>Email me </li>
<li>Photography</li>
</ul>
</nav>
</div>
</div>
<p> Favorite Websites</p>
<div class="wrap">
<div class="wrap-in">
<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>
<p> School </p>
<div class="wrap">
<div class="wrap-in">
<div class="item">
<a href="https://www.howdy.tamu.edu">
<img src="http://www.ourgeeks.com/wp-content/uploads/2014/02/howdy.tamu_.edu_.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ecampus.edu">
<img src="http://hdc.tamu.edu/files/150_199/191/002_login.jpg"/>
<div class="button"></div>
</a>
</div>
</div>
</div>
<div class="footer"></footer>
</body>
</HTML>
CSS
body {
margin-top:-3px;
min-width:1000px;
}
p {
font-family: Futura;
font-size:20px;
margin-left:10px;
}
nav ul li {
display:inline-block;
font-size:10px;
float:left;
height:200px;
width:100px;
}
.item{
width: 156px;
}
.wrap{
overflow: hidden;
overflow-x: scroll;
width: 960px;
}
.wrap-in{
width: 2500px;
}
.banner {
width:100%;
height:200px;
background-color: rgba(64, 201, 255, 1);
margin-left:-10px;
}
.Navi {
position: absolute; top: 0px; right: 90px;
background-color:rgba(64, 201, 255, 1);
height: 150px;
font-family: Futura;
font-size:10;
}
.Navi ul li a {
text-decoration:none;
color: white;
}
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;
padding:0px;
margin-left: 40px;
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);
}
change max-height:100px to simply height:100px. or else upload the images all in the same width to height ratio, however you are already stretching the image ratio with width:100% soo...
.item img {
width: 100%;
padding-top: 10px;
height: 100px;
opacity: 1;
}
The best way if you want to keep the original image ratio, you should use some server side technology to crop or fill the image to the same ratio. eg, nginx has an image module can do this, and there're a lot libraries in php.
Otherwise, you can add a fixed height and black background-color wrapper div out of the image tag, set the images' vertical align to middle.
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;
}
When the window is minimized, everything remains intact but not the navigation.
The image below is when the window is maximized and the image above when the window is minimized.
HTML:
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<nav>
<div class="navigation">
<a href="home.html">
<div class="box" style="background: rgba(0, 0, 0, 0.4)">
<img src="images/home.png">
<div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div>
</div>
</a>
<div class="box">
<img src="images/aboutus.png">
<div class="name">ABOUT US</div>
</div>
<div class="box">
<img src="images/groupcompanies.png">
<div class="name">GROUP OF COMPANIES</div>
</div>
<div class="box">
<img src="images/career.png">
<div class="name">CAREER</div>
</div>
<div class="box">
<img src="images/contactus.png">
<div class="name">CONTACT US</div>
</div>
</div>
</nav>
</div>
</header>
CSS:
body {
background-image:url(images/pattern.png);
min-width: 775px;
overflow:auto;
}
#font-face {
font-family:"myfont";
src:url(font/PTN57F.woff);
}
.header {
max-width:1200px;
min-width:200px;
height:170px;
margin:0 auto;
margin-top:10px;
background-color:rgba(0, 0, 0, 0.5);
border-radius:3px;
}
.logo {
width:230px;
}
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
float:left;
}
.navigation {
width:800px;
height:100px;
margin-left:256px;
float:none;
}
.box {
height:100px;
width:150px;
margin-right:5px;
float:left;
background: rgba(0, 0, 0, 0.2);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
border-radius:2px;
margin-top:31px;
}
.box:hover {
background: rgba(0, 0, 0, 0.4);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
}
.name {
height:23px;
width:auto;
text-align:center;
font-family:myfont;
font-size:14px;
color:#FFF;
text-decoration:none;
}
.box img {
float:none;
margin-left:38px;
margin-top:3px;
}
The boxes are inside div.navigation, which has a left margin of 256px. When the div.header resizes, the left margin stays the same. If you want the navigation centered inside the header you can use
.navigation {
margin-left: auto;
margin-right: auto;
}
This way it will not overflow the header div and adjust the left margin according to the overall width.
As of your comment, if you want the header stay the same, you must give it a fixed width, like
.header {
width: 1200px;
}
Then, you also don't need the min-width and max-width.