How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?
Take a look at my code:
http://jsfiddle.net/5dC6T/3/
The issue is in the way that you've ordered your <div> elements. Try:
<div>
<div class="red-box"></div>
<img class="photo" alt="" />
<span>Name</span>
<span>Data</span>
<span>City</span>
</div>
CSS:
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }
I've made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/
Use this CSS:
#QuadroEvento div.TopoEvento div.euvou{
height: 90px;
width: 90px;
background-color: red;
position: absolute;
right: 0px;
margin-right: 0px;
}
The key being: position: absolute;
You can also use position: fixed; etc., see here for more details: http://www.w3schools.com/cssref/pr_class_position.asp
Related
I have an image inside a div. I want two links to float over the image, one on top-left and other top-right of the image. I did this:
<div class="container">
<div style="float:left">like</div>
<div style="float:right">share</div>
<img src="images/activity-image.jpg" />
</div>
Floating divs push the image down. But, I want them to appear upon the image. It should look as if the like and share links are on the top-left and top-right corners of the image and not above the image. Hope I got the explanation clear.
Please help. Thanks.
Use absolute position within a relative positioned element and use top, bottom, right and left properties to position the text.
Try this:
.top{
top: 0;
}
.left{
left: 0;
}
.right{
right: 0;
}
.img{
position: relative;
width: 200px;
height: 200px;
background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat;
}
.img span{
position: absolute;
color: #000;
}
<div class="img">
<span class="top left">text</span>
<span class="top right">text</span>
</div>
JSFiddle Demo
.container {
position: relative;
width: 300px;
}
img {
width: 300px;
height: 300px;
}
.top_right {
position: absolute;
right: 0px;
top: 8px;
}
.top_left {
position: absolute;
top: 8px;
left: 8px;
}
<div class="container">
<div class = "top_right">like</div>
<div class= "top_left">share</div>
<img src="http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif" />
</div>
PS - This is with regard to your code. There could be other techniques as well.
JS Bin demo
Take a look at this, but adjust the CSS positioning of the h2 element equivalent to suit your needs: css-tricks.com/text-blocks-over-image
Have you set CSS positioning? Setting the image position: fixed may hold the image in place while you float the divs.
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I am trying to show a horizontal top bar with logo image in the middle of it. Image is on the left of the page and vertically in the center. How would I get image at center of the topbar?
Here is my code:
<div class='topbar'>
<img src="../../img/headerlogo.png" class="topbarlogo"/>
</div>
CSS:
div.topbar {
height: 80px;
width: 100%;
background-color: #000000;
margin-top: 0px;
}
.topbarlogo {
display: block;
position: absolute;
}
You've spelt your class wrong in the css, 'topbor' should be topbar.
Additionally add:-
margin-left: auto;
margin-right: auto;
Get rid of the rules for .topbarlogo and simply set the text-align:center rule for your div.
jsFiddle example
You need to clear the floats. Create the following div below:
<div style="clear:both;"></div>
Should do the trick.
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.
There are a couple of techniques of doing this. The simplest:
<div class="outer">
<img src="....">
</div>
with
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.
Start with Making the absolute, relative.
If the image is 10 pixels high, for example, you could try this:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.
Background image is your solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
Assuming dimensions of the image are 57*55
Only for positioning an image at the bottom right corner:
I have "Div" and image in the div and small image in the bottom right corner of the div.
Detailed:
https://jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
Simplified:
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>