Avatar billede langkiller Nybegynder
04. november 2011 - 01:38 Der er 10 kommentarer og
1 løsning

div vil ikke "blive" i toppen når der bliver tilføjet flere ved siden af

Har en div boks i højre side der skal være i toppen, hvilket den var til at starte med. Problemet opstod da jeg lavede en while løkke der trækker nogle data fra db'en ud og laver en liste af div bokse i venstre side.. Problemet er at den højre div boks kun vil stå parallelt med den nederste i venstre side.

Den relevante del af koden er her:

Den venstre side der laver en liste af div bokse:

        $reunions_sql = mysql_query("SELECT * FROM reunions ORDER BY timestamp DESC") or die(mysql_error());;
       
            if(mysql_num_rows($reunions_sql) == 0)
            {
                print "<h5>Ingen reunions er planlagt endnu</h5>";   
            }
            else
            {
                        while($rearray = mysql_fetch_array($reunions_sql))
                        {
                            $overskrift = "<h3>".$rearray['overskriftdk']."</h3>";
                            $indhold = "<h5>
                                        <p>".$rearray['indholddk']."</p>
                                        </h5>";
               
                            box("left", $overskrift, "550", "280", $indhold, "1");                       
                        }
            }



Den højre side med én div boks:

            $overskrift = "<h3>Bla Bla</h3>";
            $indhold = "<p><h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                        bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                        bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                        bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                        </h5></p>";

            box("right", $overskrift, "230", "280", $indhold, "1");



Resultatet kan ses her : http://clich.net/reunion.php
Avatar billede gadensgaard Nybegynder
04. november 2011 - 09:11 #1
Jeg synes det ville være mere relevant at se det resulterede kode samt det CSS du har defineret.
Avatar billede langkiller Nybegynder
04. november 2011 - 10:53 #2
Her er min css:

body {
margin-top: 0px;
margin-bottom: 0px;
}

#hovedside {
width: 916px;
height: 2200px;
margin:auto;
}

#leftside {
width: 10px;
float: left;
height: 2200px;
background-image: url('pics/left.png');
background-repeat: repeat-y;
}
#rightside {
width: 6px;
float: right;
height: 2200px;
background-image: url('pics/right.png');
background-repeat: repeat-y;
}
#middle {
width: 900px;
float: left;
height: 2200px;
}
#search {
width: 330px;
height: 35px;
float: right;
background-image: url('pics/soeg_bg.png');
background-repeat: repeat-x;
vertical-align: bottom;
}

#content {
width: 850px;
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
margin:auto;
}
/* TEKST STYLING */

p.overskrift {
font-family: tahoma;
font-size: 18px;
text-decoration: none;
text-align: left;
}

h3 {
font-family: Tahoma;
text-decoration: none;
text-align: left;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 2px;


}


h5 {
font-size: 13px;
font-weight: normal;
font-family: Tahoma;
text-decoration: none;
text-align: left;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
}



a.n:link {
    color: #1615dd;
    text-decoration: none;
}
a.n:visited {
    color: #1615dd;
    text-decoration: none;
}
a.n:hover {
    color: #1615dd;
    text-decoration: underline;
}
a.n:active {
    color: #1615dd;
    text-decoration: underline;
}
Avatar billede langkiller Nybegynder
04. november 2011 - 10:54 #3
Funktionen for div boksen:


function box($float, $overskrift, $width, $height, $indhold, $border)
{
    print "
    <div style=\"float: " . $float . ";\">
    <h3>" . $overskrift . "</h3>
        <div style=\"margin-bottom: 20px; width: " . $width . "px; height: " . $height . "px; padding: 8px; border: solid " . $border . "px #000; vertical-align: top;\">
        " . $indhold . "
        </div>
    </div>
    ";
}
Avatar billede gadensgaard Nybegynder
04. november 2011 - 11:13 #4
Det skyldes at der ikke er plads i dit content område. Lægger jeg tallene sammen får jeg 851px totalt og dit content område er kun 850.
Avatar billede langkiller Nybegynder
06. november 2011 - 12:15 #5
har lige prøvet at ændre content området op til 870 px og sætte div boksene's bredde betydeligt ned, men det gjorde ingen forskel.. ?
Avatar billede olebole Juniormester
06. november 2011 - 13:29 #6
<ole>

Din 'spamming' med H elementer er helt misforstået - og jeg har svært ved at se, hvad formålet skulle være. Det er i hvertfald ikke nogen god idé, set udfra et SEO synspunkt.

Derudover bør du holde styr på hvilke typer af elementer, der kan rumme hvilke elementer:

*) Du kan ikke have H elementer i H elementer
*) Du kan ikke have P elementer i H elementer
*) Du kan ikke have H elementer i P elementer

Tjek altid dine dokumenter med W3C's validator  *o)

/mvh
</bole>
Avatar billede olebole Juniormester
06. november 2011 - 13:36 #7
Nu har jeg prøvet at validere koden, og det ser desuden ud til, at dokumentet er gemt som utf-8 - mens du bruger en iso-8859-1 meta.

Det er ikke dén fejl, der giver dig problemer med layout, men vil give dig problemer med specialtegn på længere sigt.

Fejlene, jeg nævnte i #6, er derimod meget væsentlige for sidens layout
Avatar billede langkiller Nybegynder
07. november 2011 - 00:00 #8
Ja kan godt se jeg nok lige skal kigge det igennem med H elementerne.. Hvad er der egentlig galt med at have mange af dem / spamming ? Bare nysgerrig

Nå, men prøvede at fjerne alle p og h elementer så der kun var divs tilbage, men det gjorder ingen forskel for layoutet.. Fik dog løst mit problem ved at sætte hele venstre siden (while løkken) ind i en div med auto height.
Avatar billede langkiller Nybegynder
07. november 2011 - 00:10 #9
grunden til at det har set så vanvittigt ud i kildekoden med H elementer er at jeg har lavet en php funktion til div bokse og havde glemt at jeg havde lavet H elementer i funktionen og har så sat dem igen når jeg har kladt funktionen :p
Avatar billede langkiller Nybegynder
07. november 2011 - 20:24 #10
tak for hjælpen :)
jeg lukker tråden
Avatar billede olebole Juniormester
07. november 2011 - 21:24 #11
Google ved godt, at vi ved, at Google vægter teksten i H elementer som værende af stor vigtighed (nøgleord). Hvis der bruges mistænkeligt mange, går Google udfra, at man vil 'snyde' søgemaskinen.

Derfor skal man altid passe på, man ikke kommer til at ligne en platugle. Søgemaskinen kender kun din kode og ved - i modsætning til folk, der kender dig - ikke, at du ikke er ude på snyd  =)
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