I made a footer with this following HTML:
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
Everything worked perfectly when I set it to fixed. But when I set footer to be not fixed, it wasn't located at the bottom of the page (floating) and had border radius. How to set it to the bottom of the page (not fixed) and remove the border-radius?
Any guidance will be very much appreciated.
You need to position the nav at the bottom of the page with CSS positioning. Refer to my earlier post on positioning.
Also you should override the media query from bootstrap to remove border-radius.
I have attached a code snippet but it will not work in this form.
You should copy the HTML code and a create a new external stylesheet using the CSS styles in the snippet and then add it after bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css"/>
footer {
position:absolute;
left:0;
bottom:0;
width:100%;
}
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar{
margin-bottom:0;
bottom:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
</footer>
It's simple. Just try this:
<nav>
<div class="container">
<p class="navbar-text">Copyright © OLShop.com 2016</p>
<ul class="text-center inline-me">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
in Custom CSS, add this:
ul.inline-me li a {display:inline; padding-right:4px;}
Hope that helps.
How to put it down to the bottom of page (not fixed)?
You can just put it's html in the right place (probably inside a footer tag).
JsFiddle : http://jsfiddle.net/nnndfcad/1/
Or you can use an absolute positioning like #santon's answer explained.
But I highly disapprove this type of approach.
How to remove the border-radius?
According to your code, a simple
.navbar-inverse {
border-radius: 0px;
}
Should solve it.
Related
I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
I recently started to learn CSS and HTML and I am doing a front page for exercise. However, the browser is overriding and turning my other elements (in different div) into links. I tried CSS to solve it, nothing worked. I removed all CSS and it still is the same.
The container div and all the elements inside it is are now links and when I click, it tries to redirect to hrf.html page.
Can you please tell me where I am doing a mistake?
Elements in container div in the dev tool have this code:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conquer</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li><a href="hrf.html">Homepage</li>
<li><a href="hrf.html">About Us</li>
<li><a href="hrf.html">Services</li>
<li><a href="hrf.html">Contact</li>
<li><a href="hrf.html">External</li>
</ul>
</div>
</div>
<div class="container">
<div class="first-sec">
<div class="first-img">
<img src="image1.jpg" alt="image">
</div>
<div class="heading">
<h1>CONQUER</h1>
<h2>Simple Website Design</h2>
</div>
</div>
</div>
</body>
</html>
it is necessary to close the tags properly otherwise there scope will disturb effects of other tags too..here in your code you forget to close <a> anchor tags thats why its become worry for you..try this
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
</ul>
</div>
</div>
Best of luck ahead
This is because you haven't closed any <a> tag. You must close it or else you will face same issue.
<li>Homepage</li>
Follow this practice in all <li> elements.
That should fix your code. Let me know.
you haven't closed the anchor tags inside your "navlist" class.
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
try this..
Currently got the following setup by checking out other previously asked questions, although now I'm stuck as it won't span out
you mean you want it to extend to full screen width? if so you need to make its parent element width 100% too for example
body {
width: 100%;
}
it could be another parent like a div.container or whatever..
for 100% width of span
<style type="text/css">
.banner span{
width: 100% !important;
}
</style>
You can add img inside as this.
<div ng-controller="MainCtrl">
<header class="banner">
<div class="banner-wrapper">
<div class="banner-title">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Williams_Companies_logo.svg/1280px-Williams_Companies_logo.svg.png" height="100px" width="100%">
</div>
<nav class="banner-nav">
{{ portal | welcome_navigation }}
</nav>
</div>
<nav class="nav-menu" id="header-tabs">
<ul>
<li class="nav-menu-title">Back to Main Site</li>
<li class="nav-contact">| Questions? Get in touch: <li class="nav-number">12345568693</li>
</ul>
</nav>
</header>
</div>
This actually has nothing to do with the width, as header elements are already supposed to span the whole width. There must be some default margin or padding in your html body. All you need to do is set default margin and padding on body tag to be 0.
(I usually follow setting margin/padding on body to 0 as a general practice)
You can remove your existing css code and replace it with this (I checked, it's working):
body {
padding: 0;
margin: 0;
}
<header class="banner">
<div class="banner-wrapper">
<div class="banner-title">
{{ portal | logo }}
</div>
<nav class="banner-nav">
{{ portal | welcome_navigation }}
</nav>
</div>
<nav class="nav-menu" id="header-tabs">
<ul>
<li class="nav-menu-title">Back to Main Site</li>
<li class="nav-contact">| Questions? Get in touch:
<li class="nav-number">12345568693</li>
</ul>
</nav>
</header>
I have a menu on my website which is situated like this,
header>.container>nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left
}
What I am trying to do is relocate nav inside of a new element within the structure called topLine, and so my new code is,
header.container.clearfix.topLine.nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left;
background-color:#282b30;
}
However it is not working and I am not sure what I am missing.
The HTML code is below
<header>
<div class="container">
<div class="topLine">
<!--MENU-->
<nav class="clearfix">
<i class="fa fa-bars"></i>
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Companies</li>
<li>News</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
i would have posted a comment but i don't have enough xp yet. :)
some periods that you have in your css should't be there. Periods are for referencing a class. for example, i see a .nav but you don't have a class="nav" anywhere in the html. if you want to refer to a child element, use >. So instead, do header > .container > .clearfix > .topLine > nav {
Problem:
Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.
HTML code:
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
CSS code:
How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?
You could do something like this:
nav ul li {
width:100px;
display:inline-block;
margin:5px;
padding:5px;
color:#333;
text-align: center;
}
nav[role="main"] ul li {
background-color:#aaa;
}
nav[role="sub"] ul li {
background-color:#eee;
}
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
Not sure what you mean by
same appearance but different styling
You can use the role attribute as a CSS selector, as shown here:
nav[role="main"],
nav[role="sub"] {
background: #222;
color: #f40;
}
nav[role="main"] a,
nav[role="sub"] a {
color: #fff;
}
<nav role="main">
<ul>
<li>Startpage
</li>
<li>Cars
</li>
<li>About us
</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari
</li>
<li>BMW
</li>
<li>Volvo
</li>
</ul>
</nav>