I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)
Related
<div class="wrapper">
<nav class="main-menu">
<div class="main-menu-placeholder">
<div class="main-menu-wrapper">
<ul class="top-main-menu load-responsive" rel="Main Menu">
<li>ANASAYFA</li>
<li>İÇİNDEKİLER</li>
<li>EDİTÖR</li>
</ul>
</div>
</div>
</nav>
</div>
Here is my codes what i asking about. i have tried everything to make it centered but i cant do it. is there any solution ?
DEMO
Here is a solution that centers it both vertically and horizontally, as you didn't mention how... The basic idea behind it is to place a div with position:relative into one positioned absolute
.wrapper {
position:absolute;
width:100%;
vertical-align:center;
line-height:70px;
height:70px;
background:black;
}
.main-menu {
position:relative;
width:70%;
background:#FE4C03;
line-height:35px;
margin: 0 auto;
}
li,ul{
list-style-type:none;
display:inline;
margin:0 0;
}
this might be a simple enough solution for you:
<div class="main-menu-wrapper">
.main-menu-wrapper {
display:table;
margin:0 auto 0 auto;
}
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
What I'm trying to do is create a drop down menu to use on a mobile website. Since you can't hover over a menu item to see the submenu, i need to get around that problem. I've researched this and attempted to solve this problem. A lot of sites recommend using JS with the onclick function. I cant get a grip of it. Thanks.
Here is the HTML.
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<div class="smenu_div">
<ul>
<li>Menu
<ul>
<li>Home</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</ul>
</ul>
</div>
</body></html>
Here is CSS.
/*Small Menu*/
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
}
.smenu_div li ul:active{ display: block; }
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
color:#000000;
background:#fdff30;
}
I can barely get your question, but for creating menus to use in websites for small screen with html and css, try http://css-tricks.com/convert-menu-to-dropdown/
just adjust the CSS within the onclick function.
HTML:
<div id="menuclick">Click to show menu</div>
<div id="hiddenMenu" style="display: none;">
TEXT GOES HERE
</div>
JavaScript:
var hidden = true;
document.getElementById('menuclick').onclick = function() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
working example: http://jsfiddle.net/F5nJT/1/
if you want a floating menu you'll want to play with the css position of the element so that it doesn't cause the document to reflow when its display changes.
I'm using the SlidesJS product example found here http://slidesjs.com/examples/product/
I want to have more than 1 of these units on the page, but when just copying the markup for it and pasting below doesn't work right. The first one will show up fine, but the second one only shows the 2 pagination elements and are unclickable. My main question is why would my approach of just copying the slider again not work, and is my general approach totally wrong? Is there some quirk with SlidesJS or Jquery in general that requires me to create separate css divs or something like that?
HTML:
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp1.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp3.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
CSS:
#containerSlides {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
float:left;
}
#products_example {
width:600px;
height:282px;
position:relative;
}
/*
Slideshow
*/
#products {
margin-left:26px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#products .slides_container {
width:360px;
/*overflow:hidden;*/
float:left;
position:relative;
border:1px solid #dfdfdf;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:360px;
height:268px;
display:block;
}
/*
Next/prev buttons
*/
#products .next,#products .prev {
position:absolute;
top:127px;
left:0;
width:21px;
height:0;
padding-top:21px;
overflow:hidden;
display:block;
z-index:101;
}
#products .prev {
background:url(../img/arrow-prev.png);
}
#products .next {
left:398px;
background:url(../img/arrow-next.png);
}
/*
Pagination
*/
#products .pagination {
width:55px;
padding:5px 5px;
float:left;
margin-left:30px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#products .pagination li {
float:left;
margin:2px 4px;
list-style:none;
}
#products .pagination li a {
display:block;
width:55px;
height:41px;
margin:1px;
float:left;
background:#f9f9f9;
}
#products .pagination li.current a {
border:1px solid #7f7f7f;
margin:0;
}
Without seeing the javascript its impossible to say exactly where the issue is, however there are some immediate issues with the markup.
You have multiple elements on the page with the same id's (containerSlides, products_example, products).
Giving the second container unique id's will help solve the problem. You will then probably (again, cant say for sure without seeing the javascript) need to add another 'initialization' call to set up slidesjs on the second container as well as adding the id to your css so that the second container gets the same styling.
Ex:
Markup
<code>
<div id="secondContainerSlides">
…
</div>
</code>
Css
<code>
#containerSlides,
#secondContainerSlides{
…
}
</code>