When I open the site on a mobile then last tab merge with others tabs, and last tab will have a linebreak.
But I am not expert in media Query in CSS3. How do I apply this code, if there is some other way then mine give your best solution regarding my issue.
I don't want to use Bootstrap because my website consists of custom designing in html and css.
document.getElementById('content_4').style.display = 'none';
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById(new_tab).className = 'activy';
}
function tabSwitch_2(activy, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+activy).style.display = 'block';
document.getElementById(tab_prefix+activy).className = 'activy';
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
ul.tabs {
margin:0px; padding:0px;
text-align: center;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#F7F7F7;
color:black;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #F4FBFF;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
ul.tabs li a:hover {
background-color:#3498DB;
color:#fff;
border-color:#3498DB;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ul.tabs li a.activy {
background-color:#3498DB;
color:#fff;
border:1px solid #3498DB;
}
.content {
background-color:#fff;
padding:10px;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<br>
<ul class="tabs">
<li>Text</li>
<li>Email</li>
<li>Facebook</li>
<li>Social Media</li>
</ul>
<div id="content_1" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; ">
<p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p>
</div>
<div id="content_2" class="content greybg">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p>
<p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p>
</p>
</div>
<div id="content_3" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:5px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p>
</p>
</div>
<div id="content_4" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:8px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p>
</p>
</div>
</div>
</div>
Add display: inline-block; for ul.tabs li a this will help
See fiddle : http://jsfiddle.net/sachinkk/1b2m3rsq/
Related
The problem i am facing is in two different subpages of this webpage
but in other pages say admission it looks like this
PS. I have removed the non-header part of the code from html as it was exceeding the word limits... Hope that wont be needed.
Here is my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delhi Public School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="layout/styles/layout.css" type="text/css" />
<script type="text/javascript" src="layout/scripts/jquery.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.ui.min.js"></script>
<!-- Homepage Specific -->
<script type="text/javascript" src="layout/scripts/galleryviewthemes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="layout/scripts/galleryviewthemes/jquery.timers.1.2.js"></script>
<script type="text/javascript" src="layout/scripts/galleryviewthemes/jquery.galleryview.2.1.1.min.js"></script>
<script type="text/javascript" src="layout/scripts/galleryviewthemes/jquery.galleryview.setup.js"></script>
<!-- / Homepage Specific -->
</head>
<body id="top">
<div class="wrapper row1">
<div id="header" class="clear">
<div class="fl_left">
<h1>School logo here</h1>
<p>Insert the logo here</p>
</div>
<div class="fl_right">
<p>A - Z Index | Student Login | Staff Login</p>
<form action="#" method="post" id="sitesearch">
<fieldset>
<legend>Site Search</legend>
<input type="text" value="Search Our Website…" onfocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;" />
<input type="image" src="layout/images/search.gif" id="search" alt="Search" />
</fieldset>
</form>
</div>
<div id="topnav">
<ul>
<li class="active"><div class="dropdown">Home
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">Gallery<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li><div class="dropdown">Information Coner<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li class="last"><div class="dropdown">Contact us<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="iAmFixed">
Student Login...
</div>
<div id="iAmFixedtoo">
Staff Login...
</div>
<!-- ####################################################################################################### -->
here is admission.html(full-width.html in )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Template Name: Education Board
Author: OS Templates
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Education Board | Full Width</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../layout/styles/layout.css" type="text/css" />
</head>
<body id="top">
<div class="wrapper row1">
<div id="header" class="clear">
<div class="fl_left">
<h1>Education Board</h1>
<p>Free Website Template</p>
</div>
<div class="fl_right">
<p>A - Z Index | Student Login | Staff Login</p>
<form action="#" method="post" id="sitesearch">
<fieldset>
<legend>Site Search</legend>
<input type="text" value="Search Our Website…" onfocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;" />
<input type="image" src="../layout/images/search.gif" id="search" alt="Search" />
</fieldset>
</form>
</div>
</div>
<div id="topnav">
<ul>
<li >Home</li>
<li>About Us</li>
<li class="active">Admissions</li>
<li>Rules</li>
<li>Achievements</li>
<li>Gallery</li>
<li>Information Coner</li>
<li class="last">Contact us</li>
</ul>
</div>
</div>
</div>
<!-- ####################################################################################################### -->
here is the style sheet that affects the nav bar layout.css
#charset "utf-8";
#import url("navi.css");
#import url("forms.css");
#import url("tables.css");
#import url("homepage.css");
#import url("gallery.css");
#import url("portfolio.css");
#import url("featured_slide.css");
html{overflow-y:scroll;}
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#979797; background-color:#333333;}
#iAmFixed{
background-color:yellow;
border:1px solid yellow;
bottom: 200px;
padding:15px;
position:fixed;
right:10px;
width:100px;
z-index:10;
text-decoration:underline;
}
#iAmFixedtoo{
background-color:yellow;
border:1px solid yellow;
bottom: 250px;
padding:15px;
position:fixed;
right:10px;
width:120px;
z-index:10;
text-decoration:underline;
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 12px 12px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style-type:none;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:inline-block;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}
a{outline:none; text-decoration:none;}
.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}
img{margin:0; padding:0; border:none;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D8D8D8; text-align:center;}
.imgl{margin:0 15px 15px 0; clear:left;}
.imgr{margin:0 0 15px 15px; clear:right;}
/* ----------------------------------------------Wrapper------------------------------------- */
div.wrapper{display:block; width:100%; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0 0 15px 0; padding:0; font-size:16px; font-weight:normal; font-style:italic; line-height:normal; color:white; background-color:transparent;}
.row1, .row2{color:white; background-color:transparent;}
.row3{color:#979797; background-color:#FFFFFF; border-top:1px solid #510000; border-bottom:5px solid #333333;}
.row3 a{color:#896C50; background-color:#FFFFFF;}
.row4{padding:30px 0;}
/* ----------------------------------------------Generalise------------------------------------- */
#header, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}
/* ----------------------------------------------Header------------------------------------- */
#header{padding:25px 0 30px 0;}
#header h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}
#header h1{font-size:26px; font-variant:small-caps; font-style:normal;}
#header h1 a{color:#ffffff; background-color:#333333;}
#header p{font-size:12px;}
#header p a{color:white ; background-color:#333333;}
#header .fl_left, #header .fl_right{margin-bottom:15px;}
#header .fl_right{margin-top:13px;}
#header .fl_right p{float:left; margin:5px 50px 0 0;}
/* ----------------------------------------------Content------------------------------------- */
#container{padding:30px 0; line-height:1.6em;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{background-color:#FFFFFF; margin:0 0 15px 0; padding:0 0 10px 0; border-bottom:1px solid #D8D8D8;}
#container .readmore{display:block; width:100%; text-align:right; line-height:normal;}
#content{display:block; float:left; width:630px;}
/* Comments */
#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#896C50; background-color:#F7F7F7;}
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#896C50; background-color:#E8E8E8;}
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
/* ----------------------------------------------Column------------------------------------- */
#column{display:block; float:right; width:300px;}
#column .holder, #column #featured{display:block; width:300px; margin-bottom:30px;}
#column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; text-transform:none; line-height:normal; border-bottom:1px dotted #999999;}
#column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #999999;}
#column div.imgholder{display:block; width:290px; margin:0 0 10px 0;}
#column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}
/* Featured Block */
#column #featured ul, #column #featured h2, #column #featured p{margin:0; padding:0; list-style:none; color:#666666; background-color:#F7F7F7;}
#column #featured a{color:#896C50; background-color:#F7F7F7;}
#column #featured li{display:block; width:250px; margin:0; padding:20px 25px; color:#666666; background-color:#F7F7F7;}
#column #featured li p.imgholder{display:block; width:240px; height:90px; margin:20px 0 15px 0;}
#column #featured li h2{margin:0; padding:0 0 8px 0; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dotted #999999;}
#container #column .readmore a{display:block; width:100%; margin-top:15px; height:auto; padding-left:0; font-weight:bold; text-align:right; line-height:normal; background:none;}
#column .latestnews{display:block; width:100%; margin:0; padding:0; list-style:none;}
#column .latestnews li{display:block; width:100%; height:99px; margin:0 0 11px 0; padding:0 0 21px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden;}
#column .latestnews li.last, #column .last{margin-bottom:0;}
#column .latestnews p{display:inline;}
#column .latestnews img{float:left; margin:0 10px 0 0; padding:4px; border:1px solid #C7C5C8; clear:left;}
/* ----------------------------------------------Footer------------------------------------- */
#footer{line-height:1.6em; background:url("images/footer_bg.gif") 550px 0 repeat-y;}
#footer a{color:#979797; background-color:#333333;}
#footer h2{color:#FFFFFF; background-color:#333333; font-weight:bold; font-style:normal;}
#footer ul{margin:0; padding:0; list-style:none;}
#footer address{font-style:normal;}
#footer .footbox{display:block; float:left; width:200px; margin-right:30px;}
#footer #social{margin-bottom:20px;}
#footer #social ul{margin:20px 0 0 0;}
#footer #social li{display:inline; margin-right:15px;}
#footer .last{margin:0;}
/* ----------------------------------------------Copyright------------------------------------- */
#copyright{padding:15px 0; border-top:1px solid #979797;}
#copyright p{margin:0; padding:0;}
#copyright, #copyright a{color:#979797; background-color:#333333;}
here is navi.css
#charset "utf-8";
#topnav{display:block; clear:both; width:960px; margin:0; padding:15px 0; text-align:center;}
#topnav, #topnav a{text-transform:uppercase; color:#FFFFFF; background-color:black;}
#topnav a:hover, #topnav li.active a{color:#c0c0c0; background-color:#33333;}
#topnav ul, #topnav li{margin:0; padding:0; list-style:none;}
#topnav li{display:inline; margin-right:30px;}
#topnav li.last{margin:0;}
/* ----------------------------------------------Column Navigation------------------------------------- */
#column .subnav{display:block; width:250px; padding:25px; background-color:#F7F7F7; margin-bottom:30px; line-height:normal;}
#column .subnav h2{margin:0 0 20px 0; padding:0 0 14px 0; background-color:#F7F7F7; border-bottom:1px dotted #666666;}
#column .subnav ul{margin:0; padding:0; list-style:none;}
#column .subnav li{margin:0 0 3px 0; padding:0;}
#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}
#column .subnav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("images/brown_file.gif") no-repeat 10px center #F7F7F7; text-decoration:none; border-bottom:1px dotted #666666;}
#column .subnav a:hover{color:#896C50; background-color:#F7F7F7;}
#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("images/black_file.gif") no-repeat #F7F7F7;}
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}
/* ----------------------------------------------Pagination------------------------------------- */
.pagination{display:block; width:100%; clear:both; text-align:center;}
.pagination ul{margin:0; padding:0; list-style:none;}
.pagination li{display:inline;}
.pagination .next{margin:0;}
.pagination a{display:inline-block; margin:0 2px 0 0; padding:2px 5px 3px 5px; border:1px solid #D8D9DE;}
.pagination .current, .pagination .splitter{margin:0 2px 0 0; padding:6px;}
.wrapper .pagination a:hover, .pagination .current, .pagination .splitter{color:#000000; background-color:#EBEDEE;}
I have a chat module for my website. I have a div where my messages appear, and I want it to scroll to the bottom of the div when I open the chat page. Most recent messages appear at the bottom.
Here is the HTML and CSS code am using
/CSS/
#pageMiddle_message{
margin-left:280px;
background:#FFF;
width: 700px;
height: 592px;
border-radius: 5px;
padding-bottom:0px;
position:fixed;
border: orange 2px solid;
}
#message{
width:auto;
height:100px;
}
#chat{
background:orange;
color: #fff;
}
#no_chat{
background:orange;
color: #fff;
height:42px;
line-height:0.11857143em;
}
#head_chat{
color:#fff;
line-height: 0.82857143em;
}
.sub_paneln{
text-transform:capitalize;
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.my_message{
float:right;
background-color:#DFFFFB;
list-style:none;
border-radius:8px;
border: #39F 1px solid;
}
.their_message{
float:left;
background-color:#0ADEF5;
border-radius:8px;
list-style:none;
border: #06F 1px solid;
position:inherit;
}
.line_message{
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.message_list{
background:#fff;
padding:2px;
height:445px;
max-height:600px;
overflow-y:auto;
position:relative;
}
.message_body{
border-radius: 5px;
height:auto;
}
#text_message{
width:670px;
margin-top:2px;
margin-left:23px;
background-color:#D2D2D2;
padding:0px;
}
/*HTML*/
<div class="message_body">
<div id="message_list" class="message_list">messagelist</div>
<div id="message" class="new_message" style="height:auto;"></div>
<div style="background:#D2D2D2; height:97px; border-radius:4px;">
<div id="text_message">
<table width="" height="">
<tr>
<th width="auto" style="float:left;">
<a href=""><img src="" width="60" height="60" style="border-radius:5px;"/>
</a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table>
<div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;">
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();">
</div>
</div>
</div>
</div>
You could, using jQuery, calculate the bottom of the div and then scroll to it:
var $div = $("message_list");
var divpos = $div.offset();
var divheight = $div.height();
var divbottom = divpos.top + divheight;
var windowheight = $(window).height();
$(window).scrollTop(divbottom - windowheight);
The variables are used to calculate the bottom of the div, and then $(window).scrollTop() scrolls to the passed position. divbottom - windowheight makes the page scroll such that the bottom of the div matches the bottom of the screen.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i've forked a section on another website and I've looked through all the CSS and js and tried to recreate it on my website. I've been at it for an hour and i still can't figure out what's missing.
My question is what is the easiest way to find out what CSS is controlling a certain section?
Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i'm trying to recreate).
Here is my fiddle of where I'm at https://jsfiddle.net/hLkyLqyd/
CSS:
.grab-section{
background-color:#fff;
width:100%;
overflow:hidden;
position:relative;
}
.grab-section .holder{
width:1104px;
margin:0 auto;
overflow:hidden;
padding:83px 0 123px;
}
.grab-section h2{
text-align:center;
font-size:58px;
line-height:70px;
margin:0 0 19px;
color:#2b3e51;
}
.grab-section .intro{
display:block;
font-weight:normal;
color:#bdc3c7;
text-align:center;
margin:0 0 67px;
}
.license-list{
margin:0 0 41px;
overflow:hidden;
text-align:center;
list-style: none;
}
.license-list li{
float:left;
width:50%;
}
.license-list span{
display:block;
padding:16px 10px 18px;
background:#ecf0f1;
border-radius:0 5px 5px 0;
color:#9fa6ac;
font-size:18px;
line-height:24px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list span:hover{
text-decoration:none;
cursor:pointer;
background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
display:block;
font-size:24px;
line-height:28px;
margin:0 0 4px;
color:#2c3e50;
font-weight:600;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list .active span{
box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
background:#1abc9c;
color:#dff3ed;
cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
width:100%;
overflow:hidden;
text-align:center;
color:#bdc3c7;
}
.grab-section .box{
width:312px;
position:relative;
padding:26px 17px 39px 18px;
border:3px solid #ebedee;
border-radius:5px;
float:left;
margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
position:absolute;
right:-5px;
top:20px;
content:'';
background:url(../images/sprite.png) no-repeat -180px 0;
width:65px;
height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
font-size:22px;
line-height:28px;
color:#2c3e50;
margin:0 0 8px;
opacity:0.95;
}
.grab-section .box .title{
display:block;
font-weight:normal;
font-size:18px;
line-height:24px;
color:#bdc3c9;
padding:0 0 27px;
margin:0 0 20px;
border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
display:inline-block;
vertical-align:top;
width:190px;
color:#fff;
font-size:17px;
line-height:21px;
font-weight:bold;
background:#1abc9c;
border-radius:3px;
padding:11px 0 12px 0;
font-weight:500;
border-bottom: 2px solid #16a085;
}
.grab-section .box .btn:hover {
text-decoration:none;
opacity:0.8
}
.grab-section .box .btn:active {
opacity:1;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
#media screen and (max-width: 1108px){
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .box{
width: 27%;
padding: 26px 1.7% 32px;
margin: 0 0 0 3%;
}
.grab-section .box .title{
padding:0 0 10px;
margin:0 0 10px;
opacity:0.9;
}
.grab-section .box.bndl:before { background:none;}
.grab-section .box .list {font-size:16px;}
.grab-section .box .list{margin:0 0 10px;}
}
#media screen and (max-width: 768px){
.grab-section .intro,
.license-list
{margin:0 0 15px;}
.grab-section .box{
float:none;
display:block;
overflow:hidden;
width:auto;
margin:0 0 30px !important;
}
.grab-section .box .title{
font-size:14px;
line-height:16px;
opacity:0.9;
}
.grab-section .box.bndl:before{top:-8px;}
.grab-section .box .bndl { display:none}
}
HTML:
<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<section class="grab-section" id="buy">
<div class="holder">
<h2>Ready to grab this Sweety?</h2>
<strong class="intro">These are probably the best prices ever offered.</strong>
<ul class="license-list">
<li class="active">
<span class="per-lic">
<strong>Personal License</strong>
For Personal Projects (from $39)
</span>
</li>
<li>
<span class="dev-lic">
<strong>Developers License</strong>
For Business Projects (from $149)
</span>
</li>
</ul>
<div class="boxes developer hidden">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector-Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $249
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
</div>
<div class="boxes personal">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $69
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('.license-list li span').click(function(){
if (jQuery(this).parent().attr('class') != 'active'){
jQuery('.license-list li.active').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.boxes.developer').slideToggle(300);
jQuery('.boxes.personal').slideToggle(300);
jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
}
});
</script>
help will be appreciated
Thanks in advance
Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.
just right-click on the element you want to know the css or js controlling it and select Inspect Element.
FIRST EDIT
Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.
I have a problem, how can i make container div to be under menu, when i put container background it go beside a header and menu... Could someone help me to fix my problem?
My HTML and CSS bellow...
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Рено Клуб Македонија - Добредојдовте</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="web">
<div id="header">
<div class="logo">
<img src="images/logo.png" alt="Logo"/>
</div> <!-- logo end -->
<div class="menu">
<ul>
<li class="active">Почетна</li>
<li>Форум</li>
<li>Клуб</li>
<li>Членство</li>
<li>Галерија</li>
<li>Огласник</li>
<li>Контакт</li>
</ul> <!-- main menu end -->
</div>
</div> <!-- header end -->
<div class="container">
<p id="petrol">Превземено од Макпетрол *цените се изразени во денари / литар </p>
</div>
</div><!-- web end -->
#charset "utf-8";
body {
margin:0;
padding:0;
width:960px;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background-repeat:no-repeat;
display:block;
margin:auto;
padding:0px;
height:110px;
background:#ecd302;
position:absolute;
top:0;
left:0;
right:0;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
float:left;
margin:10px 0 0 202px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
position:absolute;
top:105px;
left:0;
right:0;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}
If my question is not understood please contact me... i will give more information.
Note, that using position: absolute stops an element from taking up any space, which is why other elements come to that position. The result is multiple elements being at the same place, which is what you mostly don't want. So only use position: absolute, when really necessary.
I removed position: absolute from #header and .menu. Now you also don't need top, left and right anymore.
You also don't need to define the width of the body, since it is already defined for .web. Additionally, I removed some styles from .logo and #header to get the result shown in the screenshot.
Updated Code:
http://jsfiddle.net/azq50bsd/5/
body {
margin:0;
padding:0;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background:#ecd302;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
margin:10px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}
I am working on a webpage drop down menu at school and have scripted the perfect one. but my menu is dragged by my marquee. I have posted the code on JSfiddle.
Here is the link...
http://jsfiddle.net/v4NA2/4/#&togetherjs=OoovMU3HFy
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Lobos Online : Welcome</title>
<body onload="menu.css" style="background-image: url(bg_bluetiles.gif);">
<div align="center">
<table bgcolor="#FFFFFF" border="1" bordercolor="#808080" cellpadding="0" cellspacing="0" height="0" width="303">
<tbody>
<tr>
<td align="center" height="0%" width="0%">
<table border="0" cellpadding="0" cellspacing="0" width="0%">
<tbody>
<tr>
<td align="center" valign="top">
<a href="http://lhslobos.org/default.htm">
<img src="LHSBanner2013-2014d.jpg" border="0" height="110" width="1118"></a>
</td>
</tr>
</tbody>
</table>
<!-- Unordered List Begins AKA my drop down Menu -->
<ul id="menu">
<li>
<a class="drop" href="index.html">Home</a>
<!-- Begin Home Item -->
</li>
<li class="menu_right">
<a class="drop">Main Directory</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<h3>Links:</h3>
<ul class="simple">
<li>About LHS
</li>
<li>Academics
</li>
<li>Administration
</li>
<li>Athletics
</li>
<li>Faculty
</li>
<li>Guidance
</li>
<li>Student Life
</li>
</ul>
</div>
<li>
<a class="drop" href="http://lhslobos.org/About-LHS/community.htm">Community</a>
</li>
</div>
</li>
</ul>
<!-- Unordered List Ends -->
<p><font face="Cambria">
<marquee class="html-marquee">Welcome to Littlerock High School, the home of the Lobos... a place where all students are capable of high academic achievement. </marquee>
</font>
</p>
<table border="2" bordercolor="#003D79" cellpadding="0" cellspacing="0" width="1%">
<tbody>
<tr>
<td>
<a href="http://lhslobos.org/photo_gallery.htm">
<img src="888x570_LHS_SchoolFrontAngle2.jpg" border="0" height="570" width="888"></a>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="80%">
<tbody>
<tr>
<td align="center">
<br>
<b><font face="Cambria">
<font color="#495247">LOGIN:
</font><font color="#2F7760">
<a href="https://powerschool.avhsd.org/public/">
<font color="#003D79">PowerSchool</font></a> </font><font color="#808080">|</font><font color="#2F7760">
<a href="http://www.classjump.com/?section=register">
<font color="#003D79">ClassJump</font></a> </font><font color="#808080">|</font><font color="#2F7760">
<a href="http://www.apexvs.com/ApexUI/default.aspx">
<font color="#003D79">Apex Learning</font></a> </font><font color="#808080">|</font><font color="#2F7760">
<font color="#003D79">Google Apps</font></font></font></b>
</td>
</tr>
</tbody>
</table>
<p class="logo_main"><b>
<font size="2"><font color="#495247" face="Cambria">Quick Links:</font><span style="TEXT-DECORATION: none"><font color="#495247" face="Cambria">
</font><font color="#ffffff" face="Cambria">
<font color="#495247">SARC</font></font></span><font face="Cambria"><font color="#495247">
|
</font>
<a href="http://lhslobos.org/about-lhs.htm/SPSA%202012_13%20LHS.pdf">
<font color="#495247">SPSA</font></a><font color="#495247"> |</font></font><font color="#495247" face="Cambria"> </font><font color="#004600" face="Cambria">
<span style="TEXT-DECORATION: none">
<a target="_self" href="http://www2.ed.gov/programs/titleiparta/index.html">
<font color="#495247">NCLB</font></a></span></font><font color="#495247" face="Cambria">
|
</font>
<span style="TEXT-DECORATION: none">
<font color="#c0c0c0" face="Cambria">
<font color="#495247">AVHSD</font></font></span><font color="#495247" face="Cambria">
| </font><font color="#ffffff" face="Cambria"><u>
<a href="http://www.cde.ca.gov/be/st/ss/index.asp">
<font color="#495247">CA Standards</font></a></u></font><font color="#495247" face="Cambria">
|
</font><font color="#494949" face="Cambria">
<a href="http://www.mylocker.net/california/littlerock/littlerock-high-school/index/index.html">
<font color="#495247">My Locker</font></a></font><font color="#495247" face="Cambria">
|
</font></font><font color="#ffffff" face="Cambria">
<a href="http://webstores.activenetwork.com/school-software/littlerock_lobos_onl/">
<font color="#495247" size="2">Web Store</font></a></font></b>
</p>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="bottom" width="0%">
<img border="0" src="StopBullyingSafeSchoolZone.png" width="75" height="75">
</td>
<td align="center" valign="top" width="0%"> <font color="#495247" face="Cambria" size="2">Antelope Valley Union
High School District Disclaimer:<br>
<br>Any personal opinions expressed on Antelope Valley Union
High School District (AVUHSD) sites are not those of the school or
school district. <br>All outside links were deemed educationally
appropriate at the time of inclusion on AVUHSD web pages. <br>Any
opinions expressed are not those of AVUHSD. Linked pages are the
sole property of the creator and not AVUHSD. Information is provided
without warranties.
<br>The AVUHSD assumes no responsibility for any harm or damage that
may be incurred by users for the content of any site to which
district pages may be linked. <br>References to products, services,
or publications does not imply endorsement.</font>
<p><font size="2" face="Cambria" color="#495247">Littlerock High School
- 10833 E Ave R - Littlerock, CA 93550 - 661-944-5209 - Fax
661-944-5191 - Website Prepared by
</font><font size="2"><font face="Cambria" color="#494949">
<a href="Academics/webmanagershistory/default.htm"><font color="#495247">LHS Web
Managers</font>
</a>
</font><font face="Cambria" color="#495247">
</font></font><i><font color="#6b6d6b" face="Times New Roman"><a style="TEXT-DECORATION: none" href="Faculty/sbooth.htm"><font color="#495247" size="4">☺</font></a></font></i><font size="2" face="Cambria" color="#495247"></font>
</p>
</td>
<td align="right" valign="bottom" width="0%"> <a href="http://www.cde.ca.gov/">
<font color="#495247">
<img src="CA_DofE_Seal.png" border="0" height="85" width="85"></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS
/* Color List */
/* #00A000 - Kelly Green */
/* Royal Blue #074BA0 */
/* Marquee Customized */
.html-marquee {
border:0 dashed #2F7760;
height:20px;
width:1075x;
background-color: #2F7760;
font-family:Cambria;
font-size:16px;
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
/* End Custom Marquee */
body, ul, li {
font-size:14px;
font-family: Cambria, Georgia, serif;
line-height:21px;
text-align:left;
}
/* Navigation Menu */
#menu {
list-style:none;
width:1018px;
height:40px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
/* #^#^#^#^#^#^#^#^# Corners Not Rounded #^#^#^#^#^#^#^#^# */
/*
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; */
/*Background color and gradients */
background: #FFFFFF;
/* Background for IE */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/*Borders */
border: 1px solid #003D79;
-moz-box-shadow:inset 0px 0px 1px #003D79;
-webkit-box-shadow:inset 0px 0px 1px #003D79;
box-shadow:inset 0px 0px 1px #003D79;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:27px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #FFFFFF;
/* Border Around TAB */
padding: 4px 9px 4px 9px;
/* Background color and gradients for TABS */
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: Cambria, Georgia, serif;
font-size:15px;
font-weight:bold;
color: #003D79;
/* COLOR of MENU BAR TEXT*/
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #FFFFFF;
/* Shadow Under TAB TEXT */
}
#menu li:hover a {
color:#029feb;
/* CHANGE COLOR OF TEXT */
font-weight:bold;
text-shadow: 1px 1px 1px #FFFFFF;
/* TEXT SHADOW */
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat rightright 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat rightright 7px;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
/* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #FFFFFF;
border-top:none;
/* Gradient background */
/* ON HOVER BG */
background:#FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
.dropdown_2columns {
width: 280px;
}
.dropdown_3columns {
width: 420px;
}
.dropdown_4columns {
width: 560px;
}
.dropdown_5columns {
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1, .col_2, .col_3, .col_4, .col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {
width:130px;
}
.col_2 {
width:270px;
}
.col_3 {
width:410px;
}
.col_4 {
width:550px;
}
.col_5 {
width:690px;
}
/* Right alignment */
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
rightright:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family: Cambria, Georgia, serif;
line-height:21px;
font-size:14px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
/* ############### Colors For Unordered List text ##################### */
#menu li:hover div a {
font-size:14px;
color:#003D79;
}
#menu li:hover div a:hover {
color:#029feb;
}
/* ######################################################## */
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
/* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
Java Script
function FP_swapImg() { //v1.0
var doc = document,
args = arguments,
elm, n;
doc.$imgSwaps = new Array();
for (n = 2; n < args.length;
n += 2) {
elm = FP_getObjectByID(args[n]);
if (elm) {
doc.$imgSwaps[doc.$imgSwaps.length] = elm;
elm.$src = elm.src;
elm.src = args[n + 1];
}
}
}
function FP_preloadImgs() { //v1.0
var d = document,
a = arguments;
if (!d.FP_imgs) d.FP_imgs = new Array();
for (var i = 0; i < a.length; i++) {
d.FP_imgs[i] = new Image;
d.FP_imgs[i].src = a[i];
}
}
function FP_getObjectByID(id, o) { //v1.0
var c, el, els, f, m, n;
if (!o) o = document;
if (o.getElementById) el = o.getElementById(id);
else if (o.layers) c = o.layers;
else if (o.all) el = o.all[id];
if (el) return el;
if (o.id == id || o.name == id) return o;
if (o.childNodes) c = o.childNodes;
if (c) for (n = 0; n < c.length; n++) {
el = FP_getObjectByID(id, c[n]);
if (el) return el;
}
f = o.forms;
if (f) for (n = 0; n < f.length; n++) {
els = f[n].elements;
for (m = 0; m < els.length; m++) {
el = FP_getObjectByID(id, els[n]);
if (el) return el;
}
}
return null;
}
// -->
Thank you from ,
Web Managers # lhslobos.org
You're fighting a few issues. I would change a lot about this, but specifically don't use
It will never behave like you expect it to: http://www.w3.org/wiki/HTML/Elements/marquee
This would be preferred: http://www.w3schools.com/cssref/#marquee
Try using HTML5 doctype and skip that long HTML4 declaration. HTML5 is easier to code anyways.
Regarding what MaKR is saying, the referenced CSS marquee properties do no longer work in Chrome.