html - Forskellig vising af HP på forskellige opløsninger. - Udvikleren.dk

Tags: html hjemmesideudvikling

<< < 1 2 > >>

Bruger #17248 @ 06.06.12 13:01

Hey igen folkens.

Jeg sidder stadig og knokler med noget hjemmeside-kodning, men der er opstået et lille problem, igen.

Siden ser rigtig fin ud på de fleste computere, men den vises HELT anderledes, hvis man ser den på en computer med enten højere eller lavere opløsning end den jeg har anvendt på computeren, som jeg har kodet på.

Findes der ikke en kode man kan smække ind i sit html for at den på en eller anden måde selv "tilpasser" sig?

15 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 7 karma

Sorter efter stemmer Sorter efter dato

Bruger #13770 @ 06.06.12 14:13

går ud fra dit problem er at siden ikke er centreret? hvis det er dette. så prøv at ændre dette

CSS kode

 #top_border_gfx {
     display: inline-block;
     float: left;
     margin-left: 220px;
     margin-top: 50px;
 }

til

CSS kode

 #top_border_gfx {
     margin: 50px auto 0px;
     width: 970px;
 }

Ellers må du prøve at skrive hvad det er der er galt.

Bruger #13770 @ 06.06.12 15:57

hmm tror du skal tjekke din kildekode for fejl.

HTML kode

 <html>
     <head>
         <meta charset="utf-8" />
         <title>BrygSelv - Dit Private Bryghus</title>
         <link rel="stylesheet" type="text/css" href=                "style.css">
         
         <link rel="icon" 
       type="favicon.ico" 
       href="favicon.ico"> 
       
       <div id="top_border_gfx">
     <img src="Header.png" alt="Top border" height="130" width="280"> 
     
      </head>
     
     <body>
         
         <article id="Content">
                              
                
                
                      <div id="menulinje">
             
                     <strong>
                     <li><a href="index.php">Hjem</a></li>
                     <li><a href="videoer.php">Videoer/3D</a></li>
                     <li><a href="priser.php">Priser</a></li>
                     <li><a href="varianter.php">Varianter</a></li>
                     <li><a href="kontakt.php">Kontakt</a></li>
                        </strong>
                     <br />
                     <br />
                     <br />
                     <br />
                        </div>
                
                
                 
 <link rel="stylesheet" type="text/css" href="style.css">
 
 
 <div id="slideshow-div" class="rs-slideshow">
     
   <div class="slide-container">
         <img src="slider/start.png"
             alt="The first image in a slideshow demo." 
             title="This is the first slide" />
         <span class="slide-caption">This is a caption for the first slide</span>
     </div>
      
     <ol class="slides">
         <li>
             <a href="slider/1.png"
             title="This is a caption for the first slide">This is a caption for the first slide</a>
         </li>
         <li>
             <a href="slider/2.png"
             title="This is a caption for the second slide">This is a caption for the first slide</a>
         </li>
         <li>
             <a href="slider/3.png"
             title="This is a caption for the third slide">This is a caption for the first slide</a>
         </li>
         <li>
             <a href="slider/4.png"
             title="This is a caption for the fourth slide">This is a caption for the first slide</a>
         </li>
         <li>
             <a href="slider/5.png"
             title="This is a caption for the fifth slide">This is a caption for the first slide</a>
         </li>
     </ol>
     
 </div>
 
 
     <a href="http://102830m11fa.sub.ots.dk/brygselv/booktid.php"><img src="book.png" alt="" width="225" height="135" border="15" p style="border:thick solid transparent;"
      onmouseover="#F99"/> </a>
     <a href="http://102830m11fa.sub.ots.dk/brygselv/varianter.php"> <img src="smag.png" alt="" width="225" height="135" border="15" p style="border:thick solid transparent;"/> </a>
     <img src="Gavekort1.png" alt="" width="225" height="135" border="15" p style="border:thick solid transparent;"/>
     <img src="gavekort.png" alt="" width="225" height="135" border="15" p style="border:thick solid transparent;"/>
 
 
 </p>
 
 
 <script src="jquery.js"></script>
 <script src="jquery.rs.slideshow.min.js"></script> 
 <script>
 $(document).ready(function () {
     $('#slideshow-div').rsfSlideshow();
 });
 </script>
    
 
 
 
                 
                 
                 
                
               
                 
                   <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Energivej 38. 5260 Odense S - Tlf. 63 17 60 00 - info@brygselv.dk</strong>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  
                   <strong>Syntes godt om os, p&aring; Facebook! </strong><a href=   "http://www.facebook.com/pages/Brygselv-ApS/170070866364058"><img src="fb.png" alt="facebook" align="baseline"></a>
                
                   
                         
                 
         </article>
         
      </body>
 </html>

Din div(top_border_gfx) ligger oppe i head sektionen og er ikke afsluttet. Du har nogle li elementer men ingen ul eller ol. prøv at kigge hele koden igennem og få rette disse ting først. så er det nemmere at finde ud af hvad fejlen er.

Du mangler også at angive doctype

Indlæg senest redigeret d. 06.06.2012 16:00 af Bruger #13770

Bruger #13010 @ 06.06.12 18:14

440

