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>
Related
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
I want to align the logo on the left side and the nav links on the right side horizontally.
Mainly, I used display: flex on .nav-wrapper and used align-items: center. However, there still seems to be a bit of misalignment between the logo and the nav link elements which I cannot seem to figure out how to properly correct. Would really appreciate some help on this!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li>Log in</li>
<li>Sign up</li>
<li>Become a Teacher</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
I've created demo, Here Link: https://jsfiddle.net/590nartL/
Infact it really horizontally center, red border prove that.
Of couse, maybe you think font in red border box not vertical middle, you can add style as below:
.right-menu {
margin-top: -2px;
}
Any negative margin value as you want.
It happens because there is an unnecessary space between the <img> tag and the parent <a> tag.
The <img> is an inline element so this happened.
To remove the space, make <img> tag as block element as follows or implement vertical-align.
.logo {
display: block;
width: 80px;
height: 80px;
}
or make parent <a> as flex style
a {
display: flex;
flex-direction: column;
}
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 am working on a navigation bar for my website. The navigation bar contains a menu icon, a header 'Reviews' and a search icon. The icons need to have a distance of 3% from the border. The problem is that I can't figure it out how I center the text. I think the problem is with the floating elements and I don't know how I center a floating element between to other elements(in this case two icons). I hope someone could provide me with an answer :)
This is the result:
the navigation bar
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
float: left;
}
.searchButton {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
You may use the flex boxmodel and margins :
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
/* see center */
background-image:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 50%);
margin: 3%;
display: flex;
justify-content: center;
}
.menuButton {
float: left;
margin: auto auto auto 0;
}
#nav h1 {
float: left;
}
.searchButton {
margin: auto 0 auto auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
edit.
Considering only float, then float elements should be ahead in the flux to let other non-floatting elements comes in between, so h1 can be standing in between and get text-align or be centered via display and margin.
float won't allow vertical centering of elements where flex does .
text-align and no float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
display:table;/* shrinks on itself */
margin:auto;
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
or display and margin without float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
text-align:center
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
Is this output are you expecting
Check output in codepen.io
* {
padding: 0;
margin: 0;
}
#nav {
width: 100%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
.searchButton {
float: right;
}
.a {
text-align: center;
}
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu">
</div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1 class="a"> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
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>