Kjapp og trygg hosting for Wordpress

Problemer med konvertering fra html til shtml

appelsin

Medlem
Jeg foretrekker å bruke shtml fremfor html, da jeg liker å styre sentralt de ulike komponentene som er like for hele nettsiden, slik som menyen og footer etc.

Når jeg modifiserer templates, har jeg oppdaget et problem som jeg ikke helt forstår. Det ser ut som at menyen, footeren og de andre elementene synker ned et hakk slik at designet blir forskjellig, og jeg må rette opp med padding.

Noen som vet hvorfor dette skjer? Er det fordi nettleseren ikke forstår shtml helt, eller er det noen justeringer jeg bør gjøre når jeg legger inn koden: <!--#include virtual="includes/meny.shtml"--> ?

Takk
 

adeneo

Medlem
Bruker sjeldent SSI selv, så har ikke vært borti det problemet, men kan ikke helt se noen grunn til at kun endring av en template skal føre til at noe synker ned ett hakk.
Det som derimot er den vanligste grunnen til at noe synker ned ett hakk etter endringer er at filen ikke er lagret i samme format som er angitt, altså har man angitt en ISO standard eller UTF-8 e.l. så må filen nødvendigvis lagres i samme format etter endringene osv.
 

appelsin

Medlem
Formatproblemer shtml

Jeg klarer i hvertfall ikke å rette opp feilen som oppsto da jeg konverterte filene. Må jeg gjøre noe med CSS-filen også i fht utf-8 mener du?

Her er i hvertfall CSS-koden. Takknemlig om noen kan finne en enkel løsning på å få menyen slik at det ser penere ut. Selve bakgrunnen til menyen er et bilde fra kant til kant, kalt menu.jpg, og hoveren på menyen heter button_r.gif. Se også vedlagte fil for hvordan menyen og header ser ut.

#main
{
width: 1020px;
margin: 0 auto;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}


/* Header */

#header {
width: 1020px;
margin: 0 auto;
height: 424px;
}

#menu {
float: left;
height: 101px;
width: 860px;
padding-top: 0px;
padding-left: 200px;
padding-bottom: 30px;
background: url('images/menu.jpg') no-repeat;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
height: 61px;
width: 115px;
margin-right: 1px;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #ffffff;
padding-top: 30px;
text-align: center;
background: url('images/button.jpg') no-repeat;
}

#menu a:hover {
color: #ffffff;
background: url('images/button_r.gif') repeat-x;

}



/* Logo */

#logo {
width: 1020px;
height: 323px;
margin: 0 auto;
text-align: right;
background: url('images/header.jpg') no-repeat left top;
}


#logo h1 {
padding-right: 10px;
color: #ffffff;
padding-top: 250px;
font-size: 28px;
}

#logo h2 {
font-style: italic;
font-size: 12px;
padding-right: 10px;
}


#logo a {
color: #FFFFFF;
}
 

Vedlegg

  • header.JPG
    header.JPG
    50,8 KB · Sett: 26

appelsin

Medlem
Sjekk bildefilen: https://www.webforumet.no/forum/att...ed-konvertering-fra-html-til-shtml-header.jpg

Det er ikke selve konverteringen fra html til shtml som forårsaker problemet. Det er snarere at designet blir feil når jeg legger menyen i en includes-mappe som:

<!--#include virtual="includes/meny.shtml"-->

Med en gang jeg legger menyen tilbake i den opprinnelige filen, så ser menyen pen ut igjen, dvs at hoveren står på linje med menyen. Som dere ser når man holder musen over en fane som "Fare", så blir menyen skjev. Dette ønsker jeg å justere, og håper noen her kan hjelpe med kodingen.
 

appelsin

Medlem
Istedenfor å legge inn f.eks en meny med <ul></ul> inn i en includes-mappe, så tar jeg bare med "innmaten", slik at koden som blir igjen i shtml-filen f.eks. blir:

<div id="meny">
<ul>
<!--#include virtual="includes/meny.shtml"-->
</ul>
</div>

Før tok jeg med <ul> og </ul> i mappen, men da faller menyen ett hakk. Jeg aner ikke hvorfor det er sånn. Kanskje jeg må gjøre noen CSS-justeringer? Aller helst vil jeg ha så mye som mulig i includes-mappen.
 

appelsin

Medlem
Jeg er økonom - ikke programmerer :)

Er selvlært og foretrekker å være litt omstendelig hvis jeg klarer det på den måten.
 
Topp