I have two Spans I want span1 to be exactly below span2, even if span1 changes height dynamically.
<span id="Div3" style="Z-INDEX: 126; LEFT: 8px; WIDTH: 99.06%; TOP: 5px; visibility: visible;"
runat="server" ><asp:image id="Image1"
style="Z-INDEX: 127; LEFT: 16px; right: 709px;" runat="server"
tabIndex="10"></asp:image></span>
The above Span has an image, whose height can change dynamically.
I want this span
<span>Exactly below the image</span>
to be exactly below the span in which image is placed.
Could anyone help ??
I've created 2 spans. One with a img in it, and one with h1 in it.
<span class="span1">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="">
</span>
<span class="span2">
<h1>I'm span #2!</h1>
</span>
Both of the spans i have given the display property of block. This will make them stack under each other.
span {
display: block;
}
And gave the img some widthand height.
.span1 > img {
height: 200px;
width: 200px;
}
Demo here
you forgetting about setting: position: absolute and top: on both spans. ...if you want to positioning them absolutely.
if you just want them in the document flow then remove top/left/z-index from your styles - they doesn't have any result on the outcome until you add position:absolute; or position:relative;.
Related
I am looking to change the position of a div that is inside a div class. My only option is to add CSS, I cannot edit the HTML. The current code looks like this:
<div class="additional-information">
<div>
<strong> Name </strong>
<strong> Address </strong>
</div>
What I managed to do is to change the position of the entire 'additional-information' class with the following code:
.additional-information {
position: absolute;
left: 250px;
bottom: -230px;
}
Would it be possible to move individual divs inside this class that have no tag?
You could work with CSS Child Selector.
Something like this:
.additional-information > div:nth-of-type(1) {
position: absolute;
left: 250px;
bottom: -230px;
background-color: lightblue;
}
<div class="additional-information">
I am a parent
<div>
<strong>name</strong>
<strong>address</strong>
</div>
</div>
For more info look at this article.
I have a small problem with these <span> elements in a <div>.
http://jsfiddle.net/kkzLW/179/
Here is the section of CSS code that I'm working with:
.rightRapper {
border-style: dotted;
margin-left: 105px;
margin-top: 0px;
height: 90px;
width: 100px;
display: block;
}
.leftRapper {
border-style: dotted;
margin-left: 0px;
height: 90px;
width: 100px;
display: block;
}
Here is the HTML section:
<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">
<span id="container3" class="topButton">
+
</span>
<span id="container4" class="bottomButton">
-
</span>
</span>
</span>
<span class="rightRapper">
<span id="buttonColumn">
<span id="container" class="topButton">
+
</span>
<span id="container2" class="bottomButton">
-
</span>
</span>
</span>
</div>
I'm trying to get the <span> .leftRapper and .rightRapper to be side by side in the <div> battleBox. However, when I set the CSS display property to inline, the <span>s get squished into a smaller shape for some reason. When I set the display to block, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.
What is causing the <span>s to have a smaller size?
Add or replace the properties below in the following CSS classes/selectors:
#battleBox {
width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}
.rightRapper {
margin: 0px; /* remove all margins to fit two divs in the container */
display: inline-block; /* display block elements in one line */
}
.leftRapper {
margin: 0px;
display: inline-block;
}
Example
You could/should add a float: left to .leftRapper.
Other options are e.g. adding a negative right margin to .leftRapper.
I'm trying to place an icon over a div but the overlaying div is pushing the rest of the contents down. I'm stuck although it should be pretty easy. Please have a look at this fiddle and let me know what I'm doing wrong (apart from using tables in the design!)
body{
background-color: #666;
}
.sizesbg {
background-color:#fff;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 170px;
text-align: center;
}
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
height: 155px;
left: 0;
top: 0;
width: 170px;
z-index: 2;
}
<table>
<tr>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.carfolio.com/images/dbimages/zgas/manufacturers/id/843/bmw-logo.png" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div class="soldicon"></div>
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://mcurrent.name/atarihistory/warner_books_logo.gif" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.mindxstudio.com/images/mindxstudio-logo-icon.jpg" width="140" height="140">
</div>
</td>
</tr>
</table>
Thanks!
use position:absolute; on the divs, but of course the parent elements need to have position:relative; to stay in the right place
something like this:
http://jsfiddle.net/EESAc/5/
Edit:
This works well in Chrome ... but some other browsers had troubles (eg. Firefox), because for table elements position property is not defined, and you should use a block element instead ... so it works if you use another div around the images and set its position to relative. I added another quick fiddle for an idea:
http://jsfiddle.net/EESAc/9/
Give the class .soldicon a position: absolute; This way the element will be taken out of the document flow and won't affect the other elements.
Try to add the following to your .soldicon css:
position:absolute;
DEMO
Change your css to this:-
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
display: block;
height: 155px;
left: -7;
top: 0;
width: 170px;
z-index: 2;
position:absolute; // Change to absolute positioning
}
In my case (included popup element is bigger then including element) position: absolute;
didn't work exactly how I needed it (scrolling bar was added onto including element and the included popup wasn't displayed entirely). So the solution was:
position: fixed;
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.