I want to set the <div id="bar">...</div> into the background.
First, here is my page: tekkkz.com
<div id="bar">
<span id="views">50</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" id="dislike"></a>
</div>
This block (on the top right with the like/dislike buttons) should be in the background, so that it wont take any width of my content box.
How to do this?
For better understanding: what i want to reach is similar to set a image anchor to page in libreoffice.
You should use position: absolute on your <div id="bar"> and position: relative on it's parent. Then use right: 0 if you want your element to be at the right corner of the content block.
#bar {
position: absolute;
right: 0;
}
.content {
position: relative;
}
Since already in your stylesheet style.css
#bar{float:right;}
So you could just add in your pre block
<pre style="clear:both">
I tried it. It worked like charm.
Hope it help
Related
The template I am working with has a container, with content and navigation divs. The code looks something like this:
<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>
See Figure 1 below for drawing.
Relevant CSS for the main_content div:
.main_content {
position: relative;
left: 0px;
width: 100%;
display: block;
transition: transform 0.5s ease 0s;
height: auto;
}
I can change the PHP to generate the BACK and NEXT links without its own div, so it will look like this:
<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>
What I don't understand is the proper CSS to make the <a> BACK and NEXT links to be on the left and right side of the main_content container. See Figure 2 below for drawing.
Here is a link to the JFIDDLE that I've tried: https://jsfiddle.net/7wet25zn/
Position absolute your anchors at top 50% and subtract 0.5em (half the font-size, or any other value):
.user_content {
position: relative;
background: #eee;
height: 160px;
}
.user_content a {
position: absolute;
top: calc(50% - 0.5em);
}
.user_content a.next {
right: 0;
}
<div class="user_content">
<div class="main_content"></div>
<a class="prev" href="#!">PREV</a>
<a class="next" href="#!">NEXT</a>
</div>
If your {content} part is tall and prev and next button should be in the middle of the viewport (not tall div), you may add display:block; position:fixed; top:50%; to prev and next links so it will be visible regardless of height of div.
I recently experienced a similar problem building tooltips on a page. It wasn't something I had encountered before and wanted to do it with HTML and CSS. What ended up working for me was defining a parent container and making the content you want floating like so:
<div class="parent-container">
<div class="child"></div>
<div class="child"></div>
</div>
And defining the CSS as such:
.parent-container {
position: relative;
}
.child {
position: absolute;
}
This allows you to set width and height on the child class as relative to the position of the parent container. Good luck!
Joomla-based website with DIV sections dividing the page within the template.
I need to display a graphic that displays on top of all content on the page. Using position: relative or position: absolute, it only adjusts the position within the current DIV section.
Using position: fixed, I am able to set its actual position, which is great. However, regardless of my z-index, some DIVs it appears above, others behind.
At a loss as to how to display this image over top of everything on the screen regardless as to its DIV, z-index, etc.
Use position absolute but adjust changes caused by not displaying img in that flow by for eg margin, padding, height etc. If you are floating img you will need to fix position too.
<div>
<div>before img</div>
<img class="img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute-fix">after img</div>
</div>
.img--absolute{
position: absolute;
}
.absolute-fix{
margin-top: 70px;
}
<div class="img-container--float-fix">beffor img</div>
<div>before img</div>
<img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute--float-fix">after img</div>
</div>
.img-container--float-fix{
position: relative;
}
.absolute--float-fix{
padding-right: 60px;
}
.img--float.img--absolute{
right: 0;
}
http://jsfiddle.net/o5sboe1s/
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.
I have this piece of HTML code:
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily.
If I change the size of either, it no longer works.
So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?
Thank you for help
I think this should work:
HTML:
<div>
<img src="image-inside-pic-png.png" alt="" class="inner-image"/>
<img src="pic.png" alt="" />
</div>
CSS:
div {
position: relative;
}
.inner-image {
position: absolute;
top: 15px;
right: 30px;
}
Anyway, make sure you need to do this with HTML. Maybe it's better to simply edit the image with Photoshop or Gimp. Or maybe one image it's only for styling purpose, then you should use CSS.
Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
put both images in one div which uses position:relatvie, then apply position:absolute to images, and adjust the value as you need.
**html**
<div class="images">
<img src="./images/Rectangle.png" alt="bg"/>
<img src="./images/lady.png" alt="lady" class="lady-image"/>
</div>
**css**
.images {
position: relative;
}
.lady-image {
position: absolute;
top: 0;
right: 0;
}