so, managed to sort my nav bar out the way I like it... However now I've moved onto what I want underneath it. Except I cannot appear to 'gain control' over the 'list' element... What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact">CONTACT</li>
<li class="about">ABOUT
<strong><li class="leagues">LEAGUES</li></strong>
<li class="home">HOME</li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li>Essex</li>
<li>London</li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
This is all you need to gain control of these in css. See the jsfiddle example here
http://jsfiddle.net/fwvc6zsc/
If you want more certainty that you are using the right one you could also change it like this:
strong li a{
color: #000000;
text-decoration: none;
}
Because you using different class
Use this:
.navbar li {
css code
}
Related
After I add Bootstrap CDN all some of my html elements shift down. Such as nav bar, p's in footer. This happens exactly after adding a link to the header. If I comment it out the problem disappears.
Anyone knows how to solve this?
* {
margin: 0;
padding: 0;
}
body {
min-width: 800px;
}
header {
width: 100%;
position: fixed;
height: 40px;
line-height: 40px;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
.base {
background: #333333;
}
nav {
position: relative;
}
.logo {
float: left;
height: 100%;
padding: 0 20px;
}
.logo:hover {
background: #404040;
}
#logo_img {
height: 30px;
vertical-align: middle;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
nav li {
float: left;
width: 100px;
text-align: center;
color: #f2f2f2;
font-family: "Calibri";
font-size: 20px;
}
nav li:hover {
background: #404040;
}
#social {
float: right;
margin-right: 7px;
line-height: 35px;
}
#social li {
float: left;
text-align: center;
color: #f2f2f2;
padding: 0 4px;
}
#social li:hover {
background: #404040;
}
#social img {
height: 35px;
vertical-align: middle;
}
footer {
color: white;
height: 25px;
width: 100%;
padding: 5px;
position: fixed;
bottom: 0;
right: 0;
cursor: default;
border: none;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
footer a {
color: #007acc;
}
footer a:hover {
color: #007acc;
text-decoration: underline;
}
footer p {
color: #e6e6e6;
margin: 5px 15px;
font-size: 12px;
font-family: "Lucida Sans Unicode";
}
#info {
float: left;
}
#footer_name {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link type="text/css" href="css/main.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!--Bootstrap links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<header class="base">
<div class="logo">
<img id="logo_img" src="img/logo.png">
</div>
<nav>
<ul>
<li><span class="menu_item">Home</span></li>
<li><span class="menu_item">Diary</span></li>
<li><span class="menu_item">Foods</span></li>
<li><span class="menu_item">Settings</span></li>
<li><span class="menu_item">About</span></li>
</ul>
</nav>
<div id="social">
<ul>
<li><img class="social_icons" src="img/facebookc.png"></li>
<li><img class="social_icons" src="img/twitterc.png"></li>
<li><img class="social_icons" src="img/instagramc.png"></li>
</ul>
</div>
</header>
<footer class="base">
<p id="info">This website was created by a student of Wroclaw University of Technology. Contacts</p>
<p id="footer_name">Copyright © 2016 FitIt, Inc.</p>
</footer>
<!--Scripts-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Bottom pic navbar and social icons and text in footer are shifted...
Yes, that is always a problem when using common tags like <nav>,<header>,<footer> and etc.. because those elements are styled using Bootstrap, and makes conflict with existing styles.
you have several ways:
1) to make the current/existing style declarations more strict, i.e.
nav ul li { property:value!important;}
2) change the tagnames like this:
and then
nav.mynav ul li {property:value;}
3) change nav and etc tags with classified div, so you will have i.e.:
<div class="my_navig">
<ul>
<li><span class="menu_item">Home</span></li>
<li><span class="menu_item">Diary</span></li>
<li><span class="menu_item">Foods</span></li>
<li><span class="menu_item">Settings</span></li>
<li><span class="menu_item">About</span></li>
</ul>
</div>
What happened is you added some new styles via Bootstrap, which conflict with your existing CSS properties.
For the navbar links, the problem is here:
bootstrap.min.css:5 (line 5)
ol, ul {
margin-top: 0;
margin-bottom: 10px;
Add a property to your navbar ul like this:
<ul style="margin-bottom:0px;">
You will want to put the p tags inside a container like so:
<footer>
<div class="container">
<p>text</p>
</div>
</footer>
Bootstrap needs a proper block container inside that footer block, just like you have in your header block for the a.
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
I am creating ul li submenu for responsive,I dont know how to write for mobile device so far I have done this,Can any one help me to finish this menu. I have written for mobile alone if I execute in firefox and gave the ctrl+shift+m,It is not coming properly.kindly share you knowledge.below I have listed my sample code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIGHT BRIAN</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/faveicon1.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<header>
<div class="header">
<div class="container">
<div id="logo">
<span class="red">BRIGHT </span><span class="blue">BRAIN</span>
</div>
<!-- navigation -->
<nav id="navigation">
<ul>
<li class="active">Home</li>
<li>About us
<ul class="submenu">
<li>Mission</li>
<li>Vission</li>
<li>Special Features</li>
</ul>
</li>
<li> Course</li>
<li> Feedback
<ul class="submenu">
<li>From Training</li>
<li>From Student</li>
<li>From Parents</li>
</ul>
</li>
<li> Gallery</li>
<li> Franchise
<ul class="submenu">
<li>Low investment</li>
<li>Student work</li>
<li>Monthly good income</li>
</ul>
</li>
<li> Contacts</li>
</ul>
<div class="cl"> </div>
</nav>
<!-- navigation -->
</div><!--End of container-->
</div><!--End of header-->
</header><!--End of header element-->
</div><!--End of wrapper-->
</body>
</html>
For default css:
#charset "utf-8";
/* CSS Document */
#wrapper {
width: 100%;
margin: auto;
}
body {
margin: 0px;
font-size: 12px;
line-height: 16px;
font-family: arial, sans-serif;
color: #808080;
background: #efefef url(images/body.png) repeat-x 0 0;
}
.header {
background: url(images/header1%20copy.png) repeat-x 0 0;
height: 58px;
padding: 29px 0 0 0;
}
#font-face {
font-family: Comic_Sans_MS;
src: url(../font/Comic_Sans_MS.ttf);
}
#logo a {
font-family: Comic_Sans_MS;
text-decoration: none;
font-size: 40px;
font-weight: bold;
line-height: 0px;
}
#logo {
width:250px;
padding: 10px 0px 0px 0px;
float:left;
}
.red {
font-family: Comic_Sans_MS;
color: #E31C00;
}
.blue {
font-family: Comic_Sans_MS;
color: #29166F;
}
.header .container {
margin: auto;
width: 1000px;
}
#navigation {
float:left;
padding-top: 0px;
width:750px;
}
#navigation ul {
list-style: none;
list-style-position: outside;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
}
#navigation ul li {
float: left;
padding: 0 0 0 44px;
}
#navigation ul li a {
color: #77777b;
text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li.active a {
color: #2497e0;
text-decoration: none;
}
#navigation ul li:hover .submenu {
display: block;
}
#navigation ul .submenu {
position: absolute;
display: none;
width: 800px;
list-style: none;
margin-left: -200px;
}
#navigation ul .submenu li {
float: left;
margin: 0px;
height: 30px;
padding-top: 10px;
cursor: pointer;
}
For mobile css:
#charset "utf-8";
/* CSS Document (common width:260px;)*/
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
}
#logo {
float:left;
width:260px !important;
text-align:center;
}
#logo a {
font-size:25px !important;
}
#navigation {
float:left !important;
width:260px !important;
}
#navigation ul li{
float:left !important;
width:260px !important;
background-color:#CCCCCC;
}
}
.header .container {
width: 480px !important;
}
you have to set the container size properly 260 is small
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
margin:0px;
}
I have this basic navigation bar, and I want to make the menu buttons centered, and also I want a separating line between them. Also I think my code may have some unnecessary parts.
Here is an image of what I am trying to create:
Here is my source code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</span>
</div>
</body>
</html>
And here is my CSS file:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body
{
background-color:#c5c5c5;
}
DEMO
This should do what you like.
margin:0 auto centers elements on the page, so you simply had to set the li parent to an auto width with this css attatched.