How to keep space between these three items on top?
I have tried few ways but when I try them they skip to next line. I have added the code I'm trying. And how to keep the size of width at 1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Where I want to make spaces is shown below:
You just need to add margin to the middle item ()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 10px;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Related
After I was done working on side bar I wanted to head to the content page to the right so I added a container div that I wanted to set to flex So that I make the two boxes to start styling, but right after adding it, the footer's position is ruined and the side bar isn't taking as much space as it should.
Here's a picture:
.side-bar {
font-family: 'Montserrat', sans-serif;
font-size: large;
font-weight: bold;
display: flex;
justify-content: left;
background-color: rgb(235, 235, 235);
width: 20%;
height: 80%;
flex-direction: column;
}
.side-bar ul {
display: flex;
flex-direction: column;
margin-left: 0%;
list-style: none;
margin-top: 5%;
}
.side-bar ul li {
margin-bottom: 10px;
display: inline;
cursor: pointer;
}
.togglable:hover {
border-radius: 7px;
background-color: rgb(216, 216, 216);
}
.togglable:active {
background-color: rgb(221, 221, 221);
}
.side-bar ul a {
color: black;
text-decoration: none;
}
.side-bar h2 {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 20px;
}
.container {
display: flex;
}
.task-container {
background-color: red;
}
<!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">
<title>ToDoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-bar">
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>Services</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</div>
<div class="container">
<div class="side-bar">
<ul>
<li class="togglable"><img src="gym.png" alt="gym" id="gym">Gym</li>
<li class="togglable"><img src="today.png" alt="calendar" id="today"> Today</li>
<li class="togglable"><img src="week.png" alt="calendar" id="week">This Week</li>
<li class="togglable"><img src="month.png" alt="calendar" id="month"> This Month</li>
<h2>Projects : </h2>
<li id="addPr" class="togglable"><span id="plus-sgn">+</span> Add Project</li>
<!-- <li class="togglable"><img src="checklist.png" alt="checlist" id="list"> Testing</li> -->
</ul>
</div>
<div class="task-container">
<p>Some Text To test the box</p>
</div>
</div>
<div class="footer">
<p id="copyright">Copyright © 2021 FaroukHamadi</p>
</div>
<script src="main.js"></script>
</body>
</html>
Add width attribute to task-contianer and add your fotter class attribute on your CSS file.
.task-container {
background-color: red;
width: 100%;
}
.footer{
position: absolute;
bottom: 0px;
width: auto;
}
it works fine with all browsers except chrome, while real-preview using Dreamweaver seems fine with all of them, but when uploading it to the server the problem shows up in chrome only. tried to change the inline/block tag. the display: none/block tag everything and still can not solve it. is it a CSS related thing or javascript or what? the dropdown menu works fine on every browser except Chrome
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
ul > li{
list-style-type: none;
display: inline-block;
}
.grid-container {
display:grid;
}
a {
display: block;
}
#upper-bar {
background-color: #00A2CB;
color: white;
font-weight: bold;
font-family: sans-serif;
padding-left: 50px;
padding-right: 50px;
}
div[id="upper-bar"] a {
color: white;
padding: 5px;
}
#lower-bar {
font-weight: bold;
font-family: sans-serif;
padding-left: 70px;
padding-right: 70px;
}
div[id="lower-bar"] a {
color: black;
padding: 5px;
}
.align-left {
float:left;
}
.align-right {
float: right;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00A2CB;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #008FB3;}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>
<body>
<header class="grid-container">
<div id="upper-bar">
<div class="align-left">
<ul>
<li>|</li>
<li><a href="#" >ABOUT US</a></li>
<li>|</li>
<li><a href="#" >OUR SERVICES</a></li>
<li>|</li>
<li class="dropdown">
HELP
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
<div id="lower-bar">
<div class="align-left">
<ul>
<li></li>
<li><a href="#" >Home</a></li>
<li><a href="#" >Individuals</a></li>
<li><a href="#" >doctors</a></li>
<li><a href="#" >Companies</a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li><a href="#" >Login</a></li>
<li><a href="#" >Signup</a></li>
</ul>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.
<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>
<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>
<img src="img.png"></img>
</head>
<body>
<div id="menubar">
<ul
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
</body>
<body>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
<div id="items">
<ul>
<p>Item 1</p>
<p>Item 2</p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>
Heres the original CSS.
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}
To center the page, i add the following css code:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
And added these lines at the beginning and end of the page.
If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.
Works for me. The only problem is that your code structure. Your code format should be
body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>
<div id="items">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Correct css is:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
you had unnecessary buckles in your code.
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}