Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Webbsida, Meny skifta css

1
Skriv svar
Permalänk
Medlem
●

Webbsida, Meny skifta css

Hejsan!

Är ute nu lite i sista sekunden!
Jag håller på och kodar en webbsida men vet dock inte riktigt hur jag ska göra med menyn?
Problemet är att när man klickar på en av kategorierna på menyn så forslas man inte vidare till den kategorin utan man är fortfarande kvar.
Så jag undrar ifall det är en speciell kod man använder för det samt skapar en ny CSS för just den kategorin? (tänker jag rätt?)
Och hur får jag in innehållet där?

Med vänlig hälsning//JV

Här kommer HTML koden: 
<!DOCTYPE html><html lang="sv">
<head>

<link rel="stylesheet" href="isakcss.css" />
<title>Örebro Bryggeriet</title>
</head>

<body>
<div id="container">
		
		<div id="header">
		</div>
		
		<div id="menu">
        	<ul>
            	<li class="kontakt"><a href="#">Kontakt</a></li>
                <li class="omoss"><a href="#">Om oss</a></li>
                <li class="produkter"><a href="#">Produkter</a></li>
              <li class="vaelkommen"><a href="#">Välkommen</a></li>
            </ul>
        </div>
        <div id="content">
        <div id="content_top">hejsan</div>
        <div id="content_main">
        	<h2>Jadu</h2>
        	
<h3>More information</h3>
        	<p>hej</p>
       	  
        </div>
        <div id="content_bottom">Hejsan</div>
		<div id="footer"><h3>Örebro Bryggeriet sedan 2015</h3></div>
</body>
</html>
HTML

Css koden:

body {
	background-image: url(Bakgrund.jpg);
	background-repeat: no-repeat;
	background-color:#C1D1E1;
}

#container
{
  display: block; 
  height:auto;
  position: relative; 
  width: 960px;
}

#menu
{
display:block;
float:left;
clear:both;
width:960px;
height:54px;
float:left;
clear:both;
}

#menu ul {
	list-style: none;
	padding: 0px;
	margin-left:auto;
	width:960px;
}

#menu li {
	list-style: none;
	padding: 0px;	
	display: inline; 
	
}

#menu a {
	float: right;
	height: 36px;
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	padding-top: 50px;
	font-size: 30px;
	padding-left:13px;
	padding-right:13px;
	
}

#menu a:hover{

}

#content


#content_top


#content_main


#content_bottom


#footer
{
height:auto;
}
CSS
Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av JesperVilgot:

Hejsan!

Är ute nu lite i sista sekunden!
Jag håller på och kodar en webbsida men vet dock inte riktigt hur jag ska göra med menyn?
Problemet är att när man klickar på en av kategorierna på menyn så forslas man inte vidare till den kategorin utan man är fortfarande kvar.
Så jag undrar ifall det är en speciell kod man använder för det samt skapar en ny CSS för just den kategorin? (tänker jag rätt?)
Och hur får jag in innehållet där?...

Gå till inlägget

Hejsan Jesper!

Om jag har förstått det rätt så vill du att din css, meny och footer hänger med när man navigerar sig genom meny-valen men innehållet ändras baserat på vilken kategori man väljer.
Jag vet inte hur mycket du har jobbat med hemsidor men en simpel lösning kan vara att använda sig utav lite PHP för att göra sidan lite mer dynamisk.

Jag har tagit din kod och gjort lite ändringar. Först och främst flyttar jag ut början av dokumentet till slutet av menyn i en egen fil jag kallat "header.php"( ett tips är också att ta vana till att använda <meta charset="utf-8"> så blir åäö inte så konstiga )

header.php

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="isakcss.css" />
<title>Örebro Bryggeriet</title>
</head>

<body>
<div id="container">
		
<div id="header">
</div>

<div id="menu">
	<ul>
    	<li class="kontakt"><a href="#">Kontakt</a></li>
        <li class="omoss"><a href="#">Om oss</a></li>
        <li class="produkter"><a href="products.php">Produkter</a></li>
      <li class="vaelkommen"><a href="#">Välkommen</a></li>
    </ul>
</div>
Dold text

Därefter gör vi samma sak med footern ända till slutet av dokumentet, den väljer jag att kalla "footer.php"

footer.php

<div id="footer"><h3>Örebro Bryggeriet sedan 2015</h3></div>
</body>
</html>
Dold text

Så, när vi väl har båda delarna så kan vi nu slå ihop dem i vår index.php med vårt innehåll på index-sidan

index.php

<?php
include 'header.php';
?>

<div id="content">
<div id="content_top">hejsan</div>
<div id="content_main">

</div>
<div id="content_bottom">Hejsan</div>

<?php
include 'footer.php';
?>
Dold text

Detta gör att om du behöver göra några ändringar i t ex menyn så appliceras det på alla sidor genom att ändra ett dokument istället för att behöva ändra det på alla dokument du har. Du såg kanske att jag hade ändrat en utav dina länkar i menyn. I products.php gör jag samma sak som i index.php men ändrar innehållet till det passande.

products.php

<?php
include 'header.php';
?>

