In my current code, an image that is uploaded is on top of the table, but since the layout of the website I'm creating is so wide, I want to put the image next to the table, how do I fix my code to make that happen?
My show file
<body>
<div class = "head1">
<h1>Inventory Information</h1>
<div class = "image1" >
<img src= "http://dx.deucex.com/i/logo.png" >
</div>
</div>
</body>
<aside>
<%= render #inventory.photos %>
<h3>Add a photo:</h3>
<%= render 'photos/form' %>
<div class = "inventory_border" >
<table>
<tr>
<p>
<td><strong>Product Name:</strong></td>
<td><%= #inventory.product_name %></td>
</p>
</tr>
<tr>
<p>
<td><strong>Brand Name:</strong></td>
<td><%= #inventory.brand_name %></td>
</p>
</tr>
#more code...
</table>
</div>
<%= link_to 'Back', inventories_path %>
</aside>
css
body
{
background: #e6f2ff;
}
input[type=text]{
width: 20%;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
}
textarea {
width: 20%;
height: 10px;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
resize: none
}
h1{
background-color: #ccccff;
width: 400px;
height: 50px;
border: 7px solid #333333;
border-radius: 20px;
padding-left: 20px;
padding-top: 10px;
margin-left: 5px;
margin-top: 30px;
border-style: double;
}
.vend2{
background-color: white;
width: 1800px;
margin-left: -8px;
}
.invent{
background-color: white;
width: 1800px;
margin-left: -8px;
}
table{
width: 800px;
}
th{
background-color: #b3b3cc;
border-radius: 4px;
border: 2px solid black;
width: 365px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
input[type = buttton], input[type = submit], {
background-color: #ccddff;
border: solid;
border-radius: 3px;
color: black;
padding: 16px 20px;
text-decoration: none;
cursor: pointer;
}
input[type = buttton]:hover, input[type = submit]:hover, {
background-color: blue;
border: solid;
border-radius: 3px;
color: white;
padding: 16px 20px;
text-decoration: none;
cursor: pointer;
border-color:black;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
h2{
background-color: red;
border: none;
width: 750px;
}
.head{
display:flex;
background-color: #e6e6e6;
min-width: 140%
}
.head1{
display:flex;
background-color: #e6e6e6;
min-width: 140%
}
div.head {
border-bottom: 3px outset black;
border-top: 30px outset gray;
margin-top: -50px;
margin-left: -8px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-bottom: 60px;
}
div.head1 {
border-bottom: 3px outset black;
border-top: 30px outset gray;
margin-top: -50px;
margin-left: -8px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-bottom: 60px;
}
div.header{
font-size: 40px;
margin-left: 50px;
}
div.image1{
margin-left: 100px;
}
.inventory_border{
border-top: 3px solid black;
max-width: 50%
}
.vendor_border{
border-top: 3px solid black;
max-width: 70%
}
div.field{
background-color: #e6e6e6;
max-width: 30%;
border: 1px solid black;
}
aside{
margin-left: 50px;
}
article{
margin-left: 800px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
Related
I wanted to set up an image as a transparent background image for my website but anything I try just doesn't wanna work. I've seen on the internet how it works for others, but for me it just doesn't. I converted my image from png to jpeg, but that didn't brought success
Here is my full CSS file
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: url(DS Organization logo.jpg)
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #050505;
text-align: center;
border: 1px solid #000307;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
background: rgb(99, 99, 99);
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #050505;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
The url-path is treated as a string and it needs to be enclosed in quotes. For more information on url(), visit mdn
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-inner overflow hidden ,there have a border in there . it can't cover all .
how can i cover all ? there is border there ?
Update .powder-inner class using border-top-left-radius: 0%; & border-top-right-radius: 0%; then remove top green curve.
See output is browser zoom it and see green curve.
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden !important;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow:hidden !important;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style=""></div>
</div>
</div>
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
For this particular example you ca do this:
.wrapper{
display: inline-block;
}
.outter-h2 {
float: left;
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
margin-top: 4%;
}
.outter-span {
float: left;
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 0 10px;
}
<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>
You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)
All you have to do is add this line to .outer-span:
box-shadow:0 0 5px 20px #FFF;
This solution keeps the HTML intact.
Demo:
body {
background: #FFF;
}
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
position: relative;
z-index:1;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
position: relative;
z-index:3;
box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2>
.outter-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 10px;
float:left;
}
try this i think this is the solution you wanted. please let me know if i am correct or not
This is done(corrected) exactly what you want.
.outer-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outer-span {
background: #fff;
padding: 0px 10px;
color: #bec3c7;
margin: 10px;
float:left;
}
<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO
I have seen other complex effects being done with just CSS like the stacked paper effect:
http://jsfiddle.net/thefrontender/LwW7g/
<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>
.slide {
float: left;
display: block;
position: relative;
background: #FFF;
height: 10em;
width: 10em;
padding: 1em;
border: solid 2px #000;
margin-right: 2em;
}
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: -1em -1em #666,
-2em -2em #333;
}
My need is very similar except the 2 outer edges need to connect with the main frontal div:
Anyone know of any tricks that can make this possible?
If you're able to use CSS pseudo-elements:
.slide {
position: relative;
width: 200px; /* arbitrary, adjust to taste */
height: 500px; /* arbitrary, adjust to taste */
border: 2px solid #000;
border-right-width: 40px; /* this is the 'depth' of the 'sides' */
border-bottom-width: 40px;
}
.slide::before {
content: '';
position: absolute;
top: -2px; /* to cover the top of the border */
left: 100%;
border: 20px solid #fff;
border-bottom-color: transparent; /* allows the containing element's border to be seen */
border-left-color: transparent;
}
.slide::after {
content: '';
position: absolute;
top: 100%;
left: -2px;
border: 20px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
}
JS Fiddle demo.
The above uses the following HTML:
<div class="slide">Title</div>
You could stack multiple box shadows to attain the effect you're after:
.slide {
height: 200px;
width: 100px;
padding: 1em;
border: solid 2px #000;
}
.expandable-slide {
margin: 10px 10px 0 10px;
box-shadow: 1px 1px #999,
2px 2px #999,
3px 3px #999,
4px 4px #999,
5px 5px #999,
6px 6px #999,
7px 7px #999,
8px 8px #999,
9px 9px #999,
10px 10px #999;
}
jsFiddle example
You could do it this way (not the most elegant but works like a charm):
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: 0.05em 0.05em #555,
0.1em 0.1em #555,
0.15em 0.15em #555,
0.2em 0.2em #555,
0.25em 0.25em #555,
0.3em 0.3em #555,
0.35em 0.35em #555,
0.4em 0.4em #555,
0.45em 0.45em #555,
0.5em 0.5em #555
;
}
fiddle
.expandable-slide {
position: relative;
margin: 2em 2em 0 2em;
box-shadow: 20px 25px 0px 0px #333;
}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;
}
I use span inside div to simulate whole div as a link. It works well on Chrome & FF, but in IE, it doesn't.
I use an imported font (awesome font) to make appear an icon on the main div (with "before" statement in css). The div appears to be clickable just a little before and just a little after the icon. In FF and Chrom, the whoole icon is clickable... How to make it work in IE?...
css:
.tiremenuadmin{
font-family: 'fontawesome';
display: block;
font-size: 30px;
text-shadow: 0px 0px 7px #000000;
padding: 7px;
float: right;
width: 46px;
text-align: center;
margin: 7px 7px 0 0;
background-color: #364f71;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.7;
}
.tiremenuadmin:before{
content: "\F013";
}
.menuadmin{
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: bold;
color: #677889;
text-shadow: 1px 1px 0 #FFFFFF;
}
.enveloppe_menuadmin{
left: 50%;
margin-left: -10px;
margin-top: -70px;
width: 486px;
height: 50px;
position: fixed;
background: #364f71;
z-index: 100;
padding: 10px 12px 10px 10px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
.align_menuadmin{
left: -50%;
}
.cover_admin{
background: #364f71;
float: right;
width: 79px;
height: 8px;
left: 418px;
position: absolute;
}
.env_menuadmin{
width:100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f3f3f3;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.adminmenu, .adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_4, .adminmenu_5, .adminmenu_6, .adminmenu_7{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontawesome';
}
.adminmenu_00{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontello-home';
font-size: 21px;
top: 1px;
}
.adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_5, .adminmenu_6, .adminmenu_7 {
border-left:1px solid #fff;
border-right:1px solid #d6d6d6;
}
.adminmenu_00{
border-right:1px solid #d6d6d6;
}
.adminmenu_4{
border-left:1px solid #fff;
}
.adminmenu_0:before{
content: "\F007";
}
.adminmenu_00:before{
content: "\E0E0";
}
.adminmenu_1:before{
content: "\F085";
}
.adminmenu_2:before{
content: "\F0E0";
}
.adminmenu_3:before{
content: "\F059";
}
.adminmenu_4:before{
content: "\F011";
}
.adminmenu_5:before{
content: "\F0C1";
}
.adminmenu_6:before{
content: "\F15C";
}
.adminmenu_7:before{
content: "\F055";
}
.adminmenu_1 span, .adminmenu_2 span, .adminmenu_3 span, .adminmenu_4 span, .adminmenu_5 span, .adminmenu_6 span, .adminmenu_7 span, .adminmenu_0 span, .adminmenu_00 span {
position: absolute;
width: 100%;
height: 50px;
right: 0px;
top: 0;
z-index: 1000;
}
.adminmenu:hover, .adminmenu_00:hover, .adminmenu_0:hover, .adminmenu_1:hover, .adminmenu_6:hover, .adminmenu_7:hover, .adminmenu_2:hover, .adminmenu_3:hover, .adminmenu_4:hover, .adminmenu_5:hover{
color:#7D92A7;
}
html:
<div class="enveloppe_menuadmin" style="opacity: 1; margin-top: -15px;">
<div class="align_menuadmin">
<div class="env_menuadmin">
<div class="menuadmin">
<div class="adminmenu_00"><span></span></div>
<div class="adminmenu_0"><span></span></div>
<div class="adminmenu_1"><span></span></div>
<div class="adminmenu_5"><span></span></div>
<div class="adminmenu_2"><span></span></div>
<div class="adminmenu_6"><span></span></div>
<div class="adminmenu_7"><span></span></div>
<div class="adminmenu_3"><span></span></div>
<div class="adminmenu_4"><span></span></div>
</div>
</div>
<div class="tiremenuadmin" style="opacity: 1;"></div>
<div class="cover_admin"></div>
</div>
</div>
Demo: http://jsfiddle.net/namkc/
Found:
<div class="adminmenu_00"><span></span></div>