siden ser anderledes ut i opera/firefox enn i IE7

lilfire · 17. oktober 2007

Etter å ha laget noen websider ved hjelp av wysiwyg programmer. har jeg nå bestemt meg for å kun bruker koder til den "nye" siden min. Jeg har lest og sett fordeler ved bruk av css og har lyst til å sette meg inn i dette. Jeg har til nå klart å lage en form for start, MEN av en eller annen grunn vises den kun sånn jeg hadde tenkt i IE (har kun testet i IE7) og ikke i opera eller firefox. har gått gjenom kodingen min men er jo ny på selve kodingen da.

men css burde være grei da jeg har fått This document validates as CSS! Så da er det vel selve html kodinga som inneholder en feil eller?

legger hvertfall ut det jeg har skrevet så kan dere se på det (sikkert ikke bra skrevet men er første gang jeg skriver koder så, ikke vær for slem med meg )

<html>

<head>
 <title>index</title>
  <link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0">



<div id="top">

<div id="meny">
</div>


<div id="hjem">
<a href="side.php?side=hjem">Hjem</a>
</div>


<div id="galleri">
<a href="side.php?galleri=menygalleri">Galleri</a>
</div>

<div id="gjestebok">
<a href="index.php?side=/gjestebok/index">Gjestebok</a>
</div>

<div id="forum">
<a href="index.php?side=/phpbb/index">Forum</a>
</div>

<div id="linker">
<a href="side.php?side=include">Linker</a>
</div>

</div>




<div id="titel">
Lilfire.net
</div>


<div id="side">
<?php
 if(isset($_GET["side"])) {
	if(stristr($_GET["side"], "/") || stristr($_GET["p"], ".")){
			print "";
	} else {
			if(is_file($_GET["side"].".php")) {
					include($_GET["side"].".php");
			} else {
					print "Page not found!";
			}
	}
}else {
	include("hjem.php");
}
?>
</div>


<div id="menygalleriinclude">
<?php
 if(isset($_GET["galleri"])) {
	if(stristr($_GET["galleri"], "/") || stristr($_GET["p"], ".")){
			print "";
	} else {
			if(is_file($_GET["galleri"].".php")) {
					include($_GET["galleri"].".php");
			} else {
					print "Page not found!";
			}
	}
}
?>
</div>	



</body>
</html>

ps: bruker side.php som index fil da jeg enda kun tester meg fram. side skal etterhvert bli index.

MVH

Lilfire

Vindstille · 17. oktober 2007

Har ikke gått igjennom og funnet hva som er feil, men det kan være pga. du bruker absolute-posisjonering. Erfaringsvis kan dette føre til stor forskjell i forskjellige nettlesere. Det er heller ikke så veldig lurt med tanke på folk som surfer med små skjermer.

Anbefaler deg heller å bruke å bruke mest mulig av float, width, height, margins og paddings.

I tillegg er html koden din lite semantisk. Dvs. at du sier ingenting om hva slags tekst det er snakk om. Om det er en overskrift, liste osv. Søkemotorer bruker bl.a. dette til å finne ut hvilke ord som er viktige på siden din, og blinde bruker det til å bla mellom forskjellige overskrifter, linker osv.

Sånn skal HTML-en se ut:

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="nb-no">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Something</title>
</head>

<body>
<div id="top">
<h1>Overordnet sidetittel</h1>

<ul id="meny">
<li><a href="side.htm">Noe</a></li>
<li><a href="side.htm">Noe</a></li>
<li><a href="side.htm">Noe</a></li>
<li><a href="side.htm">Noe</a></li>
</ul>
</div>

<div id="artikkel">
<h2>Overskrift</h2>
<p>En paragraf med masse tekst</p>
<p>Enda en paragraf med masse tekst</p>
</div>
</body>
</html>

I tillegg er det en stort sikkhetshull i PHP-skriptet ditt. Jeg kan enkelt nå skrive /delete_database.php for å åpne filer/kjøre på serveren din.

Anbefaler deg å ta en titt innom HTMLdog for å lære skikkelig HTML og CSS.

Husk på å lære deg HTML (4.01 strict) og ikke XHTML. De fleste tror XHTML er kjempe bra og må brukes. Men i virkeligheten gir det deg ikke annet enn problemer, med mindre du faktisk oppdager at du trenger mulighetene XHTML gir deg. Og da kan du likevel ikke benytte de mulighetene i Internet Explorer.

EDIT: Et lite tips er å starte med HTML-koden jeg ga deg. Prøv så å posisjonere det uten å røre html-koden og bare bruke widht, height, margin, padding og float. I tillegg vil du kanskje bruke

font: 1em italic bold "Helvetica";

for å endre skrift.

For å få meny-en sideveis gjør du sånn:

li
{
float:left;
list-style-type:none;
}

Endret 17. oktober 2007 av JonT

lilfire · 17. oktober 2007

okey.. skal se på den siden du linker til...

ang. php scriptet hvordan kan jeg tette dette hullet da?

MVH

Lilfire

Vindstille · 17. oktober 2007

Ok, PHP-scriptet ditt er sikkert. Bare jeg som overså noe.

Se EDIT, greia over.

lilfire · 18. oktober 2007

har lest gjennom hele HTMLdog nå og må si har bedre innsynn nå.. Bra side! forstod så og si alt selv om engelsken min er værre enn dårlig. får se om jeg klarer å komme fra til bedre koding enn det jeg har klart fram til nå... Men float ble jeg ikke helt klokk på. Er det mullig å "legge" elements oppoverandre med det som man kan vist man bruker absolute-posisjonering? Og fixed-posisjonering var jeg ikke helt med på heller. Så er det en ting jeg lurer på hvordan gjøres som jeg ikke fant eller overså, vist jeg skriver en lang linje uten linje skifte, hvordan får jeg den til å bytte linje selv når den har fyltt opp skjermen uansett hvor stor skjermen eller oppløsninga er?

Takker for all hjelp. Må si det er mer moro å skrive koder enn å bruke wysiwyg.

MVH

lilfire

Vindstille · 18. oktober 2007

Bra å se at du er så engasjert og tar ting på alvor. Du kommer mye lenger med den innstillingen.

Men float ble jeg ikke helt klokk på. Er det mullig å "legge" elements oppoverandre med det som man kan vist man bruker absolute-posisjonering?

delvis.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="nb-no">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Something</title>

<style type="text/css">
#en
{
width:500px;
background:gray;
}
#to, #tre
{
width:100px;
height:100px;
float:left;
background:red;
margin:20px;
}
#to
{

}
#tre
{
background:green;
}
</style>

</head>

<body>
<div id="en">
noe
<div id="to">
Hei
</div>
<div id="tre">
Noe annet
</div>
</div>
</body>
</html>

Div 2 og 3 ligger her "over" eller mer korrekt inni div 1.

Men det er riktig at div 2 ikke kan ligge inni div 3 med bare bruk av float, margins, padding, width og height.

Men hvis du nå ønsker at boks tre skal gå over to kan du bruke relative posisjonerings modus. (position: relative; ). Da tar du utgangspunkt i posisjoneringen float og margins gir, men du kan f.eks. angi at html-elementet skal ligge 20 piksler til venstre for denne posisjonen.

#tre
{
background:green;
position:relative;
left:-50px;
top:20px;
}

Som standard vil div 3 ligger over div 2, siden div 3 er sist i html-koden. Men dette kan endres med z-index.

#to
{
position:relative;
z-index:1;
}

#tre
{
position:relative;
z-index:2;	  #Går opp til 50
}

Merk at da må begge elementene være i relativ eller absolute posisjoneringsmodus.

Og fixed-posisjonering var jeg ikke helt med på heller.

Fixed-posisjonering gjør sånn at jeg kan si at elementet skal ligge 50px fra toppen av vinduet og 30 fra venstre, og så vil html-elementet ligger akkurat på den plassen selv om jeg skroller opp eller ned. Men dette funker dessverre ikke i IE6.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="nb-no">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Something</title>

<style type="text/css">
#en
{
width:500px;
height:2000px;
background:gray;
}
#to, #tre
{
width:100px;
height:100px;
float:left;
background:red;
margin:20px;
}
#to
{
position:relative;
z-index:50;
}
#tre
{
background:green;
position:relative;
left:-50px;
top:20px;
z-index:1;
}
#fixed {background:blue;position:fixed;top:100px;right:50px;width:200px;height:350px;}
</style>

