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"));
Related
I'm trying to keep things centered in the browser without it stretching my divs and moving my videos..
when I stretch my browser it moves my images and objects around..
I want to keep objects inside the divs & have everything stay in place..
Is that possible using just css or do I have to use flexbox and java?
I've posted a image on whats going on and here is the coding for it all..
I'm sure it needs a little code cleaning..
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #333333;
width:90%;
height:660px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:left;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:right;
width: 20%;
height: 96%;
margin:0px;
padding: 10px 20px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 96%;
margin:auto;
padding: 10px;
border: 2px solid black;
border-radius: 5px;
}
.mnu { overflow:hidden; background-color:#F8F8F8; padding:2px; line-height:1.5em; cursor:pointer; }
.mnu a { display:block; cursor:pointer; width:100%; padding:0 2px 0 1px; margin:0; }
.mnu a:link { color:#000000; text-decoration:none; }
.mnu a:visited { color:#000000; text-decoration:none; }
.mnu a:hover { color:#000000; text-decoration:none; background-color:#F0F0F0; }
.mnu a:active { color:#000000; text-decoration:none; background-color:#EAEAEA; }
.fil { position:absolute; left:0; top:0; width:100%; height:100%; }
.ptr { cursor:pointer; }
.opr { filter:alpha(opacity=100); }
.trn { opacity:0; filter:alpha(opacity=0); }
.smf { -ms-interpolation-mode:bicubic; }
.sol { background-color:blue; }
.bmk { border-style:dashed; border-width:0 0 1px 0; }
.ctr { position:relative; margin-left:auto; margin-right:auto; text-align:left; }
.ctt { text-align:center; }
.abs { position:absolute; }
.aut { overflow:auto; }
.hid { overflow:hidden; }
.scr { overflow:scroll; }
.vis { overflow:visible; }
.inv { visibility:hidden; }
.cms { }
.col { background-color:transparent; clear:left; float:left; }
.cor { background-color:transparent; clear:right; float:right; }
.required { }
.nvo { }
.bgremove { background-image:none; }
.nml { }
.hd1,h1 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:18px; text-align:center; }
.hd2,h2 { font-family:Times New Roman, Times, serif; font-style:italic; font-size:15px; }
.hd3,h3 { font-weight:bold; }
.mnus { padding:0px; border-width:2px; border-style:outset; background-color:#CEE5F2; text-align:center; }
.mnus a:hover { color:#FFFFFF; background-color:#000080; }
.mnus a:active { color:#FFFFFF; background-color:#0000CC; }
.pnl { border-width:1px; border-style:solid; border-color:#8DC7EB; background-color:#CEE5F2; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="created" content="Tue, 19 Feb 2019 02:15:52 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<main>
<div class="divl">Music<br> Here Is A List Of Music</div>
<div class="divr">Producers<br> Here Is A List Of Producers</div>
<div class="divc">Videos<br><div id="lays581qvlpb">
<div id="pict581wjphg" class="hid abs" style="left:1199px; top:300px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='visible';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581wjphgi" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict581nqvmq" class="hid abs" style="left:1199px; top:399px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='visible';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict581nqvmqi" class="fil smf" src="img-2.png" alt="">
</div>
<div id="pict583yfwki" class="hid abs" style="left:1199px; top:498px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='visible';
document.getElementById('lays585tvnws').style.visibility='hidden';">
<img id="pict583yfwkii" class="fil smf" src="img-1.png" alt="">
</div>
<div id="pict583fdwaz" class="hid abs" style="left:1199px; top:597px; width:100px; height:100px;"
onclick="document.getElementById('lays585jmqnb').style.visibility='hidden';
document.getElementById('lays585mobib').style.visibility='hidden';
document.getElementById('lays585cwgno').style.visibility='hidden';
document.getElementById('lays585tvnws').style.visibility='visible';">
<img id="pict583fdwazi" class="fil smf" src="img-2.png" alt="">
</div>
</div>
<div id="lays585jmqnb">
<div id="ytub586qorjf" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/Lzkbf9wrMcQ?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585mobib" style="visibility:hidden">
<div id="ytub586vzlff" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/9SI2xE0ixws?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585cwgno" style="visibility:hidden">
<div id="ytub587seayk" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/U5LgnJI1FfI?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div>
<div id="lays585tvnws" style="visibility:hidden">
<div id="ytub587wsjnq" class="hid abs" style="left:600px; top:300px; width:600px; height:397px; border-width:1px;
border-style:solid; border-color:#808080;" border="0">
<iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/C9jH6mK_wUg?hd=1
" frameborder="0" allowfullscreen></iframe></div>
</div></div>
</main>
<div style="clear:both;"></div>
</div>[![enter image description here][1]][1]
</body>
</html>
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.
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.
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;
}
I have a simple layout and the logo appears to be different in firefox and I can't seem to get an even medium in all browsers as when I change the height of the letter 'f' in the blue box it effects all browsers.
The issue i am having is with the div "logofoxfont" as I want the letter 'f' to be in the same position in all broswers but it appears to be different in firefox.
How can I sort this?
<html>
<head>
</head>
<link href="fw.css" rel="stylesheet" type="text/css">
<body>
<div class="topbox">
<div class="logobox"><div class="logoboxfont">
f</div></div>
<div class="logotext"></div>
</div>
<div class="midbox">
<div class="menubox"><div class="menuboxfont">Home<br>About Us<br>Staff<br>News<br></div>
<div class="menubox2"><div class="menuboxfont2">Appointments<br>
Price Guide<br>Emergency Services<br>Feedback<br></div></div></div>
</div>
</body>
</html>
And the css is:
#logo{
background-image:url(40.jpg);
height:100px;
width:100px;
}
.topbox {
margin: 0px auto;
height:100px;
width:900px;
margin-top:0px;
background: #ffffff;
}
.logobox {
height:90px;
width:70px;
margin-top:10px;
background-color:#2FB2F4;
}
.logotext {
color: #333333;
font-family: Cambria;
font-size: 18px;
margin-top: -90px;
margin-left: 75px;
position:absolute;
}
#logotext1 {
margin-left:10px;
}
#logotext2 {
color: #00AAF5;
font-family: georgia;
font-size: 22px;
margin-top: -35px;
margin-left:10px;
}
.logoboxfont {
font-family:Cambria;
color: #ffffff;
font-size: 126px;
position:absolute;
margin-top:-20px;
margin-left:0px;
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
.midbox {
margin: 0px auto;
height:700px;
width:900px;
margin-top:0px;
background: #ffffff;
border-top: 1px solid #333333;
}
.menubox {
height:230px;
width:150px;
margin-top:10px;
background: #E6E6E6;
}
.menuboxfont {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
.menubox2 {
height:160px;
width:150px;
margin-top:70px;
background: #FAFAFA;
position:absolute;
}
.menuboxfont2 {
color: #333333;
font-family:lucida grande;
font-size: 12px;
margin-top: 4px;
margin-left: 4px;
position:absolute;
}
Thanks for the help!
James
See fiddle for code and demo:
Fiddle: http://jsfiddle.net/kHtmf/1/
Demo: http://jsfiddle.net/kHtmf/1/embedded/result/
SS of Firefox:
SS of chrome:
SS of Safari: