html - Layout problem - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #12144 @ 01.11.08 20:39

Hej udviklere ;-)

Jeg har lavet mig et design i photoshop, og nu skal jeg så have kodet layoutet i HTML/CSS.

Designet skal fulde 100% af bredden i browseren. Jeg ved ikke helt hvordan jeg skal beskrive mit problem, men forestil jer det her.

Jeg har 3 billeder:
- repeat_left.jpg (1px bred)
- middle.jpg (700px bred)
- repeat-right.jpg (1px bred)

Så vil jeg gerne have en side, hvor middle.jpg er centreret, og så er hhv repeat_left.jpg og repeat_right.jpg strukket ud på hver side? (tror i kan gennemskue hva jeg mener)

Hvordan laver man det :-)?

På forhånd mange tak for hjælpen.

Indlæg senest redigeret d. 01.11.2008 20:40 af Bruger #12144

Bruger #14124 @ 01.11.08 21:53

205

Så middle.jpg er i midten og de to andre på hver sin side?

Bruger #12144 @ 01.11.08 21:59

Ja lige præcis.

Har lige opdaget, at jeg får den ønskede effekt i IE med følgende:

Kode

<table cellspacing='0' cellpadding='0' width='100%' height='223'>
<tr>
    <td background='images/bg_repeater_left.jpg'> </td>
    <td width='700' background='images/bg_top.jpg'></td>
    <td background='images/bg_repeater_right.jpg'> </td>
</tr>
</table>

Men det vel noget slam? :-) Og de der tegn SKAL være der, ellers er boksene tomme

?
Der må være en bedre løsning? formegentlig i noget CSS?

Bruger #14124 @ 01.11.08 22:04

205

Skal bruge en højde også, men har prøvet med 300px i højden, du får lige et eksempel her:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="LINK TIL BILLEDE" width="3" height="300"><br>
</td>
<td background="LINK TIL BILLEDE" width="700" height="300">TEKST</td>
</td>
<td background="LINK TIL BILLEDE" width="3" height="300">
</td>
</tr>
</table>


</body>
</html>

Har sat det op i tabeller.

Har lavet dem til 3px i bredden, ellers er det ikke til at se, er det sådan noget du skal bruge?

Indlæg senest redigeret d. 01.11.2008 22:06 af Bruger #14124

Bruger #12144 @ 01.11.08 22:48

Skal bruge en højde også, men har prøvet med 300px i højden, du får lige et eksempel her:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="LINK TIL BILLEDE" width="3" height="300"><br>
</td>
<td background="LINK TIL BILLEDE" width="700" height="300">TEKST</td>
</td>
<td background="LINK TIL BILLEDE" width="3" height="300">
</td>
</tr>
</table>


</body>
</html>

Har lavet dem til 3px i bredden, ellers er det ikke til at se, er det sådan noget du skal bruge?

Ja noget lignende. Men de to celler med 3px bredde skal være så brede at de fylder ud til kanten af browser-vinduet. Sådan at tabellen tilsammen bliver 100% bred.

Bruger #6080 @ 02.11.08 03:13

150

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="LINK TIL BILLEDE" width="3" height="300"><br>
</td>
<td background="LINK TIL BILLEDE" width="700" height="300">TEKST</td>
</td>
<td background="LINK TIL BILLEDE" width="3" height="300">
</td>
</tr>
</table>


</body>
</html>

Puha, sikke dog en kode at vise frem, ingen indrykninger, og så prøv den lige i W3C's validator..

Nå, men her er i hvert fald et svar der gør hvad du mener, håber det er overskueligt, og at højden er lige meget.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>

  </head>

  <body>

    <table border="1" cellspacing="0" cellpadding="0" width="100%">

      <tr>

        <td style="background-image: url(image-left.jpg); background-repeat: x;">
          <br />
        </td>

        <td style="background-image: url(image-middle.jpg); background-repeat: x; width: 700px;">
          TEKST
        </td>

        <td style="background-image: url(image-right.jpg); background-repeat: x;">
          <br />
        </td>

      </tr>

    </table>

  </body>

</html>

Bruger #14154 @ 02.11.08 10:36

Lav da noget i din css fil hvor der er en der hedder left en der hedder right og en der hedder midt.

sådan

Kode

#left { float: left; }

#right { float: right; }

#midt { // evt. width }

Så sætter du bare noget width og padding på så skal de nok viker.

Layout problem

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler