So I have a tab menu,
SO i.e.
And once clicking on the tabs the content for that tab display with a white background matching the tab. The problem in IE7 is that the content for the tab does get displayed but the content goes outside my tab div and into the background. This only happens in IE7.
The content mark up is as follows
<div class="tabContentRow">
<div class="tabContentImageLeft" style="DISPLAY: inline">
<a href="" target="_blank">
<img width="110" height="110" alt="Video" src="~/?w=110&h=110&as=1" /> </a>
</div>
<div class="tabContentCopyRight" style="DISPLAY: inline">
<h2>video</h2>
<p>Text here.</p>
</div>
</div>
And the problem has to do with my two divs
<div class="tabContentImageLeft" style="DISPLAY: inline">
<div class="tabContentCopyRight" style="DISPLAY: inline">
If I dont put the content within these two divs then even IE7 it stays nicely within my tab div. But if I put it the tab div doesnt drop down and it just blends into the background.
.tabContentImageLeft {float: left; width: 130px; text-align: center;}
.tabContentCopyRight {float: left; width: 575px;}
Add a clear div at the bottom of your tabContentRow. Your elements are floating and therefor taken out of the DOM flow.
<div class="tabContentRow">
.....Inner tab markup
<div class="clear-fix" style="clear:both;display:block;"></div>
</div>
Related
I'm working on an app that has a group of icons in the footer of a column. Currently, the icons are left-justified. However, I'd like to make them centered. To demonstrate, I have a fiddle that can be found here. The HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
<div id="nav-tab-items" class="row">
<div class="nav-tab-frame column">
<div class="ui active tab nav-tab-content" data-tab="home">
First Tab
</div>
<div class="ui tab nav-tab-content" data-tab="info">
Second Tab
</div>
<div class="ui tab nav-tab-content" data-tab="third">
Third Tab
</div>
</div>
</div>
<div id="nav-tab-control" class="bottom aligned row">
<div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
<a class="active red item" data-tab="home">tab 1</a>
<a class="blue item" data-tab="info">tab 2</a>
<a class="green item" data-tab="third">tab 3</a>
</div>
</div>
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
There are two problems with nav-tab-control. First, as soon as I set 'bottom:0' for the , the nav-tab-control style, the row takes up the entire width of the page. I can't repro that error in the fiddle. But I have no idea what would even cause that. Second, and I believe this is related to the first problem, is that I can't figure out how to center the icons within the width of the navDiv.
I sincerely appreciate any insights that someone can provide.
This code centers the buttons at the bottom (I couldn't think if what else you would mean by 'icons').
You say #nav-tab-control is claiming the full width of the screen. That is actually needed to make it possible to center its contents. So because it didn't do it automatically, I've set the width to 100% in the css:
#nav-tab-control {
position:absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
}
.ui.pointing.secondary.menu.drawer { display: inline-block; }
This makes #nav-tab-control the full width of the page, and centers any text in it.
Then, the container of the icons is displayed as inline-block, so it respects that centering.
http://jsfiddle.net/62eMj/3/
If you don't want to center it in the whole screen, you can also set position: relative to one of the parent elements. For instance to to center them inside the blue bar (also causing them to wrap):
http://jsfiddle.net/62eMj/4/
I found it a bit hard to find out what your actual problem is. I thought I knew but now I', not so sure. I hope these hints will help you solve it.
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout.
It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine. The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers.
So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%. And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div.
I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.
Here's the html:
<div id="header" class="blueheader">
<div id="headerContent" class="span-24">
<div id="logo" class="span-6">
<a href="/">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14"><ul id="menu"><li>
<a href='/Services/Index'>TJÄNSTER</a></li>
<li>
<a href='/About/References'>KUNDER</a></li>
<li>
<a href='/About'>OM OSS</a></li>
<li>
<a href='/About/Contact'>KONTAKT</a></li>
</ul></div>
<div id="logindisplay" class="span-2">
Logga in
</div>
</div>
</div>
And here's the css for header and headercontent:
#headerContent
{
overflow: auto;
zoom: 1;
margin: 0 auto;
}
#header
{
width: 100%;
position: relative;
margin-bottom: 0px;
color: #000;
margin-bottom: 0px;
overflow: auto;
zoom: 1;
}
The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem.
Any ideas what I'm doing wrong?
You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.
Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked:
<div id="header" class="blueheader">
<div id="headerContent" class="container">
<div id="logo" class="span-6">
<a href="#Url.Action("Index", "Home")">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14">#Html.Raw(Html.Menu())</div>
<div id="logindisplay" class="span-2">
#Html.Partial("_LogOnPartial")
</div>
</div>
</div>
I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...