Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Bakgrund i Firefox

1
Skriv svar
Permalänk
Medlem
●

Bakgrund i Firefox

Jag undrar varför inte min bakgrund visas i Firefox som den visas i Safari?
Så här ser det ut:

#down {
	border					: 1px;
	border-style				: dotted;
	border-color				: #505D6F;
	position					: absolute;
	background-image			: url(../images/bg.jpg);
	top						: 152px;
	left						: 50%;
	margin-left					: -500px;
	margin-top					: 0px;
	width						: 998px;
	height					: 443px;
	}
Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Någon bild på skillnaden?

Dessutom:

margin: 0 0 0 -500px;
border: 1px dotted #505D6F;

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Alltså i Safari syns bakgrunden och i Firefox syns den helt enkelt inte =/
De förändringar du föreslår gör varken till eller från eftersom det inte är någon skillnad att dela upp det eller inte.

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av x-per
margin: 0 0 0 -500px;

Sannolikt fungerar margin: 152px auto 0 auto; och ingen absolut positionering bättre dessutom.

Citat:

Ursprungligen inskrivet av Piraten
De förändringar du föreslår gör varken till eller från eftersom det inte är någon skillnad att dela upp det eller inte.

Du sparar bandbredd. Finns ingen direkt anledning att inte använda snabbskriftsmetoden

Och testa med apostrofer/citattecken runt din URI.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Finns ingen direkt anledning att inte använda snabbskriftsmetoden.

Det finns ibland anledning att använda direktförändrande attribut, om man t.ex. har en background-image som man ska positionera om vid hover (aka CSS sprite). Det visste du, vet jag, men kanske inte TS, så jag belyser det...

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●

Bakgrunden syns fortfarande inte.

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Piraten
Bakgrunden syns fortfarande inte.

Zippa skiten så fixar jag eller någon annan det!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av azoapes
Det finns ibland anledning att använda direktförändrande attribut, om man t.ex. har en background-image som man ska positionera om vid hover (aka CSS sprite). Det visste du, vet jag, men kanske inte TS, så jag belyser det...

Sant, men det är som sagt inte något argument i det här fallet.

Sen vet jag inte varför TS "indenterar" så som han gör. Det kan ställa till med problem och ser IMHO väldigt rörigt ut.

Till TS: Är du säker på att bakgrunden ligger på rätt ställe, att du inte använder något obskyrt format, etc? Testa det här istället:

border: 1px dotted #505D6F;
background: url("../images/bg.jpg");
margin: 152px auto 0 auto;
width: 998px;
height: 443px;

(Sen skulle jag avråda från att bero så mycket på exakta pixelvärden som du gör men det är en annan sak)

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Sant, men det är som sagt inte något argument i det här fallet.

Alltså... du skrev ju inte om du menade det här specifika fallet, eller om du menade generellt. Det jag skrev, gäller om du menade generellt. Och då är det ett väldigt bra argument till varför fullständiga attribut kan vara användbara.

Citat:

Ursprungligen inskrivet av You
Sen vet jag inte varför TS "indenterar" så som han gör.

Det vet jag, tror jag. Det gör han för att han vill att alla värden ska hamna på samma tabbavstånd. Minns att jag gjorde ett sånt organiseringsförsök också, innan jag insåg att det var riktigt dumt med tanke på bandbredd och maintainability.

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●

Mina indenteringar blev lite vridna när jag kopierade in det här, anledningen till att jag använder den indenteringen är att jag tycker det inte blir så rörigt i ett stort css dokument.

Vad bör jag använda ist för exakta pixelvärden?

Zippa skiten och skicka känns lite B, försöker hellre lösa det själv med hjälp så att jag lär mig något utav det.

Fortfarande ingen skillnad. Det ser ju dock bra ut i Safari.

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Piraten
Zippa skiten och skicka känns lite B, försöker hellre lösa det själv med hjälp så att jag lär mig något utav det.

Anledningen till att zippa det är för att vi kan sitta här ända in i oändligheten, tar flera dagar att bolla fram och tillbaka, har man alla filer själv så fixar man det på 2 minuter, sen efter det kan man lära ut det till dig så att du lär dig eftersom det är det du vill men jao vill du inte ha hjälp så visst.....

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har du FireBug för Firefox? Installera det och leta sedan runt i dokumentet, ändra CSS tills bakgrunden syns.

