I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!
Related
I am kind of new to css and trying to create a layout that presents a list of books. Therefore I want to display a cover image (represented by a fixed width div in the fiddle) at the left side of a two column layout. To the right of the cover I want to present information about the book: The title and an ordered list which has property-value items.
These items should fill the remaining part of the width. The property and its corresponding value should be placed on the same line.
One of the property value items also contains a button, which is just represented by a span here. The button should be placed in the same line right after the property.
I have run into several problems, which I couldn't sort out so far:
The property list is not formatted correctly. I guess that is because I haven't been able to configure the containing list item to extend to the full width. In the end a property value item should be displayed on the same line.
The Title is underlined and I would like to see that underline extend to the full width of the body. Currently it is truncated and I haven't been able to figure out a way to make that happen.
I have created a fiddle, which should show the problems: http://jsfiddle.net/7Xeb7/3/
This is my basic html structure:
<body>
<ul class="book">
<li>
<div class="cover"></div>
</li>
<li class="bookdetail">
<div class="title">Title</div>
<ol class="attributes">
<li>
<span class="property">property <span>btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</li>
</ul>
</body>
Short Answer
Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)
Long Answer
As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:
<div class="book">
<img class="cover" src="" alt="Book Title Here" />
<div class="bookdetail">
<h2 class="title">Title</h2>
<ol class="attributes">
<li>
<span class="property">property</span> <!-- this span wasn't closed before! -->
<span class="button">btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</div><!-- /.bookdetail -->
</div><!-- /.book -->
Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.
This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.
I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.
I have changed your layout accordingly using div and tables
<div class="leftColumn">
</div>
<div class="rightColumn">
<div class="header">
Title
</div>
<div class="content">
<table width="100%">
<tr><td>Property1<td><td>Value</td>
<tr><td>Property2<td><td>Value</td>
<tr><td>Property3<td><td>Value</td>
<div>
</div>
and css
.leftColumn
{
float:left;
width:30%;
height:250px;
background-color:red;
}
.rightColumn
{
float:right;
width:70%;
height:250px;
background-color:green;
}
.header
{
font-size:25px;
padding:15px;
height:30px;
verticle-align:middle;
border-bottom:1px solid #ccc;
}
have a look here
you are missing width attribute for dimensions but not sure if this is how you want to see it:
http://jsfiddle.net/Riskbreaker/7Xeb7/4/
I added width: 100% on you bookdetail class
.bookdetail {
vertical-align:top;
display: inline-block;
width: 100%;
}
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 would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
Here is the relevant CSS:
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".
i got the same problem this moorning... you'll have to put the element in position:relative
Another way to do it is to set the parent's z-index to something higher...
dont ask me why... but it works
EDIT sorry.. i've just seen that you cant change the position to relative.. try the second option and let me know it that works
Could you help me fix the menu on this this page? The menu list items don't have a width defined, so they display at 100% width in IE7. If I make the span.right have a float: left, it fixes the problem, but then the rounded corners don't work. A possible solution might be to get rid of the right span and set a padding and background image to the anchor, but that will: a) prevent me from being able use to a background image on the anchor (for this instance, I suppose a solid color will do) and b) require that I break menu.png into separate image files.
If you guys have any good suggestions, let me know. Thanks!
If you move the actual text to the middle, between <span class="left"></span> and <span class="right"></span>, and encompass it in <span> tags:
<li><a href="#">
<span class="left"></span>
<span>Home</span>
<span class="right"></span>
</a></li>
You can then add the CSS rule:
#menu ul li a span
{
float: left;
}
Then remove float: left; from span.left and span.right. This should work fine on both Firefox and IE 7, and I'm assuming most other browsers too. Of course, this will only work if you're OK with restructuring the HTML a little.