I'm trying to put an image inside a div. It is actually a multiple series of divs. There is a div which displays the label "Collab". I want the image "expandImg" to appear beside the label "Collab".
Though the visibility is initially "hidden", I modify it through the script. Please see the code below and let me know why the image "expandImg" is not appearing inside the div:
#top-stuff {
left:0px;
position:absolute;
bottom:0px;
width:216px;
z-index:12;
height:30px;
}
#top-bar-out {
display:block;
left:0px;
bottom:0px;
position:relative;
width:216px;
height:30px;
background: -moz-linear-gradient(center top, #333333, #111111);
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
background: -o-linear-gradient(top, #333333, #111111);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
box-shadow:0 1px 2px #666666;
-webkit-box-shadow: 0 1px 2px #666666;
}
.active-links {
position:absolute;
left:0px;
bottom:0px;
height:30px;
width:216px;
}
#container {
width:216px;
margin:0 auto;
position: relative;
left:0px;
bottom:0px;
}
#topnav {
text-align:centre;
left:0px;
bottom:0px;
height:30px;
width:216px;
}
#session {
cursor:pointer;
display:inline-block;
left:0px;
bottom:0px;
width:216px;
height:30px;
padding:10px 12px;
vertical-align: top;
white-space: nowrap;
}
#session.active, #session:hover {
background:rgba(255,255,255,0.1);
color:fff;
width:216px;
}
a#collab-link {
color:#bababa;
position:relative;
}
a#collab-link em {
font-size:10px;
font-style:normal;
margin-right:4px;
}
a#collab-link strong {
color:#fff;
}
#collab-dropdown {
background-color:#202020;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow:0 1px 2px #666666;
-webkit-box-shadow: 0 1px 2px #666666;
height:320px;
width:216px;
position:absolute;
left:0px;
bottom:31px;
display:none;
}
.frame {
position: absolute;
}
<div id="top-stuff" style="visibility: hidden;">
<div id="top-bar-out">
<div id="container">
<div id="topnav">
<div class="active-links">
<div id="session">
<a id="collab-link" href="#">
<strong>Collab</strong>
</a>
<img id="expandImg" src="styles/images/dt_down.png"
align="right" style="position: absolute;"/>
</div>
<div id="collab-dropdown">
<iframe src="IQWFrontController?handler=CLB00001" style="{padding:0px; position:absolute; display: block;}"
scrolling=auto width="100%" height="100%"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks
Since you have positioned it absolutely, then add top and left attributes to place it where you want it to appear
Align right wont work here! For expandImg in style attr add top:0 and lef:0
<img id="expandImg" src="styles/images/dt_down.png" style="position: absolute;top:0;left:0;" />
If the image don't show, then try to fix the adress of image or check your script for changing visibillity again!
I also noticed that everything is positioned absolutely. If few cases and browsers this may couse that elements will overflow each other, so try playing with relative positioning of elements!
I have resolved the issue. Though i had added the images to the folder structure, they weren't available on the eclipse. So silly that i didn't notice it. After i refreshed the folder on Eclipse, the image started showing up. Thanks a lot for your inputs guys.
Related
Is it possible to create a div with a line through the middle of a circle with text in the centre like above? It needs to be responsive so it will scale with the page. here is my code so far. I need a way to draw the line behind the circle now
http://jsfiddle.net/Jyjjx/87/
<div class="container">
<div class="round-button">
<div class="round-button-circle"><span class="round-button">G</span>
</div>
</div>
<div>
.container {
width:100%;
height:100%;
background:red;
}
.round-button {
width:25%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #cfdcec;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button span {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
So, one more question.
How come that div with phone# image goes below parent div? I tried clear. Didn't help. I tried absolute positioning parent "pics", but it threw everything to the left.
See here
<div id="angies"></div>
<div id="est"></div>
<div id="pics">
<div id="logot"></div>
<div id="house"></div>
<div id="phone"></div>
</div>
#angies {height:124px;
width:347px;
margin-right:0px;
margin-top:0px;
float:right;
background-image: url(images/ang.jpg);
background-repeat:no-repeat;}
#est {height:16px;
width:165px;
margin-left:5px;
margin-top:5px;
background-image: url(images/est.jpg);
background-repeat: no-repeat;}
#pics {height:175px;
width:878px;
border:1px solid;
margin-left:auto;
margin-right:auto;}
#logot {height:169px;
width:360px;
border:1px solid;
float:left;
margin-bottom:0px;
background-image:url(images/logot.jpg);
background-repeat:no-repeat;}
#house {height:169px;
width:166px;
border:1px solid;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-image:url(images/house.jpg);
background-repeat:no-repeat;}
#phone {height:43px;
width:312px;
border:1px solid;
position:relative;
margin-bottom:0px;
margin-left:526px;
position:static;
background-image:url(images/phone.jpg);
background-repeat:no-repeat;}
p.s.
and how come these divs are going to the top with bottom margin of 0 pixels? It doesn't bother me this very moment, but i still want to know how come.
simple solution is make all of them float: left
#house { float: left; }
#phone { float: left; }
I have an image which is e.g. the width 450px, and a container which is only 300. Is it possible to center the image inside the container with CSS, when the width of the image isn't constant (Some images might be 450 wide, other 600 etc.). Or do I need to center it with JavaScript?
This any good? http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Proposition 1 :
.crop {
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
margin:-20px -15px -40px -55px;
}
Proposition 2 :
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:150px;
height:90px;
}
.crop img{
position:absolute;
top:-20px;
left:-55px;
}
proposition 3:
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px);
}
Proposition 4 (hold-school efficiency):
.container {
width:400px;
height:400px;
margin:auto;
overflow:hidden;
background:transparent url(your-image-file.img) no-repeat scroll 50% 50%;
}
Of course you will need to ajust the .css to suit your own needs
Carry on.
but instead of hiding part of theimage why don't you put it like
<div id="container" style="width: 300px">
<img src="yourimage" width="100%">
</div>
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.