<div id="popupLeft">
<h1 class="popupTittel">Title goes here</h1>
</div>
I want this text go outside the div popupLeft, but only for xx pixles. Is that possible?
Perhaps I did not explain well enough.
There are two "modes" on my website. If the content is supposed to draw a gallery I have the title, intro-text and content-text in a div called 'popupLeft' and a gallery in the 'popupRight'.
But if there is no gallery, is is supposed to be text in both the divs, and I want the title to stretch all the way from the left-div and the right-div. The right and left-div are positioned side by side.
add it position:relative
ie. to get it 10 px above, do this:
.popupTittel {
position: relative;
bottom: 10px;
}
if you want to move it right outside the div, add position:absolute like this
#popupLeft {
position: relative;
}
.popupTittel {
position: absolute;
bottom: 100%;
left: 0;
}
Like in margin-top: -10px; or similar? You should consider reading a CSS guide, since this is very elemental stuff.
Id actually use position:relative; top:-10; as that will keep all elements below that objects margins correct...
Example here :)
http://jsfiddle.net/r2bp9/
Related
I have a set of divs (11 of them), 8 of them with an image and 3 of them with ':'.
all 11 boxes are inside a class "timer".
Something like this:
<div class="timer">
<div><img></div>
<div><img></div>
<div>:</div>
</div>
I added text over image by using p tags inside each div and using this code on css:
.text{
position: absolute;
left: 85px;
top: 185px;
}
But on resisizing the window, the boxes move but the text stays. How can I make the text move along with the boxes?
Missing a few things here: <div>:</div> should actually be: <div class="text">:</div> if you want to apply your CSS that's targeting .text to this div containing the :.
Also if you want the container to hold the absolutely positioned element, you need to set your timer to be relative position: .timer { position: relative; }
I'm trying to put a "triangle" in the top right of a Div. Somehow i mess it up every time.
That's the Fiddle
That's my div:
<div class="gtcr_ttl_wllt_dash">
<div class="db_ov_layer center">
<h1 class="ttl_ammnt">Test Module</h1>
<span class="prf_ttl">Hello There</span>
</div>
</div>
In the jsfiddle is a pic and everything Set up, except that sneaky triangle. If anyone has a little free time to Help me out on this .. Would be great.
CSS for the wrapping div:
.div-wrap {
position: relative
}
CSS for your triangle:
.triangle {
display: block; (if not already a block element)
position: absolute;
top: 0;
right: 0;
left: auto;
}
Quick fiddle:
http://jsfiddle.net/92gvW/3/
This should do it, give the outermost div position:relative, to the ribbon position:absolute and play with top and right to fix it
http://jsfiddle.net/92gvW/2/
EDIT: and put the ribbon inside the outer div
EDIT 2: I didn't see the image the first time, with some ugly css tricks i did the triangle too
http://jsfiddle.net/92gvW/4/
Basically a small white triangle over a bigger black triangle, shifted 1px
There is a navigation-bar with that css-definitions:
.nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="nav">...</div>
That means that this navigation is always on to of the page. But now I have to insert a second bar at the top of that naviation-bar.
.top-nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="top-nav">...</div>
<div class="nav">...</div>
That "top-nav" will be displayed at several pages (i didn't know now). So I am not able to change the css definitions or the html of the class "nav".
I am looking only for a (css) possibility to move any html-tag with the css-attribut "top: 0" down for a fixed value.
JavaScript is not a solution: There several pages i will include that "top-nav".
Edit:
overlapping:
not overlapping:
I am looking for that not overlapping solution.
Looking to your html if you want that a div reference to his container you have to put it inside the container. try this:
<div class="nav">
<div class="top-nav">...</div>
</div>
So the top-nav refers to the nav container.
EDIT 1:
No chance if you can't change the html. The thing you can do is add a javascript which add text inside top-nav. In this way you can generate code to put another div inside it.
for reference look at jquery text
You could try with:
position: static;
or without position definition (static is the defaul). In static position each box appear in the order they are in the html.
<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>
Where
$top should be drawn on the very top of the page.
$content should be centered both vertically and horizontally of the page.
$footer should be drawn on the very bottom of the page.
I do not want either of the divs to follow the view, I found two solutions for the problems one by one, but none to combine them, seeing as they both had the height element in css. So first I guess if it even is possible (which I guess it is) second is then of course, how?
Edit: Pretty much like this side, the top bar should always be on the top, that one is fairly straight forward.
Then the #login_wrapper should always be centered in the site with a fixed height.
Last the footer should always be on the bottom (it should be pushed not stickied), because in this case #login_wrapper wont fill out the site.
The #top and #footer both have fixed heights as well.
Edit2: Fixed some clarifications for the problem.
Found solution from this site [link]http://stackoverflow.com/questions/7909587/horizontal-and-vertical-centering-above-a-sticky-footer-in-css
Thanks anyway!
If i understand your question, try with this css
#site_wrapper
{
position: relative;
}
#top
{
position: relative;
top: 0px;
}
#footer
{
position: relative;
bottom: 0px;
}
#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}
#login_wrapper
{
/* add some height */
}
I am unsure of how to proceed. I have 3 div tags layed out like so (well this is a simplified version anyways):
<div class="gray" style="margin-left:auto;margin-right:auto;width:100px;overflow:auto;">
<div class="orange"></div>
<div class="blue"></div>
</div>
I would like to move orange to the left of gray using css so that I do not have to change the html but I am stuck on how to do it properly. Here is a picture (I would like to move orange to green):
http://imgur.com/U76pp.png
You would have to do it using absolute positioning:
.orange{
position: absolute;
left: -200px; /* or whatever distance you want */
}
You can do it with a negative margin:
http://jsfiddle.net/wkKDy/1/
using position-relative would do it
.orange{ position: relative; left: -200px }
if it still gets clipped, make sure the parent element doesn't have overflow: hidden.
http://jsfiddle.net/SebastianPataneMasuelli/wkKDy/4/
edit - oh, you got it. nice.