yesterday i just developed magento website but i have problem with how to fix banner overlaps because this DIV just overlaps the menu...i try to seperate and use ie7 stylesheet but nothing happen.. :(
http://thaiamuletstore.com/main1/index.php/
try to hover menu --> STORE-> Amulet Types->Great Jatukham
ie7.css
#charset "utf-8";
/* CSS Document */
#example-one .nav { overflow: hidden; margin: 0 0 0 0; background:url(../images/tab-border.gif) repeat-x 80px; height:87px; }
.block-subscribe { padding-left: 15px!important; padding-right:15px; margin-top:20px;}
.nav-container { float:left; }
.mw_footer { clear:both!important; }
.account-login .col2-set .registered-users { width:435px; }
.account-login .col2-set .new-users { width:430px; }
.account-create .buttons-set { width:550px; }
.block-subscribe { padding-left:5px!important ; height:127px; padding-bottom:0px!important }
.block-content .newsbut { height:21px!important; }
ul li ul li ul li a.level1 { zoom:1; } <-- i try control with this
There are a couple of options.
The easiest, if possible, is to place your menu at the bottom of the page and then move it up via absolute positioning. This is because IE sucks at z-index and the easiest way to trick it is to have the html code generate as the last item (placing it on top of all other html).
This will however not work with Flash, silverlight or java-applets which will still sneak on top.
Alternatively you can (however i like the first option more) place an IFRAME under your menu filling out the area you want it to cover. This "fixes" most of IE's whacky ideas about positional elements. But like i said, if you can move your menu to the bottom of the html page, then that is your best bet.
Related
It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2
Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)
.ballacolla
{
float:left;
position:relative;
width:200px;
height:200px;
margin-right:40px;
margin-bottom:46px;
}
.ballacolla a
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */ <br>
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.innerbox
{
position: absolute;
bottom: 0;
width:180px;
height:30px;
background-color:#000;
opacity:0.75;
filter: alpha(opacity=40);
padding-left:20px;
padding-top:10px;
z-index: +1;
}
p.boxtag
{
color:#fff;
}
HTML:
<div class="ballacolla"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox
My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?
Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.
I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor
you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.
In your styles, it says opacity:0 for a tags. Add a class a below.
.field-items a{
background:none;
opacity:1;
}
Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help
Just as the title suggests, I am making a website that utilizes the "off canvas" menu approach to save space and modernize the look and feel of the site on mobile devices.
The exact problem is that the menu itself will not move off the canvas when the page is loaded in iOS 7 on an iPad. This is not the case in iOS 6 though, when I checked it. The flyout works perfectly on my desktop when I resize the browser window.
This is what it looks like on an iPad Air with iOS 7
I was surprised to find that the layout actually worked as expected in iOS 6 with an earlier iPad. I am racking my brains trying to figure this out. Here is the code I am working with (note: I am using the Bootstrap 3 framework underneath all of this):
HTML HEADER
<meta name="viewport" content="width=device-width, initial-scale=1.0">
GLOBAL DEVICE-RELATED CSS
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
MENU CSS
#media screen and (max-width: $screen-tablet) {
#nav {
position: absolute;
top: 0;
padding-top: 5.25em;
}
#nav .block {
position: relative;
padding: 0;
}
.js-ready #nav {
height: 100%;
width: 70%;
background: #333333;
}
.js-ready #nav .block {
background: transparent;
}
.js-ready #nav {
left: -70%;
}
.js-ready #inner-wrap {
left: 0;
}
.js-nav #inner-wrap {
left: 70%;
}
}
}
JAVASCRIPT
// Toggle the mobile navigation off-canvas menu
$(document).on('click', '.nav-btn', function(event)
{
event.preventDefault();
if ($('html').hasClass('js-nav-in'))
{
$('html').removeClass('js-nav-in').addClass('js-nav-out');
}
else if ($('html').hasClass('js-nav-out'))
{
$('html').removeClass('js-nav-out').addClass('js-nav-in');
}
});
I'm sorry for the code dump, but that seems to make this a more complex issue. Any tips or suggestions anyone has would be appreciated. I am willing to completely rebuild the menu if it means that this menu would work across the bulk of tablets and mobile phones.
As a note, when I tap on the menu icon or closing x the view zooms in as if the total width of the page is less. I think this may be a complete rebuild type situation. If you know of a resource where I would be able to see how this could be properly done, I would accept it.
EDIT: The sizing seems to work in iOS 7 Safari. However, when the user swipes to the side, the menu comes out. This is still an issue, just a different one. Any helpful resources would be appreciated.
As a test, could you change your CSS to hide the navigation (#nav {display:none;})on top of positioning it off the page. Then have your jquery .show(); and .hide(); the nav respectively when the user clicks on the menu along with your slide in/out transition.
My gut instinct is that since the nav is technically still part of the layout (it's just off to the right, presumably with overflow:hidden on the parent container), but iOS is thinking its part of the layout and is including it somehow.
So as a test, hide the nav and I'm thinking iPad iOS7 should respect it being gone and have your "page" take up the full width of the viewport (that's my theory at least).
This is my first time posting to the forum and I'm by no means a web developer but I have been learning as I go.
The problem I'm having with is http://www.audiofactory.co.uk.
On some pages there are music players. Created using a Wordpress plugin.
See pages below for examples.
-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/
I have edited some CSS styles for each player to give it a specific width for a given page.
/* ===== "voicetalent" ===== */
.voicetalent div.playlist-colour { position:absolute; height:115px }
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */
.voicereels div.playlist-colour { position:absolute; height:207px }
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
If you take a look at http://www.audiofactory.co.uk/services/audio-books/
you can see that when you resize the browser window the player does not resize as you would expect and overlaps the image on the left. I'd like the player to auto adjust its width when changing the width of the browser so everything stays relative.
I have spoken to the developer of the music player plugin and he suggested this
It looks like it's just a markup issue, it would probably work if you float the player as well as the image, either using the 'pos' parameter in the shortcode or by wrapping the shortcode in another floated div of a given width.
As the instructions were not very specific I was a bit unsure of how to implement these suggestions.
I tried wrapping my short code in a <div> like so but its probably completely wrong.
/* ===== "audiobooks" ===== */
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
</div>
Any help you could offer would be really appreciated.
Floating would be easiest. You'll have to add a clearfix for this to work properly so you can force the floated elements to behave as desired when they stack.
First include this into your main style sheet at a top level (top of the file).
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
In the html for the audiobook you'll have to add the clearfix class as below.
<div id="wrapperMI_0" class="clearfix wrap-MI audiobooks nolistbutton nopn">
On the div.wrap-MI class in css add:
float: left;
width: 48%;
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.