HTML & CSSur HTML, XHTML & CSS
18 svar · 404 visningar · startad av AndreasC
Kan man lägga in en bild i en class? Har skrivit sähär men det funkar ju inte så bra:
.logo {img:url(logo2.gif); width:380px; height:56px}
Anledningen till att jag vill ha det på detta sätt är att jag vill kalla på den här koden inifrån ett html-dokument. Där bilden ska infogas har jag skrivit <img class="logo"> Koden ovan ligger alltså i en separat css-fil.
Stilmallen;
.logo { background-image:url("bild.gif"); width:100px; height:50px; }
Bilden;
<span class="logo"></span>
Flyttar över tråden till html/css då den hör mer hemma där.
Hur ska jag få det att fungera i Netscape. Varken div eller span funkar ju!!!!
Märkte att <span> inte funkar i detta exempel, men det kan bero på att jag bara har Mozilla 0.9.7 installerad. <div> funkar dock utmärkt, i Mozilla alltså / Netscape 6. Vill du att det skall fungera i Netscape 4.x också får du använda vanliga bilder. Kan du inte använda SSI/ASP/PHP e.dyl. för att generera denna kod dynamiskt får du använda JavaScript från en fristående .js-fil, men alltså generara bilder istället (<img>).
Jag vet inte men jag har gjort på ett annat sett nu som också funkar bättre i Netscape. Anledningen till att jag var tvungen att ladda olika bilder med olika storlekar var att jag hade en tabell som jag hade satt storlekarna på cellerna med procentenheter i. Jag har istället gjort lager som jag placerar ut med left och top och då behövs inte längre allt detta med olika storlekar. Med tabellerna ändrade inte bilden storlek med skärmupplösningen men det problemet löser sig ju med lager som är satta till en bestämd storlek. Men jag har då ett problem, istället för att ange antal pixlar för left så skulle jag vilja centrera lagret i horisontell ledd. Går det?
Det räcker ju med att du centrerar innehållet i lagret. Sätt left:0px;width:100%;text-align:center; Syntaxen blir lite luddig eftersom man kan fundera på vad 100% är av ett flytande lager, men det borde funka.
Men lagret ska inte täcka hela skärmen, bara en liten del. Styleproperties för lagret ser ut så här för närvarande:
#logo {position:absolute; left:200px; top:50px; width:470px; height:37px;
border:dashed; border-left-width:1px; border-right-width:1px; border-top-width:1px;
border-bottom-width:0px; border-color:#000000; background-color:#ffffff; z-index:1}
Då kan du centrera det med JavaScript. layerlib.js
<script src="layerlib.js" language="JavaScript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
moveLayerAbs("logo",getClientWidth()-235,37); // 235 är lagrets bredd/2.
</script>
Vad i detta script är det som inte funkar tillsammans med layerlib.js?
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
PageScroll
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* Script date: 09/23/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/
//The speed of the timeout between each scroll.
timSpeed = 50
//The height of the container (change this when it scrolls to much or to little)
contHeight = 100
/*********************************************************************************
This is the object constructor function, which applies
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.top=b_gettop
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
//Getting the top for the top method
function b_gettop(){
var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
clearTimeout(scrollTim)
way = speed>0?1:0
if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top = (oScroll[active].top()+speed)+px
scrollTim = setTimeout("scroll("+speed+")",timSpeed)
}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
oScroll[active].css.visibility = "hidden"
active = num
oScroll[active].css.top = 0+px
oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
oScroll = new Array()
// You can add and remove scrollObjects here.
oScroll\[0\] = new makeScrollObj('divScroll1','divCont')
oScroll\[1\] = new makeScrollObj('divScroll2','divCont')
oScroll\[2\] = new makeScrollObj('divScroll3','divCont')
oScroll\[3\] = new makeScrollObj('divScroll4','divCont')
oScroll\[0\].css.left = 0+px
oScroll\[0\].css.top = 0+px
oScroll\[0\].css.visibility = "visible"
oControl = new makeScrollObj('divControl')
oControl.css.visibility = "visible"
}
</script>
Egentligen ingenting vad jag kan se på rak arm, men nu är du i fel forum igen :)
Du kan iofs plocka ut de 2 funktionerna som används från layerlib.js för att minimera risken att något krockar.
function moveLayerAbs(Id,x,y){
if (document.all){
if (x) document.all[Id].style.left = x;
if (y) document.all[Id].style.top = y;
} else if (document.layers){
if (x) document.layers[Id].left = x;
if (y) document.layers[Id].top = y;
} else if (document.getElementById){
if (x) document.getElementById(Id).style.left = x+'px';
if (y) document.getElementById(Id).style.top = y+'px';
}
}
function getClientWidth(){
if(document.all){
return document.body.clientWidth;
} else if (navigator.appName=="Netscape"){
return window.innerWidth;
}
}
Ber om ursäkt :/ Jag tänkte inte på att det var fel forum :) Men du kan flytta tråden kanske. Om du vill kan du kolla på www10.brinkster.com/rdbilrekond
Det verkar som att det är just de två funktionerna som inte funkar med resten av koden.
Detta har inte att göra med någon krock. Scriptet körs direkt från head och vid det tillfället så finns varken lagret (som ju ligger längre ner i koden) eller någon body, vars objekt används för att ta reda på fönster-bredden. Lägger du detta script sist (före </body>) eller anropar det via onLoad i <body> så kommer det att fungera. Observera även att jag bytte ut "isNetscape" när jag plockade ut funktionerna eftersom den definitionen ligger i början av layerlib.js.
<script language="JavaScript" type="text/javascript">
function moveLayerAbs(Id,x,y){
if (document.all){
document.all[Id].style.left = x;
document.all[Id].style.top = y;
} else if (document.layers){
document.layers[Id].left = x;
document.layers[Id].top = y;
} else if (document.getElementById){
document.getElementById(Id).style.left = x+'px';
document.getElementById(Id).style.top = y+'px';
}
}
function getClientWidth(){
if(document.all){
return document.body.clientWidth;
} else if (navigator.appName=="Netscape"){
return window.innerWidth;
}
}
moveLayerAbs("logo",Math.round(getClientWidth()/2-235),37);
</script>
Kan inte få det att fungera. Inget felmeddelande nu men lagret vill inte hamna där jag vill ha det. Först skrev jag halva bredden som du sa men då blir det också halva bredden, därför skrev jag istället hela bredden. Men i båda fallen så placerar sig lagret i högerkant.
Ops, mitt fel. Ta det ändrade scriptet så ska det funka.
Ledsen, men kan inte få det att funka iallafall.
Du missade Math.round i moveLayerAbs-anropet. Se exemplet.
Ok, det missade jag. Då funkar det ju så långt. Men hur kan jag ställa in top för lagret? Det funkar inte med top:; Och kan jag välja att ha flera lager centrerade på deta sätt? Alltså inte bara "logo".
Top är det 3:e argumentet i anropet till moveLayerAbs, alltså 37 i exemplet. ... och du kan anropa moveLayerAbs flera gånger för at flytta olika lager till olika positioner.
Aja, då förstår jag. Tack Johan :)