Need your help about simple css question :
How to auto top div using display: inline block and vertical-align: top with my case below?
The css here :
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
margin-top: 5px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
and here is the fiddle
Help much appreciated...
Use multiple columns:
<div class="content_wall_column">
<div class="content_wall">...</div>
<div class="content_wall">...</div>
</div>
<div class="content_wall_column">
<div class="content_wall">...</div>
</div>
See my JSFiddle.
change your css for class content_wall like this
.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
}
Removed the margin and the padding;
Demo Fiddle
or even better
give the padding first then remove the top padding
like this
.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
padding-top:0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
}
Fiddle for this
Remove margin-top: 5px from .content_wall, but you probably don't want them to touch each other, so don't remove it, but change it to margin-bottom: 5px.
Then add following to your stylesheet:
body, html {
margin: 0;
padding: 0;
}
Check the updated fiddle
Related
I've been trying to style a div and put border and padding to see better the structure, but do not work.
Below the code:
#div1ad {width: 96%; height:40px; max-width: 1140px; min-width: 200px; margin-bottom: 5px; padding: 0 0 0 45px; border: 1px dashed red;}
#div1ad div {display: inline-block; margin: 2px 10px 0 1px; font-family: Arial; border: 1px dashed black;}
#div1ad>form>input{float: right; margin-right: 5px; width:15em; height:2.5em; color: #3c4043; font-family: Verdana; font-size: 12px; background-color: #f8f9fa; border-radius: 5px 5px; border: 0}
#div1ad>form>input[type=submit]:hover {border: 1px solid #DCDCDC; box-shadow: 0px 2px 2px silver;}
#div1ad>form>input[type=submit]:focus {outline: none;}
#div1ad>form>input[type=submit]:active {border: 1px solid #349bff;}
<div id="div1ad">
<form action="index.html">
<input type="submit" value="Search">
</form>
</div>
#div1ad {width: 96%; height:40px; max-width: 1140px; min-width: 200px;
margin-bottom: 5px; margin:2%; border: 1px dashed red;}
#div1ad div {display: inline-block; margin: 2px 10px 0 1px; font-
family: Arial; border: 1px dashed black;}
#div1ad>form>input{float: right; margin-right: 5px; width:15em;
height:2.5em; color: #3c4043; font-family: Verdana; font-size: 12px;
background-color: #f8f9fa; border-radius: 5px 5px; border: 0}
#div1ad>form>input[type=submit]:hover {border: 1px solid #DCDCDC; box-
shadow: 0px 2px 2px silver;}
#div1ad>form>input[type=submit]:focus {outline: none;}
#div1ad>form>input[type=submit]:active {border: 1px solid #349bff;}
fiddle link for refrence
https://jsfiddle.net/tushar22/tucgf8mw/3/
So i'm butting a border around a div like so
#menu{
margin: 0px;
padding: 100px 0px 0px 20px;
float: left;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-radius: 0px 10px 10px 0px;
}
<div id="menu">
<p>Hello</p>
</div>
But the border ignores the padding or something as can be seen on the image
Image
According to CSS Box Model Border is right in between margin and padding.
CSS Box Model
I am not sure exactly how do you want your design to be but, you can try that shorthand property you used in padding, in margin, Like this:
#menu{
margin: 100px 0px 0px 20px;
padding: 5px;
float: left;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-radius: 0px 10px 10px 0px ;
}
I hope this is what you want.
A simple example is below. for further clarifications visit w3schools
<p class="round3">Roundest border</p>
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
Try these values:
#menu{
margin: 0px;
padding: 100px 0px 0px 20px;
//padding: top right bottom left
float: left;
border: 1px solid black;
border-radius: 10px ;
}
Try this, this is working for me
#menu p{
text-align: center;
margin: 0 auto;
border: 1px solid black;
padding: 50px;
border-radius: 20px;
width: 300px;
}
<div id="menu">
<p>Hello</p>
</div>
If the padding has four values:
padding:10px 5px 15px 20px;
This means:
- top padding is 10px
- right padding is 5px
- bottom padding is 15px
- left padding is 20px
And similar is for border-radius:
border-radius: 15px 50px 30px 5px;
(first value applies to top-left corner, second value applies to top-right corner,third value applies to bottom-right corner, and fourth value applies to bottom-left corner)
So you can try this:
#menu {
margin: 0px;
padding: 100px 0px 0px 20px;
float: left;
border: 1px solid black;
border-radius: 10px;
}
div {
margin: 10px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
vertical-align: top;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow-up"></span> An up arrow
</div>
<div>
<span class="arrow-down"></span> A down arrow
</div>
https://jsfiddle.net/dL1od5tz/8/
I would like to align them so that the bottom of the arrow is aligned with the bottom of the text. The vertical-align doesn't seem to do anything and setting margins and padding doesn't do the trick either. I am out of ideas. Thanks!
How about making them each inline-block?
div {
margin: 10px;
}
.arrow {
display: inline-block;
}
.up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow up"></span>
<span>An up arrow</span>
</div>
<div>
<span class="arrow down"></span>
<span>A down arrow</span>
</div>
Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:
Broken in Safari
... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.
HTML:
<div class="input-with-icon">
<div class="icon">X</div>
<div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>
CSS:
.input-with-icon .icon {
float: left;
background-color: #fff;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
padding: 13px 0 14px 10px;
color: grey;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
.input-with-icon .input {
overflow: hidden;
}
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
}
Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.
https://jsfiddle.net/r08gxre3/1/
Any help would be much appreciated, thanks guys! :)
Just add margin: 0px; to your input element. It should be that!
Like:
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
margin: 0px;
/* or just margin-top: 0px; */
}
Fiddle: https://jsfiddle.net/bbdkzuyn/
Please visit the 'jsfiddle' Code, where the output can be seen. When hover displays the menu text, the background of the text field is transpernt + and lower zindex. I haven't set any transparency or zindex to the menu.
I have tried every possible technique to get it resolved but no luck.
.control-menu {
float: left;
width: 50px;
background-color: #F0F0F0;
height: 380px;
border-right: 1px solid #e0e0e0;
z-index: 100;
}
.control-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.btn {
position: relative;
display: block;
text-decoration: none;
background-color: #e0e0e0;
padding: 15px 20px 10px 20px;
text-align: center;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
text-shadow: #666666 1px 1px 1px;
}
.btn-name {
display: none;
border-top: 1px solid #f0f0f0;
padding-top: 16px !important;
}
.btn:hover .btn-name {
display:inline;
background-color: #e0e0e0;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
.btn.active {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
can someone please guide solution?
just add
z-index:200
to the .btn, didn't change any positioning fiddle
just add position: relative; and z-index: 1000;
.btn:hover .btn-name {
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
position: relative;
z-index: 1000;
}
in the btn:hover .btn-name add position relative and z-index: 1
.btn:hover .btn-name {
/* add this */
position: relative;
z-index: 1;
/* you code */
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
here the fix : jsfiddle