CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

apromis Praktikant

07. oktober 2010 - 17:49 Der er 7 kommentarer og
1 løsning

PSD/HTML problemstilling

Hej alle sammen.

Jeg er igang med at implentere et nyt design, hvor det volder mig nogle problemer.^
Kan huske jeg har løst denne problemstilling før, ved at smide et billede som baggrund og give den lov til at blive gentaget, men kan virkelig ikke huske hvordan jeg gjorde.

Eksempel på mit design :
http://billedeupload.dk/photo/2010-10/b7f0eb2c/før.png.html
Som det ses er der en menu til venstre, banner i toppen, main i midten og nogle bokse i højre side.

Mit problem er at jeg gerne vil have mere tekst ind i main end der er plads til i designet.
Derfor skal jeg lave et korrekt slices som gør jeg kan taste mere tekst ind, så siden bare bliver udvidet. Nedenstående er det slices jeg ønsker :
http://billedeupload.dk/photo/2010-10/b22c7c12/split.png.html
Det røde slices er der jeg ville slices.

Men det røde slice vil ikke give mening, for så skal jeg skrive i to tabelfelter, hvorfor jeg ikke kan gøre det dynamisk.

Så har i et forslag hvordan jeg klarer denne ?

På forhånd tak :)

Synes godt om

besoft Nybegynder

07. oktober 2010 - 20:01 #1

Det kan løses på flere måder, men det kræver at du lige sender lidt kode.

Synes godt om

apromis Praktikant

07. oktober 2010 - 20:12 #2

Min test kode ser sådan her ud :

<html dir="ltr" lang="da-DK">
<head>
<meta charset="UTF-8" />
</head>
<table id="Table_01" style="width:1001; height:1051;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_01.gif" width="972" height="83" alt=""></td>
<td rowspan="15">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_02.gif" width="28" height="928" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="83" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="14">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_03.gif" width="37" height="845" alt=""></td>
<td colspan="12">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_04.gif" width="935" height="16" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_05.gif" width="201" height="118" alt=""></td>
<td colspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_06.gif" width="201" height="118" alt=""></td>
<td colspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_07.gif" width="196" height="118" alt=""></td>
<td colspan="5" rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_08.gif" width="337" height="153" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="118" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_09.gif" width="105" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_10.gif" width="96" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_11.gif" width="106" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_12.gif" width="95" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_13.gif" width="105" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_14.gif" width="91" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_15.gif" width="719" height="13" alt=""></td>
<td colspan="3" rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_16.gif" width="216" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_17.gif" width="9" height="168" alt=""></td>
<td colspan="7" rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_18.gif" width="693" height="135" alt=""></td>
<td rowspan="4">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_19.gif" width="17" height="168" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_20.gif" width="11" height="126" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_21.gif" width="180" height="126" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_22.gif" width="25" height="126" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="113" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_23.gif" width="693" height="33" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_24.gif" width="216" height="51" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_25.gif" width="719" height="10" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_26.gif" width="9" height="485" alt=""></td>
<td colspan="7" rowspan="5" style="background: url(http://www.Side.dk/blog/wp-content/themes/kost/images/klar_27.gif) no-repeat; valign:top; width: 693; height: 485;">
<div id="header">
<h1><a href="http://www.Side.dk/blog">Side.dk | Blog – Din kilde til effektiv trænning</a></h1>
Endnu en WordPress-blog
</div>
<div id="container">
<h2><a href="http://www.Side.dk/blog/" title="Startside">Startside</a></h2>
<div class="entry">
<p>Velkommen til Side.dk.</p>
<p>Hvad er det</p>
<p>Hvad koster det</p>
<p>osv.</p>
<p class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.Side.dk/blog/" target="_blank" title="Share on Facebook">Share on Facebook</a></p></div>

<ul>
</ul>

<b>Nyheder dukker op</b><br>over 200 tegnover 200 tegnover 200 tegnover 200 tegn
over 200 tegnover 200 tegn
over 200 tegn
ove</br>
</div>

</td>
<td rowspan="5">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_28.gif" width="17" height="485" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_29.gif" width="11" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_30.gif" width="180" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_31.gif" width="25" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="128" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_32.gif" width="216" height="55" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_33.gif" width="11" height="281" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_34.gif" width="180" height="124" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_35.gif" width="25" height="281" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="124" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_36.gif" width="180" height="157" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="157" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_37.gif" width="14" height="122" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_38.gif" width="23" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_39.jpg" width="9" height="37" alt=""></td>
<td colspan="7">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_40.gif" width="693" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_41.gif" width="17" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_42.gif" width="11" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_43.gif" width="180" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_44.gif" width="25" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_45.gif" width="28" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_46.gif" width="23" height="85" alt=""></td>
<td colspan="9">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_47.gif" width="719" height="35" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_48.gif" width="11" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_49.gif" width="180" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_50.gif" width="25" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_51.gif" width="28" height="85" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/klar_52.gif" width="719" height="50" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="106" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="105" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="104" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/blog/wp-content/themes/kost/images/spacer.gif" width="28" height="1" alt=""></td>
<td></td>
</tr>
</table>

</body>
</html>

Jeg har slettet domæne navnet.
Ønsker du adgang til siden visuelt også kan jeg give dig det på mail, vi kan bare poste løsningen her.
¨
Håber det nok til dig :)
Ser frem til dit svar

Synes godt om

besoft Nybegynder

07. oktober 2010 - 20:38 #3

Halløjsa... det ligner godt nok noget der er taget med en eksport fra photoshop, fireworks eller lign.

Det er ikke fordi det er umuligt, men der er ca 90% for mange celler og grafikker til at lave afstande. Det orker jeg helt ærligt ikke at skulle rydde op i. Stort set alt hvad der hedder spacer eller klar_ skal væk og styres med css på td'erne.

Synes godt om

apromis Praktikant

07. oktober 2010 - 21:27 #4

Du har ret, det er fra photoshop.
Hvordan vil du ellers gribbe det an ?
Lave tabellerne selv ? og sætte billederne med ?
Er meget i tvivl hvad jeg skal gøre. Kan du ikke lave et eksempel med en af tr ?

Synes godt om

besoft Nybegynder

07. oktober 2010 - 21:40 #5

For at kunne holde en ens højde på de 3 kolonner, vil det give mening at lave en tabel med 3 kolonner og 1 række. I hver af de 3 celler kan der indsættes forskellige tabeller og DIV's, alt efter hvad indholdet kræver.


<table border='1' cellpadding='0' cellspacing='0' style='width: 100%;'>
<tr>
    <td style='vertical-align: top; width: 20%;'>
        Kolonne 1
    </td>
    
    
    <td style='vertical-align: top; width: 60%;'>
        Kolonne 2
    </td>
    
    
    <td style='vertical-align: top; width: 20%;'>
        Kolonne 3
    </td>
</tr>
</table>

Ved ikke om jeg har misforstået dit ønske, men med en tabel som denne, er du kommet et godt stykke nærmere en fornuftig opbygning.

Synes godt om

apromis Praktikant

07. oktober 2010 - 22:16 #6

Det kan jeg godt forstå.
Men hvis jeg laver ovenstående og gør main (60%) længere end de andre, vil bunden jo ikke blive rigtig. De skal også hænge sammen i bunden.
Forstår du hvad jeg mener ?

Synes godt om

apromis Praktikant

26. oktober 2010 - 21:40 #7

jeg oprettede tablerne selv som du foreslog :).

Svar og pointsne er dine :)

Synes godt om

apromis Praktikant

19. april 2011 - 09:09 #8

Da du ikke har svaret, tager jeg pointsne.

Skriv hvis du mener det er forkert, og du får dem :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Se alle it-kurser fra Computerworld Kurser

IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Se alle it-kurser

Flere spørgsmål fra Billedbehandling kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Billeder kan ikke åbnes Jpeg.modd Af KristinaS i Billedbehandling	13	23/07/202415:27	24/07/202419:15
Lave pas foto af 200 elever Af lurup i Billedbehandling	10	17/06/202413:55	17/06/202423:20
2 x A3 = A2 pdf Af lurup i Billedbehandling	11	15/06/202422:42	17/06/202418:41
heic to jpg Af lurup i Billedbehandling	1	12/06/202410:21	12/06/202411:02
Program til deling af billeder på nettet Af Bukse i Billedbehandling	5	20/05/202418:05	21/05/202419:02

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS