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>
Related
Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
.footer,
.push {
height: 50px;
}
.footer {
background: #000f14 !important;
padding: 20px !important;
text-align: center !important;
position: absolute !important;
bottom: 0 !important;
margin-top: 50px;
width: 100% !important;
}
.column {
display: inline-block;
width: 25%;
vertical-align: top;
text-align: left;
margin: 0 2.5%;
margin-top: 15px;
background: #000f14;
}
.column h3 {
margin-top: 0;
margin-bottom: 10px;
background: #000f14;
font-size: 25px;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
background: #000f14;
}
.column ul li {
padding: 5px 0;
background: #000f14;
font-size: 15px;
}
.column p {
margin: 0;
background: #000f14;
font-size: 15px;
}
<!DOCTYPE html>
<html>
<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="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="footer-placeholder">
<div class="footer">
<div class="column">
<h3>Contact Information</h3>
<ul>
<li>1234 Example Street</li>
<li>Example City, XX 12345</li>
<li>Phone: (555) 555-5555</li>
<li>Email: info#example.com</li>
</ul>
</div>
<div class="column">
<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
</div>
<div class="column">
<h3>Trademark</h3>
<p>© 2023 AquaTech. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
.footer,
.push {
height: 100%;
}
With this basically you tell your element with footer class that take the full height of its child elements.
You need to add the height in the class
.footer { height: auto }
And to make the content of footer visible add color in the class
.column{color: white}
The final look of your both CSS classes will be as below;
.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }
.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}
Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height
Simply add height: auto; to the .footer CSS selector.
Improvements suggestions:
Use the <footer> HTML element instead of <div class='footer'> for semantic markup.
Learn flexbox to layout the columns using display: flex.
Read about better ways to place the footer at the bottom
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;
}
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/