Gå til innhold

Litt små frustrert over rotete webside i forskjellige nettlesere

NeEeO

Anbefalte innlegg

greygenic

greygenic

Skrevet
Skrevet (endret)

Fikset litt for deg:

<!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" lang="en" xml:lang="en">
<head>
	<title>Homesite</title>
	<link rel="stylesheet" type="text/css" href="reset.css" />
	<link rel="stylesheet" type="text/css" href="webstil.css" />
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="ie.css" />
	<![endif]-->
</head>

Jeg har aldri pleid å nullstille CSS for de sidene jeg har lagd, med unntak av margin og padding for body. Men, du får selvsagt gjøre som du vil.

 

Og vanligvis lager du siden din helt ferdig med felles stilark for alle nettlesere, og som helst skal la seg validere. Også kan du begynne arbeidet på stilarket for Internet Explorer der du gjør endringer for det du ser ikke fungerer.

Endret av greygenic
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
NeEeO

NeEeO

Skrevet
  • Forfatter
Skrevet (endret)

Faen as, Hvorfor? why me? nå har jeg kjempe frustrert, har sittet med dette shittet i 1 uke, men jeg skjønner ikke hvorfor websiden min ikke vil vise seg perfekt i nettleserne.

 

Jeg har prøvd mye rart men feilet. poenget er at jeg putta kodene dere ga meg, de funka perfekt, men når jeg viste websiden min i en annen nettleser så funka det ikke så særlig bra, en som jeg vil takke er Sk!ppy, Sk!ppy er en person som ville ha hjulpet meg med dette han hjelper meg stadig, men dessverre er han på ferie, så jeg trenger hjelp fra dere.

 

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> Homesite </title>
<link rel="stylesheet" type="text/css" href="webstil.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<!--[if IE]>                        
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />                
<![endif]-->

</head>
<body> <!--Body starts-->
   <div id="logo">
    <img src="logo.png" alt="logo" />
          </div> <!--End logo-->

<div id="menu">
<ul>
<li> <a href="#"> Home </a></li>
<li> <a href="#"> Education </a></li>
<li> <a href="#"> Membership </a></li>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Contatct </a></li>
</ul>
</div> <!-- End Menu-->

<div id="content">
<p> <div class="title">Food</div> <br/>Jeg har aldri pleid å nullstille CSS for de sidene jeg har lagd, med unntak av margin og padding for body. Men, du får selvsagt gjøre som du vil.

Og vanligvis lager du siden din helt ferdig med felles stilark for alle nettlesere, og som helst skal la seg validere. Også kan du begynne arbeidet på stilarket for Internet Explorer der du gjør endringer for det du ser ikke fungerer. 
</p>
</div> <!--End content-->
      <div id="container">
   <p> Nyheter </p>
   <hr border="1">
		        <p>Lorem ipsum   dolor sit amet, consectetur adipiscing elit. Nunc lacinia porttitor elit, et facilisis tortor pre  tium a. Nunc eget convallis. </p>
                            <hr border="1">
</div> <!--Container End -->
<div id="container2">
<p id="reklame">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia porttitor 
elit, et facilisis tortor pre tium a. Nunc eget convallis</p> 
<hr>
<br/><br/> <p> 
<ul>
<li><a href="#"> Example </a></li>
<li><a href="#"> Example </a></li>
<li><a href="#"> Example </a></li>
<li><a href="#"> Example </a></li>
</ul>
</p>
<br>
<hr>


</div> <!--end container2-->
<div id="copyright">

<p>  Alt innholdet på denne siden er beskyttet i henhold til lov om opphavsrett til åndsverk.</p>
</div>
</body> <!--body end-->
<html/>

Reset.css(filen som gjør sånn at instillingene i nettleserne blir nullstillt):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

all-ie-only.css:

body {
background-color:#c7d4cf; 
width: 1000px;

}
#menu {
position: absolute;
top: 156px;
left: -40px;


}
#menu ul {
list-style: none;



}
#menu ul li {
float: left;
background-color: #3a6355;
padding: 20px 40px;
height: 5px;
width: 118px;
text-align: Center;

}
#container {
position: absolute;

