I wanted to make a HTML page with some background color in header with some text. I wanted exactly like this but I am not getting CSS for this particular class w3-container w3-teal.
Can anybody tell how to get the CSS of these class.
Here is a link from where I am taking.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_containers_div_header
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>The w3-container class can be used to display headers.</p>
</div>
</body>
</html>
This is the css:
.w3-teal{ background-color: #009688; color:#fff;}
Here is the working code:
.w3-container, .w3-panel {
padding: 0.01em 16px;
}
.w3-teal, .w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important;
}
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<div class="w3-container">
<p>The w3-container class can be used to display headers.</p>
</div>
Template 2 :
$('.ToggleDiv').click(function() {
$('.menu').slideToggle(500);
});
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.w3-container,
.w3-panel {
padding: 0.01em 16px;
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important;
}
.ToggleDiv {
position: absolute;
top: 33px;
right: 40px;
z-index: 999;
font-size: 28px;
}
.ToggleDiv a {
color: #fff
}
h1 {
margin: 20px 0;
}
.menu {
width: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 83px;
background: #fff;
display: none;
color: #000;
border: 1px solid #000;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="w3-container w3-teal">
<h1>Header</h1>
<div class="ToggleDiv"><i class="fa fa-caret-down"></i>
</div>
<div class="menu">
<p>Helo I am being shown !!!</p>
<p>Helo I am being shown !!!</p>
</div>
</div>
Related
I'm trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can't align it the way I want
body {
background-color: #fafafa;
font-family: Epilogeal, sans-serif;
}
.main {
padding: 20px;
overflow: hidden;
}
nav {
width: 100%;
position: sticky;
display: flex;
}
.nav-links {
flex: 1;
text-align: left;
padding-left: 50px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 50px;
}
a {
text-decoration: none;
color: hsl(0, 0%, 41%);
font-family: Epilogeal, sans-serif;
}
.register-btn {
border: 2px solid hsl(0, 0%, 41%);
border-radius: 15px;
padding: 10px;
width: 4%;
text-align: center;
position: fixed;
right: 60px;
top: 16px;
}
.login-btn {
color:hsl(0, 0%, 41%);
position: fixed;
right: 215px;
}
.hero {
padding: 150px;
}
.hero-header {
color: hsl(0, 0%, 8%);
font-size: 50px;
}
.hero-text {
color: hsl(0, 0%, 41%);
font-size: 18px;
float: left;
}
.image {
width: 700px;
height: 700px;
float: right;
margin-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
<title>Document</title>
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Features</li>
<li>Company</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<div class="login-btn">
Login
</div>
<div class="register-btn">
Register
</div>
</nav>
<div class="hero">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
</div>
</div>
</body>
</html>
Here's what my webpage looks like:
And here's what I want it to look like:
I'm not good with positioning stuff in CSS, so any help would be much appreciated!
You can try this.
Replace the Hero Element with this.
<div class="hero">
<div class="hero-left">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
productivity soar.</p>
</div>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>
and CSS of .hero selector with
.hero {
padding: 150px;
display: flex;
justify-content: space-between;
}
I cannot keep the footer at the bottom of the page for both desktop and mobile. can someone please go over my code and tell me how to fix it?
The issue is it keeps going back to the center of the page and i am unable to move it down and have it stay there for most browsers and devices.
I have looked around for fixes and there are a few but the ones iv tried just ruin the entire page and push it all out of alignment. I am looking for the smallest amount of code possible to do this i don't want a giant chunk of code for this. i wanna keep it simple. I am new to web development. This is my first website.
This is the index.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
To simplify a bit the problem, say your HTML code looks like this:
<div id="wrapper">
<div class="header">HEADER</div>
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Now that's how the CSS code could look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
width: 100%;
position: relative;
}
.header {
background: blue;
}
.container {
background: red;
padding-bottom: 100px;
}
.footer {
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: yellow;
}
Note that you need to add a bottom padding of exactly the height of your footer (100px here) to your container to make it work.
The magic here happens because you set the min-height of your wrapper to be always equal to 100%, which forces your div to fit the view port height.
And your footer will be at the bottom of the page no matter what.
Hope this helps !
Try this
.footer {position: absolute; bottom: 0; width: 100%;}
I am attempting to construct a timeline similar to the one that is shown below:
The difficulty I am having is constructing the bottom portion of the timeline that has icons connected by a single line, as well as adding the triangle to the bottom of each event. This is currently my code:
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
</li>
<div id="triangle"></div>
<div class="timeline_icon">
<img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
The first list element in my list is my attempt at trying to add a triangle and an icon, but I can't figure out how to position the triangle on the bottom border, and how to position the icon directly below the triangle, with a horizontal rule, or other line, between icons.
The triangle is applied as a pseudo element ::after. The image is aligned with the block - it will be much easier to manipulate. Fixed the scroll view to scroll only in X, not in Y axis. The line is an object external to the scrollview, because otherwise its length is limited to the visible area and scrolls left with the view.
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
padding-left: 0;
padding-top: 40px;
padding-bottom: 60px;
position: relative;
}
#timeline_border {
position: relative;
top: -123px;
display: block;
width: 100%;
height: 1px;
border-top: 2px solid #ccc;
z-index: -1;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
position: relative;
}
#timeline > li:after {
position: absolute;
bottom: -20px;
left: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: block;
content: "";
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
.timeline_ruler {
white-space: nowrap;
overflow-x: scroll;
overflow-y: visible;
display: block;
height: auto;
padding-bottom: 100px;
}
.timeline_icon {
width: 80px;
height: 80px;
position: absolute;
bottom: -102px;
left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<div class="timeline_ruler">
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
</ul>
</div>
<div id=timeline_border></div>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
And the height of the header depends on the font-size of the text in it. How can I set the height of the header manually by a command?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
bottom: 0px;
left: 50%;
border-left: 1px dotted #333333;
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
JS:
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
Codepen
Try this:
<div class="row col-md-12">
...
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
...
</div>
If you want change height of header try to set height for div, for example:
<div class="col-md-10 text-center" style="height:100px;">
<li><a>!</a></li>
</div>
Of course for good style, create a specific style at css with value of height and add to class of your div.
But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.
<div class="col-md-10 text-center">
<a>!</a>
</div>
How can I set the height of the header manually by a command?
You can assign the height property. I also set a background-color, so you can see that the header actually grows.
.header {
height: 200px;
background-color: blue;
}
actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.
here is demo...
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
border-left: 1px dotted #333333;
bottom: 0;
content: "";
display: block;
left: 0;
margin: 0 auto 0 50%;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="navbar">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header ">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div></div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
I'm trying to replicate a header/nav (from www.mineplex.com) for my website, but I need some help. I'm trying, but it's not working. Your guys' help would be greatly appreciated. Here's the code I have so far.
body {
font-family: Helvetica;
margin: auto;
width: 100%;
}
#header {
background: #383838;
position: fixed;
top: 0;
width: 100%;
}
#container {
margin: 0 auto;
}
#logo {
color: white;
font-size: 15;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- IGNORE THIS! THIS IS FOR LiveReload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- IGNORE THIS! THIS IS FOR LiveReload -->
<div id="header">
<div id="container">
<div id="logo">
<h1>WEBSITE</h1>
</div>
</div>
</div>
</body>
</html>
Here is how to add the darker bar in your header. DEMO
HTML:
<div id="header">
<div id="container">
<div id="logo">
<h1>WEBSITE</h1>
</div>
</div>
<div class="header-bottom"></div>
</div>
CSS:
body {
font-family: Helvetica;
margin: auto;
width: 100%;
}
#header {
background: #383838;
position: fixed;
top: 0;
width: 100%;
}
#container {
margin: 0 auto;
}
#logo {
color: white;
font-size: 15;
text-align: center;
}
.header-bottom {
width:100%;
height:25px;
background:#1E2224;
box-shadow: 0px 5px 5px #888888;
}