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>
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 have a list that I am using as a horizontal timeline. However, I am having trouble trying to left align the list, so that the first element is flush left with left side of the scrollbar. I know part of the problem is that I have a set margin-left, I need some way to put space in between list elements (removing margin-left pushes the first element further to the left, but not all the way to be flush with the left side of the scrollbar.
.navbar {
margin-bottom:0px;
}
.jumbotron {
margin-bottom:0px;
}
#timeline {
list-style:none;
white-space:nowrap;
overflow:auto;
}
#timeline li {
display:inline-block;
padding:1.5%;
border:1px solid #d1d2d3;
margin-left:2%;
margin-bottom:2%;
margin-top:2%;
text-align:center;
}
#timeline li h3, #timeline li em {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>My Name</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<ul id="timeline">
<li>
<h3>Graduated from College</h3>
<em>May 24, 2012</em>
</li>
<li>
<h3>Started my first job</h3>
<em>June 30, 2012</em>
</li>
<li>
<h3>Started my second job</h3>
<em>April 3, 2014</em>
</li>
<li>
<h3>Bought a house!</h3>
<em>August 12, 2015</em>
</li>
<li>
<h3>Got married</h3>
<em>June 3, 2016</em>
</li>
<li>
<h3>First child born</h3>
<em>May 1, 2017</em>
</li>
</ul>
</div>
</div>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
You have everything there except you omitted padding-left:0px; in the timeline id!
Well done you, looks great!
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0px;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #d1d2d3;
margin-left: 2%;
margin-bottom: 2%;
margin-top: 2%;
text-align: center;
}
#timeline li h3,
#timeline li em {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>My Name</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<ul id="timeline">
<li>
<h3>Graduated from College</h3>
<em>May 24, 2012</em>
</li>
<li>
<h3>Started my first job</h3>
<em>June 30, 2012</em>
</li>
<li>
<h3>Started my second job</h3>
<em>April 3, 2014</em>
</li>
<li>
<h3>Bought a house!</h3>
<em>August 12, 2015</em>
</li>
<li>
<h3>Got married</h3>
<em>June 3, 2016</em>
</li>
<li>
<h3>First child born</h3>
<em>May 1, 2017</em>
</li>
</ul>
</div>
</div>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
I would strongly suggest you learn how to use your Browser's developer console. A quick inspection of this revealed that the #timeline element has 40px of padding-left.
I removed that padding, and altered your margin-left on the timeline items so that it only puts margin between elements. I did this by using the adjacent sibling selector:
#timeline li + li {
margin-left: 2%;
}
And - as a side-note, 0px is redundant / not necessary, as 0 is unitless, you can simply use 0 in values (such as margin-bottom: 0;)
Here's your snippet, modified to work properly:
.navbar {
margin-bottom: 0;
}
.jumbotron {
margin-bottom: 0;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #d1d2d3;
margin-bottom: 2%;
margin-top: 2%;
text-align: center;
}
#timeline li + li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>My Name</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<ul id="timeline">
<li>
<h3>Graduated from College</h3>
<em>May 24, 2012</em>
</li>
<li>
<h3>Started my first job</h3>
<em>June 30, 2012</em>
</li>
<li>
<h3>Started my second job</h3>
<em>April 3, 2014</em>
</li>
<li>
<h3>Bought a house!</h3>
<em>August 12, 2015</em>
</li>
<li>
<h3>Got married</h3>
<em>June 3, 2016</em>
</li>
<li>
<h3>First child born</h3>
<em>May 1, 2017</em>
</li>
</ul>
</div>
</div>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
To get those Li's really stuck to the left hand-side of your element you need remove the padding and margin from the UL first, then on the Li's apply a margin-right rather than left.
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
margin: 0;
padding: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #d1d2d3;
margin-right: 2%;
margin-bottom: 2%;
margin-top: 2%;
text-align: center;
}
Part of your problem is the margin-left on the list element, yes. You can remove that for the first one like so: #timeline li:first-child { margin-left: 0; }. Additionally, the ul itself has padding to the left by default, which you can remove like so: #timeline { padding-left: 0; }.
You need to add in this to the css:
#timeline li:first-child {
margin-left:0
}
and change this css for the timeline element:
#timeline {
list-style:none;
white-space:nowrap;
overflow:auto;
padding: 0;
}
thats it!
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
I've been trying to figure this out for a while but I can't seem to get it to work. All I want is to add text in the middle of the list item (see code) however it creates an extra line and makes the row bigger. I tried using the tag but it doesn't work. How can I add the text to be centered without changing the row size?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
</style>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
</html>
There is a better solution than adding spans. Copy jQuery Mobile button's CSS, that are used for icons. Do the changes you want to them. Of course, add a custom class to a tag.
See it working here.
<li>
Center Text
</li>
jQuery Mobile uses :after, use :before for your left side icon.
.ui-icon-myicon:before {
content:"";
left: .5625em;
position: absolute;
display: block;
width: 22px;
height: 22px;
background-color: #666;
background-color: rgba(0, 0, 0, .3);
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url("http://forum.librecad.org/images/gear.png");
}
To center text, follow CSS hierarchy to override default settings.
Thanks to ezanker for his valuable input. Adding padding: 40px makes center alignment just perfect!
.ui-listview > li > a.ui-btn {
text-align: center;
padding: 40px; /* see ezanker's comment below */
}
Use text-align: center to center align the text.
Set the extra icon to display: block and use the ui-btn-icon-left class to align left.
li.x-center > a.ui-btn {
text-align: center;
}
li.x-center > a > span {
display: block;
}
<ul data-role="listview" data-inset="true">
<li data-icon="myicon" class="x-center">
<span class="ui-btn-icon-left ui-icon-myicon2"></span>Center this text
</li>
</ul>
Fiddle
Add style="text-align:center" to your <a> tag:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
</style>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
I'm working through a PSD to HTML5/CSS3 course on Udemy, and my results aren't rendering like those shown in the screencast. I'd post comparison screenshots if SO didn't require a rep of 10, but basically the author's version renders the list items horizontally, without bullets, while mine keep rendering vertically, with bullets.
HTML:
<html>
<head>
<title>My Website</title>
<link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<div class="container clearfix">
<a href="/" title="Return to Home" id="logo">
<img src="images/logo.gif" alt="Logo">
</a>
<nav>
<ul>
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
<!-- end container -->
</header>
</body>
</html>
CSS:
/* Navigation Styling */
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ui li {
list-style: none;
float: right;
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 20px;
border-left: solid 1px #333;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE6/7 (trigger hasLayout) */
}
I've tried switching display in header nav ul li a to inline, which would seem to be more logical for a horizontal list, but that doesn't change anything. Any ideas?
You have a syntax error in your css, just replace nav ui li by nav ul li.