Please help me, i am having a tough time with a box shadow, i've been looking for some time now and didn't find a solution
https://jsfiddle.net/4xqavefz/ .input1 / .input2 / .input3
Above is the whole code, in css you are looking for the .input1 ,.input2, and .input3
I am trying to make the box shadow to be seen through the input like below image
image
You could keep the shadow as it is (it falls outside the element) and add in the rest of the coloring with a background-image which is a linear-gradient.
This snippet puts that background-image displaced by 12px (=14px minus a border width).
#font-face {
font-family: futuraptbook;
src: url(../fonts/futuraptbook.ttf);
}
#font-face {
font-family: futuraptdemi;
src: url(../fonts/futuraptbook.ttf);
}
body {
background: black;
}
.block {
display: block;
}
.center {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 185;
height: 161;
}
.p1 {
color: white;
font-size: 24px;
text-align: center;
width: 620px;
height: 63px;
line-height: 32px;
font-family: futuraptbook;
margin-bottom: 100px;
}
.th1 {
color: white;
font-size: 32px;
line-height: 43px;
font-family: futuraptdemi;
padding-bottom: 30px;
}
.age {
font-size: 15px;
text-align: left;
line-height: 20px;
font-family: futuraptdemi;
color: white;
letter-spacing: 1.5px;
}
td input[class^='input'],
td input[class^=" input"] {
width: 176px;
height: 60px;
border: 2px solid #FFFFFF;
background: rgba(0, 0, 0, 0);
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
box-shadow: 14px 14px 0px 0px #54B3A1;
margin-right: 40px;
color: white;
font-size: 18px;
font-family: futuraptbook;
text-align: center;
}
td input[class^='input']:focus,
td input[class^=" input"] {
box-shadow: 0px 0px 0px 0px black;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
background-image: linear-gradient(transparent, transparent);
}
td input[class^='input']:valid,
td input[class^=" input"] {
box-shadow: 14px 14px 0px 0px #54B3A1;
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: 12px 12px;
background-repeat: no-repeat;
width: 218px;
margin-right: -1px;
margin-left: -1px;
border-radius: 0px;
}
.btn {
border-radius: 27px;
background: #D94016;
width: 300px;
height: 50px;
margin-top: 50px;
}
.ftr {
position: relative;
text-align: center;
width: 100%;
margin-top: 100px;
margin-bottom: 40px;
}
.under {
text-decoration: none;
position: relative;
}
.under:after {
position: absolute;
content: '';
height: 1px;
bottom: -4px;
width: 75%;
background: #54B3A1;
left: 0px;
}
.logo:hover {
cursor: pointer;
}
.cookiesdiv {
border: 1px solid white;
padding: 10px;
bottom: 0px;
width: 942px;
}
.pcook {
width: 95%;
font-size: 15px;
text-align: left;
color: white;
font-family: futuraptbook;
}
.ckbtn1 {
border-radius: 27px;
background: #54B3A1;
width: 72px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
.ckbtn2 {
border: 1px solid white;
border-radius: 27px;
background: black;
width: 134px;
height: 27px;
color: white;
font-family: futuraptdemi;
font-size: 13px;
}
<html>
<head>
<link rel="stylesheet" href="css/agev.css">
</head>
<body>
<img src="images/viennalogo.png" class="logo center block">
<div>
<p class="p1 center">Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
</div>
<table class="center">
<tr>
<th colspan="3" class="th1">WHEN WER<span class="under">E Y</span>OU BORN</th>
</tr>
<tr>
<td><label class="age" for="day">DAY (DD)</label></td>
<td><label class="age" for="month">MONTH (MM)</label></td>
<td><label class="age" for="year">YEAR (YYYY)</label></td>
</tr>
<tr>
<td><input type="text" class="input1" name="day" required></td>
<td><input type="text" class="input2" name="month" required></td>
<td><input type="text" class="input3" name="year" required></td>
</tr>
<tr>
<td colspan="3"><button class="btn center block">I AM OF LEGAL DRINKING AGE</button></td>
</tr>
</table>
<footer class="ftr">
<img src="images/facebooklogo.png">
<img src="images/instalogo.png">
<img src="images/twitterlogo.png">
</footer>
<div class="cookiesdiv center">
<table>
<tr>
<td>
<p class="pcook">We use cookies on our website to give you the most relevant experience. By clicking “Accept”, you consent to the use of ALL cookies. Alternatively, you may click “Cookie Settings” to provide a controlled consent.</p>
</td>
<td>
<button class="ckbtn1">ACCEPT</button>
</td>
<td>
<button class="ckbtn2">COOKIE SETTINGS</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Note - to prevent having to repeat the settings for each of the 3 inputs the snippet instead selects by the class beginning with 'input'. You will want to refine that if there is more structure added later to be sure of getting the right elements.
I noted that there was no validation in the sense of making sure that the numbers typed were both numbers and of the right length, but appreciate this is a different question.
The issue is that box-shadow wraps around an element, so you cant use box-shadow here instead you should use an absolute div like in the below example
<td>
<input type="text" class="input1" name="day" required>
<div style="
position: absolute;
width: 80%;
height: 100%;
background: #54b3a1;
top: 16px;
left: 16px;
z-index: 22;
">
</div>
</td>
working example https://jsfiddle.net/ahforcuw/1/
Related
I'm very new to css, html and asp.net. I'm trying to clone a website in order to learn web tech concepts. Well, when i write everything in inline css, everything works fine. But when put these inline css codes into an external file, it's all messed up. How can i fix this? I always face this trouble when I use external css. Some of my previous codes are affecting my following or later codes and I face this trouble.
I don't understand how css works. I use classes with dots, ids with # but can't uderstand yet how to put them in an order between my html codes.
I want to add a JSFiddle When I hover on recipes there's a new div pops up. There are 3 new divs in that popped up div. The 1st div has a list holding the info of soup, legume etc. I want those 3 divs stay next to each other. I want to be able to style them. I don't know how to style nested elements by using class and id. This leads to trouble. To clarify nested elements have a look at this please:
div
paragraph
div
list
a
how to style these elements from an external CSS file instead of inline CSS such as style="bla bla bla"
here's my codes and pics.
.auto-style1 {
width: 100%;
}
.aMain {
text-decoration: none;
color: black;
background-color: #ddd6d6;
display: inline-flex;
width: 100px;
height: 30px;
font-size: 13.5px;
justify-content: space-between;
align-items: center;
margin-left: 180px;
}
.divLogin {
border-style: solid;
border-width: 1px;
height: 46px;
width: 120px;
float: right;
margin-right: 180px;
margin-left: 16px;
margin-top: 12px;
background-color: #ffffff;
border-radius: 5px;
}
.pIcon {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.pLoginText {
float: right;
margin-right: 6px;
margin-top: 5px;
font-size: 15px;
text-align: center;
}
.divSendRecipe {
border-style: solid;
border-width: 1px;
width: 140px;
height: 46px;
float: right;
margin-top: 12px;
border-width: 1px;
background-color: #ff6a00;
border-radius: 5px;
}
.pSendRecipe {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.divSearch {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 46px;
float: right;
margin-top: 12px;
margin-right: 16px;
border-width: 1px;
background-color: #ffffff;
}
.divSearch .divSearchContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 200px;
float: right;
margin-top: 2px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.divSearch:hover .divSearchContainer {
display: block;
background-color: #ffffff;
}
.divSearch .divSearchContainer span {
display: inline-block;
margin-left: 10px;
margin-top: 12px;
font-size: 18px;
font-weight: bold;
color: white;
}
.divSearch .divSearchContainer a {
display: inline-block;
background-color: #ddd6d6;
width: 80px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
}
.divSearch input[type=search] {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 360px;
padding-left: 6px;
float: left;
}
.divSearch button {
all: unset;
cursor: pointer;
width: 46px;
height: 100%;
float: right;
font-size: 16px;
font-weight: lighter;
background-color: #d91616;
color: white;
text-align: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.divSearch button:hover {
font-size: 20px;
}
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
/*.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
float:left;
margin-top: 52px;
position: absolute;
display: inline;
}*/
/*.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}*/
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
.image {
height: 40px;
width: 40px;
border: none;
position: absolute;
top: 23px;
left: 42px;
}
<head runat="server">
<title></title>
<link href="testCSS.css" rel="stylesheet" />
<link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 30px; background-color: #ddd6d6">
<i class="fas fa-home"></i>MAIN PAGE
</div>
<div style="height: 70px; background-color: #ffffff">
<a href="mainPage.aspx">
<asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
</a>
<div class="divLogin">
<p class="pLoginText">
<strong>Log In<br />
or Sign Up</strong>
</p>
<p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
</div>
<div class="divSendRecipe">
<p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
<p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
</div>
<div class="divSearch">
<input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
<button><i class="fas fa-search"></i></button>
<div class="divSearchContainer">
<div>
<span>Popular Searchs</span><br />
cake
cookie
pasta
dessert
wet cake
browni
pastry
</div>
<div><span>My Last Searchs</span></div>
</div>
</div>
</div>
<div style="z-index: -1; height: 70px; background-color: #d91616;">
<table class="table">
<tr>
<td class="td">RECIPES<img class="image" src="pics/cook book.png" />
<div class="divContainer">
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
<ul>
<li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
</ul>
</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div3</div>
</div>
</td>
<td class="td">VIDEOS<img class="image" src="pics/camera.png" />
<div class="divContainer" style="margin-left:-124px;">videos</div>
</td>
<td class="td">TRENDS<img class="image" src="pics/trends.png" /></td>
<td class="td">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></td>
</tr>
</table>
</div>
<div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
this is what my codes do:
this is what i want it to do:
this is how my website looks.
when put these inline css codes into an external file, it's all messed up. how can i fix this? i always face this trouble when i use external css.
You can your css in a separate .css file and import it to your HTML file inside the <head></head> tags.
I think the below example explains it clearly.
Here I have my CSS in a separate .css file called myStyle.css. Then I have imported it to my HTML file. Remember in this example, both files are inside the same directory. Of course, you can put them anywhere and change the href accordingly.
/* myStyle.css */
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
</body>
The code share in the question
is not separating your CSS code into another file, but it is putting it inside the file as text, which is not evaluated as CSS. First, try to put that CSS code into a style tag as a proof-of-concept:
<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
margin-top: 52px;
float:left;
position: absolute;
display: inline;
}
.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
</style>
Once that works, you can proceed in separating the CSS code into a file.
Linking a CSS file
Let's create a CSS called style.css. Remember where it is and add this code to your head tag:
<link rel="stylesheet" href="/my/correct/path/style.css">
Now, load your page in the browser. Look at the Console of your Dev Tools. If you see an error that states that the file was not successfully loaded, then you have specified the wrong path. Fix the path until loading your page no longer complains about the file not being loaded correctly.
Moving the CSS
Now copy the inner content of your style tag discussed earlier and paste into your style.css. Don't copy the <style type="text/css">, nor the </style. Remove the style tag. Reload the page. Make sure that for now style.css does not contain anything else. Work until the page reflects your styling.
Resolve conflicts
Now, assuming that you have different external CSS that conflicts with your rule, the first question is: do you need the external CSS? If not, then don't load it. If yes, then adjust your rules to be more specific than the remote CSS's rules if you want your CSS to be reflected. Change your structure if necessary. Work on your structure and design bit-by-bit until you fix all conflicting rules and your page looks good.
Test in several browsers
When you are done with your changes, load your page in several browsers and see whether some browsers don't handle your design well. If so, find out what the problems are and fix them.
I am very new to web development. This is actually my first personal project and I'm having trouble aligning the input fields. I designed the layout in XD and trying to code the design. Keep in mind, I'm working on the mobile layout so its only about 400 pixels wide. I guess I can worry about the responsiveness later with media queries. Anyway, I've tried targeting the input fields and using text-align: center; but it's not working. Please help!
This is what my page currently looks like:
This is what I need it to look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<title>40 Hour Workweek Calculator</title>
</head>
<header>
<h3>40-Hour Workweek Calculator</h3>
</header>
<body>
<h4 class="sections">Total hours needed to work this week:</h4>
<input type="text" class="userInput" placeholder="ex: 40" />
<h4 class="sections">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" class="userInput" placeholder="ex: 33"/>
<h4 class="sections">Enter remaining decimals:</h4>
<input type="text" class="userInput" placeholder="ex: .57"/>
<h4 class="sections">Converted to time format:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Remaining hours to work:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Enter time you clocked in on Friday:</h4>
<input type="text" class="userInput" placeholder="ex: 7:22"/><br />
<div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div>
<h4 class="sections">Enter today's lunch break in minutes:</h4>
<input type="text" class="userInput" placeholder="ex: 30"/>
<div class="sections">
<button class="calcButton">Calculate my hours</button>
<h4 class="sections">Time to clock out on Friday:</h4>
<div class="defaultCalc clockOutTime"></div>
<div class="sections">
<div class="clockOutAMButton">AM</div>
<div class="clockOutPMButton">PM</div>
</div>
</body>
CSS:
/*Base style layouts*/
header, body {
font-family: 'Lato', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-color: #15D1BC;
box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.25em;
font-weight: 400;
}
h4 {
font-weight: 100;
color: #95989A;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
border: 1px none;
width: 133px;
height: 29px;
background-color: #DBDBDB;
border-radius: 12px;
text-align: center;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 100;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
}
.userInput {
border: 1px solid #D3D8DB;
width: 133px;
height: 29px;
border-radius: 12px;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton,
.pmButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 100;
}
.buttons {
margin: 25px 0;
}
.calcButton {
border: 1px;
width: 217px;
height: 36px;
background-color: #15D1BC;
color: #FFF;
border-radius: 18px;
font-weight: 100;
font-size: 1.1em;
}
.clockOutTime {
border: 1px none;
width: 133px;
height: 29px;
background-color: #60B6FF;
color: #fff;
border-radius: 12px;
text-align: center;
}
.clockOutAMButton,
.clockOutPMButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 300;
text-align: center;
display: inline-block;
line-height: 30px;
}
button:focus {outline:0;}
input:focus {
border-color: #15D1BC;
outline: none;
}
.pmButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.amButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.calcButton:active {
font-size: 1.075em;
}
To center the inputs you want to use text-align: center on the parent. You could either introduce a new element as the parent, or just apply it to body in your case.
Then your .defaultCalc elements are not centered becasue they're block elements. You can either make them inline-block (what I did), or apply margin-left: auto; margin-right: auto
Your header element is also before body - it needs to be inside of <body></body>
/*Base style layouts*/
header, body {
font-family: 'Lato', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Roboto', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-color: #15D1BC;
box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.25em;
font-weight: 400;
}
h4 {
font-weight: 100;
color: #95989A;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
border: 1px none;
width: 133px;
height: 29px;
background-color: #DBDBDB;
border-radius: 12px;
display: inline-block;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 100;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
}
.userInput {
border: 1px solid #D3D8DB;
width: 133px;
height: 29px;
border-radius: 12px;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton,
.pmButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 100;
}
.buttons {
margin: 25px 0;
}
.calcButton {
border: 1px;
width: 217px;
height: 36px;
background-color: #15D1BC;
color: #FFF;
border-radius: 18px;
font-weight: 100;
font-size: 1.1em;
}
.clockOutTime {
border: 1px none;
width: 133px;
height: 29px;
background-color: #60B6FF;
color: #fff;
border-radius: 12px;
text-align: center;
}
.clockOutAMButton,
.clockOutPMButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 300;
text-align: center;
display: inline-block;
line-height: 30px;
}
button:focus {outline:0;}
input:focus {
border-color: #15D1BC;
outline: none;
}
.pmButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.amButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.calcButton:active {
font-size: 1.075em;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<title>40 Hour Workweek Calculator</title>
</head>
<body>
<header>
<h3>40-Hour Workweek Calculator</h3>
</header>
<h4 class="sections">Total hours needed to work this week:</h4>
<input type="text" class="userInput" placeholder="ex: 40" />
<h4 class="sections">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" class="userInput" placeholder="ex: 33"/>
<h4 class="sections">Enter remaining decimals:</h4>
<input type="text" class="userInput" placeholder="ex: .57"/>
<h4 class="sections">Converted to time format:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Remaining hours to work:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Enter time you clocked in on Friday:</h4>
<input type="text" class="userInput" placeholder="ex: 7:22"/><br />
<div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div>
<h4 class="sections">Enter today's lunch break in minutes:</h4>
<input type="text" class="userInput" placeholder="ex: 30"/>
<div class="sections">
<button class="calcButton">Calculate my hours</button>
<h4 class="sections">Time to clock out on Friday:</h4>
<div class="defaultCalc clockOutTime"></div>
<div class="sections">
<div class="clockOutAMButton">AM</div>
<div class="clockOutPMButton">PM</div>
</div>
</body>
I can't get rid of a small white line in my HTML page at the bottom:
.text {
width: 90%;
}
.divfloatleft {
float: left;
margin-left: 35%;
width: 15%;
text-align: left;
background: linear-gradient(#036, #0FF);
height: 70%;
margin-top: 6%;
}
.divpaginalogin {
height: 100%;
}
.divfloatright {
float: right;
margin-right: 35%;
width: 15%;
text-align: right;
background: linear-gradient(#0FF, #036);
height: 70%;
margin-top: 6%;
}
.div-container {
background-image: url(../Images/pellicola.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 88%;
overflow: hidden;
}
.div-child {
height: 50%;
border: 1px solid;
width: 100%;
position: relative;
}
.div-child a {
text-decoration: none;
font-weight: bold;
color: black;
font-family: helvetica, arial, sans-serif;
}
.div-child:hover {
background-size: 100% 100%;
}
a:hover {
color: #00C;
}
.div-login {
background: linear-gradient(#003, #00F);
color: white;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid black;
overflow: auto;
}
.div-footer {
min-height: 5%;
text-align: center;
color: white;
background: linear-gradient(#00F, #003);
border-top: 1px solid black;
}
.table-login {
margin-left: auto;
margin-right: 0px;
}
.loginbutton {
color: white;
background-color: #0066ff;
border-radius: 4px;
border-color: black;
border-width: 1px;
box-shadow: 2px 2px 4px 0px #333333;
font-weight: bold;
font-size: 14px;
width: 65px;
cursor: pointer;
}
This is my Razor page:
<div class="divpaginalogin">
<div class="div-login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<table class="table-login">
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.LabelFor(a => a.Password)</td>
</tr>
<tr>
<td>#Html.TextBoxFor(a => a.Username, new { #class = "text" })</td>
<td>#Html.PasswordFor(a => a.Password, new { #class = "text" })</td>
<td>
<input type="submit" value="Login" class="loginbutton" /></td>
</tr>
<tr>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
</table>
}
</div>
<div class="div-container">
<div class="divfloatleft">
<div class="div-child" onmouseover="Show(this, 'Contatti.png')" onmouseout="Hide(this)">
#Html.ActionLink("Contatti", "Contatti", null, new { #style = "position: absolute; top: 0px; left: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Mappa.png')" onmouseout="Hide(this)">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: absolute; bottom: 0px; left: 0px;" })
</div>
</div>
<div class="divfloatright">
<div class="div-child" onmouseover="Show(this, 'Informazioni.png')" onmouseout="Hide(this)">
#Html.ActionLink("Informazioni", "Informazioni", null, new { #style = "position: absolute; top: 0px; right: 0px;" })
</div>
<div class="div-child" onmouseover="Show(this, 'Chi-siamo.png')" onmouseout="Hide(this)">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: absolute; bottom: 0px; right: 0px;" })
</div>
</div>
</div>
<div id="footer" class="div-footer">
<p>Videoteca online P.IVA: 00000000000</p>
</div>
</div>
at the bottom appear a line which is about 0.3% height, it seems I can't cover the full HTML page if I add 1% to the footer instead the scrollbar appears, I also use this CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
I was thinking to set footer height from 5% to 5.3% but I don't know if that's the correcty way since I may be have something wrong in my HTML..
Thanks to all!
Just tested your page, and with this minor modification in your .div-footer class the white line at the bottom seems to be gone. I've tested in several resolutions including mobile.
.div-footer {
min-height: 5%;
text-align: center;
color: white;
background: linear-gradient(#00F, #003);
border-top: 1px solid black;
/* changes added to fix footer at bottom */
position:absolute;
bottom:0;
width:100%;
}
Here's an edited Punkler
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/
So I am developing my site in Firefox, but I checked it in Chrome and IE and the divs- s1, s2, s3, s4 shift up about 25 to 50 px in the other browsers. I think it has to do with the absolute positioning and changing their parent div to relative but I can't get it to work.
CSS:
root {
display: block;
}
body, html {
width:100%;
height:100%;
overflow: hidden;
margin: 0;
padding: 0;
background: #6899D3; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebfaff', endColorstr='#fff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebfaff), to(#fff)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebfaff, #fff); /* for firefox 3.6+ */
}
#main-lead {
width: 500px;
height: 200px;
position: absolute;
top: 150px;
left: 150px;
}
#main-lead-header {
font-family: arial, tahoma, veranda;
font-size: 30px;
color: # 4a4a4a;
}
#main-lead-header-summary {
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #153E7E;
}
#navcontainer {
position: absolute;
bottom: 0px;
width: 100%;
height: 300px;
margin: 0;
padding: 0;
clear: both;
}
#summary-lead {
margin: auto;
border-spacing: 30px;
}
#summary-lead td {
width: 225px;
height: 50px;
padding-right: 10px;
text-align: center;
font-family: arial, tahoma, veranda;
font-size: 25px;
color: #036;
}
#summary {
position: absolute;
border-spacing: 30px;
}
#s1 {
position: absolute;
left: 125px;
bottom: 75px;
width: 200px;
max-height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E;
}
#s2 {
position: absolute;
left: 415px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}
#s3 {
position: absolute;
left: 700px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}
#s4 {
position: absolute;
left: 935px;
bottom: 75px;
width: 200px;
height: 150px;
padding-right: 10px;
font-family: tahoma, veranda, arial;
font-size: 15px;
color: #646D7E
}
#social {
position: absolute;
right: 25px;
top: 10px;
margin-right: 25px;
margin-top: 25px;
}
#login-wrapper {
right: 10px;
top: 75px;
font-family: arial, tahoma, veranda;
color: #24293f;
padding: 10px;
}
#login-wrapper label{
float: left;
width: 100px;
margin-top: 1px;
font-weight: bold;
}
#signup {
position: absolute;
right: 100px;
top: 200px;
width: 400px;
height: 250px;
background: #fff;
border: 1px dotted #000;
padding: 25px;
}
#signup label {
float: left;
width: 120px;
margin-right: 5px;
margin-top: 3px;
padding-top: 0.3em;
text-align: right;
font-weight: bold;
font-size: 15px;
font-family: arial;
color: #036;
}
.signup-input {
margin-bottom: 5px;
margin-left: 20px;
border: 1px solid #000;
background: #fff;
padding-left: 10px;
width: 190px;
height: 30px;
font-family: tahoma;
}
#signup-button {
float: right;
margin-right: 52px;
width: 75px;
background-color: #036;
border: 1px solid #000;
color: #ffffff;
font-size: 15px;
font-family: arial, tahoma, veranda;
padding: 5px;
}
#year {
margin-bottom: 5px;
border: 1px solid #000;
background: #fff;
padding-left: 1px;
width: 57px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}
#month {
margin-bottom: 5px;
margin-left: 20px;
border: 1px solid #000;
background: #fff;
padding-left: 1px;
width: 94px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}
#day {
margin-bottom: 5px;
border: 1px solid #000;
background: #fff;
padding-left: 1px;
width: 43px;
height: 25px;
color: #000;
font-family: arial;
font-size: 13px;
}
#signup-lead {
position: absolute;
right: 150px;
top: 135px;
width: 400px;
font-family: serif, tahoma, arial;
font-size: 50px;
color: #ed1b23;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' type='text/css' href='./css/index3.css' />
</head>
<body>
<span id="signup-lead"><i>Sign up!</i></span>
<div id="signup">
<form id="signup-form" action="">
<label>First Name:</label>
<input type="text" class="signup- input" id ="firstname" name="firstname" /><br />
<label>Last Name:</label>
<input type="text" class="signup-input" id="lastname" name="lastname" /><br />
<label>Birthday:</label>
<select id="month" name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="day" name="day">
<?php for ($i=1; $i<=31; $i++) { echo "<option value='$i'>$i</option>"; } ?>
</select>
<select id="year" name="year">
<?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?>
</select><br />
<label>Email:</label>
<input type="text" class="signup-input" id="signup-email" name="signup-email" /><br />
<label>Password:</label>
<input type="password" class="signup-input" id="signup-password" name="signup-password" /><br />
<label>Verify Password:</label>
<input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br />
<input type="button" id="signup-button" name="signup-button" value="Join!" />
</form>
</div>
<div id="social">
<img src="./images/twitter.png" alt="twitter" />
<img src="./images/facebook.png" alt="facebook" />
<img src="./images/flickr.png" alt="flickr" />
<img src="./images/youtube.png" alt="youtube" />
</div>
<div id="main-lead">
<span id="main-lead-header">The Most Crockin Site on the <b>Web! </b></span><br /><br />
<span id="main-lead-header-summary">Crockshark.com is striving to be the go to spot on the
net for all your crock pot recipe needs. Join, submit, save, and track-you can do it all here.</span>
</div>
<div id="navcontainer">
<table id="summary-lead">
<tr>
<td>Find Great Recipes.</td>
<td>Post Your Own.</td>
<td>Save Some.</td>
<td>Is Yours Popular?</td>
</tr>
</table>
<table id="summary">
<tr>
<td id="s1">
<p>At Crockshark.com you can find tons of great user submitted crock pot recipes.
From casual to gourmet, all recipes will prove to be crowd pleasing, time saving, and delicious.
Looking for a great crock pot meal? You can find one here!</p>
</td>
<td id="s2">
<p>Whenever you want to share your crockin' culinary skills with the world, just
submit a recipe. It's easy! Just add the recipe name, ingredients, directions,
and chef extras to our easy to fill out form. It's time to show the world how you crock!</p>
</td>
<td id="s3">
<p>Scroll through our wide array of recipes and save them to your account with the click
of a button. You can sort by the newest recipes, by ingredient, and even by cuisine.
Preview the recipe before you save it or remove it just as easily!</p>
</td>
<td id="s4">
<p>With our recipe tracking engine, you can see how popular your recipes are by the number of times they are saved by other users.
Start using Crockshark.com today. It's free, easy to use, and signing up takes just
few moments. Enjoy!</p>
</td>
</tr>
</table>
</div>
</body>
</html>
The variances can be seen by going to http://crockshark.com/index3.php in diff. browsers. Any ideas, I can't figure this one out. Thanks!
EDIT *
So I figured it out. I moved the 2 separate tables into there own divs and out of the "navcontainer". Aligned them both with absolute positions at the appropriate heights for a stacking look. The real kicker is that both the newly created divs were too big and overlapping causing them to align different in opposing browsers. I tightened them up so there was no overlapping and now they are almost identical in all browsers.
It's because the position of #navcontainer is relative to the bottom of the screen. If you want #navcontainer to stay in the a consistent position you will need to set something like top: 200px; (change 200px until it looks right) instead of bottom: 0px;.