<div id="content">
<div id="content_top"></div>
<div id="content_main">
<h3>Produkter</h3>
</div>
<div id="content_bottom">Hejsan</div>

<?php
include 'footer.php';
?>
Dold text

Gör du nu en ändring i header.php så ändras det på varje sida då allt är kopplat till den och samma sak med din css-fil så du slipper skapa flera css-filer för varje sida. Har du några funderingar så fråga på!

Visa signatur

NZXT Switch 810 | MSI Z77A-G45 | i7 3770K |Cooler Master Hyper 212 Plus | 8GB(2x4GB) 1600 MHz | Asus GeForce GTX 780 DC2 | Corsair CX750M

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Har du en one-page sida och vill highlighta det menyvalet du har klickat på?
Du behöver isf använda javascript för att sätta en CSS klass i menyvalet vid klick.

Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

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

Hejsan Jesper!

Om jag har förstått det rätt så vill du att din css, meny och footer hänger med när man navigerar sig genom meny-valen men innehållet ändras baserat på vilken kategori man väljer.
Jag vet inte hur mycket du har jobbat med hemsidor men en simpel lösning kan vara att använda sig utav lite PHP för att göra sidan lite mer dynamisk.

Jag har tagit din kod och gjort lite ändringar. Först och främst flyttar jag ut början av dokumentet till slutet av menyn i en egen fil jag kallat "header.php"( ett tips är också att ta vana till att använda <meta charset="utf-8"> så blir åäö inte så konstiga )

header.php

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="isakcss.css" />
<title>Örebro Bryggeriet</title>
</head>

<body>
<div id="container">
		
<div id="header">
</div>

<div id="menu">
	<ul>
    	<li class="kontakt"><a href="#">Kontakt</a></li>
        <li class="omoss"><a href="#">Om oss</a></li>
        <li class="produkter"><a href="products.php">Produkter</a></li>
      <li class="vaelkommen"><a href="#">Välkommen</a></li>
    </ul>
</div>
Dold text

Därefter gör vi samma sak med footern ända till slutet av dokumentet, den väljer jag att kalla "footer.php"

footer.php

<div id="footer"><h3>Örebro Bryggeriet sedan 2015</h3></div>
</body>
</html>
Dold text

Så, när vi väl har båda delarna så kan vi nu slå ihop dem i vår index.php med vårt innehåll på index-sidan

index.php

<?php
include 'header.php';
?>

<div id="content">
<div id="content_top">hejsan</div>
<div id="content_main">

</div>
<div id="content_bottom">Hejsan</div>

<?php
include 'footer.php';
?>
Dold text

Detta gör att om du behöver göra några ändringar i t ex menyn så appliceras det på alla sidor genom att ändra ett dokument istället för att behöva ändra det på alla dokument du har. Du såg kanske att jag hade ändrat en utav dina länkar i menyn. I products.php gör jag samma sak som i index.php men ändrar innehållet till det passande.

products.php

<?php
include 'header.php';
?>

<div id="content">
<div id="content_top"></div>
<div id="content_main">
<h3>Produkter</h3>
</div>
<div id="content_bottom">Hejsan</div>

<?php
include 'footer.php';
?>
Dold text

Gör du nu en ändring i header.php så ändras det på varje sida då allt är kopplat till den och samma sak med din css-fil så du slipper skapa flera css-filer för varje sida. Har du några funderingar så fråga på!

Gå till inlägget

Jag ber hemskt mycket om ursäkt för att jag har förklarat helt fel och givit fel info, skulle vara html, alltså när man trycker så ska man länkas till en t.ex produkter och då blir det en ny sida

ändrade så det ser ut såhär nu :

<div id="header">
		</div>
		
		<div id="menu">
        	<ul>
            	<li class="vaelkommen"><a href="valkommen.html">Välkommen</a></li>
				<li class="produkter"><a href="produkter.html">Produkter</a></li>
				<li class="omoss"><a href="Omoss.html">Om oss</a></li>
				<li class="kontakt"><a href="kontakt.html">Kontakt</a></li>  
            </ul>
        </div>

men alltså nu när jag har denna sortens meny så blir det hel sjukt när man ska skriva/lägga in någonting på webbsidan. infogar bild nedan.

alltså nu när jag fixade själva menyn så den länkar till en annan html när man t.ex trycker på produkter eller något annat, fast nu är problemet att det varken går att flytta menyn ner eller upp, och själva menyn ska ligga vid den blåa horizontela linjen, och när man för in saker i content koden så flyttas allt.. och får bara använda html och css

Skrivet av Florrpan:

Har du en one-page sida och vill highlighta det menyvalet du har klickat på?
Du behöver isf använda javascript för att sätta en CSS knapp på menyn vid klick.

Gå till inlägget

Jag ber hemskt mycket om ursäkt för att jag har förklarat helt fel och givit fel info, skulle vara html, alltså när man trycker så ska man länkas till en t.ex produkter och då blir det en ny sida

ändrade så det ser ut såhär nu :

