2 svar · 362 visningar · startad av GrodanBoll
Hej :)
I standardutseendet på en sida så ska alla bilder ligga i högerkanten på DIV:en och alla text till vänster. Bildernas ska radas upp med ett visst vertikalt avstånd till varandra.
När en ny sida ska skapas i CMS:et så ska redaktören lägga alla bilderna i toppen på sidan. Det skapas då <p> runt varje bild.
Nedanför dessa så skrivs alla text in.
Bilderna är "känslobilder" i brist på ett bättre ord alltså de läggs dit för att få en viss känsla tillsammans med texten. Det finns alltså ingen specifik text som ska kopplas mot en specifik bild.
Jag får detta att fungera i FF med hjälp av float:right; och clear:both för img. Men det fungerar inte i IE dåall text hoppar ner och börjar först vid nedersta bilden.
Jag har bifogat två bilder hur det blir.
Kan ni kanske sparka mig i rätt riktning eller visa ett kodexempel där detta fungerar?
Nedan finns även min genererade HTML-kod om den hjälper till. Det är denna som CMS:et genererar.
<body>
<div id="content">
<div id="menu">
<ul class="menu_column">
<li class="page_item"><a href="http://localhost:8080/wp_test_01" title="Välkommen">Välkommen</a></li>
<li class="page_item"><a href="http://localhost:8080/wp_test_01/?page_id=12" title="Kinesis">Kinesis</a></li>
<li class="page_item"><a href="http://localhost:8080/wp_test_01/?page_id=15" title="Kontakt">Kontakt</a></li>
<li class="page_item"><a href="http://localhost:8080/wp_test_01/?page_id=3" title="Om oss">Om oss</a></li>
</ul>
<div id="menu_logo">
<img src="http://localhost:8080/wp_test_01/wp-content/themes/Balanslek/images/logo_green.jpg" alt="Logotype: Balanshuset" width="323" height="100" />
</div>
</div>
<div class="post" id="post-11">
<div id="body">
<h1>Vår coaching</h1>
<!-- Bilderna som ska ligga i högerkanten -->
<p><img src="http://localhost:8080/wp_test_01/wp-content/uploads/2007/09/balltraining02.jpg" alt="Bollträning 2" /></p>
<p><img src="http://localhost:8080/wp_test_01/wp-content/uploads/2007/09/bhouse_corridor.jpg" alt="Korridor på Balanshuset" /></p>
<p><img src="http://localhost:8080/wp_test_01/wp-content/uploads/2007/09/bhouse_kitchen.jpg" alt="Köket på Balanshuset" /></p>
<!-- Brödtexten på sidan -->
<p>Ja här kommer då sidans text. Underar om det kommer att <strong>fungera</strong>?</p>
<p>Tja kanske det.<br />
Vad vet jag egentligen.</p>
<p>Jc ndsbjk f fhjk fhhsdöfäöf fsd fsjf3u sjfhsd fjhhsd fhjksdlfjkhjks hjfskj hsdjkfkljhf fhjksdhf hfjöfwöfnjhsd fhjkfeå bn j hwhjhjksdölls hjfdjksd fhjsdlsflslsfjdjkd f hjsjksdjhjk ffwhfjdfjsdlkl fwfhjwflöwfönhsdjs hfewhfwåefåäöjhjkfrhjr4u7fe fwhjefj jwehjhweh jfehjhewjj weöwewpphfwhwe hwhjwepweåhj f hfey4h 4ru4uioewjkeoweå wåweååweäwehwehui huiwe huwehuihe whjweh uie huwe ewhuhwe rhue.</p>
</div>
</div>
</div>
</body>
Lägg bilderna i en annan div, åsså floata div id="body" till vänster.
Alltså ungefär:
<div id="body"> blah blah</div>
<div id="bilder"> foton här</div>
#body {
float:left;
width:500px;
#bilder {
width:200px;
margin-left:20px;}
...eller nåt liknande.
Mm, hade det innan men CMS:et har inte sådana finesser och kan inte förvänta mig att redaktörerna ska in och knappa i koden.
Tack för svaret dock :bire