[html+css]Problemen met layout, links, tekst ,iframes, etc - Softwareontwikkeling

donderdag 25 oktober 2007 20:39

Acties:

0 Henk 'm!

No smoke, no poke

Topicstarter

Ik ben nu weer bezig met mijn site, na verschillende tutorials en hulp van mensen ben ik inmiddels zover dat ik de home.html, de menu.html en de index.html allemaal in de nieuwe index.html heb gezet. De style.css die is nog steeds voor de layout en die include ik op elke pagina.
Nu gebruik ik normaal iframes om link in het menu in het tekstvak te laden, alleen nu geeft dat problemen.

Zonder iframes, dan is de layout goed werkend en dan zie je de tekst ook, links gaan naar een nieuwe pagina. Deze optie werkt dus niet.
Met iframes heb je in IE geen achtergrond en zie je dus ook geen tekst, in FF heb je geen tekst, wel een achtergrond. De links en de tekst zijn allemaal soort van verdwenen.

Nu had ik eerst de home van de tekstvak en de menu van het menu appart en had ik een body met een background nodig om de layout goed te laten werken, alleen nu zitten deze 2 en de index in elkaar in de nieuwe index.

Nu krijg ik dit echt op geen enkele manier goed werkend. Zoekwerk levert wel wat op, maar niets wat in de buurt komt van de bovengenoemde problemen.

Dus ik hoop dat jullie mij verder kunnen helpen.

De codes:
Style.css

Cascading Stylesheet:

body {background-color:#fff7ea;
    }
#container {width: 800px;
    height: 600px;
    margin: 0 auto;
    }
#banner {background-image: url(layout/banner.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 184px;
    }
#balklinks {background-image: url(layout/balklinks.jpg);
    background-repeat: no-repeat;
    width: 22px;
    height: 392px;
    float: left;
    }
#menu {background-image: url(layout/menu.jpg);
    background-repeat: no-repeat;
    width: 140px;
    height: 392px;
    float: left;
    }
#tussenbalk {background-image: url(layout/tussenbalk.jpg);
    background-repeat: no-repeat;
    width: 44px;
    height: 392px;
    float: left;
    }
#tekstvak {background-image: url(layout/tekstvak.jpg);
    background-repeat: no-repeat;
    width: 572px;
    height: 392px;
    float: left;
    }
#balkrechts {background-image: url(layout/balkrechts.jpg);
    background-repeat: no-repeat;
    width: 22px;
    height: 392px;
    float: left;
    }
#footer {background-image: url(layout/footer.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 24px;
    float: left;
    font-size: 10px;
    text-decoration: none;
    font-weight: normal;
    }
p {font-family: verdana;
    color: #ffffff;
    font-size: 16px;
    color: #ffffff;
    }
a {font-family: verdana;
    color: #ffffff;
    font-size: 16px;
    text-decoration: underline;
    }
a:link {text-decoration: underline;
    }
a:visited {text-decoration: underline;
    }
a:hover {text-decoration: underline;
    color: #83bb50;
    font-weight: bold;
    }
a:active {text-decoration: underline;
    }

