I'm trying to create a footer at the bottom of my page, but my body only covers half of the page. I've tried body { height:auto;, height:1200px;and height:100%; but it won't resize.
I'll just put my whole code here, maybe there's something else reacting with it.
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Artotek</title>
<script src="jquery-1.10.2.min.js">
</script>
<LINK REL="SHORTCUT ICON"
HREF="favicon.ico">
</head>
<body>
<!-- KIELET -->
<div class="kielet">
<nav>
<!--Englanti-->
<img class="icon" src="iconit/en.gif" title="in english" onmouseover="this.src='iconit/en_hover.gif'" onmouseout= "this.src='iconit/en.gif'">
<!--Ruotsi-->
<img class="icon" src="iconit/swe.gif" title="på svenska" onmouseover="this.src='iconit/swe_hover.gif'" onmouseout="this.src='iconit/swe.gif'">
<!--Venäjä-->
<img class="icon" src="iconit/ru.gif" title="По русски" onmouseover="this.src='iconit/ru_hover.gif'" onmouseout="this.src='iconit/ru.gif'">
</div>
<div class="navigointi">
<ul>
<li>Tietoa Meistä</li>
<li>Yhteystiedot</li>
</ul>
</div>
<div id="footer" style="bottom:0px; right:0px; width:100px; font-size:8px;">
</div>
<div id="teksti" style="position:absolute; width:100%; top: 40px; font-size: 20px; height:130px; margin-top:0px; text-align:center; ">
Tervetuloa
<br>
<br>
<p>Olemme startup innovatiivisten tuotteiden kehitysyritys<br>
Kysyttävää? Ota yhteyttä!</p>
</div>
<div id="slidy" class="slidepart fl">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
<div class="sl_paginationpart">
<ul id="slidya" class="slpagination">
<li></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li></li>
</ul>
<script type="text/javascript">
var slo=null;
var sola = Array();
var prev = 0;
var cur = 1;
var timi=null
$(document).ready(function() {
sol = document.getElementById('slidy').getElementsByTagName('img')
var sho = document.getElementById('slidya').getElementsByTagName('a');
for(var i=1;i<sho.length-1;i++)sola.push(sho[i])
for(var i=1;i<sol.length;i++)sol[i].style.display = 'none';
timi = window.setInterval('doslide()',5000);
})
function doslide()
{
$(sol[prev]).fadeOut(500);
$(sol[cur]).fadeIn(500);
sola[prev].className = 'number'
sola[cur].className = 'number select'
prev = cur++;
if(cur>sol.length-1)
{
cur=0;
prev= sol.length-1;
}
}
function prevnext(mode)
{
window.clearInterval(timi);timi=null;
if(mode)
{
if(cur>sol.length-1)
{
cur=0;
prev= sol.length-1;
}
doslide();
}
else
{
cur--;
prev--;
if(prev<0)
{
cur=0;
prev= sol.length-1;
}
if(cur<0)
{
cur=sol.length-1;
prev=cur-1 ;
}
$(sol[cur]).fadeOut(500);
$(sol[prev]).fadeIn(500);
sola[cur].className = 'number'
sola[prev].className = 'number select'
}
timi = window.setInterval('doslide()',2000)
}
function thisisit(aiyo)
{
cur = aiyo
window.clearInterval(timi);timi=null;
$(sol[cur]).fadeIn(500);
$(sol[prev]).fadeOut(500);
sola[cur].className = 'number select'
sola[prev].className = 'number'
prev=cur
++cur;
if(prev<0)prev = sol.length-1;
timi = window.setInterval('doslide()',2000)
}
</script>
</div>
</div>
</div>
</div>
<!--Twitter
<div class="twitter" style="width:50px; top:0px; margin-top:0px;">
<a class="twitter-timeline" href="https://twitter.com/ArtotekTmi" data-widget-id="381408956653899776">#ArtotekTmi Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>-->
<span style="bottom:0px; left:500px;">Tehnyt: Claudio Lintunen</span>
</body>
</html>
CSS:
body {
font-family:helvetica;
margin: auto;
min-height: 100%;
width: 100%;
}
#background {
background-image:kuvat/nainen.png;
background-repeat: none;
height: 100%;
width: 100%;
}
.fl {
top:150px;
width: 100%;
left: 25%;
transition: all;
position: absolute;
}
.slidepart {
width:700px;
height:450px;
overflow:hidden;
position:relative;
border:#218559 solid 2px;
box-shadow:gray 2px 5px 5px;
}
.slidepart img {
position:absolute;
height:450px;
border: black solid 1px;
}
.sl_paginationpart {
display:block;
background:#BE5252 no-repeat left;
width:100%;
height:1px;
position:absolute;
right:0px;
bottom:0px;
padding:6px;
transition:all 0.5s ease
}
.sl_paginationpart:hover {
height:15px;
opacity: 0.8;
background:#B80E39
}
ul.slpagination {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
right: 0px;
}
ul.slpagination:hover {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
}
ul.slpagination li {
margin:0px;
padding:0px;
list-style:none;
float:left;
height:100%
}
ul.slpagination li a {
text-decoration:none;
}
ul.slpagination li a.prev {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.next {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.number {
background:lightgray;
width:25px;
height:4px;
display:block;
text-align:center;
margin:0px 3px;
font-size:0px;
font-weight:bold;
color:#A3916D;
text-decoration:italic;
font-family: helvetica;
border-radius:5px 5px 2px;
transition: all 0.5s ease;
}
ul.slpagination li a.number:hover {
background:#977E79;
color:lightgray;
height:18px;
font-size:10px;
}
ul.slpagination li a.select {
background:#B78B59;
color:white;
text-decoration:none;
text-decoration:italic;
font-size:0px;
}
.sl_paginationpart:hover li a.select {
height: 18px;
font-size: 10px;
}
.sl_paginationpart:hover li a.number {
height: 18px;
}
#logo {
opacity: 1;
}
.kielet {
top:0px;
width:100%;
background-color: #908967;
padding:0px;
height: 35px;
color: white;
}
.kielet nav {
text-align: left;
height: 35px;
}
.kielet a {
display: inline;
left: 0px;
}
.icon {
width: 50px;
height: 100%;
right: 0px;
float: right;
margin:0 10px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}
.parent {
font-family: Verdana;
height: 30px;
font-size: 20px;
transition: background 0.5s ease;
}
.parent:hover {
background: #C2C3C4;
}
.parent a {
color: black;
text-decoration: none;
cursor: pointer;
}
.show ul
{
/*animation for show*/
transition:max-height 1s;
-webkit-transition:max-height 1s;
max-height: 100%;
}
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
}
.navigointi ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.navigointi a
{
float:left;
width:6em;
top: 0px;
text-decoration:none;
color:white;
background: FFE97D;
padding:0.2em 0.6em;
border-right:1px solid white;
height:29px;
transition: all 0.5s ease;
}
.navigointi a:hover
{
background-color:#FFF1B0;
color: #645406;
}
.navigointi li
{
display:inline;
}
Fot sticking footer use this method:
U just need to create wrapper div and get out footer from there. Then make margin-bottom in this wrapper equal footer height and create some push div - it will be place for footer. Look at this: fiddle
Add 100% also to html, like this:
html {
height: 100%;
}
Maybe put an div before closing with a clear both on it.
so
<div class="clearBoth"></div>
style:
.clearBoth{
clear: both;
}
Related
So i built a chatroom in node.js here and socket.io and i append all the users messages to a div called chatlog-display-div but the div keeps being displayed under the other div and when i try to make the height smaller (80%) it doesnt resize at all here is all my style
body{
background:rgb(28,28,29);
padding:0;
margin:0;
}
.main-div{
}
#chat-rooms-div{
padding-top:30px;
position:fixed;
left:0;
width:300px;
top:50px;
height:100%;
background:#2e3136;
bottom:0;
}
#chat-rooms-div-a{
color:darkcyan;
font-family: helvetica;
font-style:none;
}
#chat-rooms-div-li{
list-style:none;
display: inline;
margin-left: 5px;
margin-right:5px;
}
#main-header-div{
z-index: 1;
background:#24272b;
top:0;
left:0;
position:fixed;
width:100%;
height:50px;
}
#chat-box-div{
padding: 0;
font-family: helvetica;
position:fixed;
top:50px;
height:100%;
width:100%;
background-color:#36393e;
left:300px;
overflow-y: scroll;
overflow-x: none;
}
#main-header-div-text{
width:120px;
color:darkcyan;
font-family: helvetica;
font-size: 20px;
vertical-align: center;
margin-top:15px;
margin-left: 90px;
}
#main-header-div-text:hover{
transition:ease-in-out .3s;
color:white;
}
::-webkit-input-placeholder {
color: darkcyan;
}
:-moz-placeholder { /* Firefox 18- */
color: darkcyan;
}
::-moz-placeholder { /* Firefox 19+ */
color: darkcyan;
}
:-ms-input-placeholder {
color: darkcyan;
}
#chatlog-display-div{
padding-left: 5px;
padding-top:10px;
font-family: helvetica;
position:fixed;
top:50px;
width:100%;
background-color:transparent;;
left:300px;
overflow-y: scroll;
overflow-x: none;
bottom:52px;
}
#chatroom-box{
padding-top:8px;
width:300px;
height: 20px;
background:transparent;
color:darkcyan;
font-family: helvetica;
}
#chatroom-box-link{
font-family: helvetica;
color:darkcyan;
text-decoration:none;
}
#chatroom-box-link:hover{
transition:ease-in-out .3s;
color:#006666;
}
#chat-box-div-hr{
left:305px;
width:95%;
position:fixed;
bottom:45px;
margin-right:5px;
}
hr{
border:1px solid;
color:#424549;
}
#chat-box-div-submit{
margin-left:0;
height:30px;
background:darkcyan;
width:70px;
outline: none;
}
#chat-box-div-txtinpt{
width:69%;
min-width:100px;
margin-top:10px;
margin-bottom:10px;
margin-left: 10px;
margin-right:0;
outline-color: darkcyan;
padding-left: 10px;
}
#chat-controls-div{
padding: 0;
width: 100%;
height: 55px;
background:transparent;
position: fixed;
bottom:0;
left:300px;
}
.submit{
background:darkcyan;
border:0;
border-radius:4px;
}
#main-header-div-search-txtinpt{
position:fixed;
width:60%;
height:35px;
top:7px;
margin-right:50%;
right:-30%;
background:transparent;
border:2px solid darkcyan;
border-radius:4px;
padding-left:10px;
color:darkcyan;
outline-color: darkcyan;
}
.big-txtinpt{
height:30px;
background: transparent;
border-radius:4px;
border:2px solid darkcyan;
color:darkcyan;
}
.servertxt{
color:cyan;
}
here is my index.html
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="author" content="Nicholas Hendricks">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<title>BillIsChill-2.0</title>
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/masterStyle.css" />
<link type="text/css" rel="stylesheet" href="http://billischill.ddns.net/billischill-2.0/css/animate.css" />
</head>
<body>
<div id="main-header-div">
<p id="main-header-div-text">BillIsChill-2.0<p>
<form>
<input id="main-header-div-search-txtinpt" class="search" placeholder="Search" name="search"/>
</form>
</div>
<div id="chat-rooms-div" class="main-div">
<div id="rooms">
</div>
</div>
<div id="chat-box-div" class="main-div">
<div id="chatlog-display-div">
</div>
<form id="chatform" action="">
<hr id="chat-box-div-hr">
<div id="chat-controls-div">
<input id="chat-box-div-txtinpt" class="big-txtinpt"type="text" spellcheck="false" placeholder="Message">
<input id="chat-box-div-submit" class="submit" type="submit" value="Send">
</div>
</form>
</div>
<div id="online-users-div">
<div>
<script>
var socket = io();
socket.on('connect', function(){
socket.emit('adduser', prompt("What's your name?"));
});
socket.on('updatechat', function (username, data) {
$('#chatlog-display-div').append(username + data);
});
socket.on('welcomeuser', function(data, username){
jQuery("#chatlog-display-div").append(data + username);
});
socket.on('updaterooms', function(rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function(key, value) {
if(value == current_room){
$('#rooms').append('<div id="chatroom-box"><center>' + value + '<center></div><hr>');
}
else {
$('#rooms').append('<div id="chatroom-box"><center><a id="chatroom-box-link" href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></center></div><hr>');
}
});
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
$('form').submit(function(e) {
e.preventDefault();
//gets the value from the message text feild and sets it as the message var
var message = {
text : $('#chat-box-div-txtinpt').val()
}
if (message.text.trim().length !== 0) {
socket.emit('chat-message',message);
//append the message to the chatlog-display-div
$('#chat-box-div-txtinpt').focus().val('');
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
}
});
socket.on('chat-message', function (message) {
jQuery("#chatlog-display-div").append('<div>'+message.text+'</div><hr>');
});
</script>
can someone please help me
From what i understand i think you want to scroll the div to the last message entered. For that add the following line after each time you append text using jQuery("#chatlog-display-div").append
$("#chatlog-display-div").scrollTop($("#chatlog-display-div").prop("scrollHeight"));
people. my links do not work properly on firefox, but on chrome they are good. I've tried all the tips from here, but nothing helped. I can't find the issue. I tried to delete #position:relative#, also I've tried to change #z-index#. I don't understand because in chrome it works very well, but Firefox.
table
{
border-collapse: collapse;
border-spacing: 0;
}
a
{
text-decoration:none;
color:black;
transition-duration:1s;
}
body,div
{
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
/*-------Resets above-----*/
/*-----Styles for Html website-----*/
#wrapper
{
width: 100%;
height:100%;
background:linear-gradient(#6699ff,#99ccff,#ccffff);
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
#logo
{
font-size: 40px;
font-weight:bold;
font-family:Impact, Charcoal, sans-serif;
font-style:italic;
width:1200px;
height:70px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
.button
{
position: relative;
margin-top: 380px;
margin-left:1100px;
width:150px;
height:75px;
z-index:1;
background-image:url('images/new_year_background');
border-radius:20px;
border:2px solid #33ff99;
font-size: 20px;
transition-duration: 1s;
cursor: pointer;
text-decoration:none;
}
.button:hover
{
background-color:#33ffff;
}
.button a:hover
{
cursor: pointer;
color:white;
}
/*--------navigation and buttons-----------*/
nav
{
position: relative;
margin-top:30px;
margin-right:75px;
z-index:1;
}
.menu1
{
margin-left:auto;
margin-right:auto;
width:1350px;
}
.button1
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:10px 0 0 10px;
}
.button3
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
border-radius:0 10px 10px 0;
}
.button2
{
height:50px;
width:100px;
background-color:#33ff66;
cursor:pointer;
border:1px solid #00cc66;
color:white;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
transition-duration:1s;
float:right;
}
.button1:hover
{
background-color:#99ff66;
}
.button1 a:hover
{
color:white;
}
.button2:hover
{
background-color:#99ff66;
}
.button2 a:hover
{
color:white;
}
.button3:hover
{
background-color:#99ff66;
}
.button3 a:hover
{
color:white;
}
/*------End of the navigation-----*/
#first
{
border-radius:20px;
position: relative;
width: 1300px;
height:500px;
background-image:url('images/symphony.png');
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid #3366ff;
}
#sec
{
color:red;
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/new_year_background.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#tre
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/swirl_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#quad
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/logo_x_pattern.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#fiv
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/ignasi_pattern_s.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sex
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/confectionary.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
border: 2px solid #3366ff;
}
#sev
{
border-radius:20px;
position:relative;
width: 1300px;
height:500px;
background-image:url('images/restaurant.png');
margin-left: auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
border: 2px solid #3366ff;
}
footer h3
{
width:100%;
text-align:center;
}
<!doctype html>
<html>
<head>
<title>My Guide to Success</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="wrapper">
<div class="menu1">
<nav>
<button class="button3">Fith</button>
<button class="button2">Fourth</button>
<button class="button2">Third</button>
<button class="button2">Second</button>
<button class="button1">First</button>
</nav>
</div>
<div id="logo"><h1>My Guide To Success</h1></div>
<div id="first"><button class="button"><h2>Next Step</h2></button></div>
<div id="sec"><button class="button"><h2>Next Step</h2></button></div>
<div id="tre"><button class="button"><h2>Next Step</h2></button></div>
<div id="quad"><button class="button"><h2>Next Step</h2></button></div>
<div id="fiv"><button class="button"><h2>Next Step</h2></button></div>
<div id="sex"><button class="button"><h2>Next Step</h2></button></div>
<div id="sev"><button class="button">To Top</button></div>
</div>
</body>
<footer>
<h3>Copyright © Marin KapranoFF - 2016</h3>
</footer>
</html>
Anchors inside buttons behave differently in Firefox. I'd recommend removing the <button> wrapper and styling the anchor with CSS:
<div id="first">
<h2>Next Step</h2>
</div>
You generally don't need to place a button inside an anchor, the anchor already handles a click event to navigate you to the href.
//<![CDATA[
$(document).ready(function(){
$("#accordion li").click(function(e){
e.stopPropagation();
var subList = $(this).find('> ul');
if(subList.length) subList.slideToggle(300);
});
});
//]]>
html {
margin:0;
padding:0
}
body {
font-family: Tahoma, Geneva, sans-serif;
line-height: 1.6em;
color:#000;
text-align:justify;
background-image: url('../inc/pg/3.png'), url('../inc/pg/4.png');
background-repeat: no-repeat;
background-position:left bottom, right bottom;
background-attachment:fixed;
}
P {
font-size: 0.875em;
color:#000;
font-family:Tahoma;
}
h1 {
font: Verdana, Arial, sans-serif;
font-size: 1.875em;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
word-spacing: normal;
}
h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12 {
font:normal 15px Verdana, Arial, sans-serif;
background-color: #93A6A6;
line-height:1.5em;
margin:0 auto;
padding:0;
}
div#container {
overflow: hidden;
min-width:600px;
width:1200px;
margin:0px auto;
border: 10px double #005cc6;
}
div#banner {
padding:10px;
background: url('header.png') no-repeat center center;
height:400px;
position:relative;
}
div#nav_main {
position: absolute;
left: 50px;
width: 1180px;
bottom: 5px;
}
div#social {
position: absolute;
float:right;
}
div#image {
background-image: url('http://oi61.tinypic.com/aakub6.jpg');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
div#uscite {
padding:30px 20px;
position:absolute;
right:0;
border:0px;
height:35%;
width:20%;
}
div#jp {
text-align: center;
width:50%;
height:100%;
float:left;
border:0px;
}
div#it {
text-align: center;
width:50%;
height:100%;
float:right;
border:0px;
}
div#navigation_left {
float: left;
width:22%;
}
div#navigation_right {
float: right;
width:20%;
}
div#content {
padding: 16px 10px;
overflow:auto;
margin-left:17%;
margin-right:17%;
}
div#footer {
clear:both;
padding:10px;
border:1px solid #444444;
background: url('footer.png') no-repeat center center;
height:70px;
}
div#back_top {
padding:10px;
float:right;
border:0px;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 0.875em;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
div#language {
padding-top:10px
}
#nav_main div {
display:inline-block;
}
.blockspoiler {
padding:7px;
background-color:#ffde00;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler2 {
padding:7px;
background-color:#c86565;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.blockspoiler3 {
padding:7px;
background-color:#8991db;
font-size:12px;
color:#000;
text-align:justify;
line-height:14px;
}
.nav_main {
background:url(../img/nav_main.png);
}
.nav {
heigh:100%;
width:100%;
}
.home {
background-position: -0px -0px;
width: 111px;
height: 40px;
background-repeat:no-repeat;
}
.staff {
background-position: -0px -50px;
width: 126px;
height: 40px;
background-repeat:no-repeat;
}
.forum {
background-position: -0px -100px;
width: 136px;
height: 40px;
background-repeat:no-repeat;
}
.disclaimer {
background-position: -0px -150px;
width: 243px;
height: 40px;
background-repeat:no-repeat;
}
.secret {
background-position: -0px -200px;
width: 257px;
height: 38px;
background-repeat:no-repeat;
}
.bandiere {
background:url(../img/flag.png);
}
.flag {
height:100%;
width:100%;
}
.flag_en {
background-position:-0px -0px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_es {
background-position:-0px -58px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_fr {
background-position:-0px -116px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_de {
background-position:-0px -174px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.flag_jp {
background-position:-0px -232px;
width:48px;
height:48px;
background-repeat:no-repeat;
}
.icon {
background:url(../img/icone.png);
}
.advice {
height:100%;
width:100%;
}
.chrome {
background-position:-0px -0px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.firefox {
background-position:-0px -80px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.facebook {
background-position:-0px -160px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.twitter {
background-position:-0px -240px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.affiliazioni {
background:url(../img/gemellati.png);
}
.gemellati {
height:100%;
width:100%;
}
.banner_1 {
background-position:-0px -0px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_2 {
background-position:-0px -41px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_3 {
background-position:-0px -82px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_4 {
background-position:-0px -123px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_5 {
background-position:-0px -164px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_6 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.affiliazioni2 {
background:url(../img/net.png);
}
.net {
height:100%;
width:100%;
}
.banner_7 {
background-position: -0px -0px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_8 {
background-position: -0px -41px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_9 {
background-position:-0px -82px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_10 {
background-position:-0px -123px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_11 {
background-position:-0px -164px;
width: 88px;
height: 31px;
background-repeat:no-repeat;
}
.banner_12 {
background-position:-0px -205px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_13 {
background-position:-0px -246px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_14 {
background-position:-0px -287px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_15 {
background-position:-0px -328px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_16 {
background-position:-0px -369px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_17 {
background-position:-0px -410px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_18 {
background-position:-0px -451px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_19 {
background-position:-0px -492px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_20 {
background-position:-0px -533px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_21 {
background-position:-0px -574px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
.banner_22 {
background-position:-0px -615px;
width:88px;
height:31px;
background-repeat:no-repeat;
}
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
<!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>
<title>Full Metal Panic Italy - Home</title>
<meta http-equiv="Content-Language" content="it" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="full, metal, panic, fmp, fumoffu, the second raid, spoiler, mithril, amalgam, sigma" />
<meta name="description" content="Full Metal Panic Italy, sito ufficiale italiano di Full Metal Panic con spoiler, informazioni, curiosità e molto altro! Fanart, immagini, download e schede tecniche" />
<link rel="stylesheet" type="text/css" href="../inc/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../inc/js/prototype.js"></script>
<script type="text/javascript" src="../inc/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../inc/js/lightbox.js"></script>
<link rel="stylesheet" href="../inc/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="../img/favicon.ico" />
<style type="text/css">
div#language{padding-top:10px}
#nav_main div{display:inline-block;}
</style>
</head>
<body>
<div id="container">
<div id="banner"><div id="uscite"><div id="jp"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite jappo</div>
<div id="it"><img src="../img/uscite/scan.png" height="90" width="60" alt="" /><br />uscite ita</div></div>
<div id="social">
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Facebook" alt="Facebook" />
<img src="../img/facebook.png" width="70" height="70" title="Vieni a trovarci su Twuitter" alt="Twitter" />
</div>
<div id="image">
<script language="Javascript">
<!--
function image() {
};
image = new image();
number = 0;
// imageArray
image[number++] = "<img src='../inc/pg/1.png' height='350' width='204' alt='' />"
image[number++] = "<img src='../inc/pg/2.png' height='350' width='232' alt='' />"
image[number++] = "<img src='../inc/pg/3.png' height='350' width='176' alt='' />"
image[number++] = "<img src='../inc/pg/4.png' height='350' width='270' alt='' />"
image[number++] = "<img src='../inc/pg/5.png' height='350' width='290' alt='' />"
increment = Math.floor(Math.random() * number);
//-->
</script>
<script language="JavaScript">
document.write(image[increment]);
</script>
</div>
<div id="nav_main">
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav home" border="0" title="Home" alt="Home" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav staff" border="0" title="Staff" alt="Staff" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav forum" border="0" title="Forum" alt="Forum" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav disclaimer" border="0" title="Dislaimer" alt="Dislaimer" /></div>
<div style="margin-right:50px"><img src="../img/transparent.gif" width="1" height="1" class="nav_main nav secret" border="0" title="Top Secret" alt="Top Secret" /></div>
</div>
</div>
<div id="navigation_left"><div id="language" align="center">
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_en" title="English Translation" alt="English Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_es" title="Spanish Translation" alt="Spanish Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_fr" title="French Translation" alt="French Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_de" title="German Translation" alt="German Translation"/>
<img src="../img/transparent.gif" width="1" border="0" height="1" class="bandiere flag flag_jp" title="Japanese Translation" alt="Japanese Translation"/>
</div>
<ul id="accordion">
<li><div id="image" align="center"><img src="http://oi61.tinypic.com/2pq45ys.jpg" height="" width="" alt="Storia"/></div>
<ul>
<li>Full Metal Panic!</li><li>Full Metal Panic? Fumoffu</li><li>Full Metal Panic! TSR</li><li>Riassunti Episodi</li><li>Manga</li><li>Lista Manga</li><li>Romanzi</li><li>Sigma</li><li>Overload</li><li>Comic Mission</li><li>Another</li><li>SDNED</li><li>Zero</li><li>Riassunti Manga</li><li>Riassunti Romanzi</li> </ul>
</li>
<li><div align="center"><img src="../img/spoiler.png" height="" width="" alt="Spoiler" /></div>
<ul>
<li>Infanzia di Sousuke</li><li>Infanzia di Tessa</li><li>Infanzia di Kurz</li><li>Michel Lemon</li><li>Le Origini</li><li>Fine della Mirthril</li><li>Yamsuk 11</li> </ul>
</li>
<li><div align="center"><img src="../img/gallery.png" height="" width="" alt="Gallery" align="center"/></div>
<ul>
<li>FanArt</li><li>Wallpapers</li><li>Animated</li><li>Avatar</li><li>Cosplay</li> </ul>
</li>
<li><div align="center"><img src="../img/interviste.png" height="" width="" alt="Interviste" align="center"/></div>
<ul>
<li>Perla Liberatori</li><li>Leslie La Penna</li><li>Valerio Manenti | J-Pop</li> </ul>
</li>
<li><div align="center"><img src="../img/other.png" height="" width="" alt="Other" align="center"/></div>
<ul>
<li>F.A.Q. e Curiosità</li><li>Titoli Episodi</li><li>Mithril</li><li>Isola Merida</li><li>Terroristi</li><li>Personaggi</li><li>Whispered</li><li>Black Tecnology</li><li>Arm Slave</li><li>Equipaggiamenti AS</li><li>Tuatha De Danaan</li><li>Palladio</li><li>Armi</li><li>Lambda Driver</li><li>Shouji Gatoh</li><li>Shiki Douji</li><li>Doppiaggio Italiano</li><li>Doppiaggio</li><li>Frasi Celebri</li><li>D.O.M.S</li><li>Luoghi</li><li>Viaggio a Canicatti</li><li>Retsu Tateo</li><li>Film Vs Anime</li> </ul>
</li>
</ul>
</div>
<div id="navigation_right"><ul id="accordion">
<li><div align="center"><img src="../img/multimedia.png" height="" width="" alt="Multimedia" /></div>
<ul>
<li>Soundtrack</li><li>Lyric</li><li>Videosigle</li><li>Trailers</li><li>Music Video</li><li>Skin Winamp</li><li>Nostro Live Action</li><li>DVD/VHS</li><li>Mikuni Shimokawa</li><li>Toshihiko Sahashi</li><li>Tema Google Chrome</li><li>Tema Firefox</li><li>App Smartphone</li> <li>Link1
<ul>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer"><div id="back_top"><img src="#"></div></div>
</div>
</body>
<script type="text/javascript" src="../inc/menu/menu.js"></script>
</html>
I have an accordion menu (jquery) where every category is between li I want put an image as background to every category and to do so I used a div
I need to center the background-image of the div with another image between div like this:
So I want that this:
goes on this.
I tried to move the background but was been cut because goes out li or move the foreground
but moves both of them.
<div style="background: url('../img/bg.png'); height:80px; right:20px; up:40px" align="center"><img src="../img/storia.png" height="" width="" alt="Storia"/></div>
I tried with another approach:
CSS:
div#image {
background-image: url('../img/bg.png');
background-position:-10px -50px;
height:80px;
background-repeat:no-repeat;
}
HTML:
<div id="image" align="center"><img src="../img/text.png" /></div>
but this is the result
Here all codes:
HTML
<ul id="accordion">
<li><div id="image" align="center"><img src="../img/text.png" /></div>
<ul>
<?php
isset($_GET["page"]) ? $page=$_GET["page"] : $page="home";
$links=array(
"link" => "Text",
);
foreach($links as $href=>$text){
if($page!=$links){
echo '<li>'.$text.'</li>';
}else{echo $text;}
}
?>
</ul>
</li>
</ul>
CSS:
#accordion {
list-style: none;
padding: 0;
}
#accordion li {
display: block;
/*background-color: #8bc1dd;*/
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
}
#accordion ul {
list-style: none;
padding: 0;
display: none;
}
#accordion ul li {
font-weight: normal;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
color: black;
font-size: 0.875em;
text-decoration: none;
}
#accordion a:hover {
color: #0066FF;
text-decoration: underline
}
#accordion ul li a:hover {
padding-left: 60px;
color: #8484fc;
font-size: 18px;
background: url(bullet.png) left no-repeat;
}
Could you help me?
You can use:
li {
position:absolute;
margin-right: ? px;
margin-top: ? px;
}
Have you tried adjusting the line height in the CSS to ensure it has the same height as the background image? Example below
#mynav li {
line-height: 100px;
background: url(100pximage.png) left no-repeat;
}
The slider at the top of my page does show up perfect in Chrome, but not in Firefox. How can I fix this problem?
I already uploaded a test of the page, in case you would like to have a look.
Test of page: http://www.s4ea.org/new/index.html
HTML:
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" />
</div>
</header>
</header>
CSS:
.ul {
width:50%;
list-style:none;
display:inline;
background-color:#FFF;
}
.ul li {
display: inline;
background-color:#FFF;
}
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
overflow:hidden;
font-size:1em;
height:100%;
padding:0% 0% 0% 3.3%;
}
.second .right img {
margin:0px 0px 0px 0px;
width:100%;
height:auto;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
A couple of issues
.second .top_slider .aslide img {
width: 100%;
height:auto;
}
.mainheader nav {
background-color: #FFFFFF;
float: left;
height: 10%;
width: 100%;
}
it seems the width of the images are not correct since you did not set a width and your nav just needed a float clear. I cleared it by making it a float but there are many other ways to do this
I'm sitting and playing around with an idea about that when you hold the mouse over an image then there comes a little icon up over the image. I've tried to do like this:
HTML:
<figure>
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;">
<img src="/indhold/img/sog/sog.png" class="iconIMG">
<p><?php echo date("d-m-Y", strtotime($dag));;?></p>
</div>
</figure>
CSS:
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.lukIMG .iconIMG { position: absolute; display: none; }
EIDT HTML AND CSS:
HTML
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1">
<img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;">
<p>dato</p>
</div>
CSS
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.cl1:hover+img
{
position:absolute;
left:0;
top:0;
z-index:3;
}
.cl1
{
z-index:2;
}
.cl2
{
z-index:1;
}
Check the DEMO or the following code:
<html>
<head>
<script>
</script>
<style>
img
{
position:absolute;
}
img.cl1:hover+img
{
position:relative;
left:0;
top:0;
z-index:3;
}
img.cl1
{
z-index:2;
}
img.cl2
{
z-index:1;
}
</style>
</head>
<body>
<img src="1.jpg" width=200 height=200 class="cl1"/>
<img src='2.gif' class="cl2"/>
</body>
</html>
this should be work,please test it:
.lukIMG .iconIMG:hover { position: absolute; display: block; z-index:999}
add the code to your css file