So basically the menu buttons only changes height/width in two directions, and I need to do it three (in both directions left and right, and the bottom).
Here is what it looks like:
http://hijinxnetwork.net/web.html
The CSS:
body {
bakground-image: url('http://i.imgur.com/vjB3x6m.png');
background-repeat:repeat;
background-attachment:fixed;
}
.top {
background-color: #232323;
width:100%;
position:absolute;
top:0;
left:0;
right:0;
height:40px;
}
.header img {
width:450px;
padding-left:650px;
}
.header {
background-color: #101010;
width:100%;
position:absolute;
height:225px;
left:0;
right:0;
top:40px;
}
.nav {
width:900px;
margin:0 auto;
}
.nav ul {
position:relative;
top:179px;
left:auto;
right:auto;
}
.nav li {
float:left;
display:inline;
display:block;
margin-left:3px;
margin-right:3px;
padding-left:20px;
padding-right:20px;
font-family: 'Roboto', sans-serif;
font-weight:100;
text-transform:uppercase;
font-size:24px;
background-color: #363636;
height:50px;
padding-top:20px;
transition: 1s;
}
.nav li:hover {
background-color:#a61919;
height:60px;
font-size:30px;
}
.nav li a {
color:#ffffff;
text-decoration:none;
}
So, if you have any idea on how to change this, that would be great, thanks.
Related
I am making a fancy CSS theme for my tumblr. But my vertical scrollbar has vanished, and pressing "page down" has no effect. It is like the lower half of my page no longer exists, or the page is forced to be the size my browser window is. Indeed - if I resize my browser window, suddenly I see that amount of content and can't scroll down to see the stuff I could see a moment ago.
I have read some things on the internet already to solve this problem, such as adding "overflow:auto" or "overflow:scroll", but either I have have added them in the wrong place or they do not solve the problem I have. I have also tried manually adding a scrollbar in the html {} tag. If I do that, the scrollbar reappears - but it doesn't actually work. It appears all blocked in gray, as if you are already viewing the whole page, while displaying my content cut-off.
Very frustrated as the page is, apart from this, done. Any obvious ideas?
<!--CSS customization here. -->
<style type="text/css">
html {overflow-y: scroll;}
#text {
margin-bottom:50px;
margin-top:100px;
margin-top:5px;
text-transform:uppercase;
font-size:1em;
font-famiy:serif;
letter-spacing:2px;
text-align:center;}
/*main structure*/
blockquote {
padding:5px 0 5px 30px;
border-left:1px solid #eee;
margin:10px 30px;
overflow: auto;
}
body {
background-repeat:repeat-y;
background-size: cover;
font-family:serif;
font-weight:100;
font-size:1em;
text-align:left;
margin:0;
line-height:18px;
overflow:auto;
}
a {
color:black;
text-decoration:none;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s; }
a:hover {
color:#45b69d;
}
img{
border:1px solid #fff;
border-radius:6px;
}
p {
margin-top:5px;
margin-bottom:5px}
#divider{
top:25px;
left:305px;
position:fixed;
width:420px;
position:absolute;
}
#dividerr{
bottom:20px;
left:37px;
width:420px;
position:fixed;
}
/*container*/
#con {
width:80%;
margin:0 10%;
position:fixed;
overflow:auto;
}
/*posts*/
.posts {
width:45%;
height:300px;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
#image {
position:absolute;
padding-top:8px;
padding-left:5px;
margin-right:5px;
}
#image img {
width:190px;
border:1px solid #fff;
border-radius:6px;
margin-right:8px;
}
.info {
margin-left:205px;
width:65%;
text-transform:none;
}
.tit {
font-weight:bold;
text-align:right;
font-family:georgia;
color:#ffa79b;
font-size:1.5em;
letter-spacing:1px;
text-transform:uppercase;
}
.lank {
border-bottom:1px dashed #ffcec7;
margin-bottom:5px;
padding-bottom:5px;}
.about ul {margin-left:-10px}
.quest {
font-size:1.25em;
font-family:Helvetica;
font-variant:small-caps;
}
.answ {
margin-top:10px;
margin-left:40px;
font-family:Georgia;
}
.grave {
text-align:center;
font-weight:bold;
margin-top:10px;
font-family:georgia;
font-size:1.5em;
letter-spacing:1px;
font-style:italic;
color:#cdba96;
}
.credit {
width:45%;
height:auto;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
/*header*/
.headertext {
color:beige;
font-size:6em;
letter-spacing:1em;
text-align:center;
font-family:Helvetica,sans-serif;
line-height: 80%;
height: auto;
}
.l {
background:#fff;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:2px;
text-align:center;
font-family:inconsolata;
text-transform:uppercase;
border:1px solid #ffcec7;
border-radius:6px;
}
#title {
width:50%
font-size:14px;
margin:auto 0;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:#ffcec7;
background:#f8f8f8;
padding:15px;
border-bottom:1px solid #eee;}
.links {
color:#ffa79b;
font-family:georgia;
padding-top:10px;
text-align:center;
padding-bottom:5px;
border-bottom:1px dashed #ffcec7;
}
.links a {
margin:10px 5px;
padding:2px 5px;
border:none;
}
.links a:hover {
background:#f8f8f8;
border-radius:6px;
}
.desc {
text-transform:none;
margin:10px 25px;
font-family:Georgia;
}
Alrighty, so I managed to fix the thing by taking one element at a time. The problem was in
container {position:fixed;}
but I'm not sure why. I was using the position:fixed to center my background. Leaving this in case it helps someone in future.
My website loads fine in Chrome, but in Safari my image won't float to the left of my article. Here is a look at the CSS:
body {
background-color:white;
font-family: 'Josefin Slab', serif;
}
.top_portion {
width:820px;
height:200px;
background-color:#e2e2e2;
margin:auto;
text-align:center;
border-top:5px;
border-bottom:5px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#30474b;
}
.top_portion img {
padding-top:0px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin:0px;
text-align:center;
}
#welcome {
margin:auto;
background-color:#e2e2e2;
width:820px;
}
#navigation {
text-align:center;
}
#navigation li {
list-style-type:none;
display:inline;;
}
ul {
font-size:20px;
margin:0;
}
ul a {
padding-right:20px;
text-decoration:none;
color:black;
}
a:hover {
color:#888eee;
}
This is the div containing the image and the article
.info {
width:820px;
margin:auto;
background-color:#e2e2e2;
overflow:hidden;
}
Here is the image
.info img {
padding-top:6px;
padding-left:5px;
}
And here is the article this is and the .info img above should be next to each other but they aren't in Safari which has been updated to the latest version.
article {
padding-left:5px;
font-family:sans-serif;
text-indent:15px;
width:600px;
float:right;
background-color:#e2e2e2;
display:inline-block;
text-align:justify;
}
article h2 {
font-family: 'Carme', sans-serif;
margin-top:5px;
}
h5 {
padding:0;
margin:0;
}
a {
color:black;
}
#bottomlink {
font-size:1.5em;
text-align:center;
}
#bottomlink a {
text-decoration:none;
}
float:left; for the img
and don't bother float:right; on the article
I have a small problem on a web page (http://goldschmiede-h-j-baier.de/dev/index.php?id=10) everything is displayed correctly, the footer is pushed upwards with z-index. but safari does the z-index does not and I do not know why. the footer is always placed behind the main container ...
/*Website*/
html,body {
background:#000;
font-family:"Trebuchet MS",Helvetica,Jamrul,sans-serif;
color:#fff;
overflow:hidden;
border-left: 5px solid;
border-right: 5px solid;
}
.maincontainer {
overflow:auto;
height:100%;
width: 100%;
}
#footer {
height:64px;
position:fixed;
bottom:30px;
z-index:200;
}
#navigation {
position:fixed;
left:30%;
}
#logo {
background:url(../images/logo-baier.png);
width:217px;
height:75px;
position:fixed;
bottom:30px;
z-index:202;
left:10%;
}
#social {
position:fixed;
right:0;
top:30px;
z-index:302;
}
/*Slider*/
#slides {
position:relative;
}
.slides {
background:#000;
/*margin-top:10px;*/
border-bottom: 10px solid #fff;
border-top: 10px solid #fff;
}
#slides .slides-container {
display:none;
}
#slides .scrollable {
*zoom:1;
position:relative;
top:0;
left:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
height:100%;
}
#slides .scrollable:after {
content:"";
display:table;
clear:both;
}
.slides-navigation {
margin:0 auto;
position:absolute;
z-index:3;
top:56%;
width:100%;
}
.slides-navigation a {
position:absolute;
display:block;
}
.slides-navigation a.prev {
left:0px;
}
.slides-navigation a.next {
right:0px;
}
.slides-pagination {
position:absolute;
z-index:3;
bottom:0;
text-align:center;
width:100%;
}
.slides-pagination a {
border:2px solid #222;
border-radius:15px;
width:10px;
height:10px;
display:-moz-inline-stack;
display:inline-block;
vertical-align:middle;
*vertical-align:auto;
zoom:1;
*display:inline;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");
margin:2px;
overflow:hidden;
text-indent:-100%;
}
.slides-pagination a.current {
background:#222;
}
.next {
width:35px;
height:55px;
background-image:url("../images/str.png");
background-position:42px -44px;
}
.prev {
width:35px;
height:55px;
background-image:url("../images/str.png");
background-position:-7px -44px;
}
.slides-pagination {
display:none;
}
.bottom {
position:absolute;
z-index:3000;
bottom:90px;
width:100%;
right:-60%;
}
.bottom a {
width:51px;
height:32px;
background-image:url("../images/str.png");
background-position:0px 0px;
display:inline-block;
}
.top {
position:absolute;
z-index:3000;
top:0;
text-align:center;
width:100%;
margin-top: 10px;
}
.top a {
width:51px;
height:32px;
background-image:url("../images/str.png");
background-position:-68px 0px;
display:inline-block;
}
menu in webpage when zoomed in and out doesnt stay fixed to header image shown in figure:
the css script for this one is as follows
#navmenu{
z-index:99999;
margin-top:40px;
position:absolute;
width:100%;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
font-size:16px;
color:#000000;
}
#navMenu li a{
height:15px;
float:left; display:inline;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
#navmenu li a:hover {
color:33CCFF;
}
what is the solution to this?
if you use position:fixed; then it will not move when scrolled which is what i assume you are looking for, also when zoomed same thing, it will stay position fixed to where you want it , add maybe top:0; left:0; depending on where you want this to be positioned at-- maybe try adding some html ? other than that this is about all i can help you with
#navmenu{
z-index:99999;
margin-top:40px;
position:fixed;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
top:0;
left:0;
font-size:16px;
color:#000000;
}
#navMenu li a{
position:fixed;
height:15px;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
I have web page which works fine on browser on device but when i save to home screen to that web page and open from that there exits some screen sizing issue while opening it from icon from desktop.how to settle this.
My css code is below
*, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, nav, header, section {
margin: 0; padding: 0; border: 0;
}
/* Styles */
body {
width:2048px;
height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
}
#container {
position:absolute;
width: 2048px; margin:0;
overflow-x:hidden;
overflow-y:hidden;
padding: 0;
}
.panel{
background-image:url(image/testing_file_1.png);
background-repeat:no-repeat;
height:748px;
width:1024px;
position:relative;
float: left;
padding:0;
bottom:0;
top:0;
margin:0;
display:inline;
}
.main_heading{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.main_heading_two{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.menu {
float:right;
margin: 39px 18px 0 0;
height:47px;
background-repeat:no-repeat;
}
.menu ul li {
list-style:none;
float:left;
}
.menu ul li a {
text-decoration:none;
display:block;
}
.menu .active {
text-decoration:none;
background-image:url();
}
.menu .stix {
width:2px;
font-size:0px;
background-image:url(image/seperator.gif);
background-repeat:no-repeat;
padding:0;
height:47px;
}
.midmenu {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: 248px 0 0 0;
}
.midmenu1 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: 248px -500px 0 0px;
}
.rightclass img{
padding: 2px 20px;
float:right;
width:459px;
height:560px;
z-index:10;}
.text_paragraph{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-525px;
}
.text_paragraph_1{
float:left;
width:420px;
color:#FFF;
margin-left:80px;
margin-top:-464px;
}
.text_paragraph_1 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_1 ul li{
margin-top:5px;
}
.text_paragraph_2{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-285px;
}
.text_paragraph_2 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_2 ul li{
margin-top:5px;
font-style:italic;
}
.text_paragraph_2 p{
float:left;
color:#FFF;
margin-top:5px;
}
.linkbutton{
margin:-70px 0 0 70px;
float:left;}
small
{
font-size:9px;
}
.rightclass_one img{
margin: 2px 21px;
float:right;
width:459px;
height:560px;
z-index:10;}
.midmenu_1 {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: -45px 0 0 0;
}
.midmenu_2 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: -45px -500px 0 0px;
}
.right_text{
float:right;
color:#000;
margin-right:-470px;
width:440px;
text-align:center;
margin-top:-270px;}
.image_21{
float:right;
margin-right:-390px;
margin-top:-190px;}
.ratemeter{
float:right;
margin-right:-410px;
margin-top:20px;}
.image_one{
float:right;
margin-right:-450px;
margin-top:92px;
z-index:5;
}
.image_two{
float:right;
margin-top:93px;
margin-right:-254px;
z-index:10;
}
.image_one_one{
float:right;
margin-top:95px;
margin-right:-317px;
z-index:10;
}
.image_two_two{
float:right;
margin-right:-452px;
margin-top:92px;
}
Try to put this in your head from your webpage:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
Okay... that's completely clear, why you've got a fixed height... in your body you set height to 748px... thats not variable.
Try something like this:
I used this in my webapp and it worked fine:
body {
position: relative;
margin: 0;
-webkit-text-size-adjust: none;
min-height: 416px;
-webkit-touch-callout: none;
}
I tried to edit your code, but i don't know, if it will work for you. please have a try:
body {
width:2048px;
min-height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
margin: 0;
position: relative;
}