background-color: #333333;
width: 220px;
height: 450px;
top: 200px;

}
#content {
position: relative;
float: right;
left: -50px;
height: 450px;
width: 730px;
z-index: -1;
background-color: #c7d4cf;

}
#content p {
padding: 1cm 0cm;
}
#logo {
width: 950px;
Height: 130px;
}
#copyright {
position:absolute;
Background-color:white;
top: 648px;
height: 37px; 
}
#Copyright p {
width: 500px;
}
#container2 reklame{
padding: 15px 10px;
}
hr {
height:1px;
}
#container2 { 
height: 650px;
width: 180px;
Position: Absolute;
right: 50px;

background-color: #4c4d4f;

}
#container2 ul {
list-style: none;


}
#container2 ul li {
padding: 5px 14px;
}
.title {font-size: 2em; text-align: Center; text-decoration: underline;

}
a:link, a:visited {text-decoration: none; color: #333333;
}
a:hover {text-decoration: underline; color: #545252;
}
a:active {text-decoration: none; color:red;}

 

webstil.css:

body {
background-color:#c7d4cf; 
width: 1000px;

}
#menu {
position: relative;

left: -40px;


}
#menu ul {
list-style: none;



}
#menu ul li {
float: left;
background-color: #3a6355;
padding: 20px 40px;
height: 5px;
width: 118px;
text-align: Center;

}
#container {
position: absolute;

background-color: #333333;
width: 220px;
height: 450px;
top: 175px;

}
#content {
position: relative;
float: right;
left: -50px;
height: 450px;
width: 730px;
z-index: -1;
background-color: #c7d4cf;
}

#logo {
width: 950px;
Height: 130px;
}
#copyright {
position:absolute;
Background-color:white;
top: 648px;
height: 37px; 
}
#Copyright p {
width: 500px;
}
#container2 reklame{
padding: 15px 10px;
}
hr {
height:1px;
}
#container2 { 
height: 626px;
width: 180px;
Position: Absolute;
right: 219px;
top: 0px;

background-color: #4c4d4f;

}
#container2 ul {
list-style: none;


}
#container2 ul li {
padding: 5px 14px;
}
.title {font-size: 2em; text-align: Center; text-decoration: underline;

}
a:link, a:visited {text-decoration: none; color: #333333;
}
a:hover {text-decoration: underline; color: #545252;
}
a:active {text-decoration: none; color:red;}

Kan dere plz hjelpe meg?

 

Edit: link: www.test123.66ghz.com

Endret av Darksite
Lenke til kommentar
NeEeO

NeEeO

Skrevet
  • Forfatter
Skrevet

Neh, nå svarer ikke noe, om jeg endrer, endrer ikke noe seg.

 

 <head>
<title> Homesite </title>
<link rel="stylesheet" type="text/css" href="reset.css" >
<link rel="stylesheet" type="text/css" href="webstil.css" >
<!--[if IE]>                        
<link rel="stylesheet" type="text/css" href="all-ie-only.css" >                
<![endif]-->

</head>

Lenke til kommentar
Jonas

Jonas

Skrevet
Skrevet

Prøvde nettopp siden i IE, FF og Opera og den ser akkurat ut som forventet i samtlige. Elendig riktignok, grunnet bruk av absolutt posisjonering uten å ha skjermoppløsning i baktankene, men med korrekt visning. Begynn på nytt. Jupp, du hørte riktig og nei - jeg er ikke gal på noen som helst måte. Det er tross alt bare snakk om 150-200 linjer kode...

Lenke til kommentar
Jonas

Jonas

Skrevet
Skrevet (endret)

På ingen måte noe galt med det, men du oppnår nok ikke ønsket effekt med det. Det er mulig å lage kolonne-design ved bruk av posisjonering slik du har forsøkt, men du har bare ikke helt fått det til. Selv liker jeg å bruke floats.

Endret av Jonas
Lenke til kommentar
NeEeO

NeEeO

Skrevet
  • Forfatter
Skrevet

På ingen måte noe galt med det, men du oppnår nok ikke ønsket effekt med det. Det er mulig å lage kolonne-design ved bruk av posisjonering slik du har forsøkt, men du har bare ikke helt fått det til. Selv liker jeg å bruke floats.

Men, hvorfor skal jeg da lage ny side, hva om det samme skjer?

Og, jeg liker ikke å bruke float, da kommer ikke elementet akuratt der du har tenkt deg.

Lenke til kommentar
Thomas.

Thomas.

Skrevet
Skrevet

På ingen måte noe galt med det, men du oppnår nok ikke ønsket effekt med det. Det er mulig å lage kolonne-design ved bruk av posisjonering slik du har forsøkt, men du har bare ikke helt fått det til. Selv liker jeg å bruke floats.

Men, hvorfor skal jeg da lage ny side, hva om det samme skjer?

Og, jeg liker ikke å bruke float, da kommer ikke elementet akuratt der du har tenkt deg.

 

Begynn helt pånytt.

Start med et element/div, still inn ønsket posisisjon og utseende. Gjør dette elementet ferdig før du går løs på plassering/utseende av neste element/div.

Lenke til kommentar
Warz

Warz

Skrevet
Skrevet

Hvis man vil tjene penger, MASSE penger, så lønner det seg å kunne sakene sine. Ved å lage en side fra scratch lærer man fort sakene sine, som igjen gir gode penger. Velger man derimot den lette løsningen, f.eks å rase i vei med første og beste løsning og aldri snu seg tilbake vil man kanskje erfare at penger ikke er like lett å erverve. Ja, veien fra å være en dårlig designer til å ende opp som denne karen her blir kanskje ikke så lang som du skulle tro:

 

codehtmlfp2.jpg

 

Å bruke absolute position kan nok være fristende for en nybegynner. Det er den letteste layouten å lage ved å bare sette top right bottom left for å få ting nøyaktig der du vil ha de. Problemet er bare at siden kan se forskjellig ut for forskjellige brukere. Prøv f.eks å øke skriftstørrelsen... Når jeg gjør det på websiden din blir det, mildt sagt, ikke spesielt lekkert.

 

Det er fort gjort at ulike bokser havner over hverandre eller kanskje til og med at skrift beveger seg utenfor bokser.

 

Grunnen er at når du bruker absolute posistion og du øker størrelsen på websiden f.eks så flytter elementene seg IKKE i forhold til de andre elementene men i forhold til top left right bottom som du har satt. Din høyre meny f.eks flytter seg over teksten hvis jeg gjør vinduet litt mindre.

 

Se for deg at du skal på jobb intervju til en jobb med 500 000 tusen i lønn. Smilende og fornøyd setter du deg ned å gir sjefen din web adresse. Sjefen snurrer stolen rundt og går umiddelbart inn på siden din. Men så setter han kaffen i halsen og ler høylytt, og lenge. Alle de andre arbeiderene stormer inn på kontorer og stiller seg bak sjefen for å le med han.

 

På skjermen ser du siden din, som du trodde var så flott. Menyen ligger på kryss over inneholdet. Teksten er samlet i en stor klynge og nesten uleselig. Footeren er presset opp i høyremenyen og headeren er ikke å se.

 

Min anbefaling er: Lær deg floats.

Lenke til kommentar
NeEeO

NeEeO

Skrevet
  • Forfatter
Skrevet (endret)

Looooooool, Men problemet er at når jeg lærer float, hva om den ikke vil der jeg vil at elementene skal være...liksom

Float: Left;

Vil bare si at den skal til venstre, du får jo ikke akuratt der du vil ha den, det blir ett STORT problem.

 

 

Edit: Du er god til å lage historier..hadded du forsettett på den der, ville du ha fått 5 i norsk ;)

Endret av Darksite
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...