<div id="header">
		</div>
		
		<div id="menu">
        	<ul>
            	<li class="vaelkommen"><a href="valkommen.html">Välkommen</a></li>
				<li class="produkter"><a href="produkter.html">Produkter</a></li>
				<li class="omoss"><a href="Omoss.html">Om oss</a></li>
				<li class="kontakt"><a href="kontakt.html">Kontakt</a></li>  
            </ul>
        </div>

men alltså nu när jag har denna sortens meny så blir det hel sjukt när man ska skriva/lägga in någonting på webbsidan. infogar bild nedan.

alltså nu när jag fixade själva menyn så den länkar till en annan html när man t.ex trycker på produkter eller något annat, fast nu är problemet att det varken går att flytta menyn ner eller upp, och själva menyn ska ligga vid den blåa horizontela linjen, och när man för in saker i content koden så flyttas allt..

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ursäkta om jag frågar, men är denna sida för att du vill lära dig webdesign/utveckling eller för att bara "ha en hemsida" till erat bryggeri?

Är ditt svar alternativ två hade jag nog tipsat om att ge Wordpress ett försök. Enklare att underhålla (Enligt mig) och kommer se mer professionelt ut då det finns en hel del plugins som kommer underlätta det mesta om man inte är så erfaren kodare.

Vill absolut inte låta otrevlig eller dylikt, mest bara nyfiken.. Dumt att göra det svårare än det behöver vara, men det är ju bara min åsikt.

Visa signatur

Windows användare sedan 1991. Numera MacBook Pro M1 Pro.

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

Ursäkta om jag frågar, men är denna sida för att du vill lära dig webdesign/utveckling eller för att bara "ha en hemsida" till erat bryggeri?

Är ditt svar alternativ två hade jag nog tipsat om att ge Wordpress ett försök. Enklare att underhålla (Enligt mig) och kommer se mer professionelt ut då det finns en hel del plugins som kommer underlätta det mesta om man inte är så erfaren kodare.

Vill absolut inte låta otrevlig eller dylikt, mest bara nyfiken.. Dumt att göra det svårare än det behöver vara, men det är ju bara min åsikt.

Gå till inlägget

Hahah nej jag går webbutvecklings kurs på gymnasiet! Vi skulle göra webbsidor i slutprojektet men i alla fall har lyckats med allt jag har frågat om satt hela dagen igår samt natten och dagen iförrgår.
Här har ni hur jag gjorde med allt, Skapade alltså en ny html kod för varje kategori i menyn.

[code]
<!DOCTYPE html><html lang="sv">
<head>

<link rel="stylesheet" href="isakcss.css" />
<meta charset="utf-8">
<title>Örebro Bryggeriet</title>
</head>

<body>
<div id="container">

<div id="header">
<ul>
<li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
<li class="omoss"><a href="omoss.html">Om oss</a></li>
<li class="produkter"><a href="produkter.html">Produkter</a></li>
<li class="valkommen"><a href="valkommen.html">Hem</a></li>
</ul>
</div>
<div id="content"> <h1>Välkommen till våran nybyggda webbsida!</h1>
<img src="ol.jpg" alt="bild på våran öl"></div>
<div id="content_main">
<h2>Här följer en lista om vilka alkohol sorter vi har.</h2>
<h3><li>Vitt vin</li><li>Rött vin</li><li>Vodzka</li><li>Isaks ale</li><li>Isis ale</li></h3>
<p>För mer information om vårat alkohol sortiment gå till produkter.</p>

</div>
<div id="content_bottom">Hittar du någon bugg på sidan tveka inet raportera det till oss via våran E-mail: Orebrobryggeriet@orebrobryggeri.se</div>
<hr>
<div id="footer"><h3>Örebro Bryggeriet sedan 2015,Copyright © 2015 Örebro Bryggeriet. Allt innehåll tillhör Örebro Bryggeriet.
Citering är tillåten om källan anges. Bilder får kopieras men inte ändras på något sätt samt att källa anges.</h3></div>
</body>
</html>[code]

HTML

Laddar upp en bild också så ni kan ta del hur det hela blev!

Här är Örebro bryggeriet webbsidan som har blivit kodad så att varje meny knappt har en egen html men delar css med varandra.

Betting guru webbsida som bara har en css och en html kod, menyn är en sånn scroll down alltså allt ligger på en enda lång sida

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ah okej, då är jag med! ^^

Visa signatur

Windows användare sedan 1991. Numera MacBook Pro M1 Pro.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vi hade precis samma uppgift haha, tror det är rätt vanligt

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

Vi hade precis samma uppgift haha, tror det är rätt vanligt

Gå till inlägget

Jaha haha

Visa signatur

Set-up
NZXT Manta, ASUS ROG STRIX B350-I GAMING, AMD Ryzen 7 1800X 4.0 GHz, NZXT Kraken X62 280mm, Corsair 32GB DDR4, Seasonic FOCUS Plus 850W Platinum, Samsung 850-Series PRO 512GB (2X), ROG-STRIX-GTX1070TI-A8G-GAMING, Samsung 27'' C27FG70F Curved, ASUS 24" MG248QR 144Hz, ZOWIE EC1-A Gaming Mouse, QPAD MK-90 RGB MX Red.

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