Probleem met layout site - Softwareontwikkeling

dinsdag 3 juli 2007 19:05

Acties:

No smoke, no poke

Topicstarter

Hallo,

Ik ben bezig met een nieuwe site die ik met alles zelf heb opgebouwd in notepad++, klik hier om naar de site te gaan.
Alleen de layout die ik heb gemaakt die werkt niet goed, het tekstvak komt niet rechts naast het menu te staan...
De layout die ik heb gemaakt met fotoshop is deze.
Die heb ik gesliced in 5 delen, de header, een balkje eronder, de menubalk links, tekstvak hoort rechts daarnaast te zitten, en dan daaronder de footer. Vrij simpel, maar lukken wil het niet.

De bij behorende codes:

De index:

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Welkom op Joopie's `place!</title>
<link rel="shortcut icon" href="Layout/jp.jpg" type="image/x-icon" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="gradient">
</div>
<div id="nav">
<iframe src="menu.html" height="386" width="146" frameborder="0" name="menu"></iframe></td>
</div>
<div id="content">
<iframe src="home.html" height="400" width="600" frameborder="0" name="tekstvak"></iframe></td>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

De css code waar de layout in staat:

Cascading Stylesheet:

#body {
  text-align: center;
}
#container {
        width: 800px;
    margin: 0 auto;
    text-align: left; 
}
#header {
    background-image: url(Layout/header.jpg);
    position:relative;
    width: 800px;
    height: 142px;
}
#gradient {
    background-image: url(Layout/balk.jpg);
    position:relative;
    width: 800px;
    height: 22px;
}
#nav {
    background-image: url(Layout/menu.jpg);
    background-repeat: no-repeat;
    background-position: right;
    position:relative;
    width: 184px;
    height: 412px;
    float: left;
}
#content {
    background-color: #2F2F2F;
    position:relative;
    width: 616px;
    height: 412px;
    float: right;
}
#footer {
    background-image: url(Layout/footer.jpg);
    position:relative;
    float: left;
    height: 24px;
    width: 800px;
}

En dan de home.html die bij het openen van de site in het tekstvak verschijnt:

HTML:

<html>
<head>
<title>Welkom op Joopie's `place!</title>
</head>
<body background="Layout/tekstvak.jpg">
<p><font face="Tahoma" color="#FFFFFF">Test</font></p>
</body>
</html>

En dan hier de menu.html die links naast het tekstvak verschijnt:

HTML:

<html>
<head>
<title>Welkom op Joopie's `place!</title>
</head>
<body background="Layout/menu.jpg">
<p><a href="home.html" target="tekstvak"><font face="Tahoma" font color="#FFFFFF">Home</font></a></p>
</body>
</html>

Kortom, dit werk niet naar behoren, ik vermoed zelf een fout in de css, maar omdat ik nog niet al te veel kennis ervan heb krijg ik de fout er niet uit.
Ik heb wel eerder met html gewerkt, maar css is nieuw voor mij.
Is hier iemand die mij verder kan helpen?

_{Btw, de site staat dit moment op mijn eigen computer, dus `s avonds en `s ochtends staat de site vaak uit.}

[ Voor 8% gewijzigd door Joopieboy op 03-07-2007 22:42 . Reden: CSS is verbeterd update 2 ]

Het leven is te kort om geduld te hebben!

dinsdag 3 juli 2007 19:21

Acties:

NetForce1

(inspiratie == 0) -> true

Bij mij komt je content wel rechts van het menu te staan, alleen zit er een wit vlak tussen (FF 1.5 op Ubuntu). Wat hier precies de oorzaak van is weet ik zo gauw niet, maar ik heb wel wat algemene opmerkingen:

- Waarom maak je gebruik van iframes om content van je eigen site te tonen?
- De td's in je index lijken me ook een tikje misplaatst, wellicht een idee om het even zonder te proberen.

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

dinsdag 3 juli 2007 19:24

Acties:

Verwijderd

het gebeurd omdat je geen breedte meegeeft aan je container div. Die rechter div flaot nu altijd tov de rechter kant van de browser. soms past t wel soms poast het niet.

