Avatar billede skizo_someone Nybegynder
20. februar 2005 - 16:05 Der er 10 kommentarer og
1 løsning

Problem med layout opbygget af DIV's

Hej alle

Jeg sidder og bakser med at konvertere mit nuværende design - som er tabel opbygget - til div's pg det har jeg nogle problemer med at få til at virke.

Jeg har hurtigt lavet denne illustration fpr at hjælpe på forklaringen: http://files.pornogris.dk/div_problem.jpg

Altså, det går ud på at hoved blokken som indeholder det reelle side-indhold skal tilpasse sig alt efter om blokken til hæjre skal vises eller ej (noget der sker i min php kode).


Håber i kan give mig nogle forslag på hvordan dette skal laves, jeg er desperat efter at få det til at virke...
Avatar billede roenving Novice
20. februar 2005 - 16:11 #1
F.eks.

<div id="topBlok"></div>

<!-- nogle gange -->
<div id="hoejreBlok" style="width:150px;float:right"></div>
<!-- slut nogle gange -->

<div id="venstreBlok" style="width:150px;float:left;"></div>
<div id="centerBlok" style="float:left;"></div>

<div id="bundBlok"></div>

-- jeg har kun angivet de properties, som har direkte betydning for skemaet, men selvfølgelig skal de tre blokke have den samme højde, f.eks. implementeret med en klasse !-)
Avatar billede skizo_someone Nybegynder
20. februar 2005 - 16:24 #2
er bange for at jeg ikke helt kan følge dig...
sådan her er det lavet nu, undskyld farverne men det er for at jeg kan se hvad der er hvad...

http://dev.pornogris.dk/cms/
Avatar billede roenving Novice
20. februar 2005 - 16:32 #3
Prøv at fjerne bredden på content-div'en og anbring rightcol _før_ de andre divs !-)

-- for en div er et block-level element, så det vil forsøge at udfylde det rum, som er til rådighed, hvorfor det skal være defineret før det kommer på !o]
Avatar billede skizo_someone Nybegynder
20. februar 2005 - 16:40 #4
hmm...den i midsten tilpasser sig ikke rigtigt, hvis jeg sætter den til 100% så går det også helt galt.
Avatar billede roenving Novice
20. februar 2005 - 16:50 #5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<div id="topBlok"></div>

<!-- nogle gange -->
<div id="hoejreBlok" style="border:1px solid black;width:150px;float:right"></div>
<!-- slut nogle gange -->

<div id="venstreBlok" style="border:1px solid red;width:150px;float:left;"></div>
<div id="centerBlok" style="border:1px solid green;float:left;">Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros. </div>

<div id="bundBlok"></div>
Avatar billede roenving Novice
20. februar 2005 - 16:51 #6
-- og prøv så at fjerne hoejreBlok !-)
Avatar billede skizo_someone Nybegynder
20. februar 2005 - 20:33 #7
undskyld svartiden...
jeg har siddet og leget lidt med din kode, og har prøvet at skabe det selv, men min midterste blok opfører sig anderledes end du beskriver, den tager nemlig kun den plads der skal bruges, istedet for at fylde det ud(?)
Avatar billede roenving Novice
21. februar 2005 - 09:30 #8
Ja uden bredde angivet, vil den ikke blive udfyldt, uden at der er noget, som fylder den ...
Avatar billede skizo_someone Nybegynder
04. august 2005 - 00:12 #9
et svar roenving?
Avatar billede roenving Novice
04. august 2005 - 11:00 #10
Oki '-)
Avatar billede roenving Novice
11. oktober 2005 - 13:41 #11
-- og 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