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;
}
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
<style>
ul:nth-child(2){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
</style>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
I have navbar floated in left and positioned fixed with css but when I add hr tag bellow header, navbar and each li inside navbar taking full width with border, navbar is missing float left and also missing position fixed. why??
Of course, ul will not have CSS anymore because you are targeting ul:nth-child(2) and after adding hr it should be ul:nth-child(3)
ul:nth-child(3){
float: left;
position: fixed;
width:auto;
}
nav>ul li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul>
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
Suggestion:
I'm not aware of your full code but In your case, you don't have to use nth-child you can easily use ul or consider adding a class to your ul (which is better) then target it in your CSS, here is an example:
ul.nav-items {
float: left;
position: fixed;
width:auto;
}
nav>ul.nav-items li{
border: 1px solid gray;
padding: 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>technical documentation page</title>
</head>
<body>
<nav id="navbar">
<header>
<h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
</header>
<hr>
<ul class="nav-items">
<li>LOGIN</li>
<li>MENUBAR</li>
<li>MASIKPATRAK</li>
<li>PAGARBILL</li>
<li>SHORTCUTS</li>
</ul>
</nav>
</body>
</html>
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>
I am using CSS for the first time. I am just making a test website I just want to test my code to see if it works when the | didn't show up inbetween the About me and My Songs
Image of what I see
There is suppose to be a | sort of line inbetween About Me and My Songs
The CSS
nav ul li {
display: inline;
border-right 2px solid #111111;
padding-right: 8px;
padding-left: 8px
The HTML
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li>About Me</li>
<li>My Songs</li>
</ul>
<h1>I am a YouTuber!</h1>
<p>This is my website check out other things about me above.</p>
</nav>
</body>
</html>
There is a colon missing in your border-right declaration.
It should be border-right: 2px solid #111111;
I am very new to CSS and have a few questions based on my code below:
1) Why does the bottom-border and background color cut off when i said the width= 100%?
2) Why does the second unordered list (with class "dropdown") within the first not inherit the elements declared to the parent unordered list (with class "tabs")?
3) Why does the first unordered list (with class "tabs") not appear horizontally when I run it in browser? I've tried using the 'float: left' and 'display: inline' lines but neither work, together or separately
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Random Web Page </title>
<link rel="stylesheet" type="text/css" href="basic styles test.cpp">
</head>
<body>
<div class="navbar">
<ul class="tabs">
<li>Pancakes</li>
<li>Waffles</li>
<li>Bacon</li>
<li>Drinks
<ul class="dropdown">
<li>Orange Juice</li>
<li>Milk</li>
<li>Water</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.navbar {
position: absolute;
top: 0;
left = 0;
width = 100%;
background: red;
border-bottom: 5px solid #ccc;
overflow: hidden;
}
.tabs {
list-style: none;
float: left;
}
.dropdown {
}
Your Syntax is wrong, its width:100%, not width = 100% :) same thing with left = 0
It's always attr:value in CSS.
The second ul is not styled because u used list-style:none only on the class .tabs
If u want to style all ul's this way then u should use
ul {list-style:none}
or
.tabs, .dropdown {list-style:none}
If u want the first ul horizontally u should use the float:left on the child-elements .tabs>li {float:left}
.tabs>li means u select ONLY direct li-elements from the .tabs-class element
Im really new to web design and i need to create a simple website for a class. For some reason no matter what i try my unordered list wont float right. please help! my unordered list will only stay on the left side of the page for some reason.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title> PhiladelphiaEagles.com - Summary Page </title> <link href="style.css" rel="stylesheet">
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page <h2>
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
<footer>
</footer>
</body>
</html>
This is my css
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:right;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
float:right;
border: 1px solid blue ;
float: right;
}
li:link {color:green;}
li:visited {color:green;}
li:hover {color:red;}
li:active {color:yellow;}
Alright, so there are a couple things going on you may want to change :D
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
Notice you have
width:910px;
This will change the entire webpage to only take up 910 pixels of your browser window. You haven't aligned the body with the rest of the window so the whole thing stays left.
To fix this you can do a couple things, one solution is to change width:910px; to width:100%;
Another solution is to center your body, you can do this by adding the two following lines to the body{} css block
margin-left:auto;
margin-right:auto;
There are several other things going on in your page that need some looking into, such using the deprecated align="center" along with your css, but one step at a time. You're doing great, keep on chugging along!
Check this FIDDLE
Just give your ul a <ul class="right">
Then in CSS
.right {
float: right;
width: 100px;
}
It's floated to the right already!
it says it in your css twice!
ul {
float:right;
border: 1px solid blue ;
float: right;
}
first you need to change that to
ul {
float:right;
border: 1px solid blue ;
}
second maybe you want the li's floated right?
in this case it's a bit different:
ul li{
float:right;
}
but this will put your ul underneath the figure element!
In conclusion: Your ul is already floated to the right, reading from your css, but on a page it's hard to see because the figure element that contains an image will not let ul to be all the way on the right side of the page.
I think the problem is width and float,
i just rewrite the code....
html code like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> PhiladelphiaEagles.com - Summary Page </title>
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page </h2>
<div class="leftside">
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
</div>
<div class="rightside">
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
</div>
</body>
</html>
css like
<style type="text/css">
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:left;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
border: 1px solid blue ;
float: right;
}
.leftside { float:left; width:400px;}
.rightside{float:right; width:400px;}
</style>
Try this code...