</head>

<body>
<div id="en">
noe
<div id="to">
Hei
</div>
<div id="tre">
Noe annet
</div>
</div>
<div id="fixed">
<p>Hei på deg</p>
</div>
</body>
</html>

Så er det en ting jeg lurer på hvordan gjøres som jeg ikke fant eller overså, vist jeg skriver en lang linje uten linje skifte, hvordan får jeg den til å bytte linje selv når den har fyltt opp skjermen uansett hvor stor skjermen eller oppløsninga er?

Bare sett hvor bredt elementet skal være, så funker det nok

Altså noe ala dette:

#article {width:500px;}

<div id="article">
<h1>Overskrift</h1>
<p>En fin paragraf</p>
<p>Enda en fin paragraf</p>
</div>

Mer at selv om jeg legger CSS-en i style-elementet her bør du legge CSS-en i en ekstern fil slik at folk slipper å laste ned CSS-stilsettet mer enn en gang.

Bra å se at du er så engasjert og tar ting på alvor. Du kommer mye lenger med den innstillingen.

Men float ble jeg ikke helt klokk på. Er det mullig å "legge" elements oppoverandre med det som man kan vist man bruker absolute-posisjonering?

delvis.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="nb-no">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Something</title>

<style type="text/css">
#en
{
width:500px;
background:gray;
}
#to, #tre
{
width:100px;
height:100px;
float:left;
background:red;
margin:20px;
}
#to
{

}
#tre
{
background:green;
}
</style>

</head>

<body>
<div id="en">
noe
<div id="to">
Hei
</div>
<div id="tre">
Noe annet
</div>
</div>
</body>
</html>

Div 2 og 3 ligger her "over" eller mer korrekt inni div 1.

Men det er riktig at div 2 ikke kan ligge inni div 3 med bare bruk av float, margins, padding, width og height.

Men hvis du nå ønsker at boks tre skal gå over to kan du bruke relative posisjonerings modus. (position: relative; ). Da tar du utgangspunkt i posisjoneringen float og margins gir, men du kan f.eks. angi at html-elementet skal ligge 20 piksler til venstre for denne posisjonen.

#tre
{
background:green;
position:relative;
left:-50px;
top:20px;
}

Som standard vil div 3 ligger over div 2, siden div 3 er sist i html-koden. Men dette kan endres med z-index.

#to
{
position:relative;
z-index:1;
}

#tre
{
position:relative;
z-index:2;	  #Går opp til 50
}

Merk at da må begge elementene være i relativ eller absolute posisjoneringsmodus.

Og fixed-posisjonering var jeg ikke helt med på heller.

Fixed-posisjonering gjør sånn at jeg kan si at elementet skal ligge 50px fra toppen av vinduet og 30 fra venstre, og så vil html-elementet ligger akkurat på den plassen selv om jeg skroller opp eller ned. Men dette funker dessverre ikke i IE6.

Et fint eksempel er menyen på W3C sin egen CSS side

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="nb-no">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Something</title>

<style type="text/css">
#en
{
width:500px;
height:2000px;
background:gray;
}
#to, #tre
{
width:100px;
height:100px;
float:left;
background:red;
margin:20px;
}
#to
{
position:relative;
z-index:50;
}
#tre
{
background:green;
position:relative;
left:-50px;
top:20px;
z-index:1;
}
#fixed {background:blue;position:fixed;top:100px;right:50px;width:200px;height:350px;}
</style>

</head>

<body>
<div id="en">
noe
<div id="to">
Hei
</div>
<div id="tre">
Noe annet
</div>
</div>
<div id="fixed">
<p>Hei på deg</p>
</div>
</body>
</html>

Så er det en ting jeg lurer på hvordan gjøres som jeg ikke fant eller overså, vist jeg skriver en lang linje uten linje skifte, hvordan får jeg den til å bytte linje selv når den har fyltt opp skjermen uansett hvor stor skjermen eller oppløsninga er?

Bare sett hvor bredt elementet skal være, så funker det nok

Altså noe ala dette:

#article {width:500px;}

