11 svar · 538 visningar · startad av J.N.
HEJ!
Att placera lager på en bild är inget problem, om bilden ligger på en fast plats (left-top).
Men, om man har n antal rader med text innan bilden, hur relaterar man då lagren som ska ligga ovanpå till bilden?
Tanken är att lager med delbilder ska placeras på utgångsbilden, men går det utan att alltid placera den fast?
Tja...
Om jag förstår dig rätt skulle du ju kunna placera alltihopa i en div som inte är "fast" med t.ex position: relative. "Static" skulle kanske också funka... Då skulle den yttre divven bli "containing block" för hela rasket. Sen positionerar du innehållet utifrån DEN divven... Med förslagsvis position: absolute. Då blir inte innehållet "fast" eftersom det kommer att hänga med den yttre divven, liksom.
Lite kod skulle vara bra så det blir lite mer konkret...
HEJ!
Koden har du redan sett, det finns ingen!
Eller, det finns, eftersom det är en komplettering till en befintlig webbplats.
De befintliga sidorna är body med en table placerad i ett lager.
I den finns en rubrik, och sedan tänkte jag lägga bilden under.
Eftersom rubriken är en rad, vet jag var bilden ska läggas i sin div, och alla små lager vet jag då var jag ska placera, eftersom jag vet var bilden finns.
Det vill säga, detta ska du inte bry dig om, jag kodar sidan efter det lättaste.
Jag önskar rubrik, löptext (n rader), och sedan bilden under.
Eftersom jag inte vet hur man löser problemet har jag istället föreslagit rubrik, bild, löptext, men det ser inte så snyggt ut. x(
Förslag på lösning önskas alltså!
Placera med typ javascript:
the_object.style.position.left = the_image.offsetLeft + "px";
the_object.style.position.top = the_image.offsetTop + "px";
J.N. skrev:
HEJ!
Förslag på lösning önskas alltså!
Jag tyckte att Nipons förslag lät bra.
Ungefär så här:
.ImageContainer { position: relative; }
.ImageText { position: absolute; left: 3px; top: 3px; }
<div class="ImageContainer">
<img src="bild.jpg" width="42" height="42" alt="En bild">
<div class="ImageText">Lite text på bilden</div>
</div>
HEJ!
Jag utgick från Guffas kod efter Nipons förslag, en första snabbtest fungerade bra!
Började därefter ändra befintlig sidlayout till css, kombinerade det med http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html, men raderna bryts inte?!
Tog då koden på ovanstånde länk, lade in bredare text, och sidan blir så bred som texten är!
Jag trodde i min enfald att "centrerad på sidan" skulle betyda att texten centreras på sidan, i ett 400 px brett lager!
Vad är det för självklart som jag inte förstår?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css" media="all">
#content {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #666;
border: 5px solid #ccc;
text-align:left; /* part 2 of 2 centering hack */
width: 400px; /* ie5win fudge begins */
}
</style>
</head><body>
<div id="content">
<pre>
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus
Denna kod är kortad, men utgår från ovanstående länk.
</pre>
</div>
</body>
</html>
Kodförbättringar eller alternativa lager-centrerande länkar önskas!
Har inte testat men...
...ett problem är nog att du skrivit texten inom <pre>!
Det slår ut all width! Om texten varit längre utan att du radbrutit med enter hade texten fortsatt ut i oändligheten åt höger till universums slut!
<pre> gör så att texten tolkas som den ÄR SKRIVEN i koden. Vill du använda det måste du radbryta texten manuellt I KODEN.
:p
HEJ!
Det har du rätt i, i deras exempel använder de pre.
Eftersom de inte har så långa rader får de inte det problemet.
Hoppas att det fixar sig! :)
HEJ!
Nu har jag löst problemet!
Jag tog ursprungskoden, skalade av den till css/html, fungerade utan problem med ett lager, #content.
Lade in det på den sidan som inte fungerade, då fungerade den gamla koden inte heller, men den nya gjorde.
Bytte plats på dem också, men det blev inte bättre.
Kopierade bit för bit av koden ned i den nedre #content, tills allt var där också, och det nedre lagret visade som det skulle, men inte det övre, allt utspritt på 100% bredd. x(
Mycket konstigt, allt är nu exakt likadant! :q
Kopierade då övre content, klistrade in i eget dokument, gjorde likadant med den nedre, för att jämföra noggrant!
Tog ungefär 5 sekunder för att se att första raden var fel; jag hade skrivet class istället för id i div:en. :r
Ett sådant jobbigt slarvfel!
Eftersom inte något alls i content fungerade, borde jag ju listat ut att det var ett ordentligt fel, det är ju som att skriva fel sökväg till en bild som inte syns!
Sådana fel borde man inte göra längre!
HEJ!
Svaret på den ursprungliga frågan:
<style type="text/css">
.ImageContainer{position: relative; background: #eee;} (grått för utveckling)
.ImageR1{position: absolute; left: 10px; top: 10px;}
.ImageR2{position: absolute; left: 80px; top: 110px;}
.ImageR3{position: absolute; left: 150px; top: 200px;}
</style>
<div id="content">
text av valfri längd
<div class="ImageContainer">
<img src="bild.jpg">
<div class="ImageR1"><img src="1.gif"></div>
<div class="ImageR2"><img src="2.gif"></div>
<div class="ImageR3"><img src="3.gif"></div>
</div>
</div>