Visa signatur

På SoundCloud | Fästmöns galleri

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Piraten
Mina indenteringar blev lite vridna när jag kopierade in det här, anledningen till att jag använder den indenteringen är att jag tycker det inte blir så rörigt i ett stort css dokument.

Misstänker att du sitter på en mac; införskaffa CSSEdit eller Coda. Det hjälper när man redigerar CSS.

Citat:

Ursprungligen inskrivet av Piraten
Vad bör jag använda ist för exakta pixelvärden?

Procent, em. Till bredd kanske du kan använda px men i övrigt är det bättre med relativa enheter, speciellt till marginalen runt sidan och även kanske höjden.

Citat:

Ursprungligen inskrivet av Piraten
Fortfarande ingen skillnad. Det ser ju dock bra ut i Safari.

Lägg upp det på en temporär server så vi andra kan titta på det. Svårt att lista ut vad som är fel utifrån endast CSSen.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Detta är all kod i css:

body {
background-color: #fff;
margin: 0px;
}
div {
margin: 0px;
padding: 0px;
}
table {
padding: 0px;
border: 0px;
}
#container {
border: 10px solid #505D6F;;
position: absolute;
left: 50%;
margin: 10px 0px 0px -510px;
width: 1004px;
height: 600px;
   	
}
#top {
background-image: url("../images/logo.jpg");
border: 0px;
position: absolute;
left: 50%;
margin: 2px 0 0 -500px;
width: 1000px;
height: 150px;
}
	
#down {
border: 1px dotted #505D6F;
background-image: url("../images/bg.jpg");
top: 152px;
left: 50%;
margin: 152px auto 0 auto;
width: 998px;
height: 443px;
}
#textbox {
position: absolute;
width: 500px;
height: 150px;
top: 200px;
left: 40px;
}

.pos1 {
position: absolute;
top: 130px; 
left: 60px;	
}
.pos2 {
position: absolute;
top: 130px; 
left: 270px;	
}
.pos3 {
position: absolute;
top: 130px; 
left: 470px;	
}
.pos4 {
position: absolute;
top: 130px; 
left: 680px;	
}
.pos5 {
position: absolute;
top: 130px; 
left: 880px;	
}
.pos6{
position: absolute;
top: 250px; 
left: 650px;	
}
.pos7 {	
position: absolute;
top: 60px; 
left: 200px;	
}
	
/* Font & Color */
.a12b {
font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana;
font-size: 12px; 
color: #000; 
font-weight: bold;
}
.treb18 {
font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana;
font-size: 18px; 
color: #000; 
}
	

/* a */
a {
font-family: Trebuchet MS, Trebuchet, Georgia, Arial, Verdana;
font-size: 13px; 
color: #000; 
font-weight: bold;
text-decoration: none; 
}
a:visited {
color: #000; 
}
a:active { 
color: #000; 
}
a:hover	{
color: #fff; 
}

Detta är min index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet"  href="css/hummelgrund.css" type="text/css" />
<title>Restaurang & Pub Hummelgrund</title>
</head>
<body>
<div id="container">
	<div id="top">
		<a href="?p=nattklubb" class="pos1">Nattklubb</a>
		<a href="?p=varmeny" class="pos2">Vår meny</a>
		<a href="?p=kontakta" class="pos3">Hitta hit</a>
		<a href="?p=vimmel" class="pos4">Bilder</a>
		<a href="?p=gastbok" class="pos5">Gästbok</a>
	<div id="down">
		

<?php
$page = (isset($_GET['p']) ? $_GET['p'] : 'startsida');

$pages = array("nattklubb", "varmeny", "gastbok", "vimmel", "kontakta", "startsida");

if(in_array($page,$pages)) {
include('includes/' . $page . '.php');
}
?>

	</div>
	</div>
</div>
</body>
</html>
Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Herremingud, går ju enkelt halvera den css:en

Iaf, hur ser din bakgrund ut då? Vissa FX har haft problem med små bakgrunder, osv osv, vi behöver hela paketet, seriöst varför är du så enormt besvärlig? Ge oss en liveserver eller ALLA filer om du vill ha hjälp, vad är det svåra i det?

Hade du lagt upp en zip hade problemet varit löst för över 1 timma sedan!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det går säkert att halvera css:en men jag vet inte hur jag gör, går garanterat att skriva bättre kod och det hade jag gjort om jag visste hur.

Jag hade ingen möjlighet att komma åt en server, men nu är det löst.
http://www.hummelgrund.se/htm/zip.htm

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Nej jag har inte en aning om vad jag håller på med därför frågar jag er.

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem
●

Stäng dina <div>-element också. Tror inte att du vill ha #down inuti #top.
Annars skulle du nog dra nytta av att läsa lite ur Webboken.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Att lära sig något utan att fråga är svårt, att vara ödmjuk är desto enklare.
Jag ska försöka lära mig css osv men ni kanske borde fundera på att lära er
vad ödmjukhet är och inse att inte alla är lika duktiga som er.
Tack för den hjälp jag fick, trots att den inte hjälpte mig.

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Piraten

Tack för den hjälp jag fick, trots att den inte hjälpte mig.

Spara om BG filen, den är korrupt! Eller rättare sagt, det verkar vara inbäddat något skit i den, något är det för den fungerar om man sparar den som PNG!

Kan vara en skum colorprofile som inte stöds av FX, vilket program använde du?

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Testpilot
●

Filen bg.jpg är skadad, jag kan inte öppna den direkt varken i Firefox, Paint eller Windows fotogalleri, troligtvis är det alltså filen som är problemet och inte webbläsaren.

Edit: Lite för sen

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nu fungerade det.
Tack nu ska jag läsa igenom Webboken och se om jag kan banta min css och ordna positioneringen samt storleks bestämning.

Senast redigerat
Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av You
Usch, vet du ens vad du håller på med. All den där positioneringen är helt onödig, att sätta ut allting med absolut positionering är helt fel metod. Det där ser nästan värre ut än att använda tabeller, IMHO.

Jag fortsätter på tråden..
Om jag ska placera ut en bild hur bör jag placera den då, om jag inte skall använda mig av position:absolute?

Visa signatur

i 300 kan ingen höra dig skrika..

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det beror så på hur du vill att den ska ligga. Om du exempelvis ska ha en bild i en flytande text ska du ofast inte använda absolut positionering eftersom bilden då ligger fast oavsett om du ändrar texten någon gång i framtiden.

Absolute positioning bör användas sparsamt, och oftast för att dra ut ett element ur sin naturliga position snarare än för att definiera vart ALLTING ska ligga. Istället rekommenderas du att använda det naturliga flödet och marginaler för att skjuta element från varandra.

edit: Nu lade jag märke till att du faktiskt frågade hur du skulle göra om du INTE använde absolut positionering (godmorgon! ). Om du vill ha texten flödandes runt bilden använder du float för att placera den antingen till vänster eller höger i din textbehållare.

Om det rör sig om en dekorativ bild som inte har ett eget budskap (exempelvis en bullet point eller liknande) passar det att använda sig av background för att lägga in den. Använder du den korta varianten background-position i kombination med background-repeat: no-repeat för att lägga den i ett av hörnen på värdelementet, centrerat eller med exakta x- och y-värden.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Piraten
Nu fungerade det.

Inte för att vara sån men där ser du, när vi erbjuder oss att hjälpa till gör vi inte det för att jävlas eller som du säger "var ödmjuk, alla är inte lika duktiga som ni" utan för att kunna hjälpa till behöver man se alla byggstenar eftersom alla ganska tidigt sa att det inte var något fel angående bilden i css eller html, att då säga NEJ när vi säger att vi behöver hela paketet för att hjälpa till är ju lite vrångt!

Men iaf, anger du ingen position i CSS så läggs position: relative; in automatiskt och räcker gott och väl till det du gör; Teknocide nämde en av anledningarna till att använda absolut positionering men det finns fler, men jao bara till att läsa på!

Lycka till

Såg att du editerat nu Teknocide och korta versionen? Det är ju den långa
Korta är: background: url(dfsdf.pang) no-repeat top left;

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
(exempelvis en bullet point eller liknande) passar det att använda sig av background för att lägga in den.

Vet vad du menar, men just bullet point kanske var ett dåligt exempel?

list-style-image: url(bullet.png);
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara