I am developing a web page and I am pretty new to HTML.
I have the problem that my navigation bar goes down to a new line and everything jumps with it.
Like this:
I think this is a problem with the height of the hover. I have for the project description another box as for the navigation bar. So the should move independent.
The Css code is like:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#header {
height:100px;
width:1260px;
margin-left:auto;
margin-right:auto;
}
#navpanel {
height:50px;
width:1260px;
background:rgba(0,50,0,1);
border-radius: 10px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
box-shadow:10px 10px 10px #888888;
}
#content {
height:900px;
width:1260px;
border-radius:10px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:100px;
box-shadow:10px 10px 10px #888888;
background:rgba(255,255,255,1);
}
#tekst {
height:700px;
width:1060px;
margin-left:auto;
margin-right:auto;
position:relative;
top:75px;
text-align:justify;
}
.menu1 {
height:50px;
width:30%;
background:rgba(0,200,0,1);
float:left;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu2 {
height:50px;
width:200px;
background:rgba(0,150,0,1);
float:left;
position:relative;
left:-15px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu3 {
height:50px;
width:200px;
background:rgba(0,100,0,1);
float:left;
position:relative;
left:-30px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu4 {
height:50px;
width:200px;
background:rgba(0,50,0,1);
float:left;
position:relative;
left:-45px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
h1
{
font-family:Calibri;
font-size:50px;
}
.phead {
font-family:"Cooper Black";
font-size:100px;
color:rgba(0,0,0,1);
position:relative;
width:auto;
}
.p1 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255,255,255,.75);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
.p2 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255,255,255,1);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
p {
font-family:Calibri;
font-size:20px;
}
.menu2:hover {
width:20%;
}
.menu3:hover {
width:50%;
height:auto;
border-bottom-right-radius: 10px;
box-shadow:10px 10px 10px #888888;
}
.menu2:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3:hover .p1 {
color:rgba(255,255,255,1);
}
.menu4:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3 ul {
visibility:hidden;
list-style:none;
font-family:"Cooper Black";
font-size:16px;
color:rgba(255,255,255,.75);
height:200;
margin-left:-5px;
}
.menu3:hover ul {
visibility:visible;
}
.menu3 ul li:hover {
color:rgba(255,255,255,1);
}
Hope somebody has the solution.
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TU Eindhoven iGEM</title>
<link rel="stylesheet" href="TU_Eindhoven_Style.css" type="text/css" />
<style type="text/css">
.class1 A:link {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:visited {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:active {text-decoration: none; color:rgba(255,255,255,1)}
.class1 A:hover {text-decoration:none; color:rgba(255,255,255,1)}
.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
</style>
</head>
<body style="background-image:url(Images/Background.jpg)">
<div id="header">
<p class="phead">Microencapsulation</p>
</div>
<span class="class1">
<div id="navpanel">
<div class="menu1">
<p class="p2">Home</p>
</div>
<div class="menu2">
<p class="p1">Team</p>
</div>
<div class="menu3">
<p class="p1">Project</p>
<ul>
<li>
<p >Planning</p>
</li>
<li>
<p >Brainstorm</p>
</li>
</ul>
</div>
<div class="menu4">
<p class="p1">Notebook</p>
</div>
</div>
</span>
<div id="content">
<h1 align="left">Project Description</h1>
</div>
</body>
</html>
Try using z-index or position: absolute; to put your navigation header above the actual page :)
JSFIDDLE
Here you go. I did several changes:
I added an id to your .menu 3 ul .
ul class="context">
<li>
<p >Planning</p>
</li>
<li>
<p >Brainstorm</p>
</li>
</ul>
I removed the transition animation. It caused too many problems.
I removed some unnecessary/problematic CSS rules.
I made the menu with position:absolute and added some formatting.
Here is the full CSS
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#header {
height:100px;
width:1260px;
margin-left:auto;
margin-right:auto;
}
#content {
height:900px;
width:1260px;
border-radius:10px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:100px;
box-shadow:10px 10px 10px #888888;
background:rgba(255, 255, 255, 1);
}
#tekst {
height:700px;
width:1060px;
margin-left:auto;
margin-right:auto;
position:relative;
top:75px;
text-align:justify;
}
.menu1 {
height:50px;
width:30%;
background:rgba(0, 200, 0, 1);
float:left;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu2 {
height:50px;
width:200px;
background:rgba(0, 150, 0, 1);
float:left;
position:relative;
left:-15px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu3 {
height:50px;
width:200px;
background:rgba(0, 100, 0, 1);
float:left;
position:relative;
left:-30px;
border-radius: 10px;
}
.menu4 {
height:50px;
width:200px;
background:rgba(0, 50, 0, 1);
float:left;
position:relative;
left:-45px;
border-radius: 10px;
}
h1 {
font-family:Calibri;
font-size:50px;
}
.phead {
font-family:"Cooper Black";
font-size:100px;
color:rgba(0, 0, 0, 1);
position:relative;
width:auto;
}
.p1 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255, 255, 255, .75);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
.p2 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255, 255, 255, 1);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
p {
font-family:Calibri;
font-size:20px;
}
.menu2:hover {
width:20%;
}
.menu3:hover {
width:50%;
border-bottom-right-radius: 10px;
box-shadow:10px 10px 10px #888888;
}
.menu2:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu3:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu4:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu3 ul {
visibility:hidden;
list-style:none;
font-family:"Cooper Black";
font-size:16px;
color:rgba(255, 255, 255, .75);
height:200;
background: rgba(0, 100, 0, 1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.menu3 ul li {
padding: 5px;
}
.menu3:hover ul {
visibility:visible;
}
.menu3 ul li:hover {
color:rgba(255, 255, 255, 1);
}
.menu3:hover ~ .menu4 {
display: none;
width: 0px;
}
.context {
position: absosute;
}
#navpanel {
height:50px;
width:1260px;
background:rgba(0, 50, 0, 1);
border-radius: 10px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
box-shadow:10px 10px 10px #888888;
}
Related
for some reason I was able to add a code where my sidebar image has around spinning border and it works, but now on Tumblr my photo post are small and round like the sidebar image - I tried to go to the code and see if any code was linked together to make the post resize like the sidebar but found nothing
/* ------ text styles ------ */
body { background:{color:background}; margin:0px; font-weight:500; color:{color:text}; font-family:'ABeeZee', sans-serif; font-size:10px; line-height:16px; letter-spacing:.5px; text-align:justify; background-image:url('{image:Background}'); }
a { text-decoration:none; color:{color:links}; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
a:hover { color:{color:text}; background:transparent; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
b, strong { color:{color:bold}; font-weight:700; }
em, i { color:{color:italic}; font-weight:600; }
i:hover { background:transparent; }
strike { color:{color:italic}; }
small { font-size:10px; }
big { color:{color:title}; font-weight:600; font-variant:small-caps; letter-spacing:2px; }
sup { text-transform:normal; color:{color:text}; font-size:10px; }
sub { text-transform:normal; color:{color:text}; font-size:10px; }
blockquote { margin-left:5px; padding-left:10px; width:245px; border-left:1px solid {color:background}; }
blockquote blockquote { padding-left:10px; width:230px; border-left:1px solid {color:background}; }
h1 { color:{color:bold}; font-size:8px; letter-spacing:2px; text-transform:uppercase;font-family:'ABeeZee', sans-serif; font-style:none; line-height:10px; text-align:left; padding:0px; }
h2 { text-align: center; font-size:11px; letter-spacing:.5px; text-transform:lowercase; font-style:none; font-weight:400; line-height:14px; text-align:normal; padding:0px; }
h3 { font-family:'cooper'; font-size:26px; line-height:24px; text-align:center; text-transform:lowercase; font-weight:400; letter-spacing:0px; margin-top:5px; color:{color:italic}; }
/* ------ captions ------ */
.tumblr_parent { margin:10px 10px 20px; padding: 0px 10px; border-left: 0px solid #ccc; font-size:7px; }
.tumblr_parent:after { content:''; display:block; width:100%; height:1px; margin:15px auto; background:{color:border}; }
.tumblr_parent:last-of-type:after { display:none; }
.tumblr_parent blockquote { margin-left:20px; padding-left:20px; border-left: 2px solid #ccc; }
.tumblr_avatar { margin:0px 6px 0px 0px; width:12px; vertical-align:middle; padding:2px; border-radius:50%; border:1px solid #ddd; background:black; }
a.tumblr_blog { border-bottom:2px solid {color:background}; font-weight:700; text-transform:uppercase; font-size:8px; letter-spacing:1px; padding:3px; border-radius:2px; }
.caption { padding:0px 10px 0px 10px; }
/* ------ images/videos ------ */
img { border:none; max-width:100%; height:auto; border-radius:2px; -webkit-filter:grayscale(50%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
img:hover { -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
resize { width: 300px; height:auto; }
#posts img { -webkit-filter:grayscale(50%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
.photoset { width:100%; border-radius:2px; -webkit-filter:grayscale(50%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
#posts img:hover { -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
.photoset:hover { max-width:100%; -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
/* ------ body ------ */
#contain { background:{color:contain}; width:700px; height:600px; margin:auto; left:0px; right:0px; top:0px; bottom:0px; position:absolute; border-radius:2px; overflow:visible; z-index:1; background-image:url('{image:contain}'); background-blend-mode:soft-light; }
#entries { width:340px; height:680px; border-radius:2px; bottom:-40px; right:40px; font-size:10px; position:absolute; font-family:'ABeeZee', sans-serif; overflow-x:hidden; overflow-y:auto; letter-spacing:0px; }
#post { margin:auto; top:0px; right:0px; bottom:0px; left:0px; width:300px; background: {color:postbg}; padding:20px; position:relative; border-radius:2px; margin-bottom:30px; margin-top:0px; }
#post i,em { color:{color:italic}; }
#post strong { color:{color:bold}; text-shadow:0px 0px 2px {color:bold}; }
/* ------ sidebar ------ */
.sidebar { position:absolute; left:0px; bottom:0px; width:320px; height:600px; overflow:hidden; }
img {
position: relative;
left: 107px;
top: 32px;
border-radius: 50%;
width: 110px;
height: 110px;
}
.image {
position: absolute;
left: 99px;
top: 24px;
width: 110px;
height: 110px;
border-radius: 50%;
-webkit-filter: grayscale(0%);
border-radius: 100%;
border: 8px solid c5c6cc;
border: 8px dashed #c49683;
animation-name: spinning-circle;
animation-duration: 20s;
animation-iteration-count: infinite;
width: 110px;
height: 110px;
outline-color: #EA3556;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.title { position:absolute; top:170px; right:-30px; width:350px; height:auto; padding:10px; letter-spacing:-2px; font-size:40px; line-height:26px; text-align:center; color:#686868; font-family:'bambi'; font-weight:800; text-shadow:4px -3px #c49683; text-transform:lowercase; font-style:normal; z-index:1; -webkit-text-stroke: 1px #686868; -webkit-text-fill-color: rgba(0, 0, 0, 0); }
.navbar { position:absolute; top:234px; left:0px; overflow:visible; width:320px; height:5px; text-align:center; z-index:99999999999; }
ul.navig8 { position:absolute; overflow:visible; list-style-type:none; padding:0; width:320px; height:40px; top:8px; left:0px; z-index:999999999; text-transform:uppercase; text-align:center; }
ul.navig8 li { width:auto; display:inline; margin:5px; }
ul.navig8 li a { display:inline-block; color:{color:nav text}; letter-spacing:3px; font-size:7px; padding:3px; font-weight:600; }
ul.navig8 li b { color:{color:bold}; }
.desc { position:absolute; width:210px; line-height:18px; height:226px; bottom:86px; left:50px; overflow-y:scroll; overflow-x:visible; font-size:9px; padding:5px; color:{color:desc text}; text-transform:lowercase; font-family:'ABeeZee', sans-serif; letter-spacing:.5.5px; text-align:justify; z-index:9999; text-shadow:none; }
.desc:hover { opacity:1; }
.desc b, strong { color:{color:italic}; font-size:12px; font-weight:500; text-transform:lowercase; font-variant:none; font-family:'coco'; text-shadow:0px 0px 2px {color:italic}; }
.desc i, em { color:{color:italic}; text-shadow:none; }
.desc a { color:{color:italic}; text-shadow:0px 0px 2px {color:italic}; }
.desc strong { font-size:16px; font-family:'cooper'; letter-spacing:1px; }
/* ------ pagination ------ */
#pagination { width:310px; position:absolute; height:14px; padding:5px; padding-top:3px; margin:auto; bottom:46px; left:0px; word-spacing:20px; text-align:center; color:{color:text}; z-index:999; }
#pagination a { padding:5px; padding-left:8px; color:{color:nav text}; font-weight:bold; letter-spacing:5px; font-size:7px; border-radius:2px; }
It's happen for this code -
img {
position: relative;
left: 107px;
top: 32px;
border-radius: 50%;
width: 110px;
height: 110px;
}
Replace it with this code -
.sidebar img {
position: relative;
left: 107px;
top: 32px;
border-radius: 50%;
width: 110px;
height: 110px;
}
I am hoping somebody can help me with a problem I have with my own site.
Basically I am setting up media queries for a site I am working on. However, when displayed on an iphone, or similar device it is displaying a black background or margin, almost like as if there is a div with a width of 1800px or something hidden in the background.
I have tried everything I can think of to sort this out, but I'm having no luck!
I've got the site back down to a simplified version which you can view at www.creekharmonics.uk
CSS for this simplified version is below:
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:100%; margin:0px auto; }
#headerbg
{
margin-left: auto;
margin-right: auto;
background-color:#000000;
width:100%;
height:312px;
z-index:999;
}
#headerimg
{
margin-left: auto;
margin-right: auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:100%;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:100%;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:914px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:72px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:850px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:850px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:968px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:100%;
z-index:1005;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
html,body { text-align: center;
margin: 0 auto;
background-color:#000000;
height:100%;
width:568px;
overflow:hidden;
}
#main
{
background-color:#000000;
}
#body
{padding-bottom:500px;}
#wrapper { display: block; width:568px; margin:0px auto; }
#headerbg
{
margin:0px auto;
background-color:#000000;
width:568px;
height:312px;
z-index:999;
}
#headerimg
{
margin:0px auto;
background-image:url(images/header.jpg);
width:358px;
height:312px;
z-index:1000;
}
#font-face {
font-family:bebasneuebold;
src: url(bebasneuebold.otf);
}
#font-face {
font-family:bebasneueregular;
src: url(bebasneueregular.otf);
}
#font-face {
font-family: bebas neue thin;
src: url(bebasneuethin.otf);
}
#delimiter { clear: both; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#navigation ul {
text-align: center;
display: inline;
margin: 0;
padding: 30px 4px 30px 4px;
list-style: none;
}
#navigation ul li {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
background: #000000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navigation ul li a {
font-family:bebasneueregular, bebasneuebold;
font-size:22px;
color:#ffffff;
text-decoration:none;
display: inline-block;
margin-right: -4px;
padding: 30px 30px;
}
#navigation ul li:hover {
background: #1b9bff;
color: #fff;
}
#navigation ul li ul {
padding-top:30px;
padding-left:0px;
position: absolute;
top: 56px;
left: 0;
width: 220px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-align:center;
}
#navigation ul li ul a{
padding: 30px 67px;
}
#navigation ul li ul li {
background: #1b9bff;
display: block;
color: #fff;
border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#content2
{
display:block
width:568px;
background-color:#000000;
height:auto;
}
#garratt
{
background-color:#000000;
background-image:url(images/jackgarratt.jpg);
background-size:cover;
background-position: center center;
background-repeat:no-repeat;
position:relative;
top:-10px;
left:0px;
width:568px;
height:499px;
margin:0px;
padding:0px;
border-top:10px solid #000000;
display:block;
clear:both;
}
#garrattabout
{
height:300px;
width:400px;
position: relative;
top: 48%;
transform: translateY(-52%);
font-family: bebasneuebold;
font-size:40px;
color:#ffffff;
line-height:20px;
padding:0px;
text-align:center;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#garrattabout h1
{
font-family: bebas neue;
font-size:72px;
color:#00deff;
line-height:55px;
display: inline;
padding:0px;
}
#garrattabout h2
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:90px;
background-color:#000000;
margin-left: auto;
margin-right: auto;
line-height:15px;
font-weight:normal;
padding-top:14px;
padding-bottom:14px;
text-decoration:none;
border:2px solid #ffffff;
}
#garrattabout h3
{
font-family: helvetica;
font-size:16px;
font-weight:normal;
color:#ffffff;
line-height:20px;
padding:0px;
}
#garrattabout p
{
font-family: helvetica;
font-size:18px;
color:#ffffff;
width:400px;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding:0px;
}
#garrattabout a
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#1b9bff;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#garrattabout a:hover
{
font-family: bebasneuebold;
font-size:30px;
color:#ffffff;
width:400px;
height:200px;
background-color:#0d81db;
margin-left: auto;
margin-right: auto;
line-height:20px;
font-weight:normal;
padding-left:20px;
padding-right:20px;
padding-top:16px;
padding-bottom:12px;
text-decoration:none;
border-bottom:4px solid #0d81db;
}
#navcentre {
position: relative;
top:0px;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1004;
}
#navcentrewidth {
position: relative;
top:0px;
border-top:1px solid #181818;
border-bottom:1px solid #181818;
list-style:none;
margin-left: auto;
margin-right: auto;
padding:0px;
text-align:center;
width:568px;
z-index:1005;
}
}
Header HTML is below:
<html>
<head>
<a name="top"></a>
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '226562807717253',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="wrapper">
<div id="headerbg">
<div id="headerimg">
</div>
</div>
<div id="navcentrewidth">
<div id="navcentre">
<div id="navigation">
<ul><li>Home</li>
<li>News</li>
<li>
Reviews
<ul>
<li>Global</li>
<li>Underground</li>
<li>Gear</li>
<li>Live</li>
</ul>
</li>
<li>
Community
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- .main -->
</div>
Index code is here:
<?php get_header(); ?>
<div id="content2">
<div id="garratt">
<div id="garrattabout">
<h2>Global</h2>
<br/>
Jack Garratt - Phase
<p>Phase takes risks and most of them are pulled off with class and distinction, it’s fun, it’s largely original and it’s one I, nor anybody can claim to know inside out in it’s youth- that time will come. In all, Jack Garratt’s debut is immense, driven, sexy, mad- but most of all, fearless.</p>
<br/>
<p>Read More</p>
</div>
</div>
</div>
This is how it currently loads on an iphone:
iphone image
This is how I want it to load:
without black background
This is the first website I have created from scratch using Wordpress, so it's been a constant learning curve and I am sure there are things I should have done differently, but this is one hurdle I just can't seem to get over!
Any help would be really appreciated.
You can set an appropriate zoom level using a meta tag. Put this into your head:
<meta name="viewport" content="width=586">
This tells the phone to treat the viewport as 586 pixels wide, which matches your content.
More info here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
And loads more here http://www.quirksmode.org/mobile/metaviewport/
Trying to make a responsive nav menu with icons in html. Its supposed to look like "image 1" but instead it looks like "image 2". Any ideas on how to fix it? it was working fine, but when I added icons to the nav menu, it went wrong. Thanks in advance.
My code
Home
My Work
About Me
Get in Touch
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
<style>
.icons1 {
width: 40px;
height: 30.5px;
margin-left: 38px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
margin-top: 15px;
float: left;
}
.current-item{
width: 40px;
height: 30.5px;
margin-top: 30px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
}
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
height:100px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
margin-top:10px;
height:90px;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
margin-top:10px;
height:70px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
width:100%;
text-align:center;
background-color:red;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 0px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
try adding white-space:nowrap; to .menu a
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
white-space:nowrap;
}
I'm making a responsive demo website and i'm having trouble with the medium resolution as when i put the css for it in my style sheet the high res no longer works. anyone know why that is/ how to fix it? My code below:
#charset "utf-8";
/* CSS Document */
/* low res or phone */
#media only screen and (max-width: 480px) {
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 5px 5px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 5px 12px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:277px;
height:30px;
position:relative;
left: -34px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:35px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:40px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li {
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
}
.menu a {
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.menu li:active .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.mobistrip
{
width: 200px;
height: 200px;
margin-right:auto;
margin-left:auto;
background-color:#f7cf1c;
position:relative;
left: 0px;
}
.createYearbook
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
padding-bottom:20px;
width:350px;
height:50px;
font-family:"Alfa Slab One";
font-size: 15px;
font-weight:lighter;
text-align:center
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 5px 15px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
width:340px;
height:50px;
text-align:center;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -150px;
display:inline;
height: 50px;
}
.ach
{
width:450px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:0px;
top: 140px;
}
.ach a
{
font-family:Arial;
font-size:25px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.jumbotron
{
visibility: hidden;
padding: 0px;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-900px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:-900px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* med res or ipad */
#media only screen and (min-width: 481px) {
.nav
{
visibility:hidden;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 10px 10px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 10px 20px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:300px;
height:20px;
padding-bottom:10px;
position:relative;
left: -30px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:40px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:68px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li
{
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
position:relative;
top: 15px;
}
.menu a
{
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow
{
font-size:24px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li
{
display:inline-block;
position:relative;
font-size:24px;
}
.menu > ul > li > a
{
padding:0px 20px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu
{
z-index:1;
opacity:1;
}
.menu li:active .sub-menu
{
z-index:1;
opacity:1;
}
.sub-menu
{
width:500px;
height:300px;
padding:0px 0px;
padding-bottom:60px;
padding-top:20px;
padding-left:35px;
position:absolute;
top:100%;
left:-100px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
border-radius: 0px 0px 3px 3px;
}
.sub-menu li
{
display:block;
font-size:25px;
}
.sub-menu li a
{
padding:20px 20px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.createYearbook
{
position:relative;
left:-10px;
bottom:90px;
margin-right:auto;
float:left;
padding-bottom:50px;
width:500px;
height:70px;
font-family:"Alfa Slab One";
font-size: 14px;
font-weight:lighter;
text-align:center
}
.createYearbook h1
{
width:380px;
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 15px 30px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
right:-10px;
bottom: 209px;
float:right;
margin-left:auto;
width:400px;
height:70px;
text-align:center;
}
.continue a
{
font-size:28px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 17.4px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -300px;
display:inline;
height: 50px;
}
.ach
{
width:600px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:-10px;
top: 140px;
margin-right:auto;
margin-left:auto;
}
.ach a
{
font-family:Arial;
font-size:32px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
margin-right:10px;
margin-left:10px;
}
.circlesT
{
visibility:hidden;
}
.jumbotron
{
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 10px;
}
.jumbotron .container
{
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 20px;
font-family:"Alfa Slab One";
text-outline:#DFDFDF;
background-color:transparent;
padding-left:140px;
position:relative;
bottom:50px;
display: inline;
float: left!important;
margin-right: auto;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-0px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:0px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* high res or computer */
#media only screen and (min-width: 1024px) {
.menu-wrap
{
visibility: hidden;
}
.bg
{
background-color:#fff;
}
.filler
{
width: 100%;
height: 200px;
background-color:#f7cf1c;
}
.fillera
{
padding-top:30px;
background-color:#fff;
}
*
{
background-color:#eae9e9;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: 140px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.reg1 a:hover
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.log1 a:hover
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.list
{
padding-top:200px;
}
.nav{
padding-top:200px;
}
.nav ul {
padding-left: 0;
}
.nav a {
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
float: left!important;
margin-right: auto;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.nav a:hover
{
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
float: left!important;
margin-right: auto;
}
.nav li {
display: inline;
float: left!important;
margin-right: auto;
}
.hide
{
visibility: hidden;
}
.createYearbook
{
padding-top:50px;
width:330px;
height:70px;
font-family:"Alfa Slab One";
font-size:14px;
font-weight:lighter;
float:left;
text-align:left;
}
.createYearbook a
{
color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
text-decoration:none;
}
.createYearbook a:hover
{
color: #fff;
background-color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
display:inline;
padding: 15px 20px;
height: 70px;
}
.ach
{
width:500px;
height:70px;
float:right;
padding-top:50px;
padding-bottom:0px;
}
.ach a
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#eae9e9;
border-bottom-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.ach a:hover
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.continue
{
width:340px;
height:70px;
float:right!important;
padding-top:50px;
text-align:right;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.continue a:hover
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #000;
background-color:#ce542c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
}
.pic img
{
padding-top: 8px;
background-color:transparent;
}
.jumbotron {
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 500px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 130px;
}
.jumbotron .container {
position: relative;
background-color:transparent;
}
.jumbotron h1 {
color: #fff;
font-size: 44px;
font-family:"Alfa Slab One";
background-color:transparent;
padding-left:380px;
display: inline;
float: left!important;
margin-right: auto;
}
.circlesT
{
padding-top:400px;
background-color:transparent!important;
padding-left:80px;
padding-right:80px;
}
.circlesT a
{
background-color:#fff;
}*
{
background-color:#eae9e9;
}
.thumbnail{
max-width: 360px;
margin-right: auto;
display:inline;
float: left!important;
}
.list
{
padding-top:200px;
}
.a1
{
width:25%;
display:inline;
padding-left:6%;
padding-right:6%;
background-color:#fff;
}
.a1 img
{
background-color:transparent!important;
}
.mobiBG
{
height:91px;
width:100%;
background-color:#f7cf1c;
}
/*Teacher Login Stuff*/
.pagelogin
{
padding-top:20px;
padding-bottom:20px;
padding-left:300px;
}
.Tlogin form
{
background-color:#fff;
}
.Tlogin p
{
background-color:#fff;
}
.Tlogin
{
background-color:#fff;
width:400px;
padding: 20px;
}
/*Choose Size Stuff*/
.ChooseSize
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseSize h1
{
background-color:#fff;
}
.ChooseSizeA2
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.picksize
{
width:100%;
background-color:#fff;
}
.sizepics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.sizepics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.sizepics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.sizepics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Year Group YG*/
.ChooseYG
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseYG h1
{
background-color:#fff;
}
.ChooseYGA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
/*Choose Cover 8x8 Stuff*/
.choosecover8x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover8x8 h1
{
background-color:#fff;
}
.a2-8x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover8x8
{
width:100%;
background-color:#fff;
}
.cover8x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover8x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover8x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover8x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Choose Cover 6x8 Stuff*/
.choosecover6x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover6x8 h1
{
background-color:#fff;
}
.a2-6x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover6x8
{
width:100%;
background-color:#fff;
}
.cover6x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover6x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover6x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover6x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Build Yearbook Stuff*/
.BuildYearbook
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.BuildYearbook h1
{
background-color:#fff;
}
.BuildYearbookA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.price
{
font-family: Arial;
font-size:32px;
color:#e15152;
font-weight:bold;
background-color:#fff;
padding: 20px;
}
.BuildButton
{
padding: 25px;
background-color:#fff;
}
.BuildButton a
{
font-size:30px;
font-family:"Alfa Slab One";
color: #fff;
text-decoration:none;
background-color:#f7cf1c;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.BuildButton a:hover
{
font-size:30px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
}
.info
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
padding:30px;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">
</head>
<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
<div class="reg1"><li class="reg">Register</li></div>
<div class="log1"><li class="login">Login</li></div>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
<nav class="menu" align="center">
<ul class="clearfix">
<li>
<div class="AMenu" align="center">▼</span></div>
<ul class="sub-menu">
<li>Yearbooks</li>
<li>Leaving Cards</li>
<li>Mugs</li>
<li>School Calendars</li>
<li>Teachers Section</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
<div class="Yearbooks"><li>Yearbooks</li></div>
<div class="LeavingCards"><li>Leaving Cards</li></div>
<div class="Mugs"><li>Mugs</li></div>
<div class="SchoolCalendars"><li>School Calendars</li></div>
<div class="TeacherSection"><li>Teachers Section</li></div>
</ul>
</div>
<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1>Create a Yearbook</h1>
</div>
<div class="continue">
<!-- same as login/register just bold -->
<h2>Continue Your Yearbook</h2>
</div>
<div class="ach" align="center">
<ul>
<li>About</li>
<li>Create</li>
<li>How To</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Creating a Yearbook is Easy
<br><br>
Simply Choose Your Options Below.
</h1>
</div>
<div class="circlesT" style="background-color:#fff;">
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
</div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>
<div class="picksize" align="center">
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%">
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>
That's because of this :
/* med res or ipad */
#media only screen and (min-width: 481px) {
Your media query just use min-width. So every screen with a higher resolution will take CSS rules in it too. Add a max-width rule to it :
/* med res or ipad */
#media only screen and (min-width: 481px) and (max-width: 1023px) {
There's too much css in your example to go through, but perhaps you haven't properly thought through the css for the desktop, as it will be taking the ipad styles as well, considering it too is over 481px.
Try
#media only screen and (min-width: 481px) and (max-width: 1023px)
I have an application based on the following css.The page is designed to display employee database and their task records.I need the header always at the bottom of the page even the content is less/more in number.I cant fix it.Once when I fix for less content it gets displayed above the content when more contents are added.I need help to fix this...
* { padding:0; margin:0; outline:0; }
body {
background:#f9ebae;
font-family: Verdana, sans-serif;
font-size:11px;
line-height:14px;
color:#5e5e5e;
margin:0;
padding:0;
height:100%;
}
input, textarea, select { font-family: Verdana, sans-serif; font-size:13px; }
textarea { overflow:hidden; }
.field { border:solid 1px #d3cfc7; background:#fff; padding:5px; }
.small-field { border:solid 1px #d3cfc7; background:#fff; padding:3px 1px; font-size:11px; }
.checkbox { width:13px; height:13px; vertical-align:top; position:relative; top:2px; }
.button { background:#eee url(images/button.gif) repeat-x 0 0; border:solid 1px #b1a874; color:#7f7f7f; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; }
.button:hover { color:#333; border-color:#857b42; }
.field:focus { color:#000; border-color:#857b42;}
a img { border:0; }
a { color:#ba4c32; text-decoration: underline; cursor:pointer; }
a:hover { color:#8d341f; text-decoration: none;}
.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }
.rights, .alignright { float:right; display:inline; }
.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center !important; }
h1{ font-size:22px; font-family:Georgia, "Times New Roman", Times, serif; line-height:24px; color:#fff; font-weight: normal;}
h1 a{ color:#fff; text-decoration: none; }
h11{ font-size:32px; font-family:"Times New Roman", Times, serif; line-height:30px; color:#fff; font-weight: normal;}
h11 a{ color:#fff; text-decoration: none; }
h2 { font-size:15px; font-weight: normal; }
h2 a{ text-decoration: none; }
h22 { font-size:20px; font-family:"Times New Roman", Times, serif; font-weight: normal; }
h22 a{ text-decoration: none; }
h3 { font-size:12px; color:#3333FF; line-height:14px; font-weight: normal; }
h3 a{ text-decoration: none; }
.shell { ; margin:0; auto; }
#header { height:89px; background:url(images/header.gif); white-space:nowrap; }
#header h1{ float:left; display:inline; padding-top:12px; }
#top-navigation { float:right; white-space:nowrap; color:#fff; padding-top:15px; }
#top-navigation a{ color:#fff; }
#top-navigation span{ color:#dca598; }
#top { height:53px;}
#navigation { height:36px;}
#navigation ul{ list-style-type: none;}
#navigation ul li{ float:left; display:inline; margin-right:2px;}
#navigation ul li a,
#navigation ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 0; padding:0 0 0 15px;}
#navigation ul li a span { background-position:right 0; padding:0 15px 0 0;}
#navigation ul li a { line-height:36px; color:#907525; text-decoration: none; }
#navigation ul li a.active,
#navigation ul li a:hover { background-position:0 bottom;}
#navigation ul li a.active span,
#navigation ul li a:hover span{ background-position:right bottom; }
#navigation ul li a.active { font-size:12px; font-weight: bold; color:#887e42; }
#wrapper {
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#wrapper1 {
min-height:200%;
position:relative;
}
#container { padding:20px 0; padding-bottom:44px;}
#container10 { padding:20px 0; padding-bottom:44px; min-height:100%;}
.small-nav { color:#978b48; padding-bottom:20px; }
.small-nav a{ color:#6f6636; }
#main { overflow:auto; padding-bottom: 44px; }
#content { float:left; width:98%; padding:0 0 44px 2px; }
#contents { float:left; width:auto; padding:0 0 0 300px; }
#sidebar { float:right; width:225px; }
.table {}
.table th{ background:#fffdfa url(images/th.gif) repeat-x 0 0; color:#818181; text-align: left; padding:7px 10px; border-bottom:solid 1px #d2d1cb;}
.table td{ background:#fbfcfc; border-bottom:solid 1px #e0e0e0; padding:8px 10px; }
.table tr.odd td{ background:#f8f8f8; }
.table tr:hover td{ background:#fff9e1; }
.table a.ico{ }
.box { background:#fbfcfc; height:auto; width:auto; padding:1px; margin-bottom:20px; }
.box-head { background:#ba4c32; height:32px; color:#fff; padding: 0 10px; line-height:32px; white-space:nowrap; border-bottom:solid 1px #fff; }
.box-head .rights{ padding:10px 0 10px 1px; line-height:13px;}
.box-head .rights label,
.box-head .rights input { float:left; }
.box-head .rights label { padding:4px 0 0 0;}
.box-head .rights input { margin-left:5px;}
.box-head .right{ padding:5px 0 10px 1px; line-height:13px; }
.box-head .right label,
.box-head .right input { float:left; }
.box-head .right label { padding:4px 0 0 0;}
.box-head .right input { margin-left:5px;}
.pagging { height:20px; padding:8px 0px; line-height:19px; color:#949494; }
.pagging a{ background:url(images/pagging.gif) repeat-x 0 0; height:20px; float:left; padding:0 8px; border:solid 1px #d5d5d5; text-decoration: none; color:#949494; margin-left:5px; }
.pagging a:hover { border-color:#8c3521; background:#ba4c32; color:#fff; }
.pagging span{ float:left; margin-left:5px; padding-top:2px; }
a.ico { color:#9d9c9a; font-size:10px; text-decoration: none; padding:0 0 0 14px; background-repeat:no-repeat; background-position:0 0; }
a.ico:hover { color:#333;}
a.del { background-image:url(images/delete.gif); margin-left:10px;}
a.edit { background-image:url(images/ed.gif); margin-left:10px;}
a.status { background-image:url(images/i.gif); margin-left:10px;}
.form { padding:15px 10px 5px 10px; }
.form label{ display:block; font-weight: bold; font-size:13px; padding-bottom:4px; }
.form label span{ color:#999; font-weight: normal;}
.form .field { display:block; }
.form .inline-field .field { display:inline;}
.form .req { font-size:13px; float:right; white-space:nowrap; color:#999; }
.form p{ padding-bottom:15px; }
.size1 { width:716px; }
.size2 { width:80px; }
.size3 { width:120px; }
textarea.size1 { height:180px; }
.buttons { text-align: right; padding:10px; background:#eee; border-top:solid 1px #e0e0e0; }
.buttons .button{ margin-left:3px;}
.box-content { padding:10px; }
.sort { border-top:solid 1px #e0e0e0; padding-top:10px; margin-top:15px; }
.sort label{ display:block; font-weight: bold;}
.sort .field{ display:block; margin-top:5px; }
.sort select.field{ width:203px; }
.box-content p { padding-top:10px; }
.select-all{}
.select-all label{ text-decoration: underline; padding-left:4px; }
.add-button,
.add-button span { float:left; height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 0 0 28px; }
.add-button span { background-position:right 0; padding:0 10px 0 0; }
.add-button { font-weight: bold; font-size:12px; color:#747474; text-decoration: none; line-height:26px; }
.add-button:hover { color:#333;}
#footer { height:44px; margin-top: -44px; background:url(images/footer.gif); line-height:44px; width:100%; color:#fff; position:relative; bottom:0; left:0; clear:both; }
#footer a{ color:#fff;}
#footer, #push {
height: 4em;
}
#footer, #push {
clear: both;
}
.msg { position:relative; padding-right:35px; margin-bottom:10px; }
.msg p{ padding:9px 10px 9px 40px; font-size:12px; background-repeat:no-repeat; background-position:10px 5px;}
.msg a.close{ font-size:0; line-height:0; position:absolute; top:0; right:0; width:34px; height:34px; background:url(images/close.gif); text-indent: -4000px;}
.msg-ok p{ background-color:#fffac2; border:solid 1px #dbd6a2; color:#5e5c40; background-image:url(images/ok.gif); }
.msg-error p{ background-color:#f3c598; border:solid 1px #e8b084; color:#ba4c32; background-image:url(images/msg-error.gif); }
/*** CSS3 ***/
.box { -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
.box-head { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }
.field, .button { -moz-border-radius:4px; -webkit-border-radius:4px; }
.small-field, .button, .pagging a { -moz-border-radius:3px; -webkit-border-radius:3px; }
.msg p { -moz-border-radius:6px; -webkit-border-radius:6px; }
.button { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}
.rrshow{
display:none;
}
<!--Print query css-->
#media print
{
.print-hidden {
display: none;
}
a {
display: none;
}
}
Try this to position it at the bottom
position:absolute;
bottom:0;