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/
Related
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 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 div below two floating divs (one floating left and the other right). As I opened up the element inspector I noticed something odd. Why is it that a div below that with the css property clear: both overlaps the top two? Also, when I change the height of the div, the element inspector shows that the div no longer contains its contents. Here are two screenshots to show what I mean. The code is below the screenshots.
No height set in css:
Height of class "tags" set to 200px in css:
HTML for page
CSS for page
You have syntax errors in your CSS. You have some classes inside of other classes which won't work and also you have some unclosed brackets. I fixed it below
#container {
width: 900px;
min-height: 500px;
margin: auto;
background: #DDDDDD;
}
.entry {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
.name {
padding: 0px 10px;
}
.tag {
display: inline-block;
}
.link {
border: 1px solid black;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.info {
width: 610px;
margin: auto;
}
.input-text_area {
width: 300px;
height: 250px;
padding: 0;
border: none;
resize: none;
}
.input-text_field {
width: 300px;
padding: 0;
margin: 0;
border: none;
}
.input-button {
width: 75px;
height: 50px;
margin: 2px 0px;
display: block;
float: right;
}
select {
float: right;
margin: 0px;
}
.right_half {
float: left;
padding: 1px;
height: 300px;
width: 300px;
}
.left_half {
float: left;
padding: 1px;
height: 300px;
}
.tags {
height: 200px;
}
label {
display: block;
}
.text_field {
width: auto;
}
.block-label {
display: block;
}
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%;
}
How would you make the main_content stretch to the header, footer, right and left side bar.
Just looking for a 3 column layout with header and footer. I've been searching and haven't found any examples that do this.
<style type="text/css">
#header
{
height:100px;
border: 1px solid blue;
}
#left_side_bar
{
border: 1px solid blue;
width: 100px;
float: left;
height: 300px;
}
#main_content
{
border: 1px solid green;
float: left;
width: ?;
height: ?;
}
#right_side_bar
{
border: 1px solid blue;
width:100px;
height: 300px;
float: right;
}
#footer
{
border: 1px solid blue;
clear:both;
height: 100px;
}
</style>
<div id="header"></div>
<div id="left_side_bar"></div>
<div id="main_content"></div>
<div id="right_side_bar"></div>
<div id="footer"></div>
Well, here is a demo with position:fixed, although there are plenty of sites out there which can generate the mark-up and CSS for you. For example the very nice CSS Layout Generator
CSS
#Header {
float: left;
clear: both;
width: 100%;
}
#Left_Side_Bar {
float: left;
width: 10%;
}
#Main_Content {
float: left;
width: 80%;
}
#Right_Side_Bar {
float: left;
width: 10%;
}
#Footer {
float: left;
clear: both;
width: 100%;
}
Here you can find example of most of the 3 column layouts (fixed, fluid, mixed...) -> CSS Layouts