Here is my fiddle: http://jsfiddle.net/kasper90/GB7bs/6/
I want the main div to be as big as possible, positioned right to the toggle div.
How can I do this ? Any help is really appreciated :)
Html:
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide",{ direction: "left" }, 1000 );
});
</script>
<div id="main"><object data="http://euclidthegame.com/mathexchange/5.svg" type="image/svg+xml"></object></div>
Css:
#toggle {
float: left;
width: 100px;
height: 800px;
border: 1px solid black;
background: #ccc;
}
#main {
float: right ;
width: 100%;
height:800px;
border: 1px solid black;
}
Yo should use width:auto in the main container and remove the floating:right.
This should be your css:
#toggle {
float: left;
width: 100px;
height: 800px;
border: 1px solid black;
background: #ccc;
}
#main {
height:800px;
border: 1px solid black;
width: auto;
}
Regards
It looks to me like you can get rid of the float:right and width:100% on your main div, and achieve what you want.
http://jsfiddle.net/GB7bs/4/
I have used this solution:
#main {
position: absolute;
height:800px;
border: 1px solid black;
width: 100%;
z-index: 1;
}
#toggle {
position:absolute;
width: 200px;
height: 800px;
border: 1px solid black;
background: #ccc;
z-index:2;
}
#toggle {width:10%;}
#main {width:89%;}
Related
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
I have the following code jsbin. Is it possible to have vertical scroll when messages overflow the wrapper? Thanks!
replace your css with this css demo
#wrapper {
position: relative;
height: 400px;
border: 1px solid #AAA;
margin-bottom: 20px;
}
#list {
position: absolute;
bottom: 0;
width: 100%;
max-height:100%;
overflow-y: auto;
}
.message {
background-color: orange;
padding: 10px;
border-bottom: 1px solid red;
}
I have a problem to stick a picture stick to the right side of the page.
Html code:
<img class="displayed" src="achtergrond.jpg" alt="achtergrond">
Css code:
.displayed {
width: 100%;
height: 400px;
margin-right:-8px;
margin-left:-8px;
margin-bottom: 100px;
}
I get the problem that the picture does not make contact with the right side of the page, but i set "margin-right: -8px"
Thanks for the help
Here's a FIDDLE
CSS
.container {
width: 400px;
height: 400px;
background-color: red;
border-top: 2px solid red;
}
.myimage {
border: 0px solid red;
width: 100%;
margin: 40px auto;
}
img {
width: 100%;
}
I have full-width div with a background image in it. The background image has people in it and I'd like to show a tooltip when you hover over each person.
I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
and Css something like this:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
Unfortunately depending on the size of the screen the divs won't line up with the people... What's the best way of solving this?
I posted the above code to cssdesk here:
http://cssdesk.com/vmZSD
Thanks!
Here is a FIDDLE that might help you.
CSS
.americangothic {
float: left;
width: 315px;
height: 384px;
background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
background-size: 315px 384px;
position: relative;
}
.changemediv1 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: red;
border: 3px solid gray;
}
.changemediv2 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: blue;
border: 3px solid gray;
}
.face1:hover ~ .changemediv1 {
background-color: green;
}
.face2:hover ~ .changemediv2 {
background-color: green;
}
.face1 {
width: 80px;
height: 110px;
border: 0px solid red;
position: absolute;
top: 70px;
left: 35px;
}
.face2 {
width: 80px;
height: 130px;
border: 0px solid red;
position: absolute;
top: 30px;
left: 180px;
}
img {
width: 315px;
height: 384px;
}
Just remember that all the divs need to be in the same container.
i put div with class="inner-box2" after div with class="inner-box".
HTML:
<div class="box">
<div class="inner-box"></div>
<div class="inner-box2"></div>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box {
border: solid 10px blue;
position: absolute;
height:150px;
width:380px;
}
.inner-box2 {
border: solid 10px green;
}
Now, I need to show div(inner-box2) after div(inner-box) but in my Code div(inner-box2) show in under div(inner-box). how to fix this? See Online Demo
If you are putting an element below the absolute position, you can add a margin to bump down your next element the distance required to "skip" the absolute item's space and presence. That way in the code, the item is still below your absolute item, but still visually appears below it.
Absolutely-positioned items need to have top|bottom + left|right defined.
Is this what you are shooting for http://jsfiddle.net/4bqzz/22/? I've modded your css a bit, and then floated the boxes left. You can play around with the sizes, borders, etc... But I assume they were so thick just to demonstrate where they were. Like so:
.inner-box {
border: solid 5px blue;
float:left;
height:150px;
width:360px;
}
.inner-box2 {
border: solid 5px green;
float:left;
height:150px;
width:20px;
}
if you want to use absolutely positioned elements in this example, this would be how to do it: http://jsfiddle.net/4bqzz/106/
.box
{
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box
{
border: solid 10px blue;
position: absolute;
height: 150px;
width: 380px;
}
.inner-box2
{
border: solid 10px green;
position: absolute;
top: 170px;
height: 210px;
width: 380px;
}