I'm trying to get one div containing an image to show up over a joomla menu-bar... The one I want on top is at the bottom of the code called "wings.gif", but for some reason it won't show up over the user3 joomla bar, which I put in a Div. any ideas how to do this? thanks.
<div style="position:relative; z-index: 2;overflow: visible;"><jdoc:include >type="modules" name="user3" /></div>
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
<?php echo artxPositions($document, array('top1', 'top2', 'top3'), 'art-block'); ?>
<div class="art-contentLayout">
<div class="art-<?php echo artxCountModules($document, 'right') ? 'content' : 'content->wide'; ?>">
<div style=" position:relative; "> < src="images/stories/image" width="898" height="126" style="position:relative; top: 0; left: 0;"/></div>
<div style=" position: absolute;top:-50px; left:647px; z-index: 1; overflow: visible; ">< src="images/stories/**IMAGE**" width="199" height="136" /></div>
as far as I can see from the code you posted, the absolute div you created is the child of one of the children of the "brother" of your user-3 div :D This means that it floats on top of the last relative positioned item in his parent. But it wont magically fly outside the scope of its parent towards your user-3 div.
Advice: Dont start putting things randomly on relative coz this will make your quest even harder, just make the absolute div a child of your user-3 div, or a "brother".
ps: why is brother quoted? I forgot the name of a same-level node and figured the name was suiting... :D
Related
I have a form in a div where I brought submit buttons out of the div to another part of the screen. This works nicely. However, I want to lock that div down to a specific size and relative position and use overflow:auto so when it grows too big (the form has elements that are unhidden with checkboxes) the entire screen doesn't scroll, just the div. The problem is, as soon as I add the overflow style, the submit boxes I moved off the div are hidden. I assume this is because with overflow all elements are locked into that div and scroll bars allow you to access them, but in this case the elements are moved left:-500px and it doesn't even give me a scroll bar to scroll left to see them. Basic code follows:
<div class="div1">
<div class="div2">
<form>
<input type="submit" class="sub1" />
</form>
</div>
</div>`
CSS would be:
div.div1 {
position:relative;
width:1000px;
margin: 0 auto;
}
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
}
input[type=submit].sub1 {
position:absolute;
left: -500px;
}
So this works, but as soon as I change the div2 css to:
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
overflow:auto;
}
The submit button disappears.
My question: is there any way to get the scrollbar and keep the div2 container to 500px high without losing the elements outside the div?
If I understand correctly, you can move div2 within the form and leave the submit button outside of div2. That way, the submit button will always be visible and div2 can have overflow.
<div class="div1">
<form>
<div class="div2">
<!-- form fields go here -->
</div>
<input type="submit" class="sub1" />
</form>
</div>
Note: You'll likely need to adjust styles on the button, but I'm not entirely sure about your end goal.
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
I am having trouble getting some text to be next to an image. I have it working on one site: http://puckpros.edkatzman.com/
but not on another: http://petra.edkatzman.com/
and I can't see the difference. Can another pair of eyes help?
Here is the jsfiddle: http://jsfiddle.net/tangobango/rK2mG/
HTML:
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div id="front-page">
<div id="owner-photo ">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman" >
</div>
<div id="owner-description ">
<h1><span class="drop-cap">Hi! </span>My name is Michael Jennings,
the owner and master craftsman of Petra Stoneworks. I have over 25
years experience working with a wide range of both valuable and everyday stone pieces.</h1>
<h3>We specialize in the expert repair of stone objects and the creation
of original pieces. Have a look at the portfolio of our work and contact
us with any questions or to start a discussion of how we might help you.</h3>
</div>
</div>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
CSS:
#front-page {
background-color:#ffffff;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top:10px;
overflow: hidden;
}
#owner-photo {
width:246px;
height:246px;
float:left;
}
Thanks for including the jsFiddle. That was very helpful. Your problem is a simple typo.
<div id="owner-photo ">
There is a space in the id attribute. Delete that space and the div should float.
I am not really sure what the outlook is for your page but you might want to move the owner-photo ID onto the image itself and remove the potentially unnecessary div from your code.
The diference are:
First, put float:left in id="owner-photo"
<div id="owner-photo " style="float: left;">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman">
</div>
Second:
I don't know why but, don't use <-h1>, use <-p>.
In the example of http://puckpros.edkatzman.com/
first there is:
<img class="left_image" src="http://puckpros.edkatzman.com/wp-content/themes/PuckPros/images/services.png">
and then:
<p>something</p>
and this is the result:
Hope it helps :)
Please help! I have tried using Firebug to see why my href's are not click-able but I can't figure it out. I don't use tables. The site is http://spiritfestcorpus.com/
The big circular image is wrapped in a href
I'd really appreciate any suggestions.
Here is the code from line 357 if you VIEW SOURCE in Firefox
<div id="slideshow_wrapper" )">
<div id="frame"></div>
<div id="slideshow_container">
<div id="slideshow">
<a style="z-index:9999999; position: absolute;" id="cdImage1" href="concertsbuy.aspx?eventId=53"><img id="Repeater1_ctl00_cdImage" src="images/slideshow/home/albums/2012/SPIRIT_Fest_Corpus/LMG_DC12Circle.png" style="border-width:0px;" /></a>
with position: absolute you must specify width and height. And if you are going to specify width and height on an a tag, you need to use display: block
I am currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!