7 svar · 1 528 visningar · startad av Siskan
Tjoflöjt.
Jag är lite av en nybörjare och sitter nu och pysslar med min första hemsida, med undantag för ett tidigare utkast, som kom till redan för ett par år sedan.
Jag vill centrera texten som visas i min horisontella menyrad, men jag får det inte att fungera.
Sidan i fråga.
Hur ska jag bära mig åt? Jag läste någonstans att float: left gjorde centrering knepigt. Finns det något annat sätt att få texten horisontell?
Sedan kan man ju passa på att be om lite kritik!
Du behöver absolut inte ha den där menyn gjord som en lista (li). Dessutom skulle du i så fall ha ul-taggar runt listan....
Jag föreslår att du helt enkelt byter ut koden
<li><a href="index.php">Hem</a></li>
<li><a href="forum">Forum</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
mot
<a href="index.php">Hem</a><a href="forum">Forum</a><a href="kontakt.php">Kontakt</a>
det innebär att du kan radera följande i stilmallen:
#meny li {
padding: 5px 30px 5px 5px;
float: left;
list-style-type: none;
}
och ändra (i stilmallen)
#meny {
background-color: #beac2c;
margin-bottom: 0px;
margin-top: 0px;
height: 35px;
font-family: Garamond, Bodoni, Times New Roman, serif;
font-size: 21px;
font-weight: bold;
font-variant: small-caps;
}
till
#meny {
background-color: #beac2c;
margin-bottom: 0px;
margin-top: 0px;
height: 35px;
font-family: Garamond, Bodoni, Times New Roman, serif;
font-size: 21px;
font-weight: bold;
font-variant: small-caps;
text-align:center;
}
Slutligen kan du modifiera det här:
#meny a:link, #meny a:visited, #meny a:hover, #meny a:active {
text-decoration: none;
color: #FFFFFF;
}
till nånting sånt här:
#meny a {
text-decoration: none;
color: #FFFFFF;
margin: 0 30px;
}
..där 30px är marginalen mellan de olika länkarna (prova vad du vill ha).
Ungefär...typ....
Det där blev alldeles utmärkt! Tackar så mycket. :)
jag hade behållt li menyn och bytt namn(id) på den till #nav
#nav
{
list-style: none;
padding: 0;
margin: 0;
}
#nav li
{
display: inline;
}
Varför skulle det vara bättre då?
Varför skulle det vara bättre då?
Då följer du webbstandard bättre. Menylänkarna är en lista av länkar, en oordnad lista eftersom ordningen inte är avgörande.
Den skulle enklast kodas:
<ul id="meny">
<li><a href="index.php">Hem</a></li>
<li><a href="forum">Forum</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
CSS för menyn skulle se ut:
#meny {
margin: 0;
padding: 0;
height: 25px;
background-color: #beac2c;
font: small-caps bold 21 Garamond, Bodoni, Times New Roman, serif;
text-align: center;
}
#meny li {
display: inline;
}
#meny a {
margin: 0 20px;
text-decoration: none;
color: #FFFFFF;
}
...
Sedan kan man ju passa på att be om lite kritik!
Den är ok, men t.ex använder du breaks istället för marginaler, och foten ser inte färdig ut.
Och om jag får föreslå skulle samma layout kunna göras lite mer struktuerad, t.ex. så här utifrån den kod du redan har:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Defenders of the Emblem</title>
<!--
<link rel="stylesheet" href="stilmall.css" type="text/css">
-->
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/ico">
<meta name="description" content="Den svenska sidan tillägnad spelserien Fire Emblem.">
<meta name="keywords" content="Fire Emblem,spel,noveller,guider,forum">
<meta name="author" content="Tom Lindberg Siskamanis & Mattias">
<meta name="copyright" content="Copyright © Defenders of the Emblem">
<meta name="verify-v1" content="YbowcdORMOKSeIzynR/6UZPSaM/sU9KKFUr0pSpZ8dE=">
<meta name="verify-v1" content="T9UpXaLrVik6uxsdTl2E4/2TepptFxy83WTQqqmz7ac=">
<style type="text/css">
/* stilmall.css */
body {
padding: 0;
margin: 0;
font: 75%/1.25 Arial, Helvetica, sans-serif;
color: #000000;
background: url(bakgrund5.png) repeat;
}
h1, h2, p { margin:0;}
a { color:#444444; text-decoration:none;}
a:hover { color:#FFA34F;}
img { border:0;}
h1, h2 {
padding: 25px 90px 0 100px;
font-size: 1em;
}
#layout {
border: 4px solid #beac2c;
width: 900px;
margin: 0 auto;
background: #fff url(horna.gif) left top no-repeat;
}
h1 span,
h2 span {
padding-left:10px;
font-weight: normal;
}
#meny {
margin: 0 0 -5px;
padding: 0;
background-color: #beac2c;
font: small-caps bold 175%/1.2 Garamond, Bodoni, Times New Roman, serif;
text-align: center;
}
#meny li {
display: inline;
}
#meny a {
margin: 0 17px;
text-decoration: none;
letter-spacing: -.04em;
color: #FFFFFF;
}
.avsnitt {
background: url(avgransare.gif) center bottom no-repeat;
}
.avsnitt p {
padding: 0 90px 35px 100px;
}
#sidfot {
padding: 1em;
height: 32px;
text-align: right;
}
#sidfot a {
float: left;
}
/*
52px radhöjd trycker ned texten till botten av diven (halva radhöjden och halva fonthöjden, 26px+6px=32px).
*/
#sidfot span {
line-height: 52px;
}
/*
Höjdplacering med line-height funkar bäst i IE. andra webbläsare ändrar line-height med ändrad textstorlek.
Ett bättre sätt att placera vid en fast höjd är att använda fast padding och flexibel negativ toppmarginal.
*/
#sidfot span {
display: block;
margin-top: -1em;
padding-top: 32px;
line-height: 1.2;
}
</style>
</head>
<body>
<div id="layout">
<div id="logga">
<img src="banner5.png" width="900" height="103" alt="Defenders of the Emblem">
</div>
<ul id="meny">
<li><a href="index.php">Hem</a></li>
<li><a href="forum">Forum</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
<div class="avsnitt">
<h1>Välkommen till Defenders of the Emblem!</h1>
<p>Detta är ett tillhåll för alla svenskar som spelar Fire Emblem, en serie RPG/Strategi-spel utvecklade av Intelligent Systems, för Nintendos konsoler.
Vi har ett diskussionsforum som varit igång sedan 2006. Under hösten 2009, har vi även startat en förening för de som kommer på forumsträffarna, som vi anordnar två gånger om året.</p>
</div>
<div class="avsnitt">
<h2>Nu ska hemsidan fungera också.<span> 3 december 2009 | av: <a href="forum/tom-u2.html">Tom</a></span></h2>
<p>Hemsidan bör nu vara fullt fungerande, med undantag för att vissa sidor inte finns än.</p>
<h2>Ny hemsida på plats!<span> 30 november 2009 | av: <a href="forum/tom-u2.html">Tom</a></span></h2>
<p>Idag lanserar vi den nya hemsidan, vilken har fått ny design och navigation. Tyvärr fungerar inte allt som det ska än, men det kommer att åtgärdas inom de kommande dagarna.
Denna måndag medför även fler förändringar. Idag är det nämlingen debut för vårt nya domännamn, fire-emblem.se</p>
</div>
<div id="sidfot">
<a href="http://my.opera.com/community/download.pl?ref=Siskan&p=opera_desktop"><img src="opera88x31-1.gif" alt="Opera, the fastest and most secure web browser"></a>
<span>© 2007-2009 Defenders of the Emblem</span>
</div>
</div>
</body>
</html>
Tack så mycket för det! Jag tog efter det mesta du föreslog.