I've been trying for the past two hours to get rid of this gap and I've still had no luck :( Any help would be greatly appreciated. I have already correctly linked normalise.css, anytime I try making the margin of the body/header/footer 0 the hr line simply wont move over to the left and neither will the text, it's also making my logo appear slightly off centre as well which is annoying. I have included a picture of what the website looks like for me when I run it.
PICTURE OF SITE
a {
text-decoration: none;
}
img.center { /* Centering and styling the logo */
display: block;
margin: auto;
width: 7%;
padding: 0;
}
ul { /* Removing the bullet-points and styling the nav bar */
list-style: none;
}
li {
float: left;
}
hr {
height: 6px;
background-color: #000000;
padding: 0;
margin-left: -8px
margin: -8px;
margin-bottom: 2px;
}
head {
margin: 0;
}
body {
margin: 0;
}
footer {
margin: 0;
}
<!DOCTYPE html>
<!-- Declaring the document type -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
<link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file -->
</head>
<body>
<header>
<img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo -->
<nav> <!-- indicates that page navigation follows -->
<ul> <!-- Unorderd list of elements -->
<li>About Us</li> <!-- Link to About Us page -->
<li>Venues</li> <!-- Link to Venues page -->
<li>Home Page</li> <!-- Link to Home Page -->
<li>Artists</li> <!-- Link to Artists page -->
<li>Contact Us</li> <!-- Link to Contact Us page -->
<hr/> <!-- horizontal line across page -->
</body>
</html>
There are two issues at play here - first the li's are being floated, but the float isn't being cleared - so the hr is sitting in a displaced position. I corrected this by adding a clear:both style rule to the hr.
The other issue is that the ul has padding applied to it by the browner - so i explicitly set the ul padding left to 0. I also added a margin-right to the li's but you may want to use flex to space them out evenly.
a {
text-decoration: none;
}
img.center { /* Centering and styling the logo */
display: block;
margin: auto;
width: 7%;
padding: 0;
}
ul { /* Removing the bullet-points and styling the nav bar */
list-style: none;
padding-left:0;
}
li {
float: left;
margin-right:15px
}
hr {
height: 6px;
background-color: #000000;
padding: 0;
margin-left: -8px
margin: -8px;
margin-bottom: 2px;
}
head {
margin: 0;
}
body {
margin: 0;
}
footer {
margin: 0;
}
hr {clear:both}
<!DOCTYPE html>
<!-- Declaring the document type -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
<link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file -->
</head>
<body>
<header>
<img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo -->
<nav> <!-- indicates that page navigation follows -->
<ul> <!-- Unorderd list of elements -->
<li>About Us</li> <!-- Link to About Us page -->
<li>Venues</li> <!-- Link to Venues page -->
<li>Home Page</li> <!-- Link to Home Page -->
<li>Artists</li> <!-- Link to Artists page -->
<li>Contact Us</li> <!-- Link to Contact Us page -->
<hr/> <!-- horizontal line across page -->
</body>
</html>
Try using *{margin:0; padding:0;} which will reset all the extra margin and padding from all elements on your site. And then only WHEN you need them to be styled, you add something, this would be a good practice! But you can probably do something like html{margin:0; padding:0;} which should also be enough for the border around your page. Even if it doesn't solve your issue, it is a good practice to implement what I wrote here.
Also to avoid similar issues in some browsers it is good practice to implement every single detail of your doctype and html tag such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ... </html>
Related
I'm confused in this specific part of code. If anyone could explain to me, it'd be greatly appreciated!!
I'm making a navbar and it looks like this:
This is part of the CSS I'm confused about:
img{
weight:100px;
height:100px;
border-radius: 100%;
}
body{
margin:0;
}
header{
background-color: lightblue;
}
/*don't really understand this part*/
header::after{
content:" ";
display:table;
clear:both;
}
.container{
width:80%;
margin:0 auto;
}
.logo{
float:left;
padding:5px 0;
}
nav{
float:right;
}
nav ul{
margin:0;
padding:0;
list-style: none; /*remove HTML bullets*/
}
nav li{
display:inline-block;
margin:0 25px;
padding-top:55px;
font-family: 'Montserrat', sans-serif;
}
nav a{
color:#444;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color:black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My logo</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--a navbar should be in header section becuase it's not the content-->
<header>
<div class="container">
<img class="logo" src="logo.jpg" alt="">
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header::after{content:" "; display:table; clear:both; }
So my question is the background color in the pic would disappear without this part of code and I don't understand why, esp the display:table and clear:both. I do have logo and the li part float on both sides and clear:both doesn't stop them from floating and the background color would still show. I'm confused as why it's there and how display and clear both would affect the background color. Thanks!!
It is because you have floated all the content of header. This is like giving them all an absolute position and removes them from the flow of their parent which means the parent container, with no other content, will act as if it is empty. You could also give the header a height to see the background color, however, that might make it harder to adjust based on the content wrapping.
The CSS in question adds some content via the ::after's content prop. Then you clear the floats to make the content be seen by header, which is technically it's parent. The display table could be display block as well. It just makes sure that the after acts like an element would if it were placed in the html. But instead you are faking it with CSS.
I'm not sure why my header element with the nav won't float to the right with "float: right;"
I'm just getting started with html&CSS I was hoping someone could help make my nav bar float to the right. I've looked up a couple of videos and stack overflows but I'm not sure what's wrong I just started by looking up a few things to get started from bootstrap, W3 and some other sites.
my code below
*,
html,
body {
margin: 0;
padding: 0;
}
header {
background-color: deepskyblue;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
header nav {
float: right 1;
}
header nav ul li a {
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<header>
<div class="container">
<div class="row">
<!-- -->
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</div>
</header>
Here the Bootraps .row class is adding flex box to the div which in term is blocking the float right css. The float property gets ignored in a flex container.
From the flexbox specification:
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. so float does not create floating or clearance of flex item.
remove the .row class and you float style should start work!
Just remove the container element.
*, html, body
{
margin: 0;
padding: 0;
}
header
{
background-color: deepskyblue;
}
ul
{
list-style: none;
}
ul li{
display: inline-block;
}
header nav
{
float: right;
}
header nav ul li a
{
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="row">
<!-- -->
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</header>
</body>
</html>
I'm attempting to create a rudimentary sidebar, and this is my first attempt at it:
body {
font-family: courier;
font-size: 18px;
}
h1, h2, h3, h4 {
text-decoration: underline;
}
.content {
margin-left: 200px;
}
.side {
position: fixed;
height: 100%;
border: 5px solid black;
top: 0;
left: 0;
background: grey;
width: 180px;
padding: 10px;
#nav {
list-style-type: square;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" />
<title>Test Page For Fixed Sidebar</title>
</head>
<body>
<div class="content">
<h1>Information</h1>
<p> To your left is a sidebar containing links </p>
<div class="side">
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</body>
</html>
I seem to have a problem with styling the navigation sidebar, i.e. the element ul id=nav. I am trying to change the list's bullets to squares, and have even tried to remove them completely, but any changes to the corresponding stylesheet are not reflected on the page. I am able to style other elements it just seems to be this one which is causing me a problem.
Any help would be appreciated, thanks.
You can't target list items using class or id, you will have to target the li within the navigation bar. This is done by doing this
/* targeting the #nav and then looking for li tags withing it */
#nav > li
I want to add a border between the list items , I'm following a tutorial and in the video I typed the same exact code (I didn't include all the CSS code here). The problem is there is no margin or space between the first list item and second list item. There's also an extra border after the .
header li :first-child {
border-right: 1px solid #373535;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
The result:
Try this css
header li *:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
DEMO
css
ul {
list-style:none; /* will remove bullets and the space before the list will be gone as no bullet*/
}
li {
border-right:1px solid #000; /* add border as you like */
display:inline-block; /* to make it inline */
padding:20px; /* will decide space between border and content as per box model*/
}
Try moving the whitespace to inside the <a> tag ie.
<li>Popular recipes </li>
If you don't want the border on the second list item, then your CSS should be targeting <ul> not <li>. This will then try to target the first child of the <ul> tag.
header ul:first-child {
border-right: 1px solid #373535;
}
When I zoom in or out my element is moving and I've tried every code I know but it's still the same, so I've posted my html and css code and I hope you can help me. I have this problem with every element I put in my page
<!DOCTYPE html> //html code
<html>
<head> // head tag
<title></title>
<link rel="stylesheet" type="text/css" href="untitled2.css" /> //css link
<meta http-equiv="content-type" content="text/html":charset-windows-1256">
</head>
<body>
<div id="menu"> // div for menu
<ul>
<li>link</li>
<li>link</li>
<li>link</li> // ul li
<li>link</li>
<li>link</li>
</ul>
</div>
</body>
</html> // closing html
// css
body {
background-image: url('3.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: 100% ;
width:100%;
height:100%;
min-width:600px; //body attribute
max-width:2000px;
margin:0px;
padding:0px;
}
#menu{
margin-top: 380px;
padding: 0px;
background-color:#555258; //menu attribute
width:2500px;
}
Why are you setting the width and height to 100% and also setting min and max width? If you are trying to make sure it will look right regardless of the device used to view your site, look at this tutorial.
http://www.dwuser.com/education/content/responsive-design-a-crash-course-and-demo/
I'm making a wild guess here, because it's not clear to me what you want to achieve, but I hope something is helpful.
I'll start from a blank slate.
/* Styles go here */
.menu {
background-color: grey;
text-align: center; /* Center text */
}
.menu li {
display: inline-block; /* Place the list items on inline (on the same row) */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Is this a good start?