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
Lave en skabelon til billede klip Af lurup i Billedbehandling	3	18/12/202420:06	19/12/202415:03
vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling	2	23/11/202413:58	23/11/202416:02
Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling	1	23/11/202413:35	23/11/202422:47
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

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

23/12

Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer

23/12

Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder

23/12

En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed

23/12

Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter

23/12

Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret

23/12

Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR

23/12

Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed

23/12

Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge

23/12

Banebrydende ChatGPT-opdatering er lige på trapperne: “Denne model vil være helt fantastisk til programmering”

23/12

Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten

23/12

Vi ender med at bo i en taber-region, hvis ikke vi gør noget drastisk - her er digitaliseringsministerens plan

Vis flere artikler

IT-JOB

KMD A/S

Senior Customer Success Project Lead

Story House Egmont A/S

Story House Egmont søger Tech-Lead (.NET / JavaScript)

Moxis

Løsning- og kundekonsulent til online-læringspecialisten Moxis

Region Sjælland

Udvikler til Identity Management teamet i Koncern Digitalisering

Udviklings- og Forenklingsstyrelsen

Har du lyst til at arbejde med backup i en stor koncern?

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:53	CD Burner XP (Sætte den til at optage nogle numre fra en CD - Men ikke alle ? Af Ikke-ekspert i Musik & videoafspillere
I går 17:42	Katastrofe med Pc Af LilBe i PC
I går 09:44	Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
24/1216:03	Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43	html <Input.. Danske bogstaver Af pjotre i Andet software