Menu na div'ach -problem

przez **ZaLko** 10 Kwi 2009, o 10:39

Witam wszystkich , jako że div' y to przyszłość wg webmasterów postanowiłem sam zrobić stronkę opartą o ten "język " , niestety dopiero się uczę i mam do was pytanie , poniżej wklejam kod html i css ,a pytanie dotyczy : jak ładować zawartość menu do części strony poświęconej treści ( content )

Oto moje kody :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Łukasz Zaleśny </title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body bgcolor="#434343">
<body><br>


<div id="wrapper">


<div id="header">

This is the Header

</div>



<div id="leftcolumn">

<div class="menu"><center>

<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td align="center"><a href="z.html" onfocus="this.blur()"> Link 5</a></td>
</tr>
<tr>
<td align="left"><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
<tr>
<td align="left"><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
<tr>
<td align="left"><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
<tr>
<td align="left"><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
</table>
</div>

</div>



<div id="content">

<a href="#">Download this CSS Layout</a>

</div>



<div id="rightcolumn">

</DIV>



<div id="footer">

This is the Footer

</div>


</div>


</body>
</html>

oraz style :

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}

mam nadzieje że nie zaśmieciłem forum

proszę o pomoc.
Pozdro

przez **Paweł Landzberg** 10 Kwi 2009, o 15:21

Nie bardzo rozumiem pytanie. Chodzi o to zrobić, żeby środkowa część (content) była zmienna, a lewy blok z menu był stały? Żeby po wybraniu jakiegoś punktu menu zmieniała się tylko treść (środkowy blok)?

Możesz trochę jaśniej wytłumaczyć co chciałbyś osiągnąć?

przez **Marcin Godlewski** 10 Kwi 2009, o 16:30

Może zamiast poszczególnie wszystko tłumaczyć zaproponuję CI zajrzenie na stronę: http://www.dynamicdrive.com/style/layouts/ - z pewnością znajdziesz tam to co Ciebie zainteresuje

przez **ZaLko** 11 Kwi 2009, o 09:44

Już odpowiadam , być może niezbyt jasno się wyraziłem , macie rację

Chodzi mi o to :
aby po kliknięciu danego działu menu np nie wiem Galeria , jego zawartość tzn tej Galerii ładowała - pokazywała się w polu przeznaczonym na treść. Zrobiłem taki prosty schemacik żeby lepiej zobrazować o co mi chodzi. Będę wdzięczny za pomoc.
Oczywiście strona na div'ach
Pozdrawiam

przez **Marcin Godlewski** 11 Kwi 2009, o 10:06

Kod: Zaznacz wszystko: <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title> <style type="text/css"> body{ margin:0; padding:0; line-height: 1.5em; } b{font-size: 110%;} em{color: red;} #maincontainer{ width: 840px; /*Width of main container*/ margin: 0 auto; /*Center container on page*/ } #topsection{ background: #EAEAEA; height: 90px; /*Height of top section*/ } #topsection h1{ margin: 0; padding-top: 15px; } #contentwrapper{ float: left; width: 100%; } #contentcolumn{ margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ } #leftcolumn{ float: left; width: 180px; /*Width of left column in pixel*/ margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/ background: #C8FC98; } #rightcolumn{ float: left; width: 190px; /*Width of right column*/ margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/ background: #FDE95E; } #footer{ clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; } #footer a{ color: #FFFF80; } .innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } </style> <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"] function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*3)]+" ") } </script> </head> <body> <div id="maincontainer"> <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div> </div> </div> <div id="leftcolumn"> <div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div> </div> <div id="rightcolumn"> <div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div> </div> <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div> </div> </body> </html>

przez **Paweł Landzberg** 11 Kwi 2009, o 11:17

Żeby uzyskać taki efekt to prawdopodobnie musiałbyś zrobić stronkę w ajaxie czy innym dhtml. A to nie wszystkie przeglądarki dobrze obsługują, albo użytkownicy mają wyłączone JavaScritpt.

Ewentualnie mógłbyś zrobić stronę w ramkach, to chyba by łatwiej coś było, ale jak już mówisz chcesz w divach. No i poza tym strony w ramkach źle się pozycjonuje.

Nie lepiej zrobić np. menu w osobnym pliku i potem załączyć w każdej stronie za pomocą php?

przez **Marcin Godlewski** 11 Kwi 2009, o 11:37

Myślę że to co powyżej wkleiłem możesz spokojnie przerobić tak aby menu Ci się "includowało" z php

sam w większości prostych stron tak robie

Masz łatwość późniejszej edycji.

przez **Daniel 'siewca' Nakoneczka** 26 Cze 2009, o 18:54

Tak dokładnie. Ja osobiście robiłem plik z szablonem i pozostałe elementy includowałem przy pomocy php. Pomocne przy tym jest przesyłanie parametrów w url metodą $_GET, daje to bardzo elastyczną, łatwą w rozbudowie stronkę.

Menu na div'ach -problem

Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Re: Menu na div'ach -problem

Kto jest na forum