[DIV's] "tabel" niet juist gepositioneerd - Softwareontwikkeling

zondag 2 december 2007 17:11

Acties:

Topicstarter

heej heej.. ben nu al een uurtje aant worstelen.. maar krijg om 1 of de andere manier mijn "tabel" niet goed gepositioneerd... hoop gegoogled enzo maar kom er niet echt uit...

MENU1 blijft namelijk bij de "footer" hangen, terwijl hij links van het gecentreerde geheel moet komen...

de code die ik gebruik:

HTML:

<div id='wrapper'>
<div id='menu'>
<div class='content'>
<div class='fixfuckedie'>
MENU2
</div>
</div>
</div>

<div id='main'>
<div id='sitebanner'>
<div id='navbar'>
<DIV ALIGN='CENTER'>SITELINKS</DIV>
</div>
</div>
<div class='content'>
<div class='fixfuckedie'>



<div id='wrapper2'>
<div id='menu2'>
<div class='content2'>
<div class='fixfuckedie'>
MENU1 
</div>
</div>
</div>

de css...

Cascading Stylesheet:

body {
    background-image:url(images/bg.jpg);
    background-repeat:repeat;
    color: #000;
    font-family: verdana, arial, "lucida grande", sans-serif;
    text-align: center;
}

#wrapper {
    margin: 10px auto;
    width: 700px;

}

#wrapper2 {
    margin-left:auto;
    width: 700px;

}
#menu {
    float: right;
    width: 181px;
    text-align: right;
}
#menu2 {
    float: left;
    width: 181px;
    text-align: left;
}
.content {
    border: #444 2px solid;
    padding: 15px;
    font-size: 11px;
    background: #fff;
    color: #000;
    text-align: right;
}

.content2 {
    border: #444 2px solid;
    padding: 15px;
    font-size: 11px;
    background: #fff;
    color: #000;
    text-align: left;
}

.fixfuckedie {
    width: 100%
}

wat doe ik fout?!

I can see clearly now the rain has gone. I can see all obstacles in my way.

zondag 2 december 2007 17:18

Acties:

DamadmOO

Heb je toevallig ergens een voorbeeldje online staan?

zondag 2 december 2007 17:20

Acties:

Mopperman

Topicstarter

toevallig op http://ik-own.nl/test/dusja.html

net online gezet

I can see clearly now the rain has gone. I can see all obstacles in my way.

zondag 2 december 2007 17:25

Acties:

Raynman

Ik zou beginnen met het tellen van het aantal begin- en eindtags voor je divs.

zondag 2 december 2007 17:50

Acties:

Mopperman

Topicstarter

ook als dat getal gelijk is is het nog steeds hetzelfde.. dusja..

ownee. nog erger dan ...

is ook aangepast @ online voorbeeld

iemand een idee....

[ Voor 30% gewijzigd door Mopperman op 02-12-2007 17:53 ]

I can see clearly now the rain has gone. I can see all obstacles in my way.

maandag 3 december 2007 08:09

Acties:

MoietyMe

zij/haar

Ten eerste moet je hem eens door de w3 validator halen:

HTML: http://jigsaw.w3.org/css-...file=css21&usermedium=all
CSS: http://validator.w3.org/c...29&doctype=Inline&group=0

Dan kom je al een hele hoop fouten tegen.

maandag 3 december 2007 10:35

Acties:

Verwijderd

Daarnaast: wat is je bedoeling? Dat wordt nu niet duidelijk uit je voorbeeld. Ook lijk je wat last van divitis te hebben. Je maakt het jezelf daar niet gemakkelijker mee.

Kun je aangeven hoe het eruit moet zien?

maandag 3 december 2007 21:14

Acties:

Mopperman

Topicstarter

hoe het eruit moet zien...

Afbeeldingslocatie: http://www.ik-own.nl/test/test.jpg

[ Voor 3% gewijzigd door Mopperman op 03-12-2007 21:15 ]

I can see clearly now the rain has gone. I can see all obstacles in my way.

dinsdag 4 december 2007 00:22

Acties:

Verwijderd

Hier zijn verschillende oplossingen voor. Hier vind je wel iets: [CSS] Zelfde layout met 2 of 3 kolommen*

Ook kun je op Google kijken: http://www.google.nl/search?q=three+column+layout