Index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Joopies place - www.joopiesplace.8s.nl</title>
<link rel="shortcut icon" href="layout/jp.png" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="balklinks"></div>
<div id="menu" name="menu"><iframe width="140" height="392" frameborder="0" name="menu">
    <center>        
        <a href="home.html" target="tekstvak">Home</a><br><br>
        <a href="afbeeldingen.html" target="tekstvak">Afbeeldingen</a><br><br>
        <a href="apparatuur.html" target="tekstvak">Apparatuur</a><br><br>
        <a href="auto's.html" target="tekstvak">Auto's</a><br><br>
        <a href="downloads.html" target="tekstvak">Downloads</a><br><br>
        <a href="links.html" target="tekstvak">Links</a><br><br>
        <a href="contact.html" target="tekstvak">Contact</a><br><br>
        <!-- Begin Motigo Webstats code -->
        <!-- Title: Joopie`s place -->
        <!-- URL: http://77.160.86.211/ -->
        <script language="JavaScript" type="text/javascript" src="http://m1.webstats.motigo.com/m.js"></script>
        <script language="JavaScript" type="text/javascript">
        <!--
        motigo_webstats("AEKhFA/n0vTl3YgDJr_P_tmiPZEA", 0);
        // -->
        </script>
        <noscript>
        <a target="_blank" href="http://www.webstats.motigo.com/stats?AEKhFA/n0vTl3YgDJr_P_tmiPZEA"><img src="http://m1.webstats.motigo.com/n?id=AEKhFA/n0vTl3YgDJr_P_tmiPZEA" border="0" width="18" height="18"/></a>
        </noscript>
        <!-- End Motigo Webstats code -->
        </center>
    </center>
</iframe></div>
<div id="tussenbalk"></div>
<div id="tekstvak" name="tekstvak"><iframe width="572" height="392" frameborder="0" name="menu">
    <p>Van harte welkom op mijn site.<br><br>
    Dit is mede ontstaan uit mijn computer hobby, ik ben er veel mee bezig en heb daarom thuis ook 2 mooie pc's staan. Ik doe er echt van alles ermee, van  websites bouwen tot foto's bewerken, etc. Daarom staat er op deze site ook van alles daarover erop.<br><br>
    Omdat dit een hobby is, is deze site niet 24 uur per dag online, alleen overdags. Dit kan helaas niet anders.<br><br>
    Dus bekijk gewoon eens alles op uw gemak, en als u dat heeft gedaan kunt u <a href="contact.html">hier</a> reageren.<br><br>
    Ik wens u veel plezier.<br><br>
    Johan</p>
</iframe></div>
<div id="balkrechts"></div>
<center>
<a href="disclaimer.html" target="tekstvak"><div id="footer"><br>copyright &copy; johan hogervorst</div></a></div>
</center>
</body>
</html>

De site is niet te bezichten, op mijn server staat nu nog de werkende oude manier met de oude layout. Ik was bezig met een nieuwe layout om ook weer een aantal stappen verder te komen met css, wat dus grondig aan het mislukken is.

Waar ik zelf aan zit te denken, is als je een link opent er in dezelfde browser pagina de pagina opnieuw word geladen met in het tekstvak de pagina die opgevraagde pagina. Alleen lijkt me dit ten eerste veel snelheid kosten, en ik krijg het niet werkend.

Andere oplossingen ben ik nog niet tegengekomen, ja oplossingen die verder borduren op de manier waarmee ik bezig was. Maar niks is een goede oplossing op dit moment.

Graag jullie hulp of meedenken hiermee!

Het leven is te kort om geduld te hebben!

vrijdag 26 oktober 2007 08:46

Acties:

0 Henk 'm!

StijnH

Volgens mij mis je de hele bedoeling van iframes

Het is namelijk zo dat je bij een iframe tag de 'scr' opgeeft: de bron van het bestand dat je in een iframe wil stoppen.
Hier gebruik je gewoon iframe tags en ga je vrolijk je code in zetten? Ik snap het niet echt.

vrijdag 26 oktober 2007 18:00

Acties:

0 Henk 'm!

moozzuzz

Je hebt nodig: een handleiding ivm HTML succes!

vrijdag 26 oktober 2007 22:08

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

Uh, hallo, ik ken wel de basics van html, en iframes ken ik ook goed.

Ik had toch geschreven dat ik met de vorige layout alles goed werkend heb gekregen en nu zit te tobben tussen 2 oplossingen, waarvan de een afvalt en die met iframes overblijft.
De bedoeling is nu om het met iframes goed werkend te krijgen, maar ik krijg de fouten die erin zitten niet eruit.

Ok sorry voor het hele omslachtige verhaal maar ik probeerde mijn denken en proberen van alles een beetje duidelijk te maken. Zo te merken is dat mislukt.

[ Voor 5% gewijzigd door Joopieboy op 26-10-2007 22:09 ]

Het leven is te kort om geduld te hebben!

zaterdag 27 oktober 2007 10:19

Acties:

0 Henk 'm!

armageddon_2k1

Wat zij bedoelen is dat je gewoon geen <iframe> mag gebruiken zoals jij het doet. Wat jij nu doet kan je namelijk ook doen met:

HTML:

1
2
3

<div style="overflow:auto">
Blaat
</div>

Een iframe moet als volgt:

HTML:

1	<iframe src="externdoc.html"></iframe>

Engineering is like Tetris. Succes disappears and errors accumulate.

zondag 28 oktober 2007 14:43

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

Nou goed, ik heb dit niet werkende plan maar laten varen, hoop info erover opgezocht maar op deze manier gaat het dus niet werken.
Nu heb ik het weer teruggebouwd naar de oude werkende manier met iframes en de pagina's van het tekstvak en het menu zijn weer appart.
Als ik die 2 bestanden in de index bouw krijg ik een hoop problemen, waaronder dat de links niet naar het tekstvak gaan etc.
Maar wat ik nu nog heb met dus die iframes en alles appart, is dat ik in elke pagina een body background moet gebruiken, hoort dit?

Het leven is te kort om geduld te hebben!

dinsdag 30 oktober 2007 18:56

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

Ben weer een paar stapjes verder.
De menu staat nu zonder iframes in de index ingebouwd, de home moet geladen worden vanuit een gewoon html bestand omdat hij anders niet bij het openen van de pagina de tekst laad...
Erg vervelend probleem en ik krijg het niet opgelost.

Mijn index.html op het moment:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Joopies place - www.joopiesplace.8s.nl</title>
<link rel="shortcut icon" href="layout/jp.jpg" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="balklinks"></div>
<center>
<div id="menu">
<center>
    <p><a href="home.html" target="tekstvak">Home</a><br><br>
    <a href="afbeeldingen.html" target="tekstvak">Afbeeldingen</a><br><br>
    <a href="apparatuur.html" target="tekstvak">Apparatuur</a><br><br>
    <a href="auto's.html" target="tekstvak">Auto's</a><br><br>
    <a href="downloads.html" target="tekstvak">Downloads</a><br><br>
    <a href="http://186469.guestbooks.motigo.com" target="tekstvak">Gastenboek</a><br><br>
    <a href="geschiedenis.html" target="tekstvak">Geschiedenis</a><br><br>
    <a href="links.html" target="tekstvak">Links</a><br><br>
    <a href="contact.html" target="tekstvak">Contact</a><br><br>
    <!-- Begin Motigo Webstats code -->
    <!-- Title: Joopie`s place -->
    <!-- URL: http://77.160.86.211/ -->
    <script language="JavaScript" type="text/javascript" src="http://m1.webstats.motigo.com/m.js"></script>
    <script language="JavaScript" type="text/javascript">
    <!--
    motigo_webstats("AEKhFA/n0vTl3YgDJr_P_tmiPZEA", 0);
    // -->
    </script>
    <noscript>
    <a target="_blank" href="http://www.webstats.motigo.com/stats?AEKhFA/n0vTl3YgDJr_P_tmiPZEA"><img src="http://m1.webstats.motigo.com/n?id=AEKhFA/n0vTl3YgDJr_P_tmiPZEA" border="0" width="18" height="18"/></a>
    </noscript>
    <!-- End Motigo Webstats code -->
    </center>
</div>
</center>
<div id="tussenbalk"></div>
<div id="tekstvak"><iframe src="home.html" width="720" height="500" frameborder="0" name="tekstvak"></iframe></div>
<div id="balkrechts"></div>
<center>
<a href="disclaimer.html" target="tekstvak"><div id="footer">copyright &copy; johan hogervorst</div></a></div>
</center>
</body>
</html>

Of is het zo dat de iframe niet anders kan worden gebruikt?

[ Voor 0% gewijzigd door een moderator op 30-10-2007 19:30 . Reden: code=css veranderd naar code=html ]

Het leven is te kort om geduld te hebben!

dinsdag 30 oktober 2007 19:07

Acties:

0 Henk 'm!

fleppuhstein

Als je zoveel problemen hebt met de Frames, zoek daar een goede oplossing voor. Is php geen optie, hiermee kan je werken met zelf te ontwerpen blokken van code. Dus ipv een frame een blok ontwerpen.

dinsdag 30 oktober 2007 19:30

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

offtopic:
Vanwaar de vele <center> tags, en waarom gebruik je "code=css" in plaats van "code=html" bij het posten van code? Verder heb je in de buurt van je footer wat nesting-problemen (een <div> hoort bijv. niet in een anchor omdat dit een blocklevel element in een inline element is).

[ Voor 39% gewijzigd door RobIII op 30-10-2007 19:33 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 31 oktober 2007 12:10

Acties:

0 Henk 'm!

imp4ct

RobIII schreef op dinsdag 30 oktober 2007 @ 19:30:

offtopic:
Vanwaar de vele <center> tags, en waarom gebruik je "code=css" in plaats van "code=html" bij het posten van code? Verder heb je in de buurt van je footer wat nesting-problemen (een <div> hoort bijv. niet in een anchor omdat dit een blocklevel element in een inline element is).

't Vreselijk hieraan is dat code wel "werkt" maar van structuur totaal verkeerd is. 'k Weet niet van welke tutorials die info is gehaald, maar dit ruist echt tegen alle regels in, maar goed, 'k ga hier geen hele uiteenzetting doen.

Maar deze site maken met wat div's en en li tags is very simple... en echt.. je zou je moeten toeleggen op CSS want er zijn veel meer mogelijkheden mee.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

vrijdag 2 november 2007 15:00

Acties:

0 Henk 'm!

Joopieboy

No smoke, no poke

Topicstarter

Even een kickje van mijn kant.
Ik geef jullie echt gelijk, ik ben begin deze week begonnen met tutorials te zoeken en te lezen om te begrijpen at ik verkeerd doe. Ik kwam zoveel fouten tegen dat ik eigenlijk opnieuwe ben begonnen met css te leren.
Maar wat ik nu aan het doen ben dat is echt heel leuk, het werkt beter en makkelijk en tot nu oe foutloos. En dat terwijl op de vorige manier ik echt zoveel problemen tegen kwam en tegen bleef komen.
En wat ook een waarheid is, is dat je met css zoveel dingen kan doen en instellen, echt ongelovelijk...

Het leven is te kort om geduld te hebben!