Det allerførste du gør er at tilføje en doctype.
Det er første skridt i at få det til at se ens ud i forskellige browsere.
Det gør du for eksempel ved at skrive følgende alle først i alle dine HTML filer hvis vi siger din HTML kode er HTML 5 kan du skrive :

HTML kode

 <doctype html>

Derefter går du ind på http://validator.w3.org/check?uri=http%3A%2F%2F102830m11fa.sub.ots.dk%2Fbrygselv%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0 og ser hvad fejl den giver og retter dem en efter en og går ind igen og ser om der er flere fejl indtil der ikke er flere fejl.

Du kan også validere din CSS kode her : http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F102830m11fa.sub.ots.dk%2Fbrygselv%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en også eventuelt rette de fejl den giver.

Prøv og ret så mange fejl du kan. Du behøver ikke have 0 fejl hvis bare du er klar over fejlen og hvad det betyder så det jo fint nok men klart gode ide at rette så meget du kan.

Hvis jeg var dig ville jeg fjerne de 50px margin du har på body øverst så man ikke skal scrolle ned.

Følgende som blev forslået er vist ikke gyldigt.

CSS kode

 #top_border_gfx {
     margin: 50px auto 0px;
     width: 970px;
     }

Brug i stedet :

CSS kode

 #top_border_gfx {
     margin: 50px auto 0px auto;
     width: 970px;
     }

Indlæg senest redigeret d. 06.06.2012 18:16 af Bruger #13010

Bruger #10114 @ 06.06.12 18:20

Det her burde være det du leder efter:

CSS kode

 #content {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 30em;
     height: 18em;
     margin-top: -9em; // Sæt denne til et negativt nummer, som er halvt så stort som din height.
     margin-left: -15em; // Sæt denne til et negativt nummer, som er halvt så stort som din width.
 }

Dog giver det ikke meget mening at bruge html5's <article> tag, som dit content/container.

Det bruger man mere, når man bygger fx. et blog indlæg, eller kommentar dertil. Forum indlæg og lign. Noget der er mange af, og sikkert bliver flere af.

Det giver mere mening at bruge div tag til det content/container.

Og i dit <head> tag, har du puttet et billede, og et div, som jeg ikke lige kan se hvor slutter, eller om divet overhovedet gør det.

I <head> skal man kun putte, title, meta, style, script ind. Ikke bruge det til at lave selve det visuelle.

Dertil kommer <header> tagget, fra html5. (Som ikke kun bruges til fx topbanner, men også overskrifter andre steder på sitet.)

Bruger #15754 @ 06.06.12 18:33

989

@scootergrisen

CSS kode

 #top_border_gfx {
      margin: 50px auto 0px;
      width: 970px;
 }
 
 #top_border_gfx {
      margin: 50px auto 0px auto;
      width: 970px;
 }

De giver det samme da du kan skrive margin på flere forskellige måder.
margin:a; - rammer alle sider
margin:a b; - rammer top/bottom og left/right
margin:a b c; - rammer top, left/right og bottom
margin:a b c d; - rammer top, left, right, bottom

så for at gøre det så kort som muligt er dette også en mulighed

CSS kode

 #top_border_gfx {
      margin: 50px auto 0;
      width: 970px;
 }

da det ikke er nødvendigt at angive måleenhed når værdien er 0.

Til OP, hvis du gerne vil have sitet skalere af sig selv ift. skærmstørrelsen også på mobiler og tablets. Så skal du kigge på responsive design, det indebære at du bruger media queries. Udover det så passer de givne løsninger fint men da begrebet 'tilpasser' kan være meget bredt så må du uddybe det lidt mere

Bruger #13770 @ 06.06.12 13:05

Har du et link til siden?

Bruger #17248 @ 06.06.12 13:12

Her:

http://102830m11fa.sub.ots.dk/brygselv/index.php

Bruger #17248 @ 06.06.12 15:13

No help

Problemet er, at min content-boks bliver vist i venstre-side når HP'en vises på widescreen's.

Bruger #13010 @ 06.06.12 19:35

440

Jan > Kan da godt være jeg skrev forkert da jeg teste i firefox før hvor jeg fik en fejl men alligevel så skal værdi nummer 4 jo ikke være udeladt for som du siger betyder det så 0 men den skal jo være auto. Ellers hvis du kun sætte auto i venstre side så kommer indholdet til at stå helt ude til venstre. Hvilket det ikke er noget ivejen med men det var vel meningen det skulle stå i midten også skal der står auto både til venstre og højre.

Bruger #15754 @ 06.06.12 19:47

989

Scootergrisen, du misforstår mig vidst. Når jeg siger måleenheden ikke skal være der hvis den er 0 så mener jeg px eller em osv.

Når du undlader en værdi er det ikke fordi den automatisk bliver 0 det ændre bare hvad dit statement siger.

margin: 50px auto 0 giver dig margin: top-værdi, venstre og højre værdi, bottom værdi. Derfor bliver venstre og højre auto. Hvilket er det samme som det du skriver, bare kortere. Kortere er bedre fordi det flyder mindre og er hurtigere at loade.

<< < 1 2 > >>

Forskellig vising af HP på forskellige opløsninger.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler