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
vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling	2	I dag 13:58	I dag 16:02
Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling	0	I dag 13:35	-
HEIC og HVCE Af puren i Billedbehandling	8	16/11/202414:57	18/11/202411:57
Korriger for pudeforvrængning Af KurtG i Billedbehandling	6	14/11/202421:05	15/11/202407:12
Grå flader Af Preben i Billedbehandling	3	07/11/202419:51	09/11/202408:51

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

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

KMD A/S

BI Developer

Capgemini Danmark A/S

Salesforce Senior Functional Consultant

KMD A/S

Technical Business Architect

Capgemini Danmark A/S

Salesforce Senior Technical Consultant

IT & Co ApS

Systemkonsulent

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49	pop up black friday Af Malm i Virus