Bild till vänster, rubrikbild i mitten och bild till höger

[Kontextus]

Jag skapade en ny tråd för att svaren nog lär intressera och hjälpa många. I vanliga forum är det ju lätt att via en enkel tabell dela upp det övre området i tre kolumner och placera en bild i var och en av dem. Men i phpBB tycks det inte vara lika enkelt så kan Sinom vara vänlig och förklara hur man ska göra? Två följdfrågor är hur man separerar "headerns" bakgrundsbild från den övriga sidans och hur man gör huvudtabellen solid hela vägen, d v s utan några luckor som visar bakgrundsbilen mellan de olika skikten? Här har du min supportmall:

Supportmallgenerator

Vilken version utav phpBB använder du?: phpBB 3.0.11
Vad har du för adress till ditt forum?: http://vagledaren.se/forum/pa505/index. ... 5b566431f0
Vad använder du för webhotell?: http://www.one.com
Hur installerade du ditt forum?: Jag använde mig utav nedladdningspaketet från phpBB.com
Är ditt forum en ny installation eller en konvertering?: Ny installation
Krävs det att man registrerar för att producera detta problem?: Nej
Har du några MODs installerade?: Nej
Vilka stilar har du installerade?: Prosilver och Subsilver2
Vilket/Vilka språk har du installerat på ditt forum?: Engelska och Svenska
Vad har du för erfarenhet?: Ny till PHP och phpBB
När började ditt problem?: Jag har precis börjat sätta mig in i phpBB-tekniken och började nyligen sätta upp ett eget forum.
Vänligen beskriv ditt problem.: Jag vill placera en bild till vänster i själva headern, en i mitten på rubrikplatsen och sedan en till höger i headern.

Genererad utav Supportmallgeneratorn.

Det vore även önskvärt att kunna sätta en bild längst till vänster i botten av sidan och en längst till höger på samma rad.

[Sinom]

Detta är enkelt gjort då du stilen du använder är uppbyggd utav tabeller.

I overall_header.html hitta:

Kod: Markera allt

<td width="100%" style="padding-top: 50px;" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>

Ersätt med:

Kod: Markera allt

			<td id="header_vaenster" width="33%" align="center"></td>
			<td id="header_mitten" width="33%" align="center"></td>
			<td id="header_hoeger" width="33%" align="center"></td>

Sen behöver du skapa nya attribut i CSS-filen:

Kod: Markera allt

#header_vaenster {
	background-color: #C1CAD2;
	background-image: url('./images/Rightking.png');
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
}
#header_mitten {
	background-color: #C1CAD2;
	background-image: url('./images/Rightking.png');
	background-repeat: no-repeat;
	background-position: center top;
	height: 137px;
}
#header_hoeger {
	background-color: #C1CAD2;
	background-image: url('./images/Rightking.png');
	background-repeat: no-repeat;
	background-position: right top;
	height: 137px;
}

För att få bakgrundsbilder nere i hörnen så kan du använda:

Kod: Markera allt

	background-image: url('./images/Rightking.png');
	background-repeat: no-repeat;
	background-position: center top;

Sätt då detta i: body {

Med denna informationen så löser du det nog

- Sinom

[Kontextus]

Tack så hemskt mycket för dina ideella och uppoffrande insatser för helt främmande personer. Det är för mig äkta godhet så känn dig stolt över dig själv och din specialkompetens

[Sinom]

Varsågod!

[Kontextus]

En sak jag inte fattar är hur jag ska kunna infoga en bakgrundsbild (stridsvagn) om det redan finns en background-image för den aktuella sid-enheten? Jag förstår helt enkelt inte din sista anvisning. Går det att skriva två backgrounds efter varandra där den ena visar faktisk sidbakgrund och den andre ett mindre objekt?

[Sinom]

Kod: Markera allt

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
	background-image: url('./images/Rightking.png'), url('./images/Rightking.png');
	background-repeat: no-repeat;
	background-position: left bottom, right bottom;
}

Ersätt din body { med ovanstående kod.

Detta kommer att lägga till pansarvagnen längst ner till vänster och längst ner till höger på sidan.

- Sinom

[Kontextus]

Tack men då finns det ju bara färg och ingen egentlig bakgrundsbild, alltså om jag t ex vill ha ett fotografi bakom huvuddelen av sidan (och bakom stridsvagnarna).

[Sinom]

Du menar att du vill ha en STOR bakgrundsbild, och sen två små längst ner på sidan i hörnen?

- Sinom

[Kontextus]

Ja jag vill ha en heltäckande fotobakgrund för headern och en annan för övriga sidan (med de övriga "bakgrunds"-bilderna på). Så här ser sidan ut nu och det är ju bra frånsett att det blir trist med enbart bakgrundsfärg> http://vagledaren.se/forum/pa505/index. ... 5b566431f0

[Kontextus]

På vanliga hemsidor är det ju bara att lägga in bilderna (som inte behöver vara bakgrundsbilder) i en tabell ovanpå bakgrunden så det kan inte vara omöjligt här heller. Frågan är bara hur man gör? Åtminstone för mig tar det lång tid att bli klok på CSS eftersom man måste skriva så många specialkoder vars logiska sammanhang ofta är svåra att klura ut.

[Kontextus]

Skriver man in alla bilder som background-image? Det gör mig i så fall väldigt förvirrad för det gör ju att egentliga bakgrundsbilder inte specificeras. Eller kan man kombinera html med css och skriva img src="http://blabla.. för att visa att man vill ha en bild på den faktiska bakgrundsbilden?