Basically I want to make this...
... centered and aligned just like this:
But, it seems like "float" is interfering on that. How would you fix that in a simple way so the first image looks like the second code?
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin-top: 15px
}
.nav-link{
position: relative;
float:right;
padding: 30px 45px 15px 20px;
}
#hero{
width: 100%;
position: relative;
top: 120px;
margin-right: auto;
}
</style>
<body>
<header id="header">
<img src="trombones.jpg" id="header-img">
<nav id="nav-bar">
<div class="nav-link">Pricing</div>
<div class="nav-link">How It Works</div>
<div class="nav-link">Features</div>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
</body>
Change the CSS of #hero to:
#hero {
text-align: center;
}
And add 'overflow: hidden' css to correct the floats:
#header{
overflow: hidden;
}
Related
I am trying to place footer to the bottom of a div using bootstrap without applying margin to the div I want to push to the bottom of the div as footer. This is my attempt but the footer aligns to the top
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5>
<hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap">
</div>
</nav>
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<br> For more information visit our website
</footer>
</div>
</div>
Please how can I place the footer to the bottom of .
There are multiple ways to do that, i think the faster way for you is this case is using position: absolute on the footer;
First move out you footer from .col-lg-12 to be a directly children of .container. I also added a class .myFooter
<footer class="myFooter">
copy 2016 All rights reserved
<p>You can visit our website for more info</p>
</footer>
And then the css. Don't use css inline on the markup. I moved the color and text-align to the class.
.myFooter {
color:#fff;
text-align:center;
position: absolute;
bottom: 0;
}
The last step is to add position:relative to the .container. That way the position:absolute on .myFooter works properly.
.container {
position: relative;
}
Here is a working example:
http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview
<html>
<head>
<title>
Lugah Salisu Foundation
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">
#media (max-width: #screen-xs) {
body{font-size: 10px;}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
}
h3{
font-size: 300%;
margin-bottom: 0px;
clear: both;
margin-left: 7px;
}
h5{
margin-top: 0px;
padding: 0px;
margin-left: 15px;
color: #fff;
margin-bottom: 1px;
clear: both;
}
hr{
margin: 0px;
}
.container {
width: auto;
margin-left: 200px;
margin-right: 200px;
height:500px;
max-height:500px !important;
padding-left: 0px;
}
.nav>li {
position: relative;
display: inline-block!important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color:transparent!important;
color:#d3d3d3;
}
.nav>li>a {
padding: 10px 4px!important;
color:#fff;
}
.golden-base {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
-webkit-margin-before: 0.3em;
-webkit-margin-after: 0.2em;
}
.golden1 {
background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body style="background-color:#1f5060;">
<div style="background-color:#191919;" class="container">
<h3 style="color: #32CD32; font-family: Copperplate; align:left;">
HEADER TEXT
</h3>
<h5>... reaching out</h5> <hr style="width:101.6%;">
<div class="col-lg-12">
<nav id="main_menu">
<div align="center" class="menu_wrap"></div>
<ul class="nav sf-menu">
<li class="sub-menu"><small>Home</small></li> |
</ul>
</div>
</div>
</nav>
<footer style="color:#fff; text-align:center;"> © 2016 All rights reserved
<div class="row">
<div class="contents">
The contents in each page
</div>
</div>
</div>
</footer>
</body>
</html>
I want to align an image and h1 in the same line. I have attached my source code and it doesn't work. can someone tell what's wrong with it.
<head>
.header img{
float: left;
width: 2px;
height: 3px;
background: #555;
}
.header h1{
position: relative;
top: 18px;
left: 10px;
}
<title> home page </title>
</head>
<body>
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
use display : inline-block
.header img{
display:inline-block;
width:10px;
height:3px;
background:#555
}
.header h1{
display:inline-block;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
you can also use float:left to image and float:right to the header
.header img{
float:left;
width:10px;
height:3px;
background:#555
}
.header h1{
flaot:right;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
Please try this code:
.header img{
width:2px;
height:3px;
background:#555;
vertical-align: middle;
}
.header h1{
display: inline-block;
vertical-align: middle;
}
In a situation like this, where the image is essentially part of the heading, I would have the image which sits beside the <h1>, not as an <img> at all but as a background style rule applied to the <h1>:
h1 {
margin: 18px 0 0 10px;
padding-left: 30px;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255);
}
<header>
<h1>University of Greenlock</h1>
</header>
I've decided to create my own blog, and am trying to work on the layout for it. I just started on it and I'm having trouble with the header already. I want a header that stretches all the way across the screen with no white spaces on top or on the sides and am planning on making my blog responsive. I've tried setting the margin to 0 and can't seem to get anything to work. I've tried to search the answer on here but couldn't get anything to work. this is my html and css. Thanks for any help!
p.s. The reason I did the logo in such a weird way is because I'm going to have one word in a bold font and one word in a skinny font and that was the only way I could think of to do it.
HTML:
<!DOCTYPE html>
<html>
<title>FatHead | Blog</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400itali" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<head>
</head>
<body>
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>
</body>
</html>`
CSS:
.header{
background-color: lightslategray;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: center;
display: block;
margin:15px;
}
#logo-large{
display: inline;
}
#logo-small{
display: inline;
}
You have to add
body
{
margin:0;
padding:0;
}
and change your css
.logo{
text-align: center;
display: block;
margin:15px;
}
to this
.logo{
text-align: center;
display: block;
margin:0 15px 15px 15px;
}
JSFiddle
Remove the appropriate margins from body and .logo.
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.header {
background-color: lightslategray;
margin: 0;
padding: 0;
width: 100%;
}
.logo {
text-align: center;
display: block;
margin: 0 15px 15px;
}
#logo-large {
display: inline;
}
#logo-small {
display: inline;
}
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1>
<h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>
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/
I have a website that works fine, looks okay, etc. The problem is I am not the best with positioning, float, etc. Instead of elements just lining up one under another, I have to manually set increasingly large margins for each additional paragraph I add.
My navbar is composed of a ul inside a fixed div. The ul is not floating, but the "li"s are. I need a way to position this and the other elements such that everything is below the navbar. I have tried using clear: both; to no avail. I know my positioning is all over the place, I don't really understand how/if positioning and float are inherited.
Here is a link to the website.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css">
<title>
Artwork
</title>
</head>
<body>
<div class="navbar">
<img src="images/navbar/title.png" class="navbar">
<ul>
<li>Home</li>
<li>Art</li>
<li>About Me</li>
</ul>
</div>
<h1 id="header">Welcome to my Website!</h1>
<p>
The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on
one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>!
</p>
</body>
</html>
CSS:
html{
height: 100vh;
width: 100vw;
margin: 0px;
}
body{
height: 100vh;
width: 100vw;
margin: 0px;
background-color: #009900;
}
div.navbar{
height: 50px;
width: 100vw;
position: fixed;
background-image:url('images/navbar/navbar.png');
background-repeat:repeat-x;
}
#header{
position: relative;
float: left;
margin: 40px 0px 0px 5px;
font-family: 'League Gothic', sans-serif;
}
p {
position: absolute;
margin: 100px 0px 0px 5px;
font-family: 'Ubuntu', sans-serif;
}
img.navbar{
float: left;
}
ul{
list-style-type: none;
margin: 4px 0px 0px 0px;
padding: 0;
overflow: hidden;
}
a:link,a:visited
{
display: block;
width: 120px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration: none;
}
li{
float: left;
{
yeah instead of giving margin manually for everything why don't you use margin for whole wrapper the contents that follows fixed nav-bar check this fiddle
.nav-bar{
height:50px;
overflow:hidden;
background-color:#000;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
margin-top:75px;
}
and the html
<div class="nav-bar">
<h1>
topbar
</h1>
<ul>
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
</div>
<div class="content">
<h2>content</h2>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
</div>