HTML & CSSur HTML, XHTML & CSS
21 svar · 889 visningar · startad av axionman
Hej! Jag har gjort en startsida. Denn sida vill jag att den ska följa med till dem andra sidorna. Alltså texten jag har som rubrik samt min meny till vänster. Detta ska följa med på alla sidor. Hur gör jag detta med css? antar att det är smidigast med detta? Har precis gett mig in på css och de verkar lite klurigt. Tack för all den fina hjälpen jag får här..
CSS kan inte hjälpa dig med detta (CSS påverkar utseende, inte innehåll). Helst av allt bör du använda serverfunktioner för detta, och en vanlig sådan kallas SSI, Server Side Includes. Du skapar då t.ex. en fil för sidhuvud (med menyn) och en fil för sidfot, och "länkar" sedan in dessa på alla sidor.
<!--#include file="header.html"-->
Sidans övriga innehåll
<!--#include file="footer.html"-->
Kontrollera om din server/webbhotell har stöd för detta.
aha.. Då förstår jag. Fast jag bara kopierade in koden i samtliga sidor och det funkade ju det också.. En fråga till. Om man har gjort en lista med en kvadrat framför. Kan man på något sätt få bort kvadraten framför så där inte e något alls?
Jag har nu skrivit följande.
<html>
<head>
<link href="mall.css" rel="stylesheet" type="text/css">
<title>HMCS</title>
</head>
<body>
<h3><p align="center"><font color="#FF6347"> Välkommen till Helsingborgs Metall & Containerservice AB</font></h3>
<p><hr width="80%"></hr></p>
<table align="left" border="0" bordercolor="black" width="15%" height="80%" bgcolor="#B0C4DE">
<tr>
<td valign="top">
<ul type="square">
<br>
<br>
<li><a href="historik.html">Historik</a></li>
<br>
<br>
<li><a href="miljo.html">Miljömål</a></li>
<br>
<br>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<br>
<br>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<br>
<br>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<br>
<br>
<li><a href="varatjanster.html">Våra Tjänster</a></li>
<br>
<br>
<li><a href="tillsalu.html">Till Salu</a></li>
<br>
<br>
<li><a href="priser.html">Priser</a></li>
<br>
<br>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<ul style="list-style-type: none">
tackar.
egentligen borde jag låta bli, men nu vaknade jag på den snälla sidan imorse så jag rensade lite i koden...
<!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">
<head>
<title>HMCS</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Välkommen till Helsingborgs Metall & Containerservice AB</h3>
<div class="meny">
<ul>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="varatjanster.html">Våra Tjänster</a></li>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
</div>
</body>
</html>
h3 {
text-align:center;
border-bottom: 1px solid #ccc;
padding:3px;
color:#FF6347
}
.meny {
background-color:#B0C4DE;
border:1px solid #000;
width:146px;
padding:3px
}
ul {
list-style:none;
text-align:left
}
li {
margin:5px 0;
display:block
}
med andra ord - css är för utseende, inte innehåll...
okok de var ju snällt. men de ser inte riktigt likadant ut som de gjorde innan nu ju men de gör kanske inget. Du tycker kanske de e snyggare så här. Och det kan väl jag kanske hålla med om.
Men du e ju duktig på detta så du kan kanske svara på en liten fråga jag har. I min meny så finns de en flik som heter Våra tjänster. När man trycker där så ska de lixom komma en undermeny. Alltså vilka olika tjänster vi har. Sen när man väljer nåt där kommer man vidare. hur funkar detta? Vet du hur man gör detta? MVH Erik
jag kommer inte ge dig den slutgiltiga lösningen, då lär du dig inget. alltså så liknar det jag gjort din ursprungliga målbild men du får jobba vidare med det för att uppnå dit du vill komma.
ett sätt att få fram en undermeny är att du lägger in just den på dina tjänstrelaterade sidor
<div class="meny">
<ul>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="varatjanster.html">Våra Tjänster</a>
<ul>
<li><a href="#">undermeny</a></li>
<li><a href="#">undermeny</a></li>
</ul>
</li>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
</div>
hehe jag förstår att du inte vill ge mig lösningen. Men jag håller på att lära mig lite om css nu men jag förstår inte det riktigt om jag ska vara ärlig. I det ena fallet behöver jag bara länka till min .css mall men sen när man läser vidare så ska man skriva.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ja sen finns de fler att välja mellan. Som tex den du skrev. De e ju inte samma..
Tack än en gång för all hjälp.
en Doctype talar om för webbläsaren hur sidan är kodad, formatterad mm, om det inte finns nån Doctype så visar webbläsaren sidan lite som den vill.
man kan väl säga att ju mer css du använder ju bättre är det att du använder en lämplig doctype, kort sagt - det ger dig större kontroll över hur sidan ser ut live.
har du läst på w3schools?
http://w3schools.com/html/html_whyusehtml4.asp
den doctype som jag angav i mitt exempel var för xhtml strict, du angav nu html strict.
http://w3schools.com/xhtml/xhtml_dtd.asp
okok de förstår jag nog. Som sagt jag lär mig mer och mer här hela tiden. E helt galet bra med detta forumet. Vet inte vad jag hade gjort om de inte varit för er här.
Alltså de här med doctype. Kan man inte använda en för allt eller? Är det olika för olika sätt att skriva på?
axionman skrev:
okok de förstår jag nog. Som sagt jag lär mig mer och mer här hela tiden. E helt galet bra med detta forumet. Vet inte vad jag hade gjort om de inte varit för er här.
Alltså de här med doctype. Kan man inte använda en för allt eller? Är det olika för olika sätt att skriva på?
Den stora skillnaden mellan HTML och XHTML är skillnaderna på taggarna. Med XHTML måste man avsluta alla taggar, till skillnad från HTML. Sen bör man styra designen i XHTML via CSS i stället för att sätta in ex. align="center" i <table> :)
Ex
i HTML
<img src="..." alt="text" width="" height="" align="left">
i XHTML så måste man avsluta den.
<img src="..." alt="text" width="" height="" style="float: left;" />
Sen finns det skillnaderna inom XHTML, det finns Strict, Transitional och tror jag frameset också. :)
Man använder den typen som passar för den siten man skall skapa.
axionman skrev:
aha.. Då förstår jag. Fast jag bara kopierade in koden i samtliga sidor och det funkade ju det också..
Jo visst fungerar det, men vad tror du att du tycker om den lösningen när du vill ändra någon liten detalj på startsidan och måste göra om ändringen på alla sidor? :q
Lägg det i en egen fil och länka in så behöver du bara ändra på ett ställe.
aasah skrev:
Jo visst fungerar det, men vad tror du att du tycker om den lösningen när du vill ändra någon liten detalj på startsidan och måste göra om ändringen på alla sidor? :q
Lägg det i en egen fil och länka in så behöver du bara ändra på ett ställe.
Ja det har du rätt i men hur gör man för att lägga det i en egen fil och sen länka till den?
axionman skrev:
Ja det har du rätt i men hur gör man för att lägga det i en egen fil och sen länka till den?
Det var ursprungsfrågan och den är besvarad.
hehe ja det hade jag ju glömt. Men det här med SSI e det något program jag behöver ladda hem då eller?
axionman skrev:
hehe ja det hade jag ju glömt. Men det här med SSI e det något program jag behöver ladda hem då eller?
Brukar funka så länge du har din webbsida på en server som stödjer det, stödjer det ASP så funkar det finfint att använda SSI (serverside include).
Exempelvis IIS i XP Pro, Windows 2000 Pro eller PWS i Xp Home och Windows 98/2000
Eller om man nu har ett webutrymme på ett hotell som stödjer ASP, ASP.NET.
för editering är det ju vilken texteditor som helst! :P
Okok jag förstår. Men jag förstår ändå inte. hehe. ;) Alltså hur länkar jag min startsida till mina andra sidor? Layouten alltså.
Hej nu kommer jag med ännu en fråga. Ni måste vara grymt trötta på mig nu hehe..
Har gjort en underlista. När man trycker där så skjuter det ut till höger lixom. Under listan då. Jag vill inte att de ska göra det. E det något man kan fixa?.
<!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">
<head>
<title>HMCS</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Välkommen till Helsingborgs Metall & Containerservice AB</h3>
<div class="meny">
<ul>
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="#">Våra tjänster</a></li>
<ul>
<li><a href="#">Containerservice</a></li>
</ul>
<ul>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
</div>
</body>
</html>
absolut
<!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">
<head>
<title>HMCS</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Välkommen till Helsingborgs Metall & Containerservice AB</h3>
<div class="meny">
<ul>
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="#">Våra tjänster</a>
<ul>
<li><a href="#">Containerservice</a></li>
</ul>
</li>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
</div>
</body>
</html>
prova
ul {
list-style:none;
margin:0;
padding:0
}