<div id="article">
<h1>Overskrift</h1>
<p>En fin paragraf</p>
<p>Enda en fin paragraf</p>
</div>

Mer at selv om jeg legger CSS-en i style-elementet her bør du legge CSS-en i en ekstern fil slik at folk slipper å laste ned CSS-stilsettet mer enn en gang.

lilfire · 18. oktober 2007

takk for bra svar . håper det blir lite å gjøre på jobb i natt, så kan jeg få prøvd å få skrivd litt..

lilfire · 19. oktober 2007

ble rolig natt.. har koda litt nå og begynner å få det til. har fått både html og css Valid. Men er en ting jeg lurer på... hvordan får jeg æøå?

funkyboy · 19. oktober 2007

ble rolig natt.. har koda litt nå og begynner å få det til. har fått både html og css Valid. Men er en ting jeg lurer på... hvordan får jeg æøå?

Æ = &Aelig;

æ = æ

Ø = Ø

ø = ø

Å = Å

å = å

Ellers, er det fullt mulig å bruke htmlentities(). Denne omformer alle forekomster av tegn som kan være problematiske, deriblant æ, ø og å, samt &, ', ", etc.

Vindstille · 19. oktober 2007

Bedre å bra lagre det som UTF-8. Så legger du bare til meta-elementet:

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

og sørger for at serveren sier at dette dokumentet bruker tegnsettet UTF-8:

PHP (øverst i dokumentet)

<?php
header('Content-Type: text/html; charset=UTF-8')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...

EDIT: Alternativt kan du lagre det i et annet tegnsett som f.eks. iso-8859-1, men jeg vil anbefale deg å bruke UTF-8. Det begynner å bli standarden nå, og da slipper man problemet med at kinersere og arabere ellers måtte ha brukt et annet tegnsett for å skrive.

Et lite problem som kan dukke opp med UTF-8 er dog at den sender et lite usynlig tegn helt øverst i dokumentet. Siden header()-funksjonen i PHP må sendes får noe annet sendes, vil du kanskje få en errormelding. Derfor bør du lagre UTF-8 dokumenter uten BOM (Bit order mark).

Endret 19. oktober 2007 av JonT

lilfire · 20. oktober 2007

Bedre å bra lagre det som UTF-8. Så legger du bare til meta-elementet:
HTML
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
og sørger for at serveren sier at dette dokumentet bruker tegnsettet UTF-8:

PHP (øverst i dokumentet)
<?php
header('Content-Type: text/html; charset=UTF-8')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

har gjort dette men funket ikke... :no:

Æ = &Aelig;
æ = æ

Ø = Ø

ø = ø

Å = Å

å = å

Ellers, er det fullt mulig å bruke htmlentities(). Denne omformer alle forekomster av tegn som kan være problematiske, deriblant æ, ø og å, samt &, ', ", etc.

å bruke:

Æ = &Aelig;
æ = æ
Ø = Ø
ø = ø
Å = Å
å = å

Fungerte fint, men var ikke med på det siste du sa...

og hva menes med:

DOCTYPE Override in effect!

The DOCTYPE Declaration for "HTML 4.01 Transitional" has been inserted at the start of the document, but even if no errors are shown below the document will not be Valid until you add the new DOCTYPE Declaration.

det er den eneste erroren jeg får i w3c Validate.

Vindstille · 20. oktober 2007

Prøv å bytte ut UTF-8 med iso-8859-1 i meta-elementet og header()-funksjonen.

Hvilken doctype bruker du? Har du prøvd denne?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

Men anbefaler deg å bruke html strict. Da får du warning på alle elementene du ikke bør bruke.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Logg inn

siden ser anderledes ut i opera/firefox enn i IE7

Anbefalte innlegg

lilfire

Lenke til kommentar

Videoannonse

Vindstille

Lenke til kommentar

lilfire

Lenke til kommentar

Vindstille

Lenke til kommentar

lilfire

Lenke til kommentar

Vindstille

Lenke til kommentar

lilfire

Lenke til kommentar

lilfire

Lenke til kommentar

funkyboy

Lenke til kommentar

Vindstille

Lenke til kommentar

lilfire

Lenke til kommentar

Vindstille

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer