I'm confused in some CSS trick. The scenario is painted below. In the 2nd container is a plugin like http://workshop.rs/projects/coin-slider/
I want to move that 2nd container up (the green one), to be connected with the menu bar. The purpose is, I want the Image Logo overlaping the 2nd container. How can I achieve that ?
I tried simply set the negative value of the margin-top property of the 2nd container but it causes that the div's are moved.
This should do it:
#container-2 {
display:block;
position:relative;
top:-0px /* <-- Put actual value here */
}
It would be easier if you could post you css code.
Somes possibilites:
set "image logo" margin-bottom to a negative value and make sure container#1 height isn´t preventing the bottom container go up.
or set both containers position: absolute and then set property top to match the desired result.
I would go for a position: absolute for the image logo.
Related
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
i have 2 overlapping divs like so:
div.back {
background:url(brick.png);
background-attachment:fixed;
background-position:right top;
background-repeat:no-repeat;
height:765px;
z-index:200;
}
div.flash {
margin-top:-765px;
z-index:201;
}
what i need to do is set the 'back' div offscreen for a time and then move it back. i tried moving it using a bunch of different jquery methods but for some reason they move all of the divs instead of the one with the specified id.
so how do i move just the bottom one offscreen without affecting the top one? it doesn't need to be animated at all; i just need it set aside until needed. (and "hide" won't work because it messes up my flash, so omit that from your suggestions if you don't mind. :)
thanks.
would $("div.back").hide() do the trick?
hide sets the display style to none if fx is off, otherwise it animates the opacity
you could try:
disabling fx
setting display to none by yourself
setting visibility to hidden by yourself
setting opacity to 0 with jquery
setting position to absolute, left to -1000, top to -1000, width and height to 100 using jquery or by yourself
putting the div somewhere else, and using remove and appendTo to move it using jquery (if it's just an image)
i ended up solving it; instead of trying to move the topmost div i changed the code to alter the margin-top property of the lowest div instead of the highest one; that was able to leave the highest level one onscreen. i still don't know why attempting to change margin-top of the topmost div would affect all the others but it seems to.
When I try to move the div #planet up (I change margin-top from -76px to -86px) my whole site "lifts up".
You can view the page here (and see the problem) http://rssreaderbg.net/pubsubbub/example/cssexam/index.php
It's because a div is a block element, so it stretches from one end to the other. So when you change the top of that particular div, you're changing the tops of all the following divs.
See the trick (an oldie but a goodie) at the bottom of this page http://css-tricks.com/the-css-box-model/ (as a for instance) to see how this works and to find out how to duplicate it for yourself.
try to add height parameter to "icons" div... when you change that margin now, size of parent div(icons) is affected and whole site moves up because that div changed height
just apply padding-top:10px; for the #container
Remove all margin of the class .iconss
Use position:absolute on #icons and set the position:relative in the class .iconss
Now, use top and left css property to set the icon position.
Cleber.
id=icons are above the id=nav. When you edit the top margin of an element in id=icons it effect id=icons. When id=icons goes up the others goes up too. I suggest you to use position css for icons and nav too.
Trying to style a CSS popup. I know there's libraries, I'm doing it by hand anyway.
<div class="labelDiv">
<span class="label helpText">Description</span>
<div id="activeHelpTip" class="helpTip messageBox">
Help text not defined for this field.
</div>
</div>
.labelDiv { float: left; position: relative; }
.helpTip
{
display: block;
position: absolute;
padding:2px;
max-width:350px;
z-index:1;
left: 5px;
top:22px;
}
.labelDiv is position rel so the absolute .helpTip is absolute relative to its owning labelDiv. AFAICT .helpTip must be absolute so it is ignored in normal page flow.
How do I get my tooltip to float over the input box to the right? I want it to float over everything except the edge of the browser.
http://img213.imageshack.us/img213/278/popupcss.png
First of all you'll need to give .labelDiv an overflow:visible. Can you give a more detailed HTML example or a link to this page?
-edit-
also the tooltip will need a width or at least min-width to make sure it doesn't adjust to the size of the containing div
Shouldn't you just adjust the top and left properties accordingly? What happens if you do?
EDIT
If your labels are set with, say 100px for simplicities sake, then adjusting the left to 100px will make the tooltip float over your input field. In this case there are two things to consider - you need to make sure your label div has overflow:visible and that it has a higher z-index than your input field.
If your label div is NOT set width you can adjust the right bound eg. right:0px which will put it on the right edge of the label. You can use negative numbers as well to make it break out of the label div in which case you will have to take the above two points into consideration as well.
We do need a little more info but try adding a z-index to the ".labelDiv" that is greater than the z-index of the input box. You may need to add a positioning to theinput box to make it accept z-index. I if it's a floated element I usually add "position:relative;float:left" to the element that I need lower but don't need to position it.
So my answer is z-index.
It should work.
EDIT
As faux paus as it might be. Would a negative right margin do the trick?
Couple of things, you should probably be using the <label> tag to declare the label for the input field. Using the title attribute on the input with the text of your tooltip will create the hover text you want over the input field and the browser will do all the work for you.
You guys were right, more HTML context was necessary. I ended up promoting the tooltip div all the way up to the body element, then manually positioning it relative to the appropriate label. I couldn't get the browser to do it for me without similar minor issues.