Oprettet tor. d. 07. oktober 2010 kl. 17:49:13

200 point uddelt | 8 kommentarer

apromis (7.345 point. Point ude: 1.000)

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/ (...)
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/ (...)
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 :)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 20:01:04| #1

besoft (15.367 point)
klsconsult.com

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

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 20:12:55| #2

apromis (7.345 point)

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/ (...) width="972" height="83" alt=""></td>
<td rowspan="15">
<img src="http://www.Side.dk/ (...) width="28" height="928" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="83" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="14">
<img src="http://www.Side.dk/ (...) width="37" height="845" alt=""></td>
<td colspan="12">
<img src="http://www.Side.dk/ (...) width="935" height="16" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="16" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://www.Side.dk/ (...) width="201" height="118" alt=""></td>
<td colspan="2">
<img src="http://www.Side.dk/ (...) width="201" height="118" alt=""></td>
<td colspan="2">
<img src="http://www.Side.dk/ (...) width="196" height="118" alt=""></td>
<td colspan="5" rowspan="2">
<img src="http://www.Side.dk/ (...) width="337" height="153" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="118" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://www.Side.dk/ (...) width="105" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="96" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="106" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="95" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="105" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="91" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/ (...) width="719" height="13" alt=""></td>
<td colspan="3" rowspan="2">
<img src="http://www.Side.dk/ (...) width="216" height="35" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://www.Side.dk/ (...) width="9" height="168" alt=""></td>
<td colspan="7" rowspan="2">
<img src="http://www.Side.dk/ (...) width="693" height="135" alt=""></td>
<td rowspan="4">
<img src="http://www.Side.dk/ (...) width="17" height="168" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="22" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="11" height="126" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="180" height="126" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="25" height="126" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="113" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="http://www.Side.dk/ (...) width="693" height="33" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="http://www.Side.dk/ (...) width="216" height="51" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/ (...) width="719" height="10" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://www.Side.dk/ (...) width="9" height="485" alt=""></td>
<td colspan="7" rowspan="5" style="background: url(http://www.Side.dk/ (...)) no-repeat; valign:top; width: 693; height: 485;">
<div id="header">
<h1><a href="http://www.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/ (...) 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/ (...) 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/ (...) width="17" height="485" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/ (...) width="11" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="180" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="25" height="128" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="128" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://www.Side.dk/ (...) width="216" height="55" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="55" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="11" height="281" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="180" height="124" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="25" height="281" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="124" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/ (...) width="180" height="157" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="157" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.Side.dk/ (...) width="14" height="122" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="23" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="9" height="37" alt=""></td>
<td colspan="7">
<img src="http://www.Side.dk/ (...) width="693" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="17" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="11" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="180" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="25" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="28" height="37" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="23" height="85" alt=""></td>
<td colspan="9">
<img src="http://www.Side.dk/ (...) width="719" height="35" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="11" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="180" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="25" height="85" alt=""></td>
<td rowspan="2">
<img src="http://www.Side.dk/ (...) width="28" height="85" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="http://www.Side.dk/ (...) width="719" height="50" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="1" height="50" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.Side.dk/ (...) width="14" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="23" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="9" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="96" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="96" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="106" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="95" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="105" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="91" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="104" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="17" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="11" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="180" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) width="25" height="1" alt=""></td>
<td>
<img src="http://www.Side.dk/ (...) 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

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 20:38:36| #3

besoft (15.367 point)
klsconsult.com

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.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 21:27:37| #4

apromis (7.345 point)

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 ?

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 21:40:35| #5

besoft (15.367 point)
klsconsult.com

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.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tor. d. 07. oktober 2010 kl. 22:16:50| #6

apromis (7.345 point)

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 ?

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tir. d. 26. oktober 2010 kl. 21:40:49| #7

apromis (7.345 point)

jeg oprettede tablerne selv som du foreslog :).

Svar og pointsne er dine :)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tir. d. 19. april 2011 kl. 09:09:38| #8

Accepteret svar!200 point tildelt

apromis (7.345 point)

Da du ikke har svaret, tager jeg pointsne.

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

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Log ind

Opret bruger | Glemt adgangskode

Seneste spørgsmål

ikke adgang til filer

Oprettet den 20. maj 2012 kl. 12.49

perfand giver 60 point for svar | Giv et svar »

Slet sprog i Adobe programmer

Oprettet den 15. maj 2012 kl. 17.03

bonaparte giver 30 point for svar | Giv et svar »

to udgaver af photoshop på samme computer

Oprettet den 11. maj 2012 kl. 22.31

olethi giver 30 point for svar | Giv et svar »

Seneste guides

Hjælp til opsætning af IP-cam samt alm. netværks...

22. maj 2012 kl. 00.07 | Læs »

See Kessler vs. Green fight in your living room on pc

19. maj 2012 kl. 21.11 | Læs »

Ny god bærbar til tunge programmer

17. maj 2012 kl. 17.23 | Læs »

PSA-diagnosticering og -fejlkoder (Pre-Boot System...

9. maj 2012 kl. 11.12 | Læs »

Dell pc-diagnosticering - Problemer med din Dell...

7. maj 2012 kl. 14.38 | Læs »

Se alle guides »

Seneste nyheder

Galleri: De fedeste håndholdte gennem 40 år

25. maj 2012 kl. 16.04 | Læs »

Min Mac er under angreb - Apple skal tage det alvorligt

25. maj 2012 kl. 14.30 | Læs »

Landmænd låst fast til konkursramt bredbånds-firma

25. maj 2012 kl. 14.04 | Læs »

Her er din næste digitale gadget: En "Phablet"

25. maj 2012 kl. 13.40 | Læs »

Læserne: Her er vores værste it-indkøb

25. maj 2012 kl. 13.31 | Læs »

Se alle nyheder »

Tips & Tricks fra PC World

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.

Læs mere »

Anmeldelser fra PC World

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.

Læs mere »

Seneste blogindlæg

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »