I have been struggling with this annoying piece of code. You'd think I'd had enough practice with css, but as always, it is temperamental with me.
My problem is as follows, I have the following css:
.FORM ul li label {
margin-top: 50px; //<--------------THE PROBLEM
height: 20px;
max-height: 20px;
width: 100px;
min-width: 100px;
}
.FORM ul li {
list-style: none;
width: 500px;
height: 100px;
min-width: 500px;
min-height: 100px;
background: #ddd;
border-top: #eee 1px solid;
border-bottom: #bbb 1px solid;
padding: 10px 10px;
margin: auto;
}
ul {
background: #ccc;
padding: 10px 10px 10px 10px;
width: 530px;
margin: auto;
}
body {
background: #cfc;
padding: 0px;
margin: 0px;
}
.FORM {
background: #fcc;
}
the html it controls is:
<form class="FORM">
<ul>
<li>
<label for="workersAddr">Worker's Address:</label>
<input type='text' id='workersAddr' class='validate[required,minSize[5]]'/>
</li>
</ul>
</form>
notice how in the image below the margin-top: 50px; have no effect at all?
how do I solve this issue?
Vertical margins and paddings only have effect in block-level elements and <label> is an inline element. You can either emulate it with other properties or convert into an inline-block:
.FORM ul li label {
display: inline-block;
}
Use the line-height css attribute on the label. This will not increase the height of any visible background on the label, but will allow you to effectively add a margin.
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
Code
.topnav {
width: 50%;
display: inline-block;
background-color: black;
overflow: hidden;
}
.topnav a {
box-sizing: border-box;
color: white;
display: inline-block;
padding: 16px;
text-decoration: none;
font-size: 17px;
margin: 6px;
}
.topnav a:hover {
background-color: blue;
color: white;
}
.topnav a.active {
background-color: blue;
color: white;
}
.searchbar {
width: 50%;
float: right;
display: inline-block;
background-color: black;
overflow: hidden;
}
.searchbar input[type=text] {
float: right;
width: 80%;
box-sizing: border-box;
color: black;
display: inline-block;
padding: 15.5px;
outline: none;
margin: 6px;
border: 3px solid transparent;
transition: 0.1s;
}
.searchbar input[type=text]:hover {
border: 3px solid blue;
}
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</body>
</html>
As the title suggests, in order for both <div class = 'topnav'> and <div class = 'searchbar'> to have the same height, I can set <div class = 'searchbar'> padding to 15.5 pixels each.
padding: 15.5px;
Because of that, I'm having trouble understanding why. That is, I managed to get both<div> height to the same size by guessing the right padding, not something I want to be doing. Therefore, I'm asking for a systematic way to know how much padding I need.
I don't know if that will be good for you about height exactness... But certainly will easier to tweak. I used a CSS grid an just an additional div as a wrapper.
.topNavContainer {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 53px;
grid-gap: 6px;
align-items: center;
justify-content: space-between;
background-color: black;
box-sizing: border-box;
overflow: hidden;
border: 6px solid black;
}
.topnav a {
padding: 16px 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.topnav a.active,
.topnav a:hover {
background-color: blue;
color: white;
}
.searchbar input[type="text"] {
width: 100%;
padding: 16px 0;
color: black;
outline: none;
border: 3px solid transparent;
}
.searchbar input[type="text"]:hover {
border: 3px solid blue;
}
<div class="topNavContainer">
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</div>
So I think you're missing that border-box does not include margins (which might have thrown off your calculations). So if you look at the dev tools and remove the 15.5px padding style on you input tag, then scroll to the bottom, you'll see this nice looking thing:
Yes there is still padding on it, this is from another style (ignore it). Your counterpart div happens to have a height of 64px (on my browser at least), so let's subtract from 64 all the heights (except for the padding, since we will be replacing that) that the dev tools are showing:
64 - 15 - 3 - 3 - 6 - 6 = 31px <- the remaining space
31px / 2 = 15.5px
However, calculations are not ideal either. Specify your heights directly with pixels or percentages, or consider the other answers here.
I'm trying to make a list showing horizontally with a 1px border on the right except for the last one. For some reason, on chrome there is a little margin at the bottom but it does not show on Firefox. But on Firefox, there is a margin on the right(last li element) which does not show on chrome. Any ideas on what it could be? I honestly can't find it and I've been trying to fix this for a while now..
body {
font-family: "HelveticaNeue-Light", "Helvetica neue Light", sans-serif;
padding: 0;
margin: 0;
}
#menuBar {
width: 100%;
height: 40px;
background-color: #e0e0e0;
border-bottom: 1px solid grey;
}
#logo {
padding: 5px 0 0 20px;
font-weight: bold;
font-size: 120%;
float: left;
}
#buttonDiv {
float: right;
padding: 5px 10px 0 0;
}
#runButton {
font-size: 120%;
}
#toggles {
width: 256px;
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
#toggles li {
float: left;
border-right: 1px solid grey;
padding: 5px 7px;
}
li:hover {
background-color: blue;
}
.selected {
background-color: green;
}
<body>
<div id="wrapper">
<div id="menuBar">
<div id="logo">
Website Visualizer
</div>
<div id="buttonDiv">
<button id="runButton">Run Code</button>
</div>
<ul id="toggles">
<li class="toggle selected">HTML</li>
<li class="toggle ">CSS</li>
<li class="toggle ">JavaScript</li>
<li class="toggle selected" style="border:none">Result</li>
</ul>
</div>
</div>
edit: hey guys i fixed it. So basically i removed the border from the UL element and just added a border all around each individual li element.
On your #toggles remove:
#toggles {
/*width: 256px;*/
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
You need to change your code in #toggles as follows:
#toggles {
/* width: 256px; */
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
By removing the width on the container, you make sure that the width of the container is equal to the sum of all the widths of its children.
Then change your definition of #toggles lias follows:
#toggles li {
float: left;
border-right: 1px solid grey;
padding: 0 7px;
line-height: 29px;
}
By setting the line-heightto the container height, you make sure the children will occupy the full vertical space while aligning the text vertically (if you don't care about vertical alignment, you can also set height: 100%;)
I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs
1st sorry if the title is not 100% at the pont, i really have no idea how to compose it.
Anyway here is a simple problem with 100% width layout. I have a form that is inside a fluid container, it has - 1 input, 1 select, 1 button, they all are align inline (horizontal)
the problem when i minimize the window the button and then the select list they move down. which i dont want that.
Here is a example in the fiddle http://jsfiddle.net/4GSLE/ you can minimize the html part and you will see the problem.
How to make them to be in one line and not to move down?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>
Some CSS tweaking to the form, input, and select selectors should do the trick.
form {
padding: 0;
margin: 0;
display: block;
white-space: nowrap;
}
input, select {
display: inline-block;
height: 50px;
padding: 0 10px;
width: 66%;
border: 1px solid #d6d8db;
margin-right: 20px;
}
Demo Here
Side note: Unless you really need them, all those !important declarations will end up causing more trouble than solving issues. I'd avoid !important as much as possible.