I am learning to create a website and using a pre-created HTML template so i would like to know how to get the drop down menu with the existing menu style cause the existing menu style the color and everything is very suitable to the whole site but it doesnot really allow me to get any drop down menus
so i am guessing i need to use javascript and some css magic.
So here is the code in the html file until the menu code
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" src="js/stuHover.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
.gallery { width:890px; height:326px; margin:0 auto; }
#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:890px; height:326px; overflow:hidden; }
p#controls { margin:0; padding:0; position:relative; } #prevBtn { display:block; margin:0; overflow:hidden; width:32px; height:66px; position:absolute; left:-41px; top:-200px; }
#nextBtn { display:block; margin:0; overflow:hidden; width:32px; height:66px; position:absolute; left: 906px; top:-200px; }
#prevBtn a { display:block; width:32px; height:66px; background:url(images/l_arrow.gif) no-repeat 0 0; }
#nextBtn a { display:block; width:32px; height:66px; background:url(images/r_arrow.gif) no-repeat 0 0; }
</style>
</head>
<body>
<div class="main">
<div class="blok_header">
<div class="header">
<div class="logo"><img src="images/logo.gif" width="309" height="109" border="0" alt="logo" /></div>
<div class="simple_text">Email | Client Login</div>
<div class="search">
<form id="form1" name="form1" method="post" action="">
<label>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
<div class="clr"></div>
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact us</li>
</ul>
</div>
this is the css code
#charset "utf-8";
body { margin:0; padding:0; width:100%; background: #fff;}
html { padding:0; margin:0;}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
/* main */
.main { padding:0; margin:0 auto;}
.main h2 { font: bold 17px Arial, Helvetica, sans-serif; color:#ffffff; margin:5px 0; padding:10px 5px; border-bottom:1px solid #296c78;}
/********** header **********/
.blok_header { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:1000px; margin:0 auto; padding:0;}
.header img.twitter { float:right; margin:2px; padding:0;}
/* logo */
.logo { padding:0; margin:0; width:309px; float:left;}
/* simple_text */
.simple_text { text-align:right; font: normal 14px Arial, Helvetica, sans-serif; color:#737a7f; width:550px; float:right; padding:2px; margin:0;}
.simple_text a { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none;}
.simple_text a:hover { text-decoration:underline;}
/* search */
.search { padding:10px 0 0 0; margin:5px 0; width:220px; float:right;}
.search span { display:block; float:left;}
.search form { display:block; float:left; padding:5px 0;}
.search form .keywords { float:left; background: url(images/search_bg.gif) left top no-repeat; border:0; height:14px; width:180px; padding:5px 5px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#a1a1a1;}
.search form .button { float:left; margin:0; padding:0;}
/* menu */
.menu { padding:3px 0 0 0; margin:0; width:450px; float:left; height:65px;}
.menu ul { padding:0; margin:0; list-style:none; float:left; border:0;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu li:hover ul { display: block; position: absolute; }
.menu li:hover li { float: none;font-size: 11px; }
.menu li:hover a { background: #617F8A; }
.menu li:hover li a:hover { background: #95A9B1; }
.menu ul li a { text-transform:uppercase; float:left; margin:0; padding:25px 15px; color:#fff; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background: url(images/hover.gif) repeat-x right;}
.menu ul li a.active {background:url(images/hover.gif) repeat-x right;}
/* sub-menus*/
/*header_text*/
.header_text { height:326px; margin:0; padding:0; background:url(images/slider_bg.gif) top center repeat-x;}
.header_text_resize { width:982px; margin:0 auto; padding:0; }
.header_text .div { float:right; width:890px; padding:10px 0; margin:0;}
.header_text img.screen { float:left; margin:9px 0 0 0;}
.header_text .div .left1 { float:right; width:600px; padding:0; margin:0;}
.header_text .div .left1 img { float:left; padding:0 20px 0 10px; margin:0;}
.header_text .div .left1 h2 { border:0; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0; text-transform:uppercase;}
.header_text .div .left1 h2 span {
color:#01355d;
}
.header_text p { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0;}
.header_text p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/* header_text2 */
.header_text2 {height:144px; margin:0; padding:0; background:url(images/slider_bg2.gif) top center repeat-x;}
.header_text_resize2 { width:982px; margin:0 auto; padding:0; }
.header_text2 h2 { width:300px; float:left; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:50px 0 0 0; margin:0; text-transform:uppercase; border:0;}
.header_text2 p { width:600px; float:left; font: normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:53px 0 0 0; margin:0;}
.header_text2 p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/********** body **********/
.body_resize { margin:0; padding:0;}
.body { width:1000px; margin:0 auto; padding:0;}
.body h2 { border:0; font: normal 24px Arial, Helvetica, sans-serif; color:#0b4f7d; margin:0 0 10px 0; padding:15px 5px; border-bottom:1px solid #d3d6d8;}
.body img { float:left; padding:0; margin:10px;}
.body img.floated { float:right; padding:0; margin:10px;}
.body p { font:normal 11px Arial, Helvetica, sans-serif; color:#5d5d5d; line-height:1.8em; padding:5px; margin:0;}
.body p span { font: bold 11px Arial, Helvetica, sans-serif; color:#3f3f3f;}
.body em { font: italic 11px Arial, Helvetica, sans-serif; color:#525252;}
.body a { text-decoration:underline; color:#7daf0e; line-height:1.8em;}
.body_small { width:300px; float:left; margin:0; padding:20px;}
.body_small p.test { height:143px; background:url(images/test.gif) top no-repeat; width:239px; padding:10px 15px; margin:10px 0;}
.body_small p.borded { border:1px solid #c3c7ca;}
.body_big { width:620px; float:left; margin:0; padding:20px;}
/* Navigation */
ul.Navigation { padding:0; margin:0 40px 0 0; list-style:none; border:0;}
ul.Navigation li { margin:0; padding:3px 10px; border:0; line-height:0px;}
ul.Navigation li a { display:block; padding:5px 0 5px 25px; border-bottom:1px dashed #c4c4c4; background:url(images/sub_ul_li.gif) 10px center no-repeat; color:#737373; font:normal 11px Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.6em;}
ul.Navigation li a:hover { text-decoration:underline;}
ul.Navigation li a.active { text-decoration:underline;}
/*buttonss*/
.buttonss { width:150px; float:right; margin:10px; padding:5px;}
.buttonss a { border:1px solid #d6d6d6; background:#96148f; font: normal 11px Tahoma, Geneva, sans-serif; color:#fff; padding:1px 4px; margin:2px 1px; text-decoration:none;}
.buttonss a:hover {text-decoration:none; color:#fff; background:#5e1496;}
/* END_bloga*/
/* FBG */
.FBG_top {background:#1d2226 url(images/FGB_bg.gif) top repeat-x; margin:0; padding:0;}
.FBG { margin:0 auto; padding:0; width:1000px;}
.FBG_resize { width:290px; float:left; margin:15px 0; padding:20px;}
.FBG_resize2 { border-right:1px dashed #33393e; border-left:1px dashed #33393e; width:290px; float:left; margin:15px 0; padding:20px;}
.FBG h2 { border:0; font: normal 24px Arial, Helvetica, sans-serif; color:#fff; padding:15px 5px; margin:0;}
.FBG p { font: normal 11px Arial, Helvetica, sans-serif; color:#fefdfe; padding:5px; margin:0; line-height:1.8em;}
.FBG img { float:left; margin:0; padding:5px 10px;}
/********** footer **********/
.footer { margin:0; padding:0; height:76px; background:#14181b; border-top:1px solid #2b3136;}
.footer_resize { margin:0 auto; padding:0; width:1000px;}
.footer ul { margin:0; padding:30px 10px 10px 10px; list-style:none; float:left;}
.footer img { display:inline; margin:5px 10px; padding:0;}
.footer ul li { margin:0; padding:0 10px; float:left;}
.footer p { margin:0; padding:30px 20px 10px 20px; float:right; color:#373d42; font:normal 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.footer a { color:#46820d; font:normal 11px Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.8em;}
.footer a:hover { text-decoration:underline;}
/********** contact form **********/
.form { float:left; width:560px; margin-top:40px; margin-left:10px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0; font:normal 13px Arial, Helvetica, sans-serif; color:#6e6e6e; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:430px; border:1px solid #c5c5c5; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#contactform textarea { width:430px; border:1px solid #c5c5c5; margin:10px 0; padding:2px; background:#fff; height:250px;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 100px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}
p.clr, .clr { clear:both; padding:0; margin:0;}
li.bg, .bg { clear:both; border-bottom:1px dashed #c7c7c7; padding:10px 0 0 0; margin:0 0 10px 0; background:none; list-style:none;}
li.line, .line { border-top:1px solid #c7c7c7; padding:0; margin:20px 0; background:none; list-style:none;}
is there an easy way to get the submenus?
I would using something like SuckerFish: http://www.htmldog.com/articles/suckerfish/dropdowns/
It is probably easier if you put the SuckerFish code on your site, get it working, then adjust accordingly for your template.
Related
how do i make the menuelist completely to the left?
css:
body {background: #111111;}
#wrapper {width:980px; margin:0 auto;}
#pageTop {width:100%; margin:0 auto; position:relative; text-align:center;}
#pageTop h1 a {font-size:45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-decoration:none; color:white;}
#mainNav {float:center; background:#1e1e1e; height:50px; width:100%; margin-top:-16px; position:relative; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menueList li { display:inline-block; margin: 0; list-style:none; padding: 15px; width: fit-content; float:left;}
#menueList li a {font-family: 'Josefin Sans', sans-serif; font: 15px;text-decoration:none; color:white;}
#menueList a:hover{color:#1e1e1e; background:white; padding:15px;}
#content {width:940px; margin:30px auto; background:#1e1e1e; padding:20px; position:relative; float:center; border-radius:5px; font-size:16px; font-family: 'Josefin Sans', sans-serif; text-decoration:none; color:white; }
Add this to your css
#menueList { display: initial; }
I am having some trouble with the above and could really use some help!
One of the pages where the menu exists is:
https://googledrive.com/host/0By60ZMFepOvCYWNKSzlxOVJSYTA
and the CSS:
/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0;}
sup {
vertical-align: top;
font-size:60%;
}
body {
color:#6D266A;
background-color: #FFF3CC;
font-family: "Futura-Book";
src: url('Futura-Book.eot');
src: url('Futura-Book.eot?#iefix') format('embedded-opentype'),
url('Futura-Book.woff') format('woff'),
url('Futura-Book.ttf') format('truetype'),
url('Futura-Book.svg#futura-bookbook') format('svg');
}
.ic {border:0;float:right;background:#FFF3CC;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.mob {width:100%;}
/***********************************************************************/
a {text-decoration:none; cursor:pointer;text-decoration:none; }
a:hover {text-decoration:none;}
.button {background:url(../images/button.png) 0 0 no-repeat; color:#000; font-size:24px; line-height:30px; display:inline-block; padding: 2px 0 5px 43px;}
.button:hover {color:#579700;}
.link {color:#D2A973; text-decoration:none; }
.link:hover {text-decoration:underline;}
.link-2 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#D2A973; font-size:20px; line-height:25px; text-decoration:none; }
.link-2:hover {text-decoration:underline;}
.valentines{font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#D2A973; font-size:20px; line-height:25px; text-decoration:none; }
.clr-1 { color:#D2A973;}
.text-1 {font-weight:normal; color:#000; font-size:60px; line-height:72px;}
.text-1 strong {font-weight:normal; margin-top:-32px; display:block;}
.text-2 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#6D266A; font-size:21px; line-height:35px;}
.text-3 {font-weight:normal; color:#6D266A; font-size:50px; line-height:60px;}
.text-3 span {color:#D2A973;}
.text-4 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#6D266A; font-size:30px; line-height:36px; letter-spacing:-1px;}
.text-5 {font-weight:normal; color:#D2A973; font-size:50px; line-height:60px;}
.text-5 span {vertical-align: text-top; font-size:50%;}
h2 { font-size:31px; line-height:40px; color:#000; font-weight:normal; }
ul {margin:0; padding:0;list-style-image:none;}
ul.list-1 li {padding:0px 0 0px 25px; line-height:25px; background:url(../images/marker.png) 0 5px no-repeat;}
ul.list-1 li a {color:#6D266A;}
ul.list-1 li a:hover {color:#457c00;}
/******************************************************************/
.clear {clear:both; line-height:0; font-size:0; width:100%;}
.wrapper {width:100%; overflow:hidden; position:relative}
.wrap {overflow:hidden; position:relative}
.extra-wrap {overflow:hidden;}
.fleft {float:left;}
.fright {float:right;}
.img-indent {float:left; margin:4px 18px 0px 0;}
.line-height {line-height:18px;}
.last {margin-right:0px !important; padding-right:0px !important;}
.top {padding-top:37px;}
.top-1 {margin-top:30px;}
.top-2 {margin-top:10px;}
.top-3 {margin-top:12px;}
.top-4 {margin-top:14px;}
.top-5 {margin-top:8px !important;}
.top-6 {margin-top:13px;}
.top-7 {margin-top:34px;}
.left-1 { margin-left:13px;}
.right-1 {margin-right:40px;}
.bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}
.pad-1 {margin-top:44px; margin-bottom:33px;}
.p1 {padding-bottom:25px;}
.p2 {padding-bottom:13px;}
.p3 {padding-bottom:10px;}
.p4 {padding-bottom:20px;}
.p4 span {font-weight:bold;}
.p5 {padding-bottom:12px;}
/*********************************header*************************************/
header{ width:100%; background:url(../images/header-bg.jpg) 0 0 repeat;}
header>div+div {width:100%; background:url(../images/header-bg-shadow.png) 0 bottom repeat-x; padding-bottom:17px;}
header>div+div>div {width:960px; margin:0 auto; }
h1 {display:inline-block; z-index:1111; margin:16px 0px 0 10px; position:relative; float:left;}
nav {display:inline-block; z-index:1111; position:relative; float:right;}
ul.menu {margin:28px 10px 0px 0px; display:inline-block;}
ul.menu li {float:left; line-height:30px; margin:0px 0px 0px 48px;}
ul.menu li:hover, ul.menu li.current {}
ul.menu li a {font-size:20px; line-height:30px; color:#FFF3CC; display:inline-block; }
ul.menu li a:hover , ul.menu li.current a { color:#D2A973; }
/*********************************content*************************************/
#content {width:100%;padding:0px 0px 48px 0; background:#FFF3CC;}
#mob-content {width:100%;padding:0px 0px 48px 0; background:#FFF3CC;}
.img-border {border:#fff 8px solid; padding-bottom: 10px;}
.box-1 {overflow:hidden; padding:40px 0 34px;}
.box-1 img {float:left; margin-top:-3px;}
.box-1 h2 {margin-bottom:8px;}
.box-2 {background: url(../images/line-1.gif) 0 0 repeat-x #6D266B;}
.box-2>div {background: url(../images/line-1.gif) 0 bottom repeat-x; padding:15px 0 36px 0; text-align:center;}
.box-2>div p.text-4 {margin-top:-7px;}
.box-3 {overflow:hidden; padding:12px 0 0 0;}
.box-3>div { width:180px; float:left; margin-right:25px;}
.box-3>div a.link-2 {display:inline-block; margin:15px 0 6px 0;}
.box-4 {}
.date {overflow:hidden;}
.date strong {display:inline-block; background:url(../images/date.png) 0 0 no-repeat; width:51px; height:53px; float:left; margin-right:5px;font-weight:normal; color:#000; font-size:40px; line-height:48px; text-align:center;}
.date span {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#000; font-size:20px; line-height:24px; display:inline-block; overflow:hidden; margin-top:21px;}
.box-5 {overflow:hidden; padding-top:8px;}
.box-5 img {margin:4px 10px 0 0;}
.box-6 {overflow:hidden; margin-top:13px;}
.box-6>div { width:290px; float:left; margin-right:35px;}
.box-6 a.link-2 {display:inline-block; margin-bottom:3px;}
.box-7 {overflow:hidden; margin-top:10px;}
.box-7>div { width:290px; float:left; margin-right:35px;}
.box-7 a.link-2 {display:inline-block; margin-bottom:3px;}
/****************************footer************************/
footer {width:950px; overflow:hidden; margin:0 auto; padding:0px 0px 20px 0; }
footer p {float:left; text-align:center; width:580px;}
.soc-icons {overflow:hidden; float:right; margin:8px 73px 0 0;}
.soc-icons span {display:inline-block; float:left; color:#000; font-size:20px; line-height:27px; margin-right:17px;}
.soc-icons a {display:inline-block; float:left; margin-right:19px;}
.soc-icons a:hover img {opacity:0.7;}
/**********************form**********************/
.map {width:550px; height:450px;}
#form { margin: 12px 0 0px 0px; width:300px; }
#form input {border:#fff 1px solid; background:#fff;font: 13px Arial, Helvetica, sans-serif;color:#b6b6b6; font-style:italic; padding:5px 9px 6px 18px;outline: medium none;width: 300px; float:left;}
#form textarea {border:#fff 1px solid; background:#fff;font: 13px Arial, Helvetica, sans-serif;color:#b6b6b6; font-style:italic; height: 268px;outline: medium none;overflow: auto;padding: 6px 0px 0px 18px;width: 281px;resize:none;margin:0px 0 0 0;float:left;}
#form label {position:relative;overflow:hidden;display: block;min-height:35px;}
.btns {text-align:left; padding-top:15px;}
I need to add a drop menu with 3 links under the Treatments link on the main menu and cannot seem to get it to play ball.
Any help would be greatly appreciated!
Sam
if I understand you correctly, the following should work:
HTML:
<body>
<ul>
<li><a>level1</a>
<ul>
<li><a>level2</a></li>
</ul>
</li>
<li><a>level1</a></li>
</ul>
</body>
CSS:
ul {
position:relative;
list-style:none;
}
ul li a {
display:inline-block;
float:left;
width:100px;
height:50px;
background:#eaeaea;
text-align:center;
vertical-align:middle;
line-height:50px;
}
ul ul {
display:none;
position:absolute;
}
ul li:hover > ul {
display:block;
top:50px;
}
ul ul li a {
background:#a7a7a7;
}
Here is working jsfiddle: http://jsfiddle.net/a9NVN/32/
You can format the sub-menus css however you'd like, independently of the parent element.
Hope I've answered your question!
I designed a website using Dreamviewer. The styles I applied to the webpage are not available on Firefox and IE, webpage is displayed in plain HTML format. But all styles are well displayed in Chrome.What is the reason for that and how can fix that problem?
This is my stylesheet
* { padding:0; margin:0; border:0; }
p { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#202020; line-height:180%;}
h1, h2, h3, h4 { color:#00486A; font-family:Arial, Helvetica, sans-serif;}
h1 { padding: 5px 5px 10px 0; font-size:24px;}
#wrapper { margin:5px auto; width:1000px; background-color:#E6E6FF;} /*opacity:0.8; filter:alpha(opacity=80)}*/
body { background:url(../img/backgrounds/sparkling_design-HD.jpg); background-repeat:repeat; }
#logo { float:left; margin:10px 5px 10px 20px; opacity:1; ;}
#logo img { opacity:1;}
#loginform { float:right; padding: 20px 30px 10px 10px; margin: 10px 10px; }
#loginform a { float:right; clear:both; }
#loginform a:link { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:visited { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:active { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:hover { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; text-decoration:none; text-decoration:underline;}
#loginform a:focus { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform label { float:left; width:70px; line-height: 100%; font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; padding-top:5px;}
#loginform input { -webkit-border-radius:5px; border-radius:5px; width:150px; line-height:180%; height:20px; margin-bottom:10px; padding-right:5px; border:1px solid #999; padding-left: 8px;}
#loginform input[type=submit] { float:right; text-align:center; width:75px; background-color:#82BDFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left:8px; border: 1px #999999 solid; line-height:10px;}
#loginform input[type=submit]:hover { background-color:#0060FF; color:#FFF; }
#topnav { clear:both; padding:10px 5px 10px 5px; margin:5px 5px 5px 20px; border-top:1px #B7B1FE solid; border-bottom:1px #B7B1FE solid;}
#topnav ul li { display:inline; list-style-type:none; padding-left:20px; }
#topnav ul li a:link { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:active { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:visited { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:hover { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#7C96FC; font-weight:bold; }
#topnav ul li a:focus { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#banner { clear:both; margin:5px 20px; width:960px;}
#banner img { padding: 10px 0 10px 15px; }
#content { float:left; width:700px; padding:10px 20px 10px 10px; margin:5px 5px 10px 10px; text-align:justify;}
#rightpane { float:right; width:220px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#202020; margin-right: 20px; background-color:#D9DDFF; margin-bottom:20px; border:1px #0080C0 solid; border-radius:5px;}
#searchbox { padding:10px 5px 10px 20px; margin-top:5px; }
#search input[type=text] { border-radius:5px; -webkit-border-radius:5px; height: 20px; width:150px; border:1px #0080C0 solid; margin-right: 5px; }
#search input[type=submit] { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:25px; width:30px; border:1px #0080C0 solid; background-color:#82BDFF; line-height:5px;}
#search input[type=submit]:hover { background-color:#0060FF; color:#FFF; }
#searchbox h3 { margin-left:0; }
/*---------------------Signup page------------ */
#form-content { border: 1px solid #666; float:left; width:690px; padding:10px 20px 10px 10px; margin:5px 15px 10px 20px; }
#form-add-account input[type=text], #form-add-account input[type=password] { width: 200px; height:20px; border-radius:5px; border: 1px #0080C0 solid;}
#form-add-account label { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#form-add-account table { padding-top: 5px; }
/*---------------------------------------------*/
#latest-posts { padding:10px 5px 10px 10px; margin:20px 0; }
#latest-posts ul { list-style-type:none; padding-right:5px; padding-left:10px; line-height: 180%;}
#latest-posts ul li a:link { text-decoration:none; color:#202020;}
#latest-posts ul li a:active { text-decoration:none; color:#202020;}
#latest-posts ul li a:visited { text-decoration:none; color:#202020;}
#latest-posts ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#latest-posts ul li a:focus { text-decoration:none; color:#202020;}
#recommendations { padding:10px 5px 10px 10px; margin:20px 0; }
#recommendations ul { list-style-type:none; padding-right:5px; padding-left:10px;}
#recommendations ul li a:link { text-decoration:none; color:#202020;}
#recommendations ul li a:active { text-decoration:none; color:#202020;}
#recommendations ul li a:visited { text-decoration:none; color:#202020;}
#recommendations ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#recommendations ul li a:focus { text-decoration:none; color:#202020;}
#footer { clear:both; width:980px; margin:10px auto; border-top:2px #CCCCCC dotted; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666;}
#footer p { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666; }
#footer h4 { font-size:11px; padding-bottom:4px; }
#social-media { float:left; width:230px; margin:10px 0px 10px 30px;}
#social-media ul { list-style-type:none; line-height:180%;}
#social-media ul li a:link { text-decoration:none; color:#666;}
#social-media ul li a:active { text-decoration:none; color:#666;}
#social-media ul li a:visited { text-decoration:none; color:#666;}
#social-media ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#social-media ul li a:focus { text-decoration:none; color:#666;}
#contacts { float:left;width:230px; margin:10px 0px 10px 120px; }
#notice { width:230px; float:right; margin-top:10px; }
#footer-bottom { clear:both; text-align:center; padding:10px 10px 20px 10px; border-top:2px #CCCCCC dotted; }
I don't see any advanced or complex CSS code, so all modern browsers should support it. Anyway, here is a checklist:
Checklist
Did you checked different browser versions (you can switch inside Internet Explorer between older versions)? Check: http://msdn.microsoft.com/en-us/library/gg699485(v=vs.85).aspx
Did you try a more simplified CSS?
Did you clean up your browser cache?
Did you try "Browser Sniffing"? Check: http://en.wikipedia.org/wiki/Browser_sniffing
Did you try it on another computer?
If you testing online you might want to check your .htaccess.
I display some text but not all of the text is shown so I want to make the background larger so that all the text displays. Right now the lower part of the "g" is outside the clipping area:
My HTML is
<h2><strong>{% trans %}Why Bnano is{% endtrans %}</strong><span>{% trans %}RIGHT FOR YOU{% endtrans %}</span></h2>
And my CSS is
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
margin:0;
padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
min-width:1004px;
color:#404344;
height:100%;
font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:#fff;
margin: 0 1px 1px;
}
img{border-style:none;}
a{
text-decoration:none;
color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
width:100%;
min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
width:100%;
background:#1596c3 url(/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
display:block;
clear:both;
content:"";
}
/* header-area */
.header-area {
margin:0 auto;
width:948px;
padding:0 23px;
}
/* top-panel*/
.top-panel {
overflow:hidden;
height:36px;
padding:6px 0 0 4px;
margin:0 0 19px;
position:relative;
z-index:9999999 !important;
}
/* search-form */
.search-form {
float:right;
margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
float:left;
padding:6px 13px 7px 13px;
margin:0 5px 0 0;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8cc0d3;
float:left;
width:157px;
margin:0;
padding:0 -2px 0 0;
border:0;
background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* email-form */
.email-form {
float:left;
width:214px;
}
.email-form form {float:left;}
.email-form .go {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* links */
.top-panel .links {
float:right;
padding:9px 0 0;
width:410px;
}
.top-panel .links .title {
float:left;
color:#fdfdfd;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
padding-top:1px;
}
.top-panel .links .title .cufon {
float:left;
margin:0 !important;
}
.top-panel .links ul {
float:left;
position:relative;
margin:-5px 0 0;
}
.top-panel .links li {
float:left;
padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
padding:0 0 95px 17px;
position:relative;
z-index:99999 !important;
}
/* logo */
.logo {
float:left;
background:url(/welcome/static/images/logo-opaque1.png) no-repeat;
width:290px;
height:176px;
text-indent:-9999px;
margin:0 0 0 -15px;
position:relative;
z-index: 999999 !important;
}
.logo a {
display:block;
height:100%;
}
/* nav */
#nav {
float:right;
padding:20px 0 0;
}
#nav li {
float:left;
margin:0 3px 0 3px;
font-size:16px;
line-height:17px;
}
#nav li a {
float:left;
padding:0 5px 0 0;
color:#a9cfdd;
cursor:pointer;
}
#nav li a span {
float:left;
padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
text-decoration:none;
color:#f6f6f6;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat;
}
#nav li a .cufon {
float:left;
margin:0 !important;
}
/* info-area */
#header .info-area {
height:398px;
width:900px;
background:none !important;
padding:15px 2px 0 13px;
margin-top:-148px;
margin-left:25px;
}
#header .info-area .txt {
float:left;
color:#f6f8f9;
font-size:19px;
margin-top:100px;
}
#header .info-area .txt .cufon {
float:left;
margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
color:#a9cfdd;
font-size:48px;
position:absolute;
line-height:51px;
padding-top:55px;
width:550px;
}
#header .info-area .title span {
font-size:35px;
line-height:36px;
display:block;
overflow:hidden;
width:100%;
height:32px !important;
padding-top:1px;
}
#header .info-area .title em {
font-style:normal;
display:block;
overflow:hidden;
width:100%;
height:53px !important;
}
#header .info-area .desc {
font-family: "Arial Narrow", sans-serif;
line-height:20px;
margin: 8px 0 25px 3px;
font-size:19px;
letter-spacing:2px;
position:absolute;
z-index:9999 !important;
padding-top:130px;
width:550px;
}
#header .info-area .txt .text {
display:block;
overflow:hidden;
height:1%;
padding:0 0 5px;
}
#header .info-area .txt .text1 {
background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px;
padding:26px 0 27px 114px;
}
#header .info-area .img {
float:right;
position:relative;
margin-left:500px;
margin-top:-100px;
}
#header .info-area .more {
overflow:hidden;
height:25px;
letter-spacing:1px !important;
margin-top:23px;
margin-left:-3px;
}
#header .info-area .more a {
color:#f6f8f9;
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px;
padding:0 0 0 19px;
font-size:18px;
}
#header .info-area .more a span {
float:left;
margin-left:-2px;
padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
border-bottom:1px solid #f6f8f9;
padding:0;
}
/* main */
#main {
overflow:hidden;
width:100%;
padding:58px 0 122px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#onecolumn ul {
margin:10px 0 10px 25px;
}
#onecolumn li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 8px 0;
}
#onecolumn h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
padding-bottom:15px;
}
#onecolumn h2 .cufon {
float:left;
margin:0 !important;
}
#onecolumn h3 {
color:#676a6b;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#onecolumn h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
}
#onecolumn h3 .cufon {
float:left;
margin:0 !important;
}
#onecolumn .content {
padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#twocolumns h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 14px 0;
}
#twocolumns h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:30px;
}
#twocolumns h2 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h3 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#twocolumns h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:26px;
}
#twocolumns h3 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h4 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
font-size:16px;
margin: 10px 0 17px 2px;
}
/* content */
#content {
position:relative;
float:left;
width:596px;
padding:0 20px 10px 48px;
z-index: 99999 !important;
}
#content p {
margin:0 2px 16px;
line-height:18px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
#content p img {
padding:10px;
}
#content .more {
overflow:hidden;
height:1%;
padding:0 0 16px 4px;
font-size:14px;
}
#content .more a {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%;
padding:0 0 0 13px;
color:#404344;
}
#content .more a:hover {
color:#138db7;
}
/* video-block */
#content .video-block {
width:616px;
margin:0 -20px 0 -19px;
position:relative;
padding:0 4px 0 15px;
background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
display:block;
clear:both;
content:"";
}
#content .video-block .heading {
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat;
width:176px;
height:51px;
position:relative;
margin:0 0 4px -7px;
padding:25px 0 0 15px;
}
#content .video-block .info-col {
float:left;
width:271px;
padding:0 0 0 7px;
margin:-6px 0 0;
position:relative;
}
#content .video-block h3 {
overflow:hidden;
width:100%;
padding:3px 0 0;
margin:0;
}
#twocolumns .video-block strong {
width:auto;
float:left;
display:inline;
font-size:18px;
color:#fff;
}
#twocolumns .video-block span{
width:auto;
float:left;
display:inline;
font-size:25px;
color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 13px 13px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
float:right;
margin:0 0 -8px;
padding:30px 0 0;
position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
overflow:hidden;
width:582px;
}
#content .blocks h3 {
font-size:14px;
line-height:18px;
font-weight:normal;
color:#4499b7;
margin:0 0 13px;
}
#content .block-holder {
width:590px;
overflow:hidden;
margin:0 -8px 5px 0;
}
#content .blocks .block {
width:290px;
margin:0 4px 0 0;
padding:18px 0 10px;
float:left;
color:#ba9d50;
font-size:11px;
line-height:13px;
background:#dcddde;
}
#content .blocks .block .img {
overflow:hidden;
width:100%;
text-align:center;
margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
text-align:center;
margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
margin:10px 0 10px 25px;
}
#content li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
float:right;
position:relative;
width:315px;
padding:0 3px 0 10px;
overflow:hidden;
z-index: 99999 !important;
}
#sidebar p {
margin-left:2px;
}
/* news-list */
#sidebar .news-list {
width:300px;
padding:0 15px 19px 0;
}
#sidebar .news-list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
padding-right:0;
padding-bottom:14px;
width:300px;
}
#sidebar .news-list1 li {
background-position:3px 6px;
padding-left:17px;
}
#sidebar .news-list1 h4 {
color:#967723;
position:relative;
word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
width:269px;
padding:1px 0 0;
}
#sidebar .info-list li {
overflow:hidden;
height:1%;
font-size:25px;
line-height:27px;
margin:0 0 2px;
vertical-align:top;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
float:left;
padding:9px 10px 4px 41px;
color:#138db7;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
float:left;
margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
float:left;
margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
display:block;
background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat;
color:#fff;
font-size:30px;
width:191px;
height:75px;
margin:0 0 0 -8px;
padding:22px 115px 0 18px;
}
#sidebar .view span {
font-size:30px;
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view strong {
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view .cufon {
float:left;
margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
height:206px;
position:relative;
overflow:hidden;
margin:-106px 0 0;
font-size:11px;
line-height:14px;
color:#9ddbf1;
background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
margin:0 auto;
width:948px;
padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
float:left;
width:390px;
margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat;
width:130px;
height:102px;
overflow:hidden;
text-indent:-9999px;
position:relative;
margin:-52px 30px 0 0;
}
#footer .logo1 a {
display:block;
height:100%;
}
/* info */
#footer .info {
float:left;
width:350px;
position:relative;
margin:-9px 0 0;
}
#sidebar form {
width : 295px;
height : auto;
text-align : left;
margin-top : 10px;
margin-bottom:25px;
border: none;
}
#sidebar input {
width : 240px;
height:20px;
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%;
color : #666;
font-size : 14px;
margin-bottom : 6px;
padding : 10px 10px 8px 10px;
border:0;
}
#sidebar textarea {
width : 265px;
height : 105px;
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%;
padding : 10px 30px 10px 10px;
font-size : 14px;
color : #666;
margin-bottom : 1px;
border:0;
}
#sidebar .button {
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%;
width : 104px;
height : 30px;
color : #fff;
font-size : 13px;
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#sidebar .invalidValue {
color:#c21313;
}
Can you tell me how I increase the drawing area?
Thanks
Try to increase the line-height of your <h2>!
Like Jannis M said, it is quite dirty... maybe you can show us more of the html, so it would be easier to understand and to help...
You can add /increase padding to your <h2>.
The issue cannot be observed using the code posted. Instead of a short fragment of server-side code, you should post the actual HTML code, which is probably something like
<h2><strong>Varför Bnano är</strong><span>rätt för dig</span></h2>
presumably inside an element with id=onecolumn. But what else? Even in this setting, the rendering is different.
In any case, the issue is most probably caused by setting an unsuitable line-height value on an element. For fonts like Lucida Sans Unicode and Lucida Grande, the value should be around 1.3 or a little larger – now one of the CSS rules sets the value to 100%, which means the font size of the parent element, and this is surely too little for h2.
The text is cut because you have set the parent container size and set overflow: hidden; Inspect the dom and see what's the parent's element height; You have not given the full html so i can tell you where is the exact problem.
Start with:
onecolumn
I want to add options to select language somewhere close to the facebook like button but I can't fit it in:
The HTML code is
<div style="margin-top:3px;margin-left:15px;float:right;">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://{{request.host}}&layout=button_count"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</div>
<div class="links">
DISTRIBUTOR LOG IN | JOIN
<strong class="title">FOLLOW US</strong>
<ul>
<li><img class="png" src="/welcome/static/images/facebook.png" alt="Come join us on Facebook!" /></li>
<li><img class="png" src="/welcome/static/images/twitter.png" alt="Follow us on Twitter!" /></li>
</ul>
</div>
My CSS file is
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
margin:0;
padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
min-width:1004px;
color:#404344;
height:100%;
font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:#fff;
margin: 0 1px 1px;
}
img{border-style:none;}
a{
text-decoration:none;
color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
width:100%;
min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
width:100%;
background:#1596c3 url(http://bnano-www.appspot.com/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
display:block;
clear:both;
content:"";
}
/* header-area */
.header-area {
margin:0 auto;
width:948px;
padding:0 23px;
}
/* top-panel*/
.top-panel {
overflow:hidden;
height:36px;
padding:6px 0 0 4px;
margin:0 0 19px;
position:relative;
z-index:9999999 !important;
}
/* search-form */
.search-form {
float:right;
margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
float:left;
padding:6px 13px 7px 13px;
margin:0 5px 0 0;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8cc0d3;
float:left;
width:157px;
margin:0;
padding:0 -2px 0 0;
border:0;
background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* email-form */
.email-form {
float:left;
width:214px;
}
.email-form form {float:left;}
.email-form .go {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat;
width:26px;
height:27px;
overflow:hidden;
text-indent:-9999px;
line-height:0;
font-size:0;
cursor:pointer;
border:0;
}
/* links */
.top-panel .links {
float:right;
padding:9px 0 0;
width:400px;
}
.top-panel .links .title {
float:left;
color:#fdfdfd;
font-weight:normal;
font-size:13px;
text-transform:uppercase;
padding-top:1px;
}
.top-panel .links .title .cufon {
float:left;
margin:0 !important;
}
.top-panel .links ul {
float:left;
position:relative;
margin:-5px 0 0;
}
.top-panel .links li {
float:left;
padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
padding:0 0 95px 17px;
position:relative;
z-index:99999 !important;
}
/* logo */
.logo {
float:left;
background:url(/welcome/static/images/logo-opaque.png) no-repeat;
width:220px;
height:176px;
text-indent:-9999px;
margin:0 0 0 -15px;
position:relative;
z-index: 999999 !important;
}
.logo a {
display:block;
height:100%;
}
/* nav */
#nav {
float:right;
padding:20px 0 0;
}
#nav li {
float:left;
margin:0 3px 0 3px;
font-size:16px;
line-height:17px;
}
#nav li a {
float:left;
padding:0 5px 0 0;
color:#a9cfdd;
cursor:pointer;
}
#nav li a span {
float:left;
padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
text-decoration:none;
color:#f6f6f6;
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat;
}
#nav li a .cufon {
float:left;
margin:0 !important;
}
/* info-area */
#header .info-area {
height:398px;
width:900px;
background:none !important;
padding:15px 2px 0 13px;
margin-top:-148px;
margin-left:25px;
}
#header .info-area .txt {
float:left;
color:#f6f8f9;
font-size:19px;
margin-top:100px;
}
#header .info-area .txt .cufon {
float:left;
margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
color:#a9cfdd;
font-size:48px;
position:absolute;
line-height:51px;
padding-top:55px;
width:550px;
}
#header .info-area .title span {
font-size:35px;
line-height:36px;
display:block;
overflow:hidden;
width:100%;
height:32px !important;
padding-top:1px;
}
#header .info-area .title em {
font-style:normal;
display:block;
overflow:hidden;
width:100%;
height:53px !important;
}
#header .info-area .desc {
font-family: "Arial Narrow", sans-serif;
line-height:20px;
margin: 8px 0 25px 3px;
font-size:19px;
letter-spacing:2px;
position:absolute;
z-index:9999 !important;
padding-top:130px;
width:550px;
}
#header .info-area .txt .text {
display:block;
overflow:hidden;
height:1%;
padding:0 0 5px;
}
#header .info-area .txt .text1 {
background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px;
padding:26px 0 27px 114px;
}
#header .info-area .img {
float:right;
position:relative;
margin-left:500px;
margin-top:-100px;
}
#header .info-area .more {
overflow:hidden;
height:25px;
letter-spacing:1px !important;
margin-top:23px;
margin-left:-3px;
}
#header .info-area .more a {
color:#f6f8f9;
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px;
padding:0 0 0 19px;
font-size:18px;
}
#header .info-area .more a span {
float:left;
margin-left:-2px;
padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
border-bottom:1px solid #f6f8f9;
padding:0;
}
/* main */
#main {
overflow:hidden;
width:100%;
padding:58px 0 122px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#onecolumn ul {
margin:10px 0 10px 25px;
}
#onecolumn li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 8px 0;
}
#onecolumn h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
padding-bottom:15px;
}
#onecolumn h2 .cufon {
float:left;
margin:0 !important;
}
#onecolumn h3 {
color:#676a6b;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#onecolumn h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#onecolumn h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
}
#onecolumn h3 .cufon {
float:left;
margin:0 !important;
}
#onecolumn .content {
padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
margin:0 auto;
overflow:hidden;
width:1004px;
position:relative;
}
#twocolumns h2 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 14px 0;
}
#twocolumns h2 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h2 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:30px;
}
#twocolumns h2 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h3 {
color:#062f3d;
font-size:25px;
line-height:26px;
font-weight:normal;
margin:0 0 10px;
}
#twocolumns h3 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
}
#twocolumns h3 span {
display:block;
overflow:hidden;
width:100%;
position:relative;
margin:-3px 0 0;
font-size:26px;
}
#twocolumns h3 .cufon {
float:left;
margin:0 !important;
}
#twocolumns h4 strong {
color:#138db7;
font-weight:bold;
display:block;
overflow:hidden;
width:100%;
font-size:16px;
margin: 10px 0 17px 2px;
}
/* content */
#content {
position:relative;
float:left;
width:596px;
padding:0 20px 10px 48px;
z-index: 99999 !important;
}
#content p {
margin:0 2px 16px;
line-height:18px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
#content p img {
padding:10px;
}
#content .more {
overflow:hidden;
height:1%;
padding:0 0 16px 4px;
font-size:14px;
}
#content .more a {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%;
padding:0 0 0 13px;
color:#404344;
}
#content .more a:hover {
color:#138db7;
}
/* video-block */
#content .video-block {
width:616px;
margin:0 -20px 0 -19px;
position:relative;
padding:0 4px 0 15px;
background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
display:block;
clear:both;
content:"";
}
#content .video-block .heading {
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat;
width:176px;
height:51px;
position:relative;
margin:0 0 4px -7px;
padding:25px 0 0 15px;
}
#content .video-block .info-col {
float:left;
width:271px;
padding:0 0 0 7px;
margin:-6px 0 0;
position:relative;
}
#content .video-block h3 {
overflow:hidden;
width:100%;
padding:3px 0 0;
margin:0;
}
#twocolumns .video-block strong {
width:auto;
float:left;
display:inline;
font-size:18px;
color:#fff;
}
#twocolumns .video-block span{
width:auto;
float:left;
display:inline;
font-size:25px;
color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 13px 13px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
float:right;
margin:0 0 -8px;
padding:30px 0 0;
position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
overflow:hidden;
width:582px;
}
#content .blocks h3 {
font-size:14px;
line-height:18px;
font-weight:normal;
color:#4499b7;
margin:0 0 13px;
}
#content .block-holder {
width:590px;
overflow:hidden;
margin:0 -8px 5px 0;
}
#content .blocks .block {
width:290px;
margin:0 4px 0 0;
padding:18px 0 10px;
float:left;
color:#ba9d50;
font-size:11px;
line-height:13px;
background:#dcddde;
}
#content .blocks .block .img {
overflow:hidden;
width:100%;
text-align:center;
margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
text-align:center;
margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
margin:10px 0 10px 25px;
}
#content li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:16px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
float:right;
position:relative;
width:315px;
padding:0 3px 0 10px;
overflow:hidden;
z-index: 99999 !important;
}
#sidebar p {
margin-left:2px;
}
/* news-list */
#sidebar .news-list {
width:300px;
padding:0 15px 19px 0;
}
#sidebar .news-list li {
overflow:hidden;
height:1%;
vertical-align:top;
padding:0 0 12px 15px;
line-height:14px;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
font-size:13px;
line-height:15px;
font-weight:normal;
margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
padding-right:0;
padding-bottom:14px;
width:300px;
}
#sidebar .news-list1 li {
background-position:3px 6px;
padding-left:17px;
}
#sidebar .news-list1 h4 {
color:#967723;
position:relative;
word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
width:269px;
padding:1px 0 0;
}
#sidebar .info-list li {
overflow:hidden;
height:1%;
font-size:25px;
line-height:27px;
margin:0 0 2px;
vertical-align:top;
background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
float:left;
padding:9px 10px 4px 41px;
color:#138db7;
background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
float:left;
margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
float:left;
margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
display:block;
background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat;
color:#fff;
font-size:30px;
width:191px;
height:75px;
margin:0 0 0 -8px;
padding:22px 115px 0 18px;
}
#sidebar .view span {
font-size:30px;
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view strong {
overflow:hidden;
width:100%;
display:block;
}
#sidebar .view .cufon {
float:left;
margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
height:206px;
position:relative;
overflow:hidden;
margin:-106px 0 0;
font-size:11px;
line-height:14px;
color:#9ddbf1;
background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
margin:0 auto;
width:948px;
padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
float:left;
width:390px;
margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
float:left;
background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat;
width:130px;
height:102px;
overflow:hidden;
text-indent:-9999px;
position:relative;
margin:-52px 30px 0 0;
}
#footer .logo1 a {
display:block;
height:100%;
}
/* info */
#footer .info {
float:left;
width:350px;
position:relative;
margin:-9px 0 0;
}
#sidebar form {
width : 295px;
height : auto;
text-align : left;
margin-top : 10px;
margin-bottom:25px;
border: none;
}
#sidebar input {
width : 240px;
height:20px;
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%;
color : #666;
font-size : 14px;
margin-bottom : 6px;
padding : 10px 10px 8px 10px;
border:0;
}
#sidebar textarea {
width : 265px;
height : 105px;
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%;
padding : 10px 30px 10px 10px;
font-size : 14px;
color : #666;
margin-bottom : 1px;
border:0;
}
#sidebar .button {
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%;
width : 104px;
height : 30px;
color : #fff;
font-size : 13px;
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#sidebar .invalidValue {
color:#c21313;
}
The live site is here. Can you tell me how to add an option element close to the Like button where I can choose English or Spanish? When I add an option element the layout collapses since there are too many elements or something.
Thank you
This HTML structure
<div class="top-panel">
<div style="margin-top: 3px; margin-left: 15px; width: 89px; float: left;"> <-- Contains FB
<div class="links"> <-- Contains the Follow us links
</div>
You need to switch the order and set a width to the items so that they don't free float. Currently, your FB container is floating right and taking up all the remaining space
<div class="top-panel">
<div class="links"> <-- Floats left with set width
<div class="fbstuff"> <-- Floats left with set width
<div class="langstuff"> <-- Your new lang select area
</div>
Once you put the items in the correct order and float them left, it should fix your problem
I'd start by shrinking the width of that facebook like iFrame to about 200, then directly after the iframe's parent div container, add an additional div and float it right. then in that, put your select dropdown.