[CSS Menu] menu alleen main vernieuwen - Softwareontwikkeling

maandag 12 maart 2007 13:37

Acties:

Topicstarter

hoi hoi,

Ik ben bezig met CCS weet er nog niet heel veel van..

ik heb een menu:

HTML:

    <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>

Zoals je ziet laat die voor elke link een nieuwe html pagina.

Ik wil eigenlijk dat die alleen de tekst in het "main" veranderd kan dat? zoja hoe?

maandag 12 maart 2007 13:47

Acties:

denyos

ja dat kan. Doormiddel van old school frames en anders doormiddel van javascript / ajax

Strava

maandag 12 maart 2007 13:48

Acties:

André

Analytics dude

Zou je wat meer informatie kunnen geven en je code voorzien van [code] blokken? Wat is bijvoorbeeld die "main"? Het is niet de bedoeling dat wij je code gaan fixen, maar dat je zelf tot een oplossing komt

maandag 12 maart 2007 13:49

Acties:

IntToStr

Dit kan wel, met frames (of andere ingewikkeldere methodes), maar dit wil je vast niet

Laat gewoon lekker die hele pagina reloaden. Dat doen bijna alle websites. Het is makkelijker en zoveel extra tijd/bandbreedte kost het nou allemaal ook weer niet.

Edit: zucht, moet echt sneller typen...
En nu ik onderstaande reactie zie denk ik dat ik de vraag ook verkeerd begreep

Beetje meer info idd!

[ Voor 25% gewijzigd door IntToStr op 12-03-2007 13:53 ]

maandag 12 maart 2007 13:51

Acties:

Snake

Los Angeles, CA, USA

Heb je PHP ondersteuning oid?

Dan plaats je al alles in aparte files, en je home.html bestaat dan uit:

PHP:

 
<?php
require('header.php'); 
?> 
Hier komt je pagina in HTML
<?php
require('footer.php');
?>

Going for adventure, lots of sun and a convertible! | GMT-8

maandag 12 maart 2007 14:03

Acties:

hugohugohugo

Topicstarter

sorry

hierbij wat meer info:

dit is me index:

code:

<!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=iso-8859-1" />
<title>IT-Berheer op Newman College Breda</title>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>

<body>
<div id="page">

    <h1><a href="/"></a></h1>
    
    <h4>IT-Beheer van Newman College</h4>
    
    <div class="clear"></div>
    
    <div id="sidebar">
    <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    
    <div id="main_column">
        <h3>Home</h3>
        <p> Welkom </p>
        </div>

        <div id="footer">
        <p>Copyright © 2006-2007</p>
        </div>
    
    
     <p>

  
    
</div>
</body>
</html>

dit me css:

code:

body {
    margin: 30px 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    background: url(images/body_bg.png) center top no-repeat;
}

p {
    font-size: 0.9em;
    line-height: 1.5em;
}

a {
    color: #59708C;
    text-decoration: underline;
}
a:visited, a:hover {
    text-decoration: none;
}

ul, ol {font-size: 0.9em}
ul a, ol a {text-decoration: none}
ul a:hover, ol a:hover {color: #333}

#page {
    width: 619px;
    margin: 0 auto;
    padding: 30px 40px 10px 40px;
    border: 1px solid #eee;
}

#sidebar {
    width: 105px;
    height: 400px;
    padding: 0 20px 0 0;
    float: left;
}

#main_column {
    width: 465px;
    padding: 0 0 0 20px;
    float: left;
}

#footer {
    clear: left;
}

.clear {clear: both}


h1 {
    display: block; 
    width: 241px; height: 75px;
    background: url(images/logo.jpg) no-repeat;
    margin: 10px 0; padding: 0;
    
    float: left;
}
    h1 a {
        display: block; 
        width: 241px; height: 75px;
        overflow: hidden;
    }


h2 {
    font-size: 1.7em;
    color: #666;
    margin: 0; padding: 0;
}
    h2 a {color: #666; text-decoration: none}
    h2 a:hover {color: #333}

h3 {
    font-size: 1.1em;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #59708C;
    border-bottom: 1px solid #59708C;
}

h4 {
    float: right;
    font-size: 1.1em;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    
}



ul#nav {
    margin: 20px 10px 0 0; padding: 0;
    list-style-type: none;
    float: left;
    font-weight: bold;
    font-size: 0.8em;
}
    
    ul#nav li a:hover {text-decoration: underline}
    

#footer p {
    font-size: 0.75em;
    color: #666;
    margin: 0; padding: 0;
}

zoals je ziet komt al mijn tekst in :"main_column "
Mijn bedoeling is als ik bv op About klik dat alleen de main_column veranderd.(alleen de tekst daarin ipv heel de pagina)

Hopelijk ben ik zo een beetje duidelijker

maandag 12 maart 2007 14:07

Acties:

djluc

Waarom wil je dat graag? Het is een techniek die tegenwoordig vrijwel niet meer wordt toegepast. Het werd vroeger gedaan met frames. Tegenwoordig zie je dit soort dingen nog weleens maar dan met een stukje Javascript wat XML van de server haalt. Voor normale pagina's is het echter niet aan te raden. Hierover zijn meerdere discussies in dit forum over geweest trouwens, misschien kan je die nog terugvinden!

maandag 12 maart 2007 14:13

Acties:

hugohugohugo

Topicstarter

@djluc

Dank je wel voor je reactie. Waarom ik dit zo graag wilde was omdat ik dat eerst ook altijd deed dus ben er van uit gegaan dat dat met css ook nog steeds de bedoeling was.
Maar dat blijkt dus niet zo te zijn.

maandag 12 maart 2007 14:30

Acties:

IntToStr

Om het een beetje onderhoudbaar te houden kun je het beste iets als php/asp gebruiken. Dan hoef je niet op elke pagina dezelfde html aan te passen als je iets in het menu wilt wijzigen of zo.

Een paar posts hierboven staat heel kort een voorbeeld. Zo "lijkt" het uiteindelijk nog alsof je alleen de content wijzigt. Eigenlijk plak je gewoon een lap html ervoor en een lap erna en laad je de hele nieuwe pagina.

Hier is verder meer dan genoeg info over te vinden lijkt me zo

maandag 12 maart 2007 14:31

Acties:

Joolee

hugohugohugo schreef op maandag 12 maart 2007 @ 14:13:
@djluc

Dank je wel voor je reactie. Waarom ik dit zo graag wilde was omdat ik dat eerst ook altijd deed dus ben er van uit gegaan dat dat met css ook nog steeds de bedoeling was.
Maar dat blijkt dus niet zo te zijn.

De reden waarom het niet aan te raden is om te doen is de gebruiksvriendelijkheid. Maak nu maar eens een bookmark van dit topic en je zult zien dat je op deze pagina weer terecht komt. Als got met frames/ajax zou werken dan zou je op de index pagina terechtkomen. De URI veranderd namelijk nooit wanneer je dan op een linkje zou klikken.

maandag 12 maart 2007 14:37

Acties:

BtM909

Watch out Guys...

Joolee schreef op maandag 12 maart 2007 @ 14:31:
[...]
De reden waarom het niet aan te raden is om te doen is de gebruiksvriendelijkheid. Maak nu maar eens een bookmark van dit topic en je zult zien dat je op deze pagina weer terecht komt. Als got met frames/ajax zou werken dan zou je op de index pagina terechtkomen. De URI veranderd namelijk nooit wanneer je dan op een linkje zou klikken.

Dat hoeft niet

Er zijn genoeg methoden om Frames, maar voornamelijk AJAX, accessible te maken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.