Avatar billede tweak Nybegynder
09. maj 2007 - 21:19 Der er 9 kommentarer og
2 løsninger

Placere til højre eller venstre

Hej,

Jeg er ved at lave en skabelon til billeder og tekst.

Billedet og teksten skal skifte mellem at stå til højre og venstre og skal placeres i en boks for sig selv hvergang som skal udvide sig i højden efter indholdet, men jeg kan ikke få det til som jeg vil, eller dvs. godt i IE, men ikke i FF. Min kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
clear: both;
position: absolute;
background-color: #fff;
}
#container
{
}
.main
{
position:relative;
width: 688px;
color: #333;
line-height: 1.6em;
background-color: #EEEEEE;
border: 1px solid #888;
}
.tekst_1{
float:left;
width:250px;
}
.tekst_2{
float:right;
width:250px;
}
</style>
</head>
<body>
<div id="container">
<div class="main">
              <div class="tekst_1"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>
       
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_2"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>
       
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_1"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>
       
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_2"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>
       
        </div>

</div>

</body>
</html>
Avatar billede mclemens Nybegynder
09. maj 2007 - 22:33 #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
clear: both;
position: absolute;
background-color: #fff;
}
#container
{
}
.main
{
position:relative;
width: 688px;
color: #333;
line-height: 1.6em;
background-color: #EEEEEE;
border: 1px solid #888;
}
.tekst_1{
float:left;
width:250px;
}
.tekst_2{
float:right;
width:250px;
}






p {margin:0;}
.clearer {clear:both;height:0;overflow:hidden;}








</style>
</head>
<body>
<div id="container">
<div class="main">
              <div class="tekst_1"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>




<div class="clearer"></div>   


 
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_2"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>


<div class="clearer"></div> 

   
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_1"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>


<div class="clearer"></div>

     
        </div>
<!-- NY BOKS -->
<div class="main">
              <div class="tekst_2"><img src="gx100.gif" width="155" height="99"></div>
              <p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>


<div class="clearer"></div>


     
        </div>

</div>

</body>
</html>
Avatar billede mclemens Nybegynder
09. maj 2007 - 22:34 #2
Nulstilling af p margin og clearing
af floats. ... Behold nogle af pointene ;)
Avatar billede Slettet bruger
11. maj 2007 - 00:15 #3
Jeg kommer lige med et forslag:
...............................

<!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>[Ingen titel]</title>
<style type="text/css" media="screen">
div#content {
                    width: 772px; margin: 0px auto;
        }
        div#box1 {
                    width: 557px;
                    height: 99px;
                    float: left;
                    margin-right: 3px;
                    border-bottom-color:#000000;
                    border-style: solid;
                    border-width: 1px;
                    background-color:#EEEEEE;
                    padding: 3px;

        }
        div#box2 {     width: 155px;
                    height: 99px;
                    float: left;
                    margin-right: 3px;
                    border-bottom-color:#000000;
                    border-style: solid;
                    border-width: 1px;
                    background-color:#EEEEEE;
                    padding: 3px;
        }
          div#box3 {     width: 155px;
                    height: 99px;
                    float: left;
                    margin-right: 3px;
                    border-bottom-color:#000000;
                    border-style: solid;
                    border-width: 1px;
                    background-color:#EEEEEE;
                    padding: 3px;
        }
        div#box4 {
                    width: 557px;
                    height: 99px;
                    float: left;
                    margin-right: 3px;
                    border-bottom-color:#000000;
                    border-style: solid;
                    border-width: 1px;
                    background-color:#EEEEEE;
                    padding: 3px;

        }

</style>
</head>
<body>
<div id="content">
        <div id="box1"><p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>


        </div>
        <div id="box2">
            <img src="/images/gx100.gif" alt="Graphic">
        </div>
        <div id="box3">
            <img src="/images/gx100.gif" alt="Graphic">


        </div>
        <div id="box4"><p>Ricoh Caplio GX100 med 24 til 72mm vidvinkelzoom, 10,3 megapixels,
              flytbar LCD-søger til optagelse i SLR-tilstand,RAW unnderstøttelse,
              2,5" LCD-display med 170 graders vidvinkel-visning</p>

        </div>
        </div>
        <div style="clear:both;line-height:0;font-size:0;">&nbsp;</div>
    </div>
</body>
</html>
Avatar billede tweak Nybegynder
13. maj 2007 - 19:47 #4
Hey,

Der er ikke noget af det som virker. sætter man eks et støre billede rykker det hele sig.
Avatar billede Slettet bruger
14. maj 2007 - 09:44 #5
Det er næsten ikke til at sikre sig i både hoved & *øv, hvem vidste at dine billeder ikke var konverteret til den størrelse du opgav, det gjorde du.

men tilføj dette ---> width="155" height="99"
så disse linier i box 2 og 3 kommer til at se sådan ud:

<img src="/images/gx100.gif" alt="Graphic"width="155" height="99">

men iøvrigt syntes jeg du burde konvertere billederne til den størrelse, for er de 1Mb eller mere tager det alt for lang tid at loade.
Avatar billede tweak Nybegynder
28. maj 2007 - 18:48 #6
ibtage smider du et svar så i kan dele
Avatar billede Slettet bruger
28. maj 2007 - 20:46 #7
Her er mit svar
Avatar billede Slettet bruger
11. juni 2007 - 15:37 #8
@tweak....Så mangler vi lige en accept
Avatar billede tweak Nybegynder
19. juni 2007 - 12:12 #9
Sorry! Havde ikke set der blev lagt et svar.
Avatar billede mclemens Nybegynder
19. juni 2007 - 12:21 #10
Tak for point :)
Avatar billede Slettet bruger
19. juni 2007 - 20:03 #11
Tak for point
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