HTML & CSSur HTML, XHTML & CSS
9 svar · 1 184 visningar · startad av Maria E
Har nyligen gjort min första hemsida (https://www.mariaeriksson.se) och får inte till detta riktigt.
Har använt Frontpage och byggt den under design, inte använt kod alls.
Men av någon anledning så ligger inte texten still på sidan.
Har fått höra något om fasta värden men har inte förstått hur jag ska lösa det än.
Dessutom fungerar inte länkarna i Firefox utan bara i IE.
Hur får jag texten att vara still och hur får jag sidan att fungera i Firefox?
Tacksam för hjälp.
Jag skulle rekommendera dig att uppgradera från Frontpage till Visual Web Developer 2008 Express (http://www.microsoft.com/express/vwd/)
Sen har du ställt in en fast position på din "meny", du borde försöka få den att utgå från din container istället.
Läs gärna denna blogpost som Eric Johansson har skrivit: http://utvecklaren.grubblar.nu/index.asp?visa=1879
För att få lite bättre förståelse för hur du bör strukturera din (x)html-kod
Jag vet inte hur jag i så fall har ställt in fast position på menyn eftersom jag gjort sidan via design och inte kod. Har sökt flera gånger nu men kan inte hitta något sätt att få texten att ligga kvar där den är.
Någon som vet hur man gör detta?
Problemet är Frontpage. Snälla sluta använda detta skräpprogram!
Ditt problem är olösligt och det är Frontpages fel!
Det har genererat en kod som är totalt onödigt komplex och som dessutom inte kommer stödjas i framtida versioner av MSIE. Det som skapats är s.k. VML, vilket inga andra webbläsare stödjer än just MSIE. MSIE 8 stödjer detta bara i bakåtkompatibelt läge, vilket du inte kan garantera att dina användare använder.
Din framsida är enkel. Du behöver inte ens div-element! Du kan göra den med följande struktur:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="windows-1252">
<title>Fotograf Maria Eriksson</title>
<link href="stilmall.css" rel="stylesheet" type="type" />
</head>
<body>
<h1><img src="bild-med-texten-maria-eriksson.se" alt="MariaEriksson.se" /></h1>
<ul>
<li><a href="/">Start</a></li>
<li><a href="information.htm"></a>Information</li>
<li><a href="album/album"></a>Portfolia</li>
<li><a href="http://mariaeriksson.blogg.se/"></a>Blogg</li>
<li><a href="http://www.gastbok.nu/gb/50767"></a>Gästbok</li>
</ul>
<p>
Alla bilder på denna sida är skyddade av
<a href="http://www.sfoto.se/sff_start/kopasaljabilder_lagratt.asp">upphovsrättslagen</a>.
@copy; Maria Eriksson
</p>
</body>
</html>
Titta på källkoden (Visa->källkod) du har idag och jämför!
Be sedan om hjälp på detta forum med din CSS, så att du återskapar utseendet.
En start kan se ut så här:
body {
width: 627px; /* Bredden du har på bakgrunden idag */
margin: auto; /* Centrerar innehållet */
font-family: Franklin Gothic, Serif;
background: url("bilden-du-har-idag.gif" no-repeat;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
margin-top: 1.5em;
text-align: right;
width: 345px;
}
li a {
text-decoration: none;
}
Jag skulle också rekommendera att du ersatte gästboken med en kontaktsida. Gästböcker signalerar 90-tal.
Jag skulle också rekommendera att du ersatte gästboken med en kontaktsida. Gästböcker signalerar 90-tal.
Även om så fyller de ibland sin funktion...
Bättre svar
Mitt svar ovan innehöll lite slarvfel. Jag har förbättrat det.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="windows-1252">
<title>Fotograf Maria Eriksson</title>
<link href="me.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><img src="bild-med-texten-maria-eriksson.se" alt="MariaEriksson.se" /></h1>
<ul>
<li><a href="/">Start</a></li>
<li><a href="information.htm">Information</a></li>
<li><a href="album/album">Portfolia</a></li>
<li><a href="http://mariaeriksson.blogg.se/">Blogg</a></li>
<li><a href="http://www.gastbok.nu/gb/50767">Gästbok</a></li>
</ul>
<p class="legal">
Alla bilder på denna sida är skyddade av
<a href="http://www.sfoto.se/sff_start/kopasaljabilder_lagratt.asp">upphovsrättslagen</a>.
© Maria Eriksson
</p>
</body>
</html>
body {
width: 627px; /* Bredden du har på bakgrunden idag */
margin: 50px auto; /* Centrerar innehållet */
font-family: Franklin Gothic, Serif;
background: url("....jpg") center 50px no-repeat;
}
h1 {
margin-top: 150px;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
margin-top: 1.5em;
text-align: right;
width: 450px;
}
li a {
text-decoration: none;
color: inherit;
}
p.legal {
margin-top: 130px;
color: red;
font-size: small;
text-align: center;
}
p.legal a {
color: inherit;
}
Din nuvarande bakgrundsbild (http://www.mariaeriksson.se/index_files/Namnlost-1.jpg) innehåller orden "MariaEriksson.se". Min lösning bygger på att du klipper ut just den ytan och sparar som en egen bild. Det är ju mer än dekoration, så den bör ligga i HTML-koden, så att den fungerar för Googles sökbot och talsyntes.
Somliga selektorer kan behöva göras mer specifika, så att de fungerar med exempelvis listor på andra sidor.
Har en fråga:
@copy; är detta något nytt istället för © ?
Nej, det är ett slarvfel! Nu åtgärdat. Tack!
Kan meddela att din sida inte fungerar i Chrome heller. Länkarna fungerar inte.
Tack för alla tips. Hemsidan omgjord och ska nu fungera i alla webbläsare.
