17 svar · 735 visningar · startad av kentk
Halloj !
Har så smått börjat "fuska" i frontpage 2003 med min första websida :)
Jag har byggt upp första sidan med layers och problemet är att jag vill att alla layers är centrerade på sidan.
När man förminskar eller förstorar så skall sidan "hänga med".
Hur gör jag ??
En lösning för att centrera ett layer/div:
#centrerad {
position: relative;
left: 50%;
width: 80%;
margin-left: -40%;
border: 1px solid #000;
}
<div id="centrerad">denna div kan du använda som en "container" som du lägger andra divs i..
</div>
Vill du ha fast bredd kan du ändra till:
width: 500px;
margin-left: -250px;
Välkommen till wF! :h
Nu har jag aldrig använt FP, så jag har ingen aning hur det fungerar, men jag vet hur man centrerar "sidan". :)
Ändra
<body>
till
<body>
<div class="wrap">
samt
</body>
till
</div>
</body>
Och sen skriver du följande i din CSS-fil:
body {
text-align:center; /* centrera för IE5 */
}
.wrap {
text-align:left; /* "rätta till" text-align */
width:700px; /* eller vilken bredd du nu vill ha */
margin:0 auto; /* centrera */
position:relative; /* se till att dina "lager" hänger med */
}
Lycka till :)
Vart hittar jag CSS filen i Frontpage ???
Vart hittar jag CSS filen i Frontpage ???
css filen är en stilmall .. en separat fil som du inkluderar i ditt html dokument.
Du kanske skulle ta och grunda lite .. öpnna notepad + en bok om html ? ;)
Du skapar en ny textfil som du döper till test.css, som du lägger tex i samma mapp som din HTML-fil. Sen lägger du till följande i HEAD:
<style type="text/css">@import "test.css";</style>
:)
Tack zcorpan !
Ett litet problem bara, nu ligger bilden i högra hörnet istället...
Vad för fel ??
</div>
<body onload="FP_preloadImgs(/*url*/'bilder/buttonA.jpg', /*url*/'bilder/buttonB.jpg')">
<div class="wrap">
<div style="position: absolute; left: 16px; top: 16px; width: 531px; height: 281px; z-index: 1" id="lager21">
Ja é så färsk på detta :r
Ja du, det är inte så lätt att veta. Ett fel är att det finns en </div> före <body>, men det är nog inte det som orsakar problemet. ;) Du kanske kan visa lite mer kod så kanske är det lättare att se varför din bild ligger i höger hörn. :)
<html>
<head>
<meta http-equiv="Content-Language" content="sv">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Välkommen</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs*=new Image; d.FP_imgs*.src=a*; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
<meta name="Microsoft Theme" content="concrete 1011">
</head>
<body onload="FP_preloadImgs(/*url*/'bilder/buttonA.jpg', /*url*/'bilder/buttonB.jpg')">
<div style="position: absolute; left: 16px; top: 16px; width: 531px; height: 281px; z-index: 1" id="lager21">
<font face="Verdana">
<img border="0" src="bilder/xxx" width="532" height="283"></font></div>
<div style="position: absolute; left: 5px; top: 3px; width: 949px; height: 640px; z-index: 1; border: 4px dotted #FFFFFF; padding: 4px" id="lager23" align="center">
</div>
<p> </p>
<div style="position: absolute; width: 241px; height: 21px; z-index: 8; left: 16px; top: 613px" id="lager20">
<font face="Verdana">
<span style="background-color: #FF9933">
<a href="kontaktmail.htm">
osv
OBS, jag har INTE ändrat nåt i ovanstående fil....
Sparade filen som du sa i några inlägg upp , test.css med inklippt det du skrev zcorpan..***
Hmm. För mig ligger bilden faktiskt i vänster hörn av den centrerade DIVen som vi nyss skapat, med ett avstånd på 16px som du angett med style-attributet. Så jag vet inte riktigt vad som är problemet...
(Om FP spottar ut sån här kod förstår jag att det är svårt att lära sig! :e)
Varför har alla WYSIWYG-editorer sådan nojja att preload:a alla bilder för....
Ärligt talat, lägg ner Frontpage och börja med Dreamweaver istället!
Nästa gång kanske det blir dreamweaver, men nu har jag gjort typ 15 sidor med Frontpage så denna gången är det nog kört...
Jag har fortfarande inte lyckats få hela "bilden" med alla lager att hamna i mitten :(
Det måste ju finnas ett enkelt sätt med hjälp av Frontpage ???
Ska bilden också centreras?
<p class="image"><img alt="" src=""></p>
.image { text-align:center; }
Lite begreppsförvirring från min sida, "bilden" är givetvis allt som finns på sidan.... (dvs alla lager och bilder mm, hela färdiga sidan index.htm)
"bus" enkelt !!!
lade till detta under HEAD
<style type="text/css">@import "test.css";</style>
Skapade en fil som hette test.css med följande innehåll:
body {
text-align:center; /* centrera för IE5 */
}
.wrap {
text-align:left; /* "rätta till" text-align */
width:955px; /* eller vilken bredd du nu vill ha */
margin:0 auto; /* centrera */
position:relative; /* se till att dina "lager" hänger med */
}
Lade till detta efter BODY :
div class="wrap">
Allt tack vare zcorpan !
:birp
Vad bra att du fick till det till slut. :)
Ett tips är att använda [kod] för kodsnuttar, och att acceptera slutgiltigt svar när problemet är löst. :bire