Avatar billede wiwi Praktikant
20. juni 2007 - 14:42 Der er 23 kommentarer og
1 løsning

at få billedet til at gå til kant

Hej jeg har et problem, jeg vil gerne have et billde der går helt til kantud til den sorte ramme i bunden og i siderne, men der er en lille kant i siderne af billdet og en lidt større i bunden. Billedet har samme bredde som tabellen.
Min kode der ser sådan ud:
<html>
<head>
</head>
<body>
<table style="border:1px solid black;width:360px;margin:0 auto;">
<tr>
<td>
<p style="font-family:verdana;font-weight: bold;font-size:15px;">
Vi ønsker alle en rigtig god sommer
</p>
<p style="font-family:verdana;font-size:10px;">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br>
</p>
</td>
</tr>
<tr>
<td>
<img src="fodder2.jpg";align="bottom">
</td>
</tr>
</table>
</body>
</html>
Avatar billede thesurfer Nybegynder
20. juni 2007 - 14:55 #1
Du kan tilføje border-collapse:collapse; til din style-attribut på tabel-tag'et..

Men det er vist noget med, at det ikke giver mening, at bruge "border:1px ..." sammen med "border-collapse:collapse;"...
Avatar billede wiwi Praktikant
20. juni 2007 - 15:00 #2
Men det er fordi jeg gerne vil have en sort ramme rundt om det hele, samtidig med at billedet går til kant. er det slet ikke muligt?
Hvis ikke kan man så få den samme afstand rundt om hele billedet?
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:02 #3
Det burde være nemt nok at lave med div i stedet for tabeller..
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:06 #4
Eksempel:

<html>
<head>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
height:100%;
}

#ydreramme
{
border:1px solid black;
width:360px;
margin:0 auto;
}

#fodder2
{
width:100%; /* jeg havde ikke lige et billede i rette størrelse*/
}
</style>
</head>
<body>

<div id="ydreramme">
    <div id="topramme">
        <p style="font-family:verdana;font-weight: bold;font-size:15px;">
        Vi ønsker alle en rigtig god sommer
        </p>
        <p style="font-family:verdana;font-size:10px;">
        bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
        <br>
        </p>
    </div>
    <div id="nedreramme">
        <img id="fodder2" src="fodder2.jpg" align="bottom">
    </div>
</div>

</body>
</html>
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:11 #5
Hmm.. kigger lige på det.. :)
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:14 #6
IE stinker.. :)
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:17 #7
Jeg har tilføjet en doctype (et regelsæt der fortæller browseren hvor siden skal fortolkes), så IE også kan finde ud af det..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
height:100%;
}

#ydreramme
{
border:1px solid black;
width:360px;
margin:0 auto;
}

#topramme
{
padding:5px;
font-family:verdana;
font-size:10px;
}

.overskrift
{
font-weight: bold;
font-size:15px;
}

#nedreramme
{
/* hvis den nedre ramme skal styles, kan det gøres her */
}

#billede
{
width:100%; /* jeg havde ikke lige et billede i rette størrelse */
}
</style>
</head>
<body>

<div id="ydreramme">
    <div id="topramme">
        <span class="overskrift">Vi ønsker alle en rigtig god sommer</span>
        <br>
        bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
        <br>&nbsp;
    </div>
    <div id="nedreramme"><img id="billede" src="fodder2.jpg" align="bottom"></div>
</div>

</body>
</html>
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:18 #8
Jeg smider lige et svar.. logger muligvis af om lidt..
Avatar billede wiwi Praktikant
20. juni 2007 - 15:18 #9
Tak for din hjælp men der er stadig lidt luft i bunden selvom jeg har sat valign=bottom
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:19 #10
PS:
Jeg har testet i Opera v9.21, Mozilla FireFox v2.0.0.5 og Internet Explorer v6 SP2.

Siden ser korrekt ud, i samtligt af de ovennævnte browsere.
Avatar billede olebole Juniormester
20. juni 2007 - 15:19 #11
<ole>

- men koden har nu også en speciel duft ... om man så må sige  0:)

<div id="nedreramme">
        <img id="fodder2" src="fodder2.jpg" align="bottom"></div>

Aldrig afslutnings-tag på ny linje, hvis det sidste i elementet er et inline-element. Det skaber 'luft' i IE  ;o)

/mvh
</bole>
Avatar billede wiwi Praktikant
20. juni 2007 - 15:21 #12
hvorfor har du skrevet jeg havde ikke et billede i den rette størrelse
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:21 #13
wiwi> Prøv lige koden fra 20/06-2007 15:17:26.

olebole> Yep.. hvilket jeg også fik rettet i 20/06-2007 15:17:26.. :-)
Avatar billede olebole Juniormester
20. juni 2007 - 15:22 #14
Tjek evt:

<div style="background:red">
    <img src="http://www.eksperten.dk/img/elogo.png">
</div>

<br><br><br>

<div style="background:red">
    <img src="http://www.eksperten.dk/img/elogo.png"></div>
Avatar billede olebole Juniormester
20. juni 2007 - 15:22 #15
thesurfer >> Det så jeg slet ikke ... sorry  ;o)
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:24 #16
wiwi> Fordi jeg ikke havde et billede, der var 360px i bredden.. det er derfor at jeg har sat "width:100%".. så billedet passer ind i bredden.. det ligner noget der er løgn, men jeg skulle bruge et billede jeg kunne teste med..

olebole> Uhm.. qué? :-)
Stadig det med luften, som blev rettet i 20/06-2007 15:17:26..? :-)
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:24 #17
olebole> Ahh.. Så er vi der.. :-)
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:25 #18
olebole> Jeg er desværre ikke Pro-medlem lige nu, pga inaktivitet (eksamen).. så jeg har ikke den der fine tæller.. :-)
Avatar billede wiwi Praktikant
20. juni 2007 - 15:27 #19
tak for hjælpen der er mange koder som jeg nok ikke lige er så bekendt med så kan jeg bare slette de steder hvor der står havde ikke billdet i rette strørrelse?
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:28 #20
Folkens.. Jeg bliver nødt til at smutte.. Skulle have været et sted, for ca 5 minutter siden.. og er der ikke endnu.. Jeg vil derfor gå igang med at bygge en tidsmaskine, så jeg ikke kommer for sent.. :-)
Avatar billede wiwi Praktikant
20. juni 2007 - 15:30 #21
Men tusind tak for hjælpen her er pointene
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:30 #22
wiwi> Du kan slette al den tekst, der står mellem "/*" og "*/"..

Eksempel:

/* hvis den nedre ramme skal styles, kan det gøres her */
/* jeg havde ikke lige et billede i rette størrelse */

Hvis du har spørgsmål til CSS koden (det der står imellem <style type="text/css"> og </style>), kan du spørge olebole, som er mester på området..
Avatar billede thesurfer Nybegynder
20. juni 2007 - 15:31 #23
Jeg takker for points.
Gotta go.. tidsmaskinen bygger ikke sig selv.. :-)
Avatar billede olebole Juniormester
21. juni 2007 - 15:04 #24
thesurfer >> Jeg har heller ikke selv tælleren lige for tiden, så jeg krydser også beskeder med andre brugere af og til  ;o)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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