I'm trying to get my ul section to display my code on the same line yet it still presents it in a vertical list. I'm new to this and so can't figure out why it won't go on the same line. I've tried display:inline-block; and float:left; but that hasn't worked.
HTML:
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
CSS:
body nav ul li {
display: inline-block;
}
You have it right. Check that the css file is named correctly and that main2.css is in the same directory as your html file.
works as expected when put into a snippet - see below. Check the filepath for the stylesheet and typos...
body nav ul li{
display:inline-block;
}
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet">
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
Related
I have read through my small code and want the dots removed from my nav-bar. I have already explored other similar questions on stack over flow and tried their answer. But the outcome that I have seen is that is still not removing the dots but when I type in the code in code.io it removes it for me: https://codepen.io/abhirajsb/pen/xxVLrpW.
My HTML code in my code editor(VS-CODE):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS code:
li {
list-style-type: none;
padding: 0%;
margin: 0%;
}
The output on my extension live is always showing the dots:
Try This in the header replace styles.css with ur css:
<head>
<link rel="stylesheet" href="styles.css">
</head>
You just try list-style: none instead of list-style-type: none;
li {
list-style: none;
padding: 0%;
margin: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
Could you please show us your CSS code? if this is all you have. Could you please try to do a hard reset. by clicking Ctrl + shift + R in your browser and check again with our answers.
Or try to run it on your local device. I don't see ay problem with your code as it run without any problem. anyway I tried it with list-style: none; and it worked
ul {
list-style: none;
}
that would solve your problem. if that doesn't work please let me know.
ul {
list-style: none;
}
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
I simply forgot to reference CSS style sheet to my HTML sheet.
solved it.
Please don't be too mean i am just trying to understand. Okay, so I am proficient in C++, Java, and C# for applications. I have recently been trying to understand web development. Right now i am going over basic HTML coding. Looking at http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html and and trying to recreate https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works. But it is not working as intended.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css"> <!-- You need this in order to have CSS, it has -->
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
So when i type this code into Codepen it works as intended, With every paragraph displaying blue text. However, when i code it in notepad ++ as a HTML file it does not add the CSS style, format, background color, etc. Upon looking into it i found out if i add the style directly in the paragraph bracket it works (as shown below)
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
</style>
</head>
<body>
<p style="text-decoration: underline;">This is my body green</p>
<p style = "color: blue;">this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
Adding declamation blocks like <meta charset="utf-8>and <link rel="stylesheet" href="style.css"> has not helped either.
My question is why does this code work some places and not others? Is there a web browser setting that could be interfering? I have tried IE, FF, and Chrome but not of them will display the CSS style unless i specifically declare it with in the brackets not in the header. If it is a logical error please post/comment article to read.
In the first example the comment <!-- You need this in order to have CSS, it has --> is misplaced into a CSS declaration, so don't put HTML comments in a CSS declaration .
Declaring p {color: blue; font-family:arial;} only affects to <P></P> tags.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
If you need to add specific formatting to specific tags you can use the class attribute (class="blue"), and declare a class in CSS appending a point at the beginning of the class name (.blue).
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
.underlined { text-decoration: underline }
.blue { color: blue }
</style>
</head>
<body>
<p class="underlined">This is my body green</p>
<p class="blue" >this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
You do not need to declare a style type, as the only type is for CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scarface</title>
<link rel="stylesheet" href="normalize/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>The World Is Yours</h1>
</header>
<nav>
<li>Home</li>
<li>Pictures</li>
<li>Contact</li>
</nav>
</div>
</body>
</html>
Is it okay if I put my nav tag outside of the header tag? I know many people/developers like to have the navigation "wrapped" inside of their header tags. Thank you in advance for any help with my question.
When I click on a button to redirect to a new page, new page is not at the top position. I have to scroll down to have a look. Please have a look at below pictures.
Page titled 'LIST' is the page I am redirecting to.
HTML of the page I'm redirecting to is
<!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">
<title>Some Title</title>
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
</head>
<body>
<div id="innerheader">
<div class="innerwrapper">
<h1 id="someId" onClick="location.href='index.html'"></h1>
<div class="mobileMenu"></div>
<div id="mainNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div id="mobileNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="priceList">
<h4>List</h4>
<div class="innerwrapper">
<div class="leftsection">
<div class="listSec">
<h5>ABC</h5>
<ul>
<li>
<p>A</p>
<span>70</span>
<div class="clear"></div>
</li>
<li>
<p>B)</p>
<span>300</span>
<div class="clear"></div>
</li>
<li>
<p>C</p>
<span>100/150/200</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
The CSS
.innerwrapper {
width:1140px;
height:700px !important;
margin:0 auto;
position:relative;
z-index:99999
}
#priceList{
background:#fff;
padding-bottom:80px;
}
#priceList h4{
font-size:24px;
color:#37444d;
line-height:65px;
font-weight:300;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #f0f0f0;
border-top:solid 1px #f0f0f0;
}
If I remove height from above class, it works fine.
The reason that the #priceList div is being pushed down is because your div innerwrapperhas height: 700px set to it which pushes the content beneath it(i.e. priceList) down 700 pixels.
Edit:
To solve this you need to remove/change height: 700px !important on innerwrapper.
If it's crucial for your design that innerwrapper is 700 pixels high you have two options. Either absolute position your price list and place it exactly where you want it or you can move your pricelist to within the innerWrapper.
Your script is doing something here.
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
Try removing the script part and see how it works. Then, you can recode it as per the need.
Nothing shows up when I try to put a background image in a div via CSS. I've tried adding properties like position, width, height. And, I am also able to place the photo via CSS in the <body> tag. But, obviously, I'd like to not have to leave it there. Here's my html:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div id="photo">
</div>
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</body>
</html>
Here's my CSS:
#photo{
background-image: url('../images/bandbanner.png')
}
<div id="photo">
</div>
in your dive you haven't set the size. for example:
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
The div photo contains nothing, try adding
#photo{
background-image: url('../images/bandbanner.png');
width: 100%
padding : 100px;
//hopefully this will make the photo appear and you can go from there
}
Set height & width property of #photo.
See working example: http://jsfiddle.net/ihkawiss/2n0o9t9x/
The HTML:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div class="photo">
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</nav>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</div>
</body>
</html>
And the CSS:
.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
set your height and width
width: px;
height: px;