Same HTML, CSS, and image file, but in IE8 I have this weird border line.
HTML:
<div id="admin_link_div">
<ul id="vertical_menu">
<li>
<a href="/admin/appointment_list">
<div id="sidebar_left_box">
Room List
</div><img id="admin_arrow_img_roomlist" src="/images/arrow_off_icon.gif"></a>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
User Management
</div><img id="admin_arrow_img_userlist" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
User List
</li>
<li>
User Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Company Mangement
</div><img id="admin_arrow_img_register" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Company List
</li>
<li>
Company Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Service Management
</div><img id="admin_arrow_img_service" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Server Management
</li>
<li>
Barbie Management
</li>
</ul>
</li>
</ul>
</div>
CSS:
#admin_arrow_img_userlist{
margin-left: 10px;
margin-bottom: 2px;
}
Any good reason???
add this to your image #
outline:none;
border: none;
because IE sets a border for images by default!!
Try this CSS on image
img
{
border:0;
outline:none;
}
Use border 0 Check link more appropriate.
Related
Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.
Before Fixed Picture
html for header
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
العربية
</li>
<li>
Azerbaijani
</li>
<li>
Català
</li>
<li>
中文
</li>
<li>
Hrvatski
</li>
<li>
Čeština
</li>
<li>
Dansk
</li>
<li>
Nederlands
</li>
<li>
English
</li>
<li>
Estonian
</li>
<li>
Persian
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
<li>
עברית
</li>
<li>
Magyar
</li>
<li>
Italiano
</li>
<li>
Macedonian
</li>
<li>
Norwegian
</li>
<li>
Português
</li>
<li>
Português
</li>
<li>
Română
</li>
<li>
Русский
</li>
<li>
Español
</li>
<li>
Svenska
</li>
<li>
Türkçe
</li>
<li>
Українська
</li>
</ul>
</div>
</li>
<li>
Login
</li>
<li>
Register
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<img src="/assets/img/logo.png" alt="WebKing Web Services">
</div>
</section>
html for navbar
Toggle navigation
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
Code:
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Now when I add the position fixed and try to make it uncontrollable the white part and logo area no longer scroll however before i even begin to scroll my menu bar is pushed up and out of position.
Picture now fixed you can see the menu bar has changed its location. Here is the new code
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
This is not a z-index issue as this is happening before i even scroll down the page.
I have been stuck for days I would really be grateful for any help.
UPDATE: Okay I have the fixed menu where it is supposed to be but now I am having this issue with every page and I have no idea why every div and section has moved up as if the header doesnt exist. mind you this is before any scrolling begin. Please feel free to visit webking.com and navigate to any page to see what I mean.
As you can see a huge mess
Thanks
So here is my last corrections :
1st step fix the header :
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
2nd step fix the menu :
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
3rd step correction of the content :
Here, I don't understand why (maybe need more investigations) but
the browser take the margin-top of the section#main-body and
apply it to the header. It's is not what we want and it's here we
will fix it with this :
We will add and apply the margin-top trick to the
.container inside the section#main-body
like this :
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}
I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>
So i've got a drop-down menu on some elements in the middle of my page. This menu works with purely html and css. Now without any hover the menu items look like this: http://prntscr.com/3es3n8.
With hover however it looks like this: http://prntscr.com/3es3y2.
Now the hover itself works fine and i can style the child elements just fine. My question would be if it was possible for the child element to actually hover over the other items. I know z-index is supposed to do something like this but im not sure how to implement that. I'll try to post as much code as possible but the site is already in ModX.
I'm sorry about all the extra code but the general idea of the situation should be there. http://jsfiddle.net/C8sBp/1/
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten/" title="Kunsmest">
Kunsmest
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">test</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Kunsmest
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Zaden
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Handelsartikelen
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">pietjes eten</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Veevoer
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Diensten
</div>
</li>
</ul>
</div>
</div>
There are a variety of solutions, I've paired back your code a little to make the solution a little clearer, but have a look at this
http://codepen.io/dave_agilepixel/pen/cDtLk
I wouldn't repeat the item, or have the wrapper around the if you can avoid it, if you need the h2 for styling then use css or change the code to something like
<nav>
<ul>
<li><h2>Object</h2></li>
</ul>
</nav>
Also with the icons it might be easier to have those as CSS background images and use padding/background-position to set them in the design.
I hope that helps, in my example I've used position absolute and left to get the sub menu to work, but you could use display:none; or some other methods, if you use a combination of opacity and top then you can also add in css3 transitions to make it look jazzy.
How Can I display 3 unordered lists horizontally next to each other?
The 3 ul are wrapped in 1 div called 'tax'.
I've tried the following, but it's not showing correctly.
I know I can solve this by wrapping each ul with a div, but I don't want to use extra markup when it's not necessarily.
Example:
http://jsfiddle.net/Eric87/LKp69/13/
HTML
<div id="tax">
<hr>
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
CSS
#tax {
margin-top:100px;
}
#tax ul {
width:33%;
list-style:outside;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
Create a wrapper for each item and assign each item a class called "pull-left". And then, add style below:
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
Here is your css code for pull-left class:
.pull-left { float: left; }
You're trying to align two elements horizontally, both the h2 and the ul that goes with it, that's why it's not working 'as expected'. The only way to solve this, to make both those elements act as one, is to add an extra markup element around both of them, and apply regular horizontal layout rules to that element. I'd recommend a section for this, like:
<section id="archives">
<h2>Section title</h2>
<ul><!-- bunch of list items --></ul>
</section>
This isn't "unnecessary extra markup", this is required markup if you want 2 elements to layout as 1.
HERE IS A WORKING LIVE DEMO: CLick HERE
i have a add a extra <div> for all <ul> and put it to float:left:
basically its all
here create one wrapper div for including with header tag and ul. For example here I create wrapper div with name of "test".
<div id="tax">
<div class="test">
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
</div>
</div>
Css :
<style type="text/css">
#tax {
margin-top:100px;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
.test{width:33%;
float:left;}
</style>
see demo
For horizontal you basically have to use div to wrap ul.
http://jsfiddle.net/5d5eM/
div {
width: 50px;
border: 1px solid #000;
float: left;
}
br { clear: left; }
I'm making a portfolio page here (http://198.96.94.51/v2/) and while clicking on the navigationMenu links on the side really fast, they don't seem to redirect to the proper anchor (some of them don't move the page at all). I've initialized my anchor tags like this
<ol class="curtains">
<li id="home" class="cover">
<a id="home"></a>
<header data-fade="550" data-slow-scroll="3">
<h1>John Smith</h1>
<h2>HOBBY/JOB TITLE</h2>
</header>
</li>
</ol>
My navbar code -
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="projects" href="#projects">
<span>Projects</span>
</a>
</li>
<li>
<a class="resume" href="#resume">
<span>Resume</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
But just clicking on the navbar, or even typing #home into the address bar won't bring the browser back to the top sometimes. Is there anything I'm doing wrong?
Ids identify anchor points so they must be unique.
But if you just want to go to the top of the page you should try a simple # as value for your href attribute.
A link to the id of e.g. a <div> tag would lead you to this <div> tag.
<div id="anchor"></div>
this fiddle shows you: http://jsfiddle.net/aYGFR/1/
You can give like this: <a id="home" href="home.php">Home</a>