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/
Related
Well the problem is that I have got an iframe from google maps within a div next to a div with the same css attributes but they are not inline side by side, though they are aligned on top off each other.
div.morecontent_holders {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
float: none;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
margin-top: 0px;
margin-bottom: 5px;
width: 90%;
min-width: 90%;
max-width: 500px;
min-height: 90%;
max-height: 1000px;
border-bottom: dashed 2px blue;
}
div.text1 {
position: relative;
display: inline-table;
float: center;
margin-top: 5px;
margin-bottom: 5px;
width: auto;
height: 200px;
min-width: 200px;
max-width: 500px;
border-left: solid 2px silver;
border-right: solid 2px silver;
background-color: silver;
font-weight: bold;
-webkit-border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
font-size: 1.4rem;
}
div.text1:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
<div id="page_1" class=morecontent_holders>
<div id="page_1" class=text1>
</div>
<div id="page_1" class=text1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082"
width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
div.morecontent_holders{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
float: none;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
margin-top: 0px;
margin-bottom: 5px;
width: 90%;
min-width: 90%;
max-width: 500px;
min-height: 90%;
max-height: 1000px;
border-bottom: dashed 2px blue;
}
div.text1{
position: relative;
display: inline-table;
float: center;
margin-top: 5px;
width: auto;
height: 200px;
min-width: 200px;
max-width: 500px;
border-left: solid 2px silver;
border-right: solid 2px silver;
background-color: silver;
font-weight: bold;
-webkit-border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 1px;
font-size: 1.4rem;
}
div.text1:hover{
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
<div id="page_1" class=morecontent_holders>
<div id="page_1" class=text1>
</div>
<div id="page_1" class=text1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75703.03243173788!2d-3.0722340453397394!3d53.634137210407246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b15315eb47ffb%3A0x9464ca1ad2094f88!2sSouthport!5e0!3m2!1sen!2suk!4v1473131011082" width="200" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</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/
When I delete the code for the menu border in CSS (not the header), nothing changes. I am trying to delete the border for the items in the menu as I want to input pictures which won't fit within the borders of each item. I delete #navigation li {
border: 1px solid #89cFF0; } and nothing changes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="wrap">
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li>Home</li>
<li>Videos
<ul class="sub">
<li>Vines</li>
<li>Pugs</li>
<li>Failing Dogs</li>
<li>Crazy Dogs</li>
<li>Funny Dogs</li>
</ul>
</li>
<li>Photographs</li>
<li>Articles</li>
<li>Contact</li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
<div>
</body>
</html>
#wrap {
width: 900px;
margin: 0 auto;
}
#page {
max-width: 850px;
min-width: 900px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
margin-bottom: 0px
}
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
top: 159px;
left: 80px;
}
.sub {
display: none;
}
ul.sub {
position: absolute;
bottom: 15px;
right: 79px;
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
}
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#navigation li:hover > ul.sub{
display: block
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 0px 0px 0px 5px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 10px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 5px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 5px;
text-align: center;
}
I then delete the borders but it is still there....
#wrap {
width: 900px;
margin: 0 auto;
}
#page {
max-width: 850px;
min-width: 900px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
margin-bottom: 0px
}
#navigation li {
position: absolute;
text-align: center;
top: 159px;
left: 80px;
}
#navigation , .sub {
list-style-type: none;
}
.sub {
display: none;
}
ul.sub {
position: absolute;
bottom: 15px;
right: 79px;
}
#navigation li {
text-align: center;
float: left;
list-style-type: none;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#navigation li:hover > ul.sub{
display: block
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 0px 0px 0px 5px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 10px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 5px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 5px;
text-align: center;
}
border: none; should do it. Are you sure the CSS isn't cached? Try Ctrl + f5 to reload page.
First of all: your separate CSS code differs from the CSS code beneath your HTML code ... for example #navigation li has an absolute positioning there.
But nevermind.
You're applying 2 different borders to each element in your menu.
First:
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
top: 159px;
left: 80px;
}
Second:
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
If you want to remove that border you have to remove it in both classes.
I want the button and the text to line up. I've used vertical align but it doesn't seem to be working. (So the button is centered with the input box)
Here is HTML:
<div class="elegantaeronamefinder">
<div>
<input type="text" id="search_name" name="search_name" />
<input type="submit" class="button" value="GO" id="search_button" name="search_button" />
</div>
</div>
CSS:
.elegantaeronamefinder{
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px; /*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px 4px 0px 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle; /*added in to align*/
}
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
margin-bottom: 20px;
margin-top: 5px;
}
Here is demo:
http://jsfiddle.net/5CN67/2/
Thank you in advance for your help!
The simple way would be to remove the margin settings from the rule .elegantaeronamefinder .button
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
}
Fiddle
You can remove vertical-align and make bigger height of input, like this
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
background: none repeat scroll 0 0 #FBFBFB;
border: 1px solid #CEE2E7;
box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset;
color: #888888;
font: 200 20px/20px Arial,Helvetica,sans-serif;
height: 32px;
margin-left: 5px;
margin-right: 6px;
outline: 0 none;
padding: 5px 4px 0 5px;
width: 250px;
}
http://jsfiddle.net/5CN67/9/
Also, you can remove margin from .elegantaeronamefinder .button{} and input will be on level of the middle of button.
You can use display: table + display: table-cell + vertical-align: middle
Fiddle
HTML:
<div class="elegantaeronamefinder">
<div class="wrapper">
<input type="text" id="search_name" name="search_name" />
<input type="submit" class="button" value="GO" id="search_button" name="search_button" />
</div>
</div>
CSS:
.elegantaeronamefinder {
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;
/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px;
/*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
display: table;
text-align: center;
}
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px 4px 0px 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle;
/*added in to align*/
}
.elegantaeronamefinder .button {
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
/*added in to align*/
margin-bottom: 6px;
margin-top: 5px;
}
.wrapper {
display: table-cell;
vertical-align: middle;
}
You have 'messed up' the vertical alignment due to the additional margin declarations on the .button class.
If you remove them they align:
JSfiddle Demo
CSS
.elegantaeronamefinder{
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px; /*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}
.elegantaeronamefinder input[type="text"],
.elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle; /*added in to align*/
}
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
}
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