The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
can you help me. my header navbar didn't move to leftside. i want my header to be in corner. it did not change when i used css code. and even the text color. i use font-color and color but did'nt event change. what the problem of my code?
also the header navbar it's not responsive. did'nt working
.head2 {
background-color: lightgreen;
margin-left: -10px;
}
.navbar {
background-color: black;
}
.navbar-brand {
padding-left: 70px;
text-align: center;
}
.nav .navbar-nav li a {
color: white;
}
.color-me {
color: white;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header head2 col-sm-2 ">
<a class="navbar-brand " href="#">androbo</a>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
By default you parent element .container-fluid has a padding left and right set of 15px... You need to remove that padding in your .container-fluid, I would recommend you to create a CSS rule like below and apply it to any element you need/want to to remove the padding:
.no-padding {
padding: 0 !important;
}
.head2{
background-color: lightgreen;
margin-left:-10px;
}
.navbar{
background-color:black;
}
.navbar-brand {
padding-left:70px;
text-align: center;}
.nav .navbar-nav li a{
color:white;
}
.color-me{
color:white;
}
.no-padding {
padding: 0 !important;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid no-padding">
<div class="navbar-header head2 col-xs-3 " >
<a class="navbar-brand " href="#">androbo</a>
</div>
<div class="col-xs-5">
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
For a quick fix, add this to your CSS
.container-fluid { padding: 0; }
You can try this with Bootstrap framework.
kindly see to this:Bootsrtap navbar.This will solve your problem.
I am trying to add background color to my page, and padding the paragraphs, and divisions. But its not working. I would appreciate it if you could go through the code and explain whats wrong. Any tips on how I should do it, or what I can learn from or follow will be appreciated too. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Jake's Coffee Shop</title>
<meta charset="utf-8">
<style>
<! CSS For Menu > p {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 50px;
background-color: #f1f1f1;
}
#UnorderedList li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: navajowhite;
}
</style>
</head>
<body>
<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
<ul id="UnorderedList">
<li> Home
</li>
<li> Menu
</li>
<li> Music
</li>
<li> Jobs
</li>
</ul>
</div>
<div id="content">
<p>
<div>Come In And Experience...</div>
<br>
<div>
<img src="images.jpeg" alt="Heartmelting Coffee Picture">
</div>
<br>
<ul id="ItemMenu">
<li>Specialty Coffee And Tea</li>
<li>Freshly Made Sandwiches</li>
<li>Bagels, Muffins, And Organic Snacks</li>
<li>Music And Poetry Readings</li>
<li>Open Mic Nights</li>
<li>...</li>
</ul>
</div>
</p>
<footer>
<address>23 Pine Road <br>Nottingham, NGI 5YU <br>0115 9324567 <br></address>
<p>Copyright © 2011 Jake's Coffee House</p>
<p> yahoo#ratul_shams.com
</p>
</footer>
</body>
</html>
Here is a properly formatted and indended code. Your html comment was wrong notated and you nested a <div> inside a <p>, thats not allowed (see this question). Plus: Don't use <br> tags to create vertical space - use the margin property on divs to achieve that.
p {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 50px;
background-color: #f1f1f1;
}
#UnorderedList li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: navajowhite;
}
<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
<ul id="UnorderedList">
<li>
Home
</li>
<li>
Menu
</li>
<li>
Music
</li>
<li>
Jobs
</li>
</ul>
</div>
<div id="content">
<div>Come In And Experience...</div>
<div>
<img src="images.jpeg" alt="Heartmelting Coffee Picture">
</div>
<ul id="ItemMenu">
<li>Specialty Coffee And Tea</li>
<li>Freshly Made Sandwiches</li>
<li>Bagels, Muffins, And Organic Snacks</li>
<li>Music And Poetry Readings</li>
<li>Open Mic Nights</li>
<li>...</li>
</ul>
</div>
<footer>
<address>
23 Pine Road <br>
Nottingham, NGI 5YU <br>
0115 9324567 <br>
</address>
<p>Copyright © 2011 Jake's Coffee House</p>
<p>
yahoo#ratul_shams.com
</p>
</footer>
I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.
This is a common request. However, I'm going out of my mind.
<style type="text/css">
html, body { height: 100%; margin:0px; padding:0px; }
#content { margin-left: 50%; margin-right: 50%; width:900px; }
</style>
...
<body style="min-height:100%; height:100%; position:relative;">
<header style="min-height:200px;">
<div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;"> </div>
<div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
<div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
<img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
Welcome.
</div>
</div>
<div id="nav">
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
</header>
<article class="content" style="padding-bottom:60px;">
This is the main content
</article>
<footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
<div class="content">
<a href='#'>Privacy</a> | <a href='#'>Terms of use</a>
</div>
</footer>
</body>
I want my header, artcle, and footer items to be centered within the body. But, I want the content within the header, article, and footer to be left-aligned. What am I doing wrong, everything is currently just left-aligned. However, its not centered within the screen.
You need a wrapper DIV with this CSS:
#wrapper { width:800px; margin: 0 auto; }
Working DEMO
Try:
div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}
You need to add in body
width:960px; margin: 0 auto;
you need to set article, header, and footer display style to block in your css to accomodate older browsers
also why not use <nav/> instead of <div id="nav">?
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
<nav>
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</nav>