Het eerste resultaat (http://css-discuss.incutio.com/?page=ThreeColumnLayouts) zet wat mogelijkheden op een rij.

dinsdag 4 december 2007 00:40

Acties:

XWB

Devver

Mopperman schreef op maandag 03 december 2007 @ 21:14:
hoe het eruit moet zien...

[afbeelding]

Als je het echt zo wil hebben:

Cascading Stylesheet:

div#container
{
    overflow: hidden;
}

div#left,
div#center,
div#right
{
    float: left;
    height: 200px;
    width: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 200px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Divjes</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="left">menu 1
            </div>
            <div id="center">content
            </div>
            <div id="right">menu 2
            </div>                      
        </div>
    </body>
</html>

March of the Eagles

woensdag 5 december 2007 11:57

Acties:

Mopperman

Topicstarter

Thanks hacku! deze is bijna goed, tussen de menus en de content fields moet nog 15 px open zijn...

weet niet of dat ook nog mogelijk is?

I can see clearly now the rain has gone. I can see all obstacles in my way.

woensdag 5 december 2007 12:26

Acties:

XWB

Devver

Het is maar een woord

Cascading Stylesheet:

div#container
{
    overflow: hidden;
}

div#left,
div#center,
div#right
{
    float: left;
    height: 200px;
    width: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 200px;
}

div#left,
div#center
{
    margin-right: 15px;
}

March of the Eagles

woensdag 5 december 2007 18:59

Acties:

Mopperman

Topicstarter

Thanks!

net even getest op me design maar ligt toch iets complexer dan ik dacht..

zoals het dus is op dit moment in de design code...

Afbeeldingslocatie: http://www.ik-own.nl/test/livetest.JPG

Afbeeldingslocatie: http://www.ik-own.nl/test/livetest.JPG

nu moet menu1 dus LINKS komen, en de code die hier genoemt staat hlpt daar niet mee, aangezien de div's uit een php file geladen worden.... denk dat dit echt css is meer dan een div probleem, alleen weet niet hoe het op te lossen.. iemand nog een idee...

I can see clearly now the rain has gone. I can see all obstacles in my way.

woensdag 5 december 2007 19:02

Acties:

XWB

Devver

Afbeelding werkt niet.

March of the Eagles

woensdag 5 december 2007 19:07

Acties:

Mopperman

Topicstarter

Hacku schreef op woensdag 05 december 2007 @ 19:02:
Afbeelding werkt niet.

Nu wel... ME internet knalde eruit..

I can see clearly now the rain has gone. I can see all obstacles in my way.

donderdag 6 december 2007 19:24

Acties:

Mopperman

Topicstarter

iemand?

I can see clearly now the rain has gone. I can see all obstacles in my way.

zaterdag 8 december 2007 10:36

Acties:

Mopperman

Topicstarter

niemand?!

Als er meer info nodig is, laat het weten.. dan zorg ik hiervoor...

I can see clearly now the rain has gone. I can see all obstacles in my way.

zaterdag 8 december 2007 10:51

Acties:

Mad Marty

Je bent slimmer als je denkt!

Post de relevante code eens (html, css, php)

Rail Away!

zaterdag 8 december 2007 17:52

Acties:

Mopperman

Topicstarter

De inhoud van de scripts die van toepassing zijn hier, heb ik gepost staan in het eerste bericht.

I can see clearly now the rain has gone. I can see all obstacles in my way.

zaterdag 8 december 2007 23:44

Acties:

Mad Marty

Je bent slimmer als je denkt!

Aangezien je na je TS een aantal tips hebt gekregen, ga ik er van uit dat je die verwerkt hebt, maar dat blijkt niet zo te zijn

Dat de code 'uit een php file komt' maakt niets uit natuurlijk, het is nog steeds html.

[ Voor 25% gewijzigd door Mad Marty op 08-12-2007 23:45 ]

Rail Away!

zondag 9 december 2007 09:59

Acties:

Mopperman

Topicstarter

Mad Marty schreef op zaterdag 08 december 2007 @ 23:44:
Aangezien je na je TS een aantal tips hebt gekregen, ga ik er van uit dat je die verwerkt hebt, maar dat blijkt niet zo te zijn

Dat de code 'uit een php file komt' maakt niets uit natuurlijk, het is nog steeds html.

ik heb ze getest ja, in pure html komen ze er optie toppie uit, maar i.c.m. de php file word het dus nog erger... daarom kom ik er ook niet uit...

I can see clearly now the rain has gone. I can see all obstacles in my way.

zondag 9 december 2007 11:53

Acties:

H004

Post dan de code die je na de tips die je hier gekregen hebt in combinatie met je php-file krijgt! Hier kunnen we toch helemaal niets mee?

zondag 9 december 2007 15:05

Acties:

Verwijderd

weet niet of de huidige site op www.ik-own.nl/test/ je nieuwe aanpak is, maar mocht je het nog nodig hebben zou ik het even heel simpel bekijken:

Je hebt de body van je pagina. Daarin gooi je een enkele div (wrapper) die relatief gepositioneerd is met margin: 0 auto; (dit centreert je site content ten altijd).

in wrapper creeer je drie divs: Menu1 Content en Menu2.

je wrapper geef je een vaste waarde mee voor de breedte zodat de inhoud nooit van zijn positie zal afwijken.

Menu 1 en Menu2 postitioneer je absoluut.

Menu1 geef je als positionering: left: 0px; (hierdoor lijnt je Menu1 altijd uit tegen de linkerkant van je wrapper).

Voor Menu2 doe je hetzelfde maar dan right: 0px; in plaats van left: 0px;(hierdoor lijnt je Menu2 altijd uit tegen de rechterkant van je wrapper).

Je positioneert daarna alleen nog je content absoluut dmv top:/left: op de plek waar je m wil hebben.

hierdoor zal alle inhoud van je wrapper altijd de zelfde plek binnen die wrapper behouden.

de wrapper zelf zal dan alleen (zolang je browser venster groot genoeg is) proberen om je wrapper in het midden van de browser te krijgen.

Post anders ff een link naar je echte testpagina zodat (mocht er toch nog iets misgaan) er gewoon gekeken kan worden naar de resultaten.

P.S.
door alles binnen een bepaalde div absoluut te positioneren voorkom je ook vage crossbrowser foutjes, dus hierna zal alles in principe er in elke browser hetzelfde uit moeten zien.
Probeer in ieder geval niet binnen de zelfde div te veel te mengen tussen relative en absolute positionering tenzij je echt heel goed weet wat je aan het doen bent

.