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%;
}
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
I try to create element with nested border like the following image. But there are some white-space between these 2 containers without no reason.
I can reproduce this issue on Chrome and Edge.
HTML
</div>
</div>
</div>
CSS
#container1 {
width: 200px;
height: 200px;
border: 5px solid blue;
}
#container2 {
width: 200px;
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
#bar {
background: orange;
height: 24px;
width: 100%;
}
https://jsfiddle.net/cjg9zf1o/9/
Thanks,
I'm new to CSS and was looking round the web to find a code to auto rezie images and the code i found is doing that perfectly. But the properly is, it reizes with some red dotted line around the image and when i try to edit, the whole image dissappears. can please someone help me out on how to get rid of the red dotted line while image shows up.
<style type="text/css">
#holder {
width: 500px;
margin: 0 auto;
}
.tile {
padding: 10px 15px;
border: 1px solid black;
width: 300px;
height: 300px;
display: table;
}
.tile-layout {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.tile img {
outline: 1px dashed red;
width:100%;
}
</style>
Get rid of the outline property :
<style type="text/css">
#holder {
width: 500px;
margin: 0 auto;
}
.tile {
padding: 10px 15px;
border: 1px solid black;
width: 300px;
height: 300px;
display: table;
}
.tile-layout {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.tile img {
width:100%;
}
</style>
outline is a CSS2 property almost similar to the border one
Here is an article about that : http://css-tricks.com/almanac/properties/o/outline/
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%;}
I am new to CSS and I am trying to make my first website as css but I am having a problem getting the two boxes to align side by side for the body and the four boxes above that don't stay next to each other. I have played around with Float and position with no luck.
You can see the site here: http://gdisinc.com/barker/default.php
I'm trying to get it to look like this: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Could you please tell me what I am doing wrong and how I can fix it? Thank you!
just updated your css with my css that will work perfectly there were few bugs you made so i sort it out those points so now its working fine updated your with mentioned below css :-
CSS
div#main {
margin: auto;
overflow: hidden;
width: 902px;
}
div#outerbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: left;
height: 300px;
width: 660px;
}
div#innerbox {
background-color: #4D1516;
border: 1px solid #000000;
height: 277px;
margin-left: 10px;
margin-top: 10px;
width: 640px;
}
div#sideouterbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: right;
height: 300px;
width: 222px;
}
First you're at the very limit in box width, try making it a bit smaller
after that use
display:inline-block;
if the sum of the boxes width fit in the container you should have no problem.
Hope this helps
Solution without floats and weird overflow:hidden statements, just standard positioning...
div#main {
margin: auto;
position: relative
width: 902px;
}
div#outerbox {
border: 2px solid white;
height: 300px;
width: 669px;
background-color: #A2282C;
position: absolute;
}
div#innerbox {
margin: 10px;
border: 1px solid black;
height: 277px;
background-color: #4D1516;
}
div#sideouterbox {
border: 2px solid white;
height: 300px;
width: 222px;
background-color: #A2282C;
position: absolute;
right: 0;
}
div#sideinnerbox {
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
height: 280px;
width: 198px;
background-color: #4D1516;
}
Just copy this over your styles and you should be fine.