navi subnavi

jhaustein

hallo gemeinschaft

habe ein für mich riesen prob und weiss nicht, wie ich es lösen kann

habe euch mal ein bildchen angehängt, so wie es aussehen soll

im kopf ein bild, welches eigentlich immer stehen bleiben soll unabhängig davon, was man mit der navi macht

habe dann darunter eine haupt navi - hier sollte immer der menüpunkt akiv sein, der gerade angeklickt wurde - wenn ich dann auf einen hauptpunkt klicke, dann geht links weiter unten die subnavi (ist abhängig vom hauptnavipunkt) auf

weiss nur nicht, wie ich es machen soll

synaptic

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" xml:lang="en" lang="en">


<html>
<head>
    <title>page-titel</title>

</head>


<body>
<div id="header">header</div>
<div id="wrapper">
<div id="navi">navi</div>
<div id="subnavi"></div>
<div id="content">inhalt</div>
<div id="footer">footer</div>
</div>




</body>
</html>

Alles anzeigen

das is dat grundgerüst.. die positionierung machste dann mit css!
wie dat geht?
http://www.ohne-css.gehts-gar.net
und
http://www.css4you.de

jhaustein

wie würdest du es denn machen, wenn ich die hauptnavi punkte habe
home___news___leistung - die sollen horizontal stehen

wenn ich dann auf leistung klicke, dann soll links weiter unten kommen

tennis
-training
-bälle

fussball
-training
-bälle

synaptic

also du brauchst für jede seite deiner homepage dieses grundgerüst, jedoch ändert sich dann der inhalt...
wie gesagt.. die positionierung- also das gesamte layout- kommt über ein stylesheet, zu empfhelen ist ein externes stylesheet.

wie schätzt du deine erfahrungen in bezug zu html und css ein?

jhaustein

wie würdest du es denn machen, dass das bild im kopf der seite immer stehen bleibt

synaptic

in die css-file folgendes schreiben:

#header{
background: url(pfadzumbild/bild.jpg);
}

jhaustein

kannst du mir vielleicht ein kleines bsp bauen mit einem header einem navibereich einer subnavi und einem inhalt - weiss nicht, wie ich es machen soll

synaptic

also du kannst dir ja mal die seite mit den javascript-basics anschauen, da habe ich die hauptnavi links, nen content für den rest der page, nen ständig gleich bleibenden header und bei manchen sachen ne subnavi mit nem jump-to-link.

das externe stylesheet findest du hier:
http://home.arcor.de/synaptic/JS_basics/style.css

und du hast meine frage nach deinem kenntnisstand noch net beantwortet

jhaustein

wo minst du das denn mit dem bsp - habe ich nicht gefunden

jhaustein

wie würdest du e denn machen, wenn ich bei der subnavi ein menü haben möchte in flash

kenntnis geht so - basteln - brauche häufig ein bsp und kann dann weiter machen

synaptic

also der quelltext der seite ist frei einsehbar und das stylesheet fürs layout habe ich hier verlinkt!

aber scheinbar hat dich das nicht weitergebracht....
aaaalso hab ich jetzt das beispiel von oben (den quelltext) jetzt mal um einen internen style erweitert!

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" xml:lang="en" lang="en">


<html>
<head>
    <title>page-titel</title>

<style type="text/css">
<!--
  div{
  border:1px solid black;
  }


  #header{
  height:100px;
  width:850px;
  margin:0 auto;
  background: #C0C0C0;
  }

  #wrapper{
  width:850px;
  margin:0 auto;

  }

  #navi{
  width:848px;
  height:50px;
  margin:10px auto;
  background: #AAD4FF;  
  }

  #subnavi{
  width:170px;
  float:left;
  margin-right:16px;
  background: #AAD400;
  }

  #content{
  width:660px;
  margin: 0 0 0 20px;
  background: #ffff00;
  }

  #footer{
  width:848px;
  margin-top:15px;
  background: #00D4FF;    
  }
-->
</style>
</head>


<body>
<div id="header">header</div>
<div id="wrapper">
<div id="navi">navi</div>
<div id="subnavi">subnavi</div>
<div id="content">inhalt</div>
<div id="footer">footer</div>
</div>




</body>
</html>

Alles anzeigen

und weil du mein zweites fragen nach deinen skills nicht beantwortet hast werde ich mich ab jetzt zu deinem thema zurückhalten, denn hilfe kann ich nur beiten, wenn auch ein gewisser wissensstand bekannt ist und wenn ich sehe, das auch eigeninitiative vorhanden ist!
hier kommt es mir mehr so vor, als bräuchtest du jemanden der dir deine homepage schreibt und das dann eben kostenlos!
von dir kam nicht ein bisserl code oder eben ein anzeichen für wahres interesse am lernen!

im style-bereich in diesem beispiel habe ich hintergrundfarben genommen, die dir zeigen, wie die bereiche aussehen!

ganz am anfang steht

Code

div{border: 1px solid black;}

das sorgt dafür, dass die bereiche noch zusätzlich umrandet sind und nen rahmen haben.
ich habe feste breiten genutzt die für webseiten ab 1024px aufwärts gut sind!
in der höhe ist das layout flexibel!

ohne ein entgegenkommen von dir werde ich ab jetzt nichts mehr schreiben!

jhaustein

erstmal vielen dank für deine hilfe - mit meinem kenntnisstand habe ich dir doch geschrieben - kannst du mir bitte nocheinmal helfen mit dem einbau einer javascriptsubmenüs - wollte im submenübereich ein menü einbauen, wlches sich aufblättert

synaptic

also des fand ich net ausreichend denn da ist wieder das "mach mir mal was ich bau dann weiter"... nen beispiel hätteste bei der anderen site schon gehabt!

auf javascript solltest du bei nem menü verzichten, schau doir des mal hier an:
http://www.cssplay.co.uk/menus/slide_definition.html

jhaustein

verstehe nicht, wie ich es machen soll, dass wenn ich auf einem auptmenüpunkt klicke, dass dann das submenü aufgeht

jhaustein

wenn das mein code ist für die index seite

PHP

<!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>Der Sinn des Lebens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="header">Das ist der Header der soll immer dort bleiben und nicht neu geladen werden, da hier ein grosses bild reinkommt</div>
        <div id="left" align="center">Nav</div>
        <div id="main" align="center">Hauptbereich mit eventuell viel Text</div>
    </div>
</body>
</html>

Alles anzeigen

und das die css

PHP

html, body, #container {
height:100%;
margin: 0;
padding: 0;
background-color:#F1FCE0;
font-family:"Comic Sans MS";
font-size:14px;
}
#container {
padding:20px;
width:auto !important;
width: 100%;
min-height:100%;
height:auto !important;
height:100%;
}
#header {
background-color:#FFFFFF;
border:1px solid #43D364;
width:auto !important;
width: 100%;
height:100px !important;
height:98px;
}
#left {
float:left;
font-size:16px;
margin-top:20px;
color: #43D364;
background-color:#FFFFFF;
width:100px !important;
width:98px;
height: auto !important;
height: 100%;
border: 1px solid #43D364;
}
#main {
margin-top:20px;
background-color:#FFFFFF;
border: 1px solid #43D364;
text-align: left;
padding:30px;
margin-left: 120px;
width: auto !important;
width: 100%;
height: auto !important;
height: 100%;
}

Alles anzeigen

wie bekomme ich es hin, dass ich aus dem navi bereich dort menüpunkte reinbekomme, die nur den contentbereich neu laden - akso mit neuem content belegen und nicht den header neu laden

navi subnavi

Tags

Benutzer online in diesem Thema