I have a problem using a small div that should "hover" over pics that switches using the JQuery cycle plugin. The pictures are 950px wide and to the right on top of the pictures a small box should be with latest news.
Problem is in compability mode in IE the box seems to loose it's z-index and ends up behind the picture. It works in IE8, Opera, Chrome and Firefox.
I've tried to remove 2 pictures so only 1 picture shows, and then for some reason it works in compabilitymode aswell. I've tried to remove whitespaces between the img-tags but no luck, margin: 0; padding: 0 all over but no luck
anyone got any ideas what might be wrong?
CSS CODE
#Content {
width: 950px;
}
#NewsWrapper {
position: relative;
padding: 0;
margin: 0;
top: 0;
}
#NewsListning {
float: right;
height: 200px;
margin: 0;
padding: 10px;
background: yellow;
top: 0;
right: 0;
position: absolute;
z-index: 12;
width: 300px;
}
#SlideImages {
width: 100%;
margin: 0;
padding: 0;
float: left;
z-index: 11;
}
.SlideImage {
display: inline;
float: left;
padding: 0;
margin: 0;
z-index: 11;
}
JavaScript Code
$(function () {
$('#SlideImages').cycle({
fx: 'fade',
speed: 5000
});
});
HTML Code
<div id="Content">
<div id="SlideImages">
<img src="/Images/Slide1.jpg" class="SlideImage" />
<img src="/Images/Slide2.jpg" class="SlideImage" />
<img src="/Images/Slide3.jpg" class="SlideImage" />
</div>
<div id="NewsWrapper">
<div id="NewsListning">
<div>
<strong>Test 2</strong>
Lorem ipsum
</div>
</div>
</div>
SOLVED - ADDITIONAL NOTES*
In all browsers but IE7 you need to specify, for example, top: 0; left:0 if you are gonna use position: absolute. Else it usually ends up right of site. Another thing that doesnt make sense when it comes to IE7.
Put your #NewsWrapper as a higher index than #NewsListing
That should work
Also, I haven't looked at the code for Cycle but I'm assuming it uses higher z-index than 12. You'll probably want to use z-index > 1000 for something you want to be the most forward on the screen.
I just had a really hard time with a similar issue. (CSS Drop Down going underneath a banner) I used CSS to eventually fix it, changed the parent div holing the whole nav to position:absolute and a really high z-index but I tested this and it worked really well.
Related
I'm super new to coding so apologies if this frustrates anyone!
I'm working on a Wordpress site and I'm trying to lay a video (actually a shortcode) over a jpeg, like this;
http://imagizer.imageshack.us/v2/617x176q90/540/OJCIR1.jpg
Then place a video thumbnail (that opens into a lightbox when clicked) on the grey area. Here's my HTML:
<div style="width: 640px; height: 480px;">
<img src=".../uploads/2015/01/watch.jpg" style="z-index:-1" />
<div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
</div>
</div>
And here's my CSS:
div.videodiv {
float: right;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}
As I'm sure you can tell I'm brutally savaging this code from tips found online.
Any help would be massively appreciated, and how do I insert code into these topics?!
Sorry!
Actually, it's better to set the image as background and then align the video to the place where you want it, something like this:
HTML
<div class="wrapper">
<div class="videodiv">[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" auto_thumb="1"]
</div>
</div>
CSS
div.wrapper {
width: 640px; //Change it to image's width
height: 480px; //change it to image's height
background: url(.../uploads/2015/01/watch.jpg) #fff;
}
div.videodiv {
right: 20px; //distance from right border to gray rectangle border
top: 10px; //distance from top border to gray rectangle top border
position: absolute; //let total control of the position of the video
}
Use position: absolute; rule in the video and position relative in the image, and then play with the position right and top in the video
CSS EXAMPLE
div.videodiv {
right: 0px;
top:0px;
z-index: 999;
position: absolute
}
img{
position: relative;
z-index: 998;
}
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
I'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.
The content I'm developing is currently here: http://96.0.22.228/
Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.
Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.
100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.
You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.
You might need to rethink how you go about this.
The best solution for this is to have the parent element of the button have a height of 100% as well, assuming you want your button to have a height of 100%.
td {
height: 100%;
}
.btn {
width: 100%;
height: 100%;
}
<tr>
<td><button class="btn" id="1">1</button></td>
<td><button class="btn" id="2">2</button></td>
<td><button class="btn" id="3">3</button></td>
<td><button class="btn" id="plus">+</button></td>
<td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>
i got a one solution if you need your desired results you can adjust the padding of your (td.navigation a class link) through this you will get your results.
apply this css:-
td.navigation a {
color: #837768;
display: block;
font-size: 1.2em;
padding: 14px 5px;
text-align: center;
text-decoration: none;
}
So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.
When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.
There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.
body,
html {
background: black;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#left {
position: absolute;
top: 10%;
left: 0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#right {
position: absolute;
top: 10%;
left: 76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#center {
position: absolute;
top: 10%;
left: 24%;
background: #dddddd;
width: 48%;
padding: 2%;
margin: 0;
}
#flash {
background: red;
width: 500px;
height: 500px;
padding: 0;
margin: 0;
}
ul {
height: 500px;
padding: 0;
margin: 0;
padding-left: 25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.
This is my markup:
<div class="contentSubBox">
<h5>Please choose a report</h5>
<div class="arrowNavigation">
<div class="arrowNavigationLeft">
<<
<
</div>
<div class="arrowNavigationCenter">Page 1 of 8</div>
<div class="arrowNavigationRight">
>
>>
</div>
</div>
</div>
And this is the CSS that goes with it (the relevant part):
div.arrowNavigation { position: relative; text-align: center; width: 200px;}
div.arrowNavigation div.arrowNavigationLeft, div.arrowNavigation div.arrowNavigationRight { position: absolute; text-align: left; }
div.arrowNavigation div.arrowNavigationLeft { bottom: 0; left: 0; }
div.arrowNavigation div.arrowNavigationRight { bottom: 0; right: 0; }
.button { background: url("http://www.pimco.com/_layouts/PIMCOdotCOM/images/backgrounds/client-access.png") top left repeat-x #EBF2EB; border: 1px solid #B3C3B7; padding: 3px 8px; }
The problem I'm having is that IE 7 cuts off the top and bottom part of the buttons.
In Mozilla Firefox, it looks like this, which is exactly like I want it:
Internet Explorer does this:
The relative positioning isn't responsible. I tried floating and it didn't work. Manually setting height or min-height or font-size of the links or the container didn't help either.
If I change one link to <input type="button" class="button"/>
it will look like this:
So changing the height by adding another element somehow works. I really want to avoid that, though.
Any ideas?
Thank you!
Try giving hasLayout to .button, by adding the common zoom: 1 fix.
I've not tried it, but that does look exactly like a problem you can fix by providing the afflicted elements with "layout".
Try giving div.arrowNavigation some height. Try 26px;
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)