Forum Mjukvara Programmering och digitalt skapande Tråd

Hjälp med att skapa en "normal/smartare" meny än den jag har nu.

1
Skriv svar
Permalänk
Medlem
●

Hjälp med att skapa en "normal/smartare" meny än den jag har nu.

Håller på att försöka lära mig lite om att skapa en webbsida (är alltså ganska kass på allt som har med "programmering" att göra.)

Jag har just nu en meny som ser såhär: http://newmill.no-ip.org/test/

Jag har en css fil med stilen på och hur aktiva och inaktiva knappar ska se ut.

Det jag skulle vilja ha hjälp med är: Hur kan jag skapa en meny som jag lätt lägger till och tar bort knappar, istället för att lägga till och ta bort varje knapp manuellt på varje sida.

Förstår så långt att jag ska använda mig av t.ex <?php include 'meny.php' ?> (då har jag en meny så jag kan lägga till och ta bort knappar med av att bara ändra i en fil. MEN på något vis försvinner stilen från css filen länkad i meny.php Så jag får bara en meny som ser ut som en punktlista med blåa länkar.

Hoppas någon förstår hur jag menar och kan hjälpa mig.

Har idagsläget alltså en index fil för varje knapp, där man får lägga till och ändra alla knappar manuellt, men som ändå använder samma css fil för utseendet.

Redigera
Citera flera Citera
Permalänk
Medlem
●

om jag förstått dig rätt så vill du ha en fil som styr menyraden för alla sidor ?
Då kan du göra en template sida som du sen include i alla sidorna(måste vara i php format för att gå).

ex. <?php
include 'template.hmtl';
?>

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Robhult:

om jag förstått dig rätt så vill du ha en fil som styr menyraden för alla sidor ?
Då kan du göra en template sida som du sen include i alla sidorna(måste vara i php format för att gå).

ex. <?php
include 'template.hmtl';
?>

Gå till inlägget

Jo, du har förstått precis rätt. Tror att det var något liknande jag gjorde igår när jag provade. Jag gjorde en meny.php (en sida med bara menyn), som använde sig av en css fil för sitt utseende med aktiva och inaktiva knappar.

EDIT: Eventuellt, istället för så jag tänkt innan. Hur skapar jag en template som ser ut som den nuvarande menyn, där den aktiva sidan på menyn är mörkare än de andra knapparna?
Blir det ungefär samma sak som att slå ihop css filen med php filen? Så att index filen går till template.php, tar menyn och klasserna på knapparna och tillämpar på den aktuella sidan?
Sedan skapade jag en index fil i en mapp på servern och använde <?php include 'meny.php' ?> i index filen. Då fick jag fram en meny, fast i form av punktlista och blåa länkar. Precis som att sjävla menyn blev inkluderad men inte css stilen.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

hade du skrivit in html och body taggarna ? i meny.php filen

Här är en del av min:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="eng">
<head>
	<meta charset="utf-8">
  	<link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/navBar.css" rel="stylesheet" type="text/css">
    <link href="css/emailStyle.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/countdown.jquery.js"></script>
	<script type="text/javascript" src="js/ext.js"></script>
    <script type="text/javascript" src="js/navBar.js"></script>
</head>
<body>
<div id="bildyta1">
	<!-- Högra sidan av Wrapper -->
	<!-- skriv <img src="bildens plats här"> -->
</div>
<div id="bildyta2">
    <!-- Vänstra sidan av Wrapper -->
	<!-- skriv <img src="bildens plats här"> -->
    <!-- för att byta rad skriv: <br /> -->
</div>
<div id="wrapper">
	<div id="header"> <!-- Logodelen -->
    	<img src="grafik/Mystangen_background_hoger.png" alt="Mystängens Samfällighetsförening">
    </div>
    <div id="navBar">
    	<img src="grafik/Mystangen_background_vanste.png">
        <div id="navBarLinks">
        <!-- Menyrutan med länkarna i -->
        	<table>
            <tr><td id="whiteBar"></td></tr>
            	<tr><td><a id="startsida" href="index.php" title="Startsida">Startsida</a></td></tr><php
            <tr><td id="whiteBar"></td></tr>

Du kan inte ha med end tags för html och body. alltså </body> och </html>.

För det du skrev sen kan du använda detta Javascript:

function setActive() {
  			aObj = document.getElementById('navBar').getElementsByTagName('a'); // navBar är vad diven/tablet heter. Och "a" är vad det är för typ
  			for(i=0;i<aObj.length;i++) { 
    			if(document.location.href.indexOf(aObj[i].href)>=0) {
      				aObj[i].className='current'; //current är classen som du vill ska vara aktiv när man är på den sidan.
    			}
  			}
		}
		window.onload = setActive;
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har försökt och försökt nu, men jag lyckas inte få till menyn alls. Nu har jag gjort en menu.php som använder en separat css. När jag sedan försöker att inkludera denna i t.ex index.php så får jag bara en vit sida. Fattar inte vad som är fel.

Såhär ser index.php ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
</head>

<body>
<?php include ("/test2/includes/menu.php");?>
</body>
</html>

Såhär ser menu.php ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" href="/test/menu_style.css" type="text/css" media="screen" />
</head>
<body>
<br>
<br>
<ul id="menu">
<li><a href="#" title="" class="current">Home</a></li>
<li><a href="#" title="">Teamspeak</a></li>
<li><a href="#" title="">Label 4</a></li>
<li><a href="#" title="">Label 5</a></li>
<li><a href="/test/contact/" title="">Contact</a></li>
</ul>


</body>
</html>

Och såhär ser menu_style.css ut:

ul#menu { width: 100%; height: 43px; background: #FFF url("../images/menu-bg.png") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #CCC; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #FFF; }
ul#menu li a.current{ color: #FFF; background: #FFF url("../images/current-bg.png") top left repeat-x; padding: 5px 15px 0; }

Det enda detta resulterar i i webbläsaren är en vit sida som, dock heter "Home" på fliken i webbläsaren. Vad är det som felar?

Redigera
Citera flera Citera
Permalänk
Medlem
●

För att inkudera i php skriver man

<?php
   include 'filens sökväg här';
?>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo, givetvis. >_< använde dreamweavers "Insert/PHP Objects/Include" och dreamweaver skriver det såhär: <?php include(); ?>

Det dumma nu är att jag själv har inte insett att lägga upp det som nu fungerar inte heller. CSS filen innehåller två olika klasser, en för knappar som är intryckta och en för knappar som inte är. (Den intryckta knappen blir mörkare än dom icke intryckta. Problemet nu är om jag importerar en css fil i menu.php och sedan in i index.php så kan jag inte få nästa sida att fungera. Eftersom "Home" knappen kommer vara intryckt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Testa att ta bort "Endtaggarna" för html och body i meny filen. (</html> och </body>)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" href="/test/menu_style.css" type="text/css" media="screen" />
</head>
<body>
<br>
<br>
<ul id="menu">
<li><a href="#" title="" class="current">Home</a></li>
<li><a href="#" title="">Teamspeak</a></li>
<li><a href="#" title="">Label 4</a></li>
<li><a href="#" title="">Label 5</a></li>
<li><a href="/test/contact/" title="">Contact</a></li>
</ul>


</body> // ska bort 
</html> // ska bort

Är inte säker men tror att de här också kan påverka

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> // ska bort.
<html xmlns="http://www.w3.org/1999/xhtml"> // ska bort
<head> // ska bort
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> // ska bort
<title>Home</title> // ska bort
</head> // ska bort

<body> // ska bort
<?php include ("/test2/includes/menu.php");?>
</body>
</html>
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara