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; }
Related
I have a group of columns that need to be centred inside a container div with a background colour of #eeeff3 so that when you zoom out the columns stay the same size and centred and the grey background stays 100% width.click the link to see the current html and css!
jsfiddle
Can anyone shed some light on the situation?
jsfiddle links require code
Remove float:left and add display:inline-block.
See updated jsfiddle
.container{
margin:0 auto;
background: #eeeff3;
width:100%;
height:400px;
text-align:center;
}
.col4{
width:270px;
height:400px;
border-right:2px solid white;
display:inline-block;
}
.container{
margin:0 auto;
background: #eeeff3;
width:100%;
height:400px;
text-align:center;
}
.col4{
width:270px;
height:400px;
border-right:2px solid white;
display:inline-block;
}
Try this css work well:
.container{
margin:0 auto;
background: #eeeff3;
width:100%;
height:400px;
text-align:center;
}
.col4{
float:left;
width:270px;
height:400px;
border-right:2px solid white;
display:inline-block;
}
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.
I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
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.
In this I want the div #intro to float below the div #navtop.
At the moment it hovers below on the right side.
<style>
#wrapper {
width:850px;
height:auto;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
}
#header {
height:100px;
width:850px;
margin:0;
margin-top:25px;
background:url(img/header.png) no-repeat #000 ;
border:2px #000 solid;
}
#navtop {
width:auto;
height:45px;
float:left;
background:#000;
padding-right:8px;
}
#navtop a {
width:500px;
margin:0px;
margin-left:8px;
padding-left:4px;
padding-right:4px;
color:#FFF;
padding-bottom:0px;
text-decoration:none;
}
#logo {
height:40px;
width:40px;
margin-left:4px;
}
#navtop a:link {
background:#666;
}
#navtop a:hover {
color:#999;
}
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:right;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px;
padding:0px;
}
body {
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
Home
About
tour
photos
contact
</div>
<div id="intro">
<img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
<div id="about"> <h2>DJ TECHIE LUNCHBOX</h2>
<p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
leave any with a head without for for chips and shandy . chocolate malnurishment bring a chip bang mismosh to her long term goals
.</p>
.
</div>
</div>
</body>
It's because you have float: left; on #intro.
Try this:
#intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
edited to make the #about div float next to #intro div.
If you still want that floated to the left of whatever the other box (I assume you do), try adding a clear: left to the #intro CSS. This will cause the box to break down to below whatever element is causing it to move to the right and start a new line.
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
clear:left;
}
don't use float:left on #navtop. It wants to line #navtop and #intro divs beside eachother
I am not 100% sure I understand what you are trying to accomplish but i will take a stab at it
you could target your #navtop with a rule
#navtop{clear: right;}
or simply remove the float: left from the #intro
either one of these will move the #intro under the nav
however if you want the intro to be next to something you will have to use clear:right on navtop