de oplossing is, geef container de css property width: 800 px; mee

dinsdag 3 juli 2007 19:28

Acties:

Joopieboy

No smoke, no poke

Topicstarter

@Sympathiekesok:
Dankjewel, de layout is iig een geheel nu.

Maar:
Met Firefox werkt de site goed, maar met internet explorer 6 en 7 werkt het niet goed, ik heb dan nml 2 witte vlakken, 1 bij het menu en de ander bij het tekstvak.

NetForce1 schreef op dinsdag 03 juli 2007 @ 19:21:
Bij mij komt je content wel rechts van het menu te staan, alleen zit er een wit vlak tussen (FF 1.5 op Ubuntu). Wat hier precies de oorzaak van is weet ik zo gauw niet, maar ik heb wel wat algemene opmerkingen:

- Waarom maak je gebruik van iframes om content van je eigen site te tonen?
- De td's in je index lijken me ook een tikje misplaatst, wellicht een idee om het even zonder te proberen.

De tds zijn nu weggehaald, was idd een beetje onzin omdat de layout al in de css word geregeld.

Maar hoe los ik dit op van die witte vlakken in internet explorer?

[ Voor 100% gewijzigd door Joopieboy op 03-07-2007 20:01 ]

Het leven is te kort om geduld te hebben!

dinsdag 3 juli 2007 20:26

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Het probleem is opgelost, maar ik gebruik nu de achtergrond voor het tekstvak en voor het menu dubbel.
1 keer in de html van het menu en het tekstvak en dan nog een keer in de css word de afbeelding gebruikt.
Is dit goed of moet ik dit anders doen?

Het leven is te kort om geduld te hebben!

dinsdag 3 juli 2007 20:27

Acties:

Cartman!

Je zou 'position:relative;' kunnen toevoegen aan alle relatief geplaatste elementen. Mn ervaring is dat dit een hoop problemen kan verhelpen, zeker in IE. Overigens snap ik ook niet helemaal waarom je een iframe wilt gebruiken voor je site. Zoekmachines kunnen er slecht mee overweg en bookmarken kun je ook zo goed als vergeten.

dinsdag 3 juli 2007 20:28

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ok, hoe kan ik dat dan anders doen?
Want met weglaten van de iframe heb ik het wel goed, maar geen tekst meer erin, met iframe is dat wel goed als ik die afbeelding dubbel gebruik.

En met die position relative doet die het ook niet goed:
De code die ik dan heb voor de style.css:

En hoe krijg ik deze site mooi gecentreerd?

[ Voor 162% gewijzigd door Joopieboy op 03-07-2007 22:48 ]

Het leven is te kort om geduld te hebben!

dinsdag 3 juli 2007 21:16

Acties:

Rowanov

Kop eens wat anders...

Dit toevoegen:

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}

dinsdag 3 juli 2007 22:41

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ok, dankje.

Wat ik me nog af vraag, hoe kan ik dat anders doen met die iframes en het dubbel gebruiken van de afbeeldingen?

Edit nummero zoveel

Nu werkt het wel goed, ik heb een paar dingetjes aangepast in de style.css.

Dit heb ik nu erin staan:

Cascading Stylesheet:

#body {
  text-align: center;
}
#container {
    width: 800px;
    height: 142px;
    margin: 0 auto;
    text-align: left;
}
#header {
    background-image: url(Layout/header.jpg);
    width: 800px;
    height: 142px;
}
#gradient {
    background-image: url(Layout/balk.jpg);
    width: 800px;
    height: 22px;
    float: left;
}
#nav {
    background-image: url(Layout/menu.jpg);
    width: 184px;
    height: 412px;
    float: left;
}
#content {
    background-image: url(Layout/tekstvak.jpg);
    width: 616px;
    height: 412px;
    float: left;
}
#footer {
    background-image: url(Layout/footer.jpg);
    width: 800px;
    height: 24px;
    float: left;
}

[ Voor 255% gewijzigd door Joopieboy op 04-07-2007 21:15 ]

Het leven is te kort om geduld te hebben!

Pagina: 1

Reageer