Jag är självlärd och kommer säkert inte kunna förklara mig ordentligt, men jag kör ändå!
Har fastnat och förstår inte varför. Jag har en header, med navigering. I navigeringsmenyn
kan man navigera i sajten:
Speltips (index.html (förstasidan))
TV-matcher (tv-matcher.html)
Bonusar (oddsbonusar.html)
Spelbolag (har en dropdown-meny)
Jag har artiklar på förstasidan som länkar till speltips1.html. Och jag har kopierat min header
till alla sidor. Men när jag är på speltips1.html så fungerar inte dropdown-menyn. Fastän
koden är identisk. Sen är det ju innehåll på sidorna också, fast jag klippte bort det här, då
det blev för mycket tecken.
Är det någon som vet varför?
Jag använder mig av bootstrap-klasser.
speltips1.html:
CSS:
index.html ser exakt likadan ut, jag har kopierat headern. Resten av innehållet på sidorna
klippte jag bort då det blev för mycket tecken.
Det är säkert någon mer info jag behöver ge er, men det här är allt jag kommer på nu.
Har fastnat och förstår inte varför. Jag har en header, med navigering. I navigeringsmenyn
kan man navigera i sajten:
Speltips (index.html (förstasidan))
TV-matcher (tv-matcher.html)
Bonusar (oddsbonusar.html)
Spelbolag (har en dropdown-meny)
Jag har artiklar på förstasidan som länkar till speltips1.html. Och jag har kopierat min header
till alla sidor. Men när jag är på speltips1.html så fungerar inte dropdown-menyn. Fastän
koden är identisk. Sen är det ju innehåll på sidorna också, fast jag klippte bort det här, då
det blev för mycket tecken.
Är det någon som vet varför?
Jag använder mig av bootstrap-klasser.
speltips1.html:
HTML-kod:
<!DOCTYPE html>
<html lang="sv-se">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Satsafett</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="satsafettBS.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Merriweather:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand"><img src="bilder/logomedpunktsemedgradientlitemindrevertikalt.png" id="logo" class="img-responsive"></a>
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li><a href="index.html">Speltips</a></li>
<li><a href="tv-matcher.html">TV-matcher</a></li>
<li><a href="oddsbonusar.html">Bonusar</a></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Spelbolag <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
CSS:
Kod:
body {
padding-top: 80px;
background-color: #F9EEE8;
}
/*header*/
.navbar-inverse {
background-color: #1d1a3d;
border-bottom: #EAB296 4px solid;
}
#logo {
max-width: 200px;
margin-top: -13px;
display: inline;
}
#mainNavBar ul{
padding: 0;
margin: 0;
}
#mainNavBar ul li a {
color: #999999;
font-weight: bold;
font-size: 15px;
font-family:
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
#mainNavBar ul li a:hover {
color: white;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.navbar-collapse {
text-align:center;
margin-top: 5px;
}
.navbar-nav {
display:inline-block;
float:none;
}
.navbar-toggle {
padding: 14px;
border: 1px;
}
#mainNavBar .navbar-toggle:hover {
background-color: red;
}
index.html ser exakt likadan ut, jag har kopierat headern. Resten av innehållet på sidorna
klippte jag bort då det blev för mycket tecken.
Det är säkert någon mer info jag behöver ge er, men det här är allt jag kommer på nu.
