I'm having a couple of bugs with my layout and was wondering if anyone could help me out. I need to have the white space removed above the nav bar and below the footer. Secondly, I'd like to have all of the footer elements on the same line, instead of being slightly staggered. I've attached a picture of the site, as well as the HTML and CSS that goes with it. Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; padding:10px; border-radius:20px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
</head>
<body>
<header>
<div id="header-content">
<img src="../website/images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:20px;" />
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<nav>
<ul>
<li>About</li>
<li>DIY Projects</li>
<li>Dad Tech</li>
<li>Kid Stuff</li>
<li>Ask a Dad</li>
<li>Dad Jokes</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<img src="../website/images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<img src="../website/images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<img src="../website/images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Activity / Meal of the Week</h1>
<img src="../website/images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<img src="../website/images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<img src="../website/images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;">
</div>
</div><!-- end container -->
</main>
<footer>
<div id="footer">
<p class="left">
21stcenturydad#gmail.com
<p class="right">
<a href="https://www.facebook.com/">
<img src="../website/images/Facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../website/images/Snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../website/images/Instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div>
</footer>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Kanit:200,300,500');
body {
background-color: #FFF;
background-image:url(../website/images/background.png);
font-size: 13px;
font-family: 'Kanit', sans-serif;
font-weight: 200;
color: #363636;
}
p {
line-height: 140%;
}
header {
background-color: #D1E751;
width: 960px;
z-index:1000;
margin-right:auto;
margin-left:auto;
}
#header-content {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 130px;
position:relative;
left:0px;
top:0px;
}
nav {
background-color: #26ADE4;
color: #fff;
width: 100%;
text-align: center;
font-size: 16px;
font-weight:bold;
}
nav ul {
display: block;
padding:14px 0 14px;
}
nav li {
display: inline-block;
}
nav a {
padding: 5px 30px 5px;
}
nav a:link {
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #D1E751;
color: #FFF;
}
nav a:visited{color:#FFF;}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
padding-top:60px;
}
.container{width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;}
.blocks{display:inline-block;
width:300px;
padding-left:5px;
padding-right:5px;
}
h1 {
font-size: 20px;
color: #26ADE4;
font-weight: 500;
margin-bottom: 2px;
}
h2 {
font-weight:500;
font-size: 60px;
color: #fff;
position:absolute;
left:-2px;
bottom:-9px;
}
footer {
background-color: #D1E751;
color: #fff;
font-size: 10px;
padding: 12px;
font-weight:bold;
clear: both;
}
.left{text-align:left;
font-size:14px;
float:left;
padding-top:8px;
padding-bottom:8px;
}
.right{float:right;
text-align:right;
}
.centered{text-align:center;
font-size:14px;
padding-top:8px;
padding-bottom:8px;
max-width:300px;
margin-left:auto;
margin-right:auto;}
Screenshot
take out margin:auto to the body to get rid of surrounding whitespace
For a simple footer, you can position the element fixed to the screen
For elements in the footer, You can use a display flex property on the div with id footer
CSS rules below and pen is here
body {
margin: auto;
}
.left,
right,
.centered {
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Related
I'm learning CSS with The Odin Project and I made a mockup of the Google.com homepage. Everything looked perfect until I resized the browser window and the elements move out of place.
I've been trying out many different methods on how to keep the divs (Google logo, search bar, and buttons) centered when the page is resized.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
jsFiddle
I feel it should be something like this but I'm not sure:
div {
position: relative
margin-left:auto;
margin-right:auto;
}
Note: I'll work on resizing and adding colors to the search bar and buttons after, my biggest concern in finding how to keep the search bar and buttons centered under the Google logo when the browser page is re-sized.
<div> is a block element and by default it takes 100% width of its parent.
If you try to center it using margin: 0 auto, then you won't get the expected result. You have to set width in order the margin to be applied.
See an example below:
.parent{
width: 400px;
height: 100px;
border: 1px solid blue;
}
.item{
width: 100px;
margin: 0 auto;
border: 1px solid green;
}
<div class="parent">
<div class="item">
<span>some text</span>
</div>
</div>
You can add the property text-align: center to your <div> ancestor with an id of #search.
#search{ text-align: center; }
This will center the <input> and <button> elements because they retain their inline characteristics.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
#search {
text-align: center;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
Revised jsFiddle
I've tried margin-bottom and min-height on my body tag with the same height as the footer. The footer container called .contact is not respecting the div .store-items above it. I'm looking for a clean fix, eventually I will learn about flex boxes but I am suspicious there is a simple error in my strategy. Thanks, here is the code:
/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;
}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;
height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;
}
/*
================================
Footer
================================
*/
.contact {
position: relative;
width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body>
<header>
<div class="navbar">
Viking Store
<div class="cart">
<img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;">
Your Cart
</div>
</div>
<div class="header-image">
<img src="resources/viking_ship_background_medium.jpg" alt="viking ship background">
<h1>The Viking Store</h1>
</div>
<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>
<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>
<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>
</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>contact#vikingstore.com</h2>
</div>
</footer>
</html>
As K. Daniek wrote, you closed the bodytag before the footer, Apart from that, there is a lot of unnecessary code - no need for all this absolute and relative positioning - use margins for creating distances and leave the position settings at the default.
Here's a codepen: http://codepen.io/anon/pen/BLJxyk
Here's the changed CSS:
body {
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
.store-items {
margin-left: 20px;
margin-right: 20px;
width: 900px;
max-height: 900px;
border: solid 1px;
padding: 30px;
padding-left: 65px;
}
.store-items .item-1-3 {
display: inline-block;
width: 30%;
margin-right: 20px;
margin-bottom: 20px;
height: 300px;
border: solid 1px;
background-color: #333333;
position: relative;
}
.store-items .item-1-3 img {
height: 190px;
}
.store-items .item-1-3 h3 {
text-align: center;
color: white;
margin-top: 7px;
}
.store-items .item-1-3 p {
left: 170px;
margin-top: 15px;
border: solid 1px black;
width: 40px;
background-color: white;
}
.contact {
height: 70px;
display: block;
}
#font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli'), url(https://fonts.gstatic.com/s/muli/v7/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
body {
font-family: 'Muli', Helvetica, Ariel, Georgia, serif;
font-size: medium;
margin: 0px;
}
#initial {
max-width: 100%;
max-height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
h1 {
font-size: 3.5em;
font-style: italic;
font-weight: normal;
text-align: center;
border-color: red;
border-style: solid;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px;
}
div.tableRow {
display: table-row;
}
div.tableContainer {
display: table;
}
#profile {
display: table-cell;
width: 250px;
height: auto;
margin-right: 20px;
margin-bottom: 20px;
}
#bio_text {
display: table-cell;
vertical-align: top;
padding-left: 20px;
padding-right: 20px;
}
#ccb, #cfc {
max-width: 100%;
max-height: 100%;
border-color: red;
border-style: solid;
}
#contactForm {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo {
display: table-cell;
border-color: red;
border-style: solid;
}
#contactInfo ul li {
list-style-type: none;
}
#contactInfo h2 {
text-align: center;
}
footer {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
text-align: center;
}
footer ul li {
list-style-type: none;
display: inline;
padding: 0px 50px 0px 50px;
border-color: red;
border-style: solid;
}
footer p {
text-align: center;
border-color: red;
border-style: solid;
}
footer ul li a:link, footer ul li a:visited {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chris Wang</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<header>
<img id="initial" src="img/background_final.jpg" alt="Chris Wang">
</header>
<section id="bio">
<h1>Who Am I?</h1>
<div class="tableContainer">
<div class="tableRow">
<div id="bio_text">
<p>
blah blah blah personal description
</p>
<p>
personal description
</p>
<p>
more personal stuffs
</p>
<p>
more personal stuffs
</p>
</div>
<img id="profile" src="img/profile_edit.jpg" alt="This is me!">
</div>
</div>
</section>
<h1>What Have I Done?</h1>
<section id="past">
<div class="tableRow">
<div id="ccb">
<a href="pages/ccb/index.html">
<img id="ccb_thumbnail" src="pages/ccb/img/thumbnail_resize.jpg" alt="Cranbrook Culture Book">
</a>
</div>
<div id="cfc">
<a href="pages/cfc/index.html">
<img id="cfc_thumbnail" src="pages/cfc/img/thumbnail_resize.jpg" alt="Cranes for Change">
</a>
</div>
<!--<div id="trombetta">
<a href="pages/trombetta/index.html">
<img id="trombetta_thumbnail" src="pages/trombetta/img/thumbnail.jpg" alt="Trombetta Intern">
</a>
</div>-->
</div>
</section>
<h1>Let's Talk!</h1>
<div class="tableContainer">
<fieldset id="contactForm">
<form action="contact.php" method="post">
<div class="tableRow">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" value="" placeholder="Steve Jobs" required>
</div class="tableRow">
<div class="tableRow">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" value="" placeholder="stevejobs#apple.com" required>
</div>
<div class="tableRow">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" value="" placeholder="(000)-000-0000">
</div>
<div class="tableRow">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="tableRow">
<label></label>
<input type="submit" value="Send!">
</div>
</fieldset>
<div id="contactInfo">
<h2>Contact Info</h2>
<ul>
<li>Chris Wang</li>
<li>chriswang.work</li>
<li>xxx#icloud.com </li>
<li>###-###-####</li>
</ul>
<img id="linkedin" src="img/linkedin.png" alt="LinkedIn Account">
<img id="twitter" src="img/twitter.png" alt="Twitter Account">
</div>
</div>
<footer>
<ul>
<li>Bio</li>
<li>Experience</li>
<li><a target="_blank" href="file/resume.pdf" title="Resume">Resume</a></li>
<li>Quotes</li>
</ul>
<p>© 2016 Chris Wang</p>
</footer>
</body>
</html>
I'm trying to build a personal website that has full page slides with just HTML & CSS (maybe a bit of super simple PHP for backend stuff), here's an example of what I'm talking about: http://www.hannahsilverton.com
Now I used the max height and weight rule for the opening slide with a jpeg where I layered my initial on top of a cool pic with photoshop. However, when I can't seem to figure out how to make my 2 paragraph bio w/ picture into a full page slide.
Furthermore, I'm also having trouble on the past experience section. I want to have them in the form of a couple of cards across the screen (2 or 3 per roll). However, when I used table display w/ css, all it does is putting the two cards right next to each other (same result as if I was using inline).
Thanks in advance! I just learned the language about a month ago, so excuse me if I make any noob mistake :P
Lastly, if anyone wants to see the code I have now, comment below and I'll inbox you.
Thanks again!
This is not really a complete answer, but I assume you dont want a complete solution but a step for step guide, so I take the risk of getting downvoted. Here we go:
Create the CSS for a "slide" or "page", propably divs, which have width: 100%; and height: 100%;. Put them in another div, class content, also width: 100%; height: 100%; or so. It will contain all of the slides. Make the content div overflow-x: hidden; overflow-y: auto;
If you want to "snap" to each slide, you have to get there via javascript and propably some kind of framework, there is an extension for jQuery which provides mousewheel-listeners which i tend to use quite often but its up to you which one youd like to use.
So basically thats the most important steps, look at this example here
I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this :
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
Can I Use: Date and time input types. Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.
As far as I'm aware, input date types aren't supported by Firefox.
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/