Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}
The minimize box in the screen shot is being made using below code snippet:-
<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location?
Please try to give the parent container of the pop-out element a CSS style of position:relative.
position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
ul li {text-decoration:none; float:left;}
.titlebar {
background-color:green;
height:20px;
position:relative;
}
.editModule
{
position: absolute;
right: 0px;
top: 20px;
border:1px solid red;
float:right;
padding-top:2px;
}
</style>
</head>
<body>
<div class="titlebar">
<ul class="editModule">
<li class="editColor">
<ul class="moduleColor">
<li class="module-colorWheel">CW</li>
<li class="moduleChoice-blue" title="module-blue">BLUE</li>
<li class="moduleChoice-green" title="module-green" >GREEN</li>
<li class="moduleChoice-red" title="module-red" >RED</li>
<li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
</ul>
</li>
<li class="applyAll">Close Widget</li>
<li class="minimize">Minimize Widget</li>
</ul>
</div>
<!-- </li></ul> -->
</body>
</html>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.
Related
I have trouble with my html/css code. I'm making a portfolio website and I have a horizontal navigation bar at the top, with .png images as navigation buttons and a mouse-on/mouse-over effect (the letters are supposed to turn grey with the mouse on it).
I had quite some trouble aligning the buttons horizontally but now they're placed where they're supposed to be, the only thing is suddenly they don't work as links anymore and the mouse-on/mouse-over effect is gone.
This is my code:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html>
<head>
<title>Menu</title>
<style type="text/css">
body
{background-image:url('menubg.png');}
{background-color:#FFFFFF;}
#navlist{margin:0;position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:64px;display:inline-block;}
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
#amfi{left:0px;width:168px;}
#amfi{background:url('amfi1.png')}
#amfi a:hover{background: url('amfi2.png')}
#personal{left:0px;width:202px;}
#personal{background:url('personal1.png')}
#personal a:hover{background: url('personal2.png')}
#inspiration{left:0px;width:202px;}
#inspiration{background:url('inspiration1.png')}
#inspiration a:hover{background: url('inspiration2.png')}
#cv{left:0px;width:65px;}
#cv{background:url('cv1.png')}
#cv a:hover{background: url('cv2.png')}
#contact{left:0px;width:128px;}
#contact{background:url('contact1.png')}
#contact a:hover{background: url('contact2.png')}
</style>
</head>
<body>
<ul id="navlist">
<li id="about"></li>
<li id="amfi"></li>
<li id="personal"></li>
<li id="inspiration"></li>
<li id="cv"></li>
<li id="contact"></li>
</ul>
</body>
</html>
and this is my website is here, where you can see my problem.
I would be really thankful if you can help me out!
I think problem here is you just place an anchor tag but in browser it is not added on particular action I mean you have given background image on <a> but there is no content present inside tag, keep in mind whenever you place hyperlink it should on some text or img
So instead of using empty tags use an image or text inside it and use javascript or jquery to change img src i.e
<img src="background/image.png">
your <a>s have no widthandheight the moment you will declare those in some way everything is going to be ok
i suggest to give property of widthandheight to <a> element instead of <li>
for example #about a{width:145px;height:64px} instead #about{width:145px;height:64px}
Try like this
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about:hover{background: url('about2.png')}
Or like this
#about a{left:0px;width:145px;}
#about a{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
Add this to your stylesheet and your issue will be solved.
#navlist li a {
display: list-item;
}
Hope this helps.
I would like to position a dynamically generated div directly above a button (higher in the page, not Z-index). When the button is clicked, I want to reveal the div with a reverse jQuery slideToggle().
I have set up an example in the fiddle: http://jsfiddle.net/sablefoste/YWnJE/30/
I am close, but I can't seem to position the reveal to appear directly above the button. I am able to get it to slide upward with by using my CSS position:absolute; left:0;bottom:0; following the first example in http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/.
If I change the left:0; bottom:0; to something else, I can position it correctly until the browser window is resized.
Is there a way to do this without brute force (specifically, identifying the top of the #storiesbutton, and jQuery to reposition the bottom of the #storylist)?
I appreciate any ideas! Thank you!
I'm going on pure guesswork here, but my thing is that you want the menu to appear above the button. I've tried it using
var list = $('#storylist'),
button = $('#storiesbutton'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
So the position of the stories is set on load based on the position of the button and the height of the list.
Fiddle: http://jsfiddle.net/qt3LE/
Like I said though, I'm not 100% on what you are after. This may help with the positioning.
Also I used $.toggle(function(){}, function(){}) rather that toggleSlide as you have more control over the individual toggles.
So when you put position: absolute on that element, what you are doing it is positioning it as a fixed set of pixels according it's first non-static ancestor. In most cases and this case, that would be the body itself, which is why it was stuck at the bottom. What you want to do is constrain that absolutely positioned element inside another div so that it does not get positioned at the bottom of the page, but instead where you want it. So you would just wrap that element:
<div id="wrapper">
<div id="storylist" style="display:none;">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
</div>
inside another div, and give that new div
#wrapper{
position: relative;
}
Here's the example in a fiddle.
I am not sure but if you're looking for the information to be above the button you might try removing position:absolute
Like this
http://jsfiddle.net/cjds/AnpzK/
Put the buttonbar and the storyline in a container like this:
<div id="container">
<div id="storylist">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
<div class= "buttonbar">
<div>
<span class="navbutton" id="librarybutton" >
<a href ="#" title="Information">
Information
</a>
</span>
<span class="navbutton" id="storiesbutton" >
<a href ="#">
Stories
</a>
</span>
</div>
</div>
and here are the css for them:
#container {
position:relative;
background:#efefef;
}
#storylist{
height:60px;
position:absolute;
left:0;
bottom:0;
}
.buttonbar{
margin:20px 50px 20px 0;
text-align:center;
width:100%;
position:absolute;
bottom:-60px;
}
I have absolute positioned the button bar AND the storyline so you could get that desired "upward sliding" action. Hope this is what you want. Here's fiddle of what i did. http://jsfiddle.net/YWnJE/41/
I have the following button with associated context menu
<div class="control-action">
<button>Action</button>
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
When the button is clicked the associated ul shows beneath it as a context menu.
This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.
My css currently looks like this:
.control-action
{
position: relative;
text-align:right;
width:100px;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
Any ideas as to what I'm doing wrong?
IE up to IE7 uses the nearest positioned ancestor to determine the stacking context.
You seeing that in IE6 too?
Put your button after the ul and then try it.
I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.
<div class="control-action" style="float:right">
<div class="control-action-menu">
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
<button>Action</button>
</div>
With this markup change the css has changed into the following:
.control-action
{
text-align:right;
width:100px;
}
.control-action-menu
{
position:relative;
z-index:1;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
IE7 has known bugs with z-index.
Without seeing your full page, the best I can do is point you to some resources which explain the issue:
IE 6 & IE 7 Z-Index Problem
IE7 Z-Index Layering Issues
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The idea, in its most basic form, is to test adding/removing position: relative and z-index on parents of the problematic element until it's fixed.
Could be the hasLayout bug.
This may help: IE7 relative/absolute positioning bug with dynamically modified page content
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.