Avatar billede ej147 Nybegynder
22. september 2014 - 21:35 Der er 9 kommentarer og
1 løsning

Designproblem med CSS

Det vil glæde mig såfrem en af jer kan hjælpe med et designproblem i css, eller hvad det nu er.

PHP koden jeg har brug for hjælp til med css er her:

<?php
while($row=mysql_fetch_array($data))
{
$ukendt = $row['total'] - $row['male'] - $row['female'];
echo '<table id="facit">';
echo "<tr><td>" . $row['total'] . " personer</td></tr>";
echo "<tr><td>----</tr></td>";
echo "<tr><td>Af dem er der" . $row['male'] . " mænd</tr></td>";
echo "<tr><td>og" . $row['female'] . " kvinder</tr></td>";
echo "<tr><td>desuden $ukendt børn af ukendt køn</tr></td>";
echo "<tr><td>-------</tr></td>";
echo "<tr><td>Det bliver til" . $row['families'] . " familier ialt.</tr></td>";
echo "<table>";
}
mysqli_close($con);
?>
   
Jeg bruger denne kode på min hjemmeside her:
www.zerious.dk - Slægtsforskning - Gedcom indhold

Det virker fint nok, men jeg kunne godt tænke mig, at der bliver sat 2 små billeder ind på hver sin side af teksten, så jeg har billede til venstre - lige ved siden af teksten - og et billede til højre på samme linje
Men hvordan klarer jeg den?
Jeg har prøvet at sætte de 2 billeder ind i hver sin DIV, men teksten vælter og billedet, der skal være til højre, sidder langt under billedet til venstre - også selvom jeg laver en overflow hidden.

Kan en af jer monstro hjælpe med dette?
Avatar billede NielsErikP Mester
23. september 2014 - 00:11 #1
Hej...

Du skal glemme at opbygge dine hjemme sider med tables... Det hører fortiden til...

prøv dette eksempel  :



<head>
<style src="txt/css">
#td_1,#td_2,#td_3 {
    float:left;
    width: 150px;
    height: 150px;
}
.container {
    width:  990px;
    height: 300px;
}
</style>
</head>   

<html>   
<body>   
    <div  id="container">
        <div  id="td_1"><img src="/sti til/billede 1    ></div>
        <div id="td_2">
            personer  <br>
            ----      <br>
            Af dem er der    mænd  <br>
            og kvinder  <br>
            desuden  børn af ukendt køn  <br>
            -------
            Det bliver til familier ialt.  <br>
        </div>
        <div  id="td_3"><img src="/sti til/billede 2"></div>
    </div>
</body>
</html>




Dette er opbygget i div's.. og du skal selvfølgelig ECHO alt html tagsene som du gør med tables.

Håber du kan bruge det.
Avatar billede ej147 Nybegynder
23. september 2014 - 00:20 #2
Tusind tak for dit svar - jeg prøver lige - vender tilbage...
Avatar billede ej147 Nybegynder
23. september 2014 - 00:24 #3
Hvad mener du med:
du skal selvfølgelig ECHO alt html tagsene som du gør med tables.
Avatar billede ej147 Nybegynder
23. september 2014 - 01:09 #4
Ok, nu har denne amatør set lyset og forstået det :-) og det var lige præcis den virkning jeg ville have - perfekt.
Tak for hjælpen - og smid venligst et svar.
Avatar billede ej147 Nybegynder
23. september 2014 - 05:47 #5
NielsErikP:
Det pyntede og jeg fik lært nyt - tak for det.
Avatar billede NielsErikP Mester
23. september 2014 - 21:40 #6
Hej...

Super.. Du fik det til at virke.. Det er jo det væsentlige, ik?

Og et svar.
Avatar billede ej147 Nybegynder
23. september 2014 - 22:05 #7
:-)
Avatar billede NielsErikP Mester
23. september 2014 - 23:59 #8
Hej..

Tak for point.

Til #3:
Det er jo php du får til at udskrive med ECHO.. i dit eksempel :


Echo '<table id="facit">" ' --->  Echo "<table id=\"facit\"> "



Det samme med div's :
[div]

Echo " <div id=\"container\">  "  ... osv.
Avatar billede ej147 Nybegynder
24. september 2014 - 00:10 #9
Ja, jeg kan godt se hvad du mener.
Men for en amatør skal det jo ende galt en gang i mellem :-)
Og din løsning var væsentlig bedre/smartere :-)
Avatar billede NielsErikP Mester
24. september 2014 - 23:02 #10
Hej ..

Nå... ja.

Bare prøv at have i mente.. at tables hører fortiden til... Det er fint nok at bruge tables til at optille tabuleret data.

Ellers prøv at bygge op i div's og så style dem med css.

Men godt du fik det resultat du ønskede. ;-)
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

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