Beiträge von wolf

wolf

Nein das geht nicht mach es so:

Angenommen dein Code sieht so aus:

HTML

<body>
<div>Der Teil von deiner Seite, die vor dem Menü ist..</div>
<div id="menu">
	<ul>
		<li class="topmenu">
			<a href="index.html">Home</a>
			<ul>

			</ul>
		</li>
		<li class="topmenu">
			<a href="">Verein</a>
			<ul>
			<li class="submenu"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
			<li class="submenu"><a href="sponsoren">Unsere Sponsoren</a></li>
			<li class="submenu"><a href="links.html">Links</a></li>
			<li class="submenu"><a href="vorstand.html">Vorstand</a></li>
			<li class="submenu"><a href="kalender.html">Kalender</a></li>
			<li class="submenu"><a href="termine.html">Termine</a></li>
			</ul>
		</li>
			<li class="topmenu">
			<a href="">Aktuelles</a>
			<ul>

			</ul>
		</li>

		<li class="topmenu">
			<a href="">Fotoalbum</a>
			<ul>
			<li class="submenu"><a href="fotos.html">Aktuelle Bilder</a></li>
			<li class="submenu"><a href="archiv.html">Archiv</a></li>
			</ul>
		</li>




		<li class="topmenu">
			<a href="">Kontakt</a>
			<ul>
			<li class="submenu"><a href="mail.html">E-Mail</a></li>
			<li class="submenu"><a href="feedback.html">Feedback</a></li>
			</ul>
		</li>







		<li class="topmenu">
			<a href="">Radsporthalle</a>
			<ul>
			<li class="submenu"><a href="feiern">Veranstaltungen</a></li>
			<li class="submenu"><a href="">Radsporthalle</a></li>
			</ul>
		</li>
	</ul>
</div>
<div>Der rest von deiner Seite</div>
</body>
</html>

Alles anzeigen

ersetzt du diesen durch:

HTML

<body>
<div>Der Teil von deiner Seite, die vor dem Menü ist..</div>
<?php
	include("nav.inc");
?>
<div>Der rest von deiner Seite</div>
</body>
</html>

Dann speicherst du die Datei unter dem Namen datei.php
und erstellst eine neue Datei,

die diesen Inhalt hat:

HTML

<div id="menu">
	<ul>
		<li class="topmenu">
			<a href="index.html">Home</a>
			<ul>

			</ul>
		</li>
		<li class="topmenu">
			<a href="">Verein</a>
			<ul>
			<li class="submenu"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
			<li class="submenu"><a href="sponsoren">Unsere Sponsoren</a></li>
			<li class="submenu"><a href="links.html">Links</a></li>
			<li class="submenu"><a href="vorstand.html">Vorstand</a></li>
			<li class="submenu"><a href="kalender.html">Kalender</a></li>
			<li class="submenu"><a href="termine.html">Termine</a></li>
			</ul>
		</li>
			<li class="topmenu">
			<a href="">Aktuelles</a>
			<ul>

			</ul>
		</li>

		<li class="topmenu">
			<a href="">Fotoalbum</a>
			<ul>
			<li class="submenu"><a href="fotos.html">Aktuelle Bilder</a></li>
			<li class="submenu"><a href="archiv.html">Archiv</a></li>
			</ul>
		</li>




		<li class="topmenu">
			<a href="">Kontakt</a>
			<ul>
			<li class="submenu"><a href="mail.html">E-Mail</a></li>
			<li class="submenu"><a href="feedback.html">Feedback</a></li>
			</ul>
		</li>







		<li class="topmenu">
			<a href="">Radsporthalle</a>
			<ul>
			<li class="submenu"><a href="feiern">Veranstaltungen</a></li>
			<li class="submenu"><a href="">Radsporthalle</a></li>
			</ul>
		</li>
	</ul>
</div>

Alles anzeigen

Diese speicherst du unter dem Namen nav.inc.

Mehr musst du nicht ändern

in deiner Datei von z.B. Vereinsgeschichte steht dann

HTML

<body>
<h1>Vereinsgeschichte</h1>
<?php
	include("nav.inc");
?>
<div>Der Rest von deiner Seite</div>
</body>
</html>

Und das in allen Dateien, das Menü musst du nur einmal ändern und es wird auf allen Seiten richtig angezeigt!

EDIT:

Sorry für die Verwirrung.. <header> ist nicht mit <head> zu verwechseln !!!!

<head> bleibt weiterhin der "unsichtbare" Teil der Seite.
<haeder> ist ein block Element genauso wie <div> bloß mit andrem Namen

wolf

Hallo, geh von den Frames weg!

Du erstellst dir einen Ordner Inc in dem du eine Datei ablegst die nav.inc heist.

In dieser steht ungefähr folgendes:

HTML

<nav>
	<ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei</a></li>
		<li><a href="#">drei</a></li>
		<li><a href="#">vier</a></li>
	</ul>
</nav>

Halt einfach dein Menü

Dann gehst du in deine index.html (bzw jede Seite die du brauchst (wo die Navi eingebunden werden soll).
und benennst diese in index.php um (oder halt whatever Hauptsache .php).

In der Datei steht dann

HTML

<!-- ... -->
</head>
<body>
	<header><!-- html5 Kopfbereich (ich nehme an das deine Navigation dort sitzt ;D )--> 
		<?php
			include("Inc/nav.inc");
		?>
	</header>
	<section>
		<!-- weiter im Code ... -->

wichtig ist das

PHP

<?php//php Öffnungstag
	include("Inc/nav.inc");//Die Datei wird geladen und an dieser stelle in das Dokument platziert (Pfad beachten!)
?><!-- php schließen !!!-->

Wenn du dir dann den Quelltext im Browser anschaust sollte der so aussehen:

HTML

<!-- ... -->
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">eins</a></li>
				<li><a href="#">zwei</a></li>
				<li><a href="#">drei</a></li>
				<li><a href="#">vier</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<!-- weiter im Code ... -->

Alles anzeigen

Ich hoffe mal du verstehst den Vorgang

Ungetestet, aber ich glaube ich hab es richtig gesagt, sonnst verbessert mich

wolf

wolf

Also wenn du schon sooo dringen Hilfe brauchst, dann mach es uns doch einfacher und setze deinen Code in die dazu gehörigen boxen, die Buttons dafür sind über dem Eingabefeld zu finden.

HTML

CSS

Außerdem daf man auch um Sauberen, eingerückten Code bitten

EDIT: der Code sollte ungefähr so aussehen:

HTML

<!doctype html>
<html>
<head>
	<style type="text/css">
		#Bild {
			position:relative;
			top:50%;
			left:50%;
			margin-top:0px;
			margin-left:-512px;
			width:1023px;
			height:799px;
		}
		#box1 {
			font-family: Arial;
			font-size: 20px;
			width: 150px;
			height: 60px;
			background-color: none;
			position: absolute;
			top: 310px;
			left: 421px;
		}
		body{
			background-image:url(hintergrund.jpg);
			background-repeat:repeat-x;
			margin:top left;
			background-color:#808080;
			color: #000;
		}
	</style>
</head>
<body>
	<div id="Bild">
		<img src="Unternehmen.jpg" alt="Unternehmen_Reimer" border="0" position="middle" usemap="#unternehmen" /></p>
		<map id="unternehmen" name="unternehmen">
			<area shape="rect" coords="70, 40, 230, 200" href="index.html" />
			<area shape="rect" coords="310, 35, 360, 45" href="index.html" />
			<area shape="rect" coords="450, 35, 520, 45" href="cnc.html" />
			<area shape="rect" coords="580, 35, 680, 45" href="produkt.html" />
			<area shape="rect" coords="830, 35, 960, 45" href="kontakt.html" />
		</map>




		<div id="box1">
		Unser Unternehmen wurde im Jahr 2001 gegründet. Zunächst wurde die Produktion mit zwei Maschinen aufgenommen. Unsere Bestrebungen
		nach Qualität und Kundenzufriedenheit zeigten<br>
		</div>
	</div>
</body>

Alles anzeigen

Dein width="" height="" wird als Element Style bevorzugt, d.h. Dein bild ist opx breit und 0px hoch, was passiert kannst du dir vorstellen..

HTML

<img src="Unternehmen.jpg" alt="Unternehmen_Reimer" border="0" width="" height="" position="middle" usemap="#unternehmen" />

wolf

Zu Typo3, ich habe das schon hinter mir und würde es nicht weiterempfehlen für kleine Projekte, große Seite, super Sache aber für dich wäre wahrscheinlich cms2day o.ä. besser.

Aber in typo3 bist du genau so wenig wie in anderen CMS's an ein 3 Spaltenlayout gebunden

wolf

Hi, ich habe mal ein bischen drübergearbeitet..
Fertige Seite
Der Code

hier der code:

HTML

<body>
<!--<div id="wrapper-main">-->
	<section>
		<header id="headbereich">
			<div id="logo"></div>
			<div class="left header_top" id="bg_left"></div>
			<div class="left header_top" id="slider"></div>
			<div class="left header_top" id="bg_right"></div>
			<div class="stop"></div>
		</header>
		<!--<div id="wrapper-content">-->
		<nav id="menu_left" class="left">
			<strong>Hauptmen&uuml;</strong>
			<ul>
				<a href="#" title="Link1"><li>Link1</li></a>
				<a href="#" title="Link2"><li>Link2</li></a>
				<a href="#" title="Link3"><li>Link3</li></a>
				<a href="#" title="Link4"><li>Link4</li></a>
				<a href="#" title="Link5"><li>Link5</li></a>
				<a href="#" title="Link6"><li>Link6</li></a>
				<a href="#" title="Link7"><li>Link7</li></a>
			</ul>
		</nav>	
		<article class="left">
			<h1>Textfeld</h1>
			<h2>Aktikeltext</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
				montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
				aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
				Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
				ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
				Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
				neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis
				faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat,
				leo eget bibendum sodales, augue velit cursus nunc,
			 </p>
		</article>
		<nav id="menu_right" class="left">
			<strong>Shopmen&uuml;</strong>
			<ul>
				<a href="#" title="Link8"><li>Link8</li></a>
				<a href="#" title="Link9"><li>Link9</li></a>
				<a href="#" title="Link10"><li>Link10</li></a>
				<a href="#" title="Link11"><li>Link11</li></a>
				<a href="#" title="Link12"><li>Link12</li></a>
				<a href="#" title="Link13"><li>Link13</li></a>
				<a href="#" title="Link14"><li>Link14</li></a>
			</ul>
		</nav>
		<div class="stop"></div>
		<!--</div>-->
		<footer>footer</footer>
	</section>
<!--</div>-->
</body>

Alles anzeigen

CSS

/** Allg. Style **/
*{
	margin: 0px;
	padding: 0px;
}
html, body{
	background: #000;
}




body{
	font-family: 'PT Serif Caption', serif;
	font-size: 12px;
	color: #FFFFFF;
}
.stop{/*klasse zum stoppen von floats*/
	clear: both;
}
.left{
	float: left;
}
/** Text-Style **/
h1 {
	font-size: 24px;
	font-weight: 400;
}
h2 {
	font-size: 18px;
	font-weight: 400italic;
}
p{
	margin-top: 20px;
	width: 580px;
}
/** Style */
section{
	width: 1050px;
	margin: auto;
	margin-top: 20px;
}
#logo{
	height: 117px;
	background-color: #ccc;
	background-image: url(../images/logo.jpg);
}
.header_top{
	height: 248px;
}
#bg_left{
	width: 220px;
	background-color: #363636;
	background-image: url(../images/bg_2.jpg);
}
#slider{
	width: 610px;
	background-color: #490000;
	background-image: url(../images/platzhalter.jpg);
}
#bg_right{
	width: 220px;
	background-color: #363636;
	background-image: url(../images/bg_1.jpg);
}
nav{
	padding-top: 5px;
	width: 220px;
	background-color: #888888;
	text-align: center;
}
nav a{
	text-decoration: none;
}
ul{
	list-style-type: none;
	margin-top: 5px;
}
ul li{
	background-color: #555555;
	border-bottom: 1px solid #888888;
	padding-top: 3px;
	padding-bottom: 3px;
}
article{
	width: 610px;
	padding: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
}
footer{
	text-align: center;
	background-color: rgba(255,255,255,0.5);
	border-radius: 5px;
	height: 20px;
	line-height: 20px;
	margin-top: 20px;
	color: #000000;
}

Alles anzeigen

Ich hoffe es hilft dir

EDIT: ..noch ein Tip, ich würde von den festen Breiten mich loslösen ..! nicht jeder hat ein 1050px breites Display und horizontal scrollen ist nervig!

CSS

section{
   width: 90%;
   min-width: 700px;
   max-width: 2000px;
}

wolf

Also Leute wer sich zum Thema Verschlüsselung informieren will .... http://www.kryptochef.net/
Ist zwar oftopic aber ja, das hat mir grad jemand gezeigt.

wolf

Das habe ich auch gerade bemerkt

wolf

Wenn er schon nutzen will, wieso nicht
Du solltest pennen gehen

wolf

Dann sollten wir mal Skypen

wolf

Ich muss dir Recht geben was deinen Ausdruck angeht
Jap hab mich noch nicht zu viel mit Jquery beschäftigt -aber immer schön zu seiner Meinung stehen!

wolf

Mir ist durchaus bewusst das es verschiedene Templates sind, allerdings haben sie auch gleiche Funktionen die sich auch überschneiden, was wiederum zu Fehlern führen kann
Deshalb meine Beharrlichkeit

wolf

An deiner Stelle würde ich mir jetzt version

jquery-2.0.0.js UND jquery.mobile-2.0.0.min.js

holen ODER

jquery-1.4.1.js UND jquery.mobile-1.4.1.min.js

Aber nicht die Versionen mischen

wolf

Gut zu wissen, man lernt doch immer noch dazu =)

wolf

Da wäre ich dabei, habe auch Codeschnipsel hier rumliegen

wolf

Zitat von Cloud Strife

<script src="...jquerry/jquery-2.0.0.js"></script> <script src="...jquerry/jquery.mobile-1.4.1.min.js"></script>

Du lädst doch verschiedene Versionen ?!
1.4.1 UND 2.0.0 ...

wolf

Naja prüf doch mal ob es überhaupt geladen wird...

PHP

<?php
echo "<script type=\"text/javascript\">
if(typeof jQuery == \"function\")
  alert(\"jQuery geladen\");
else
  alert(\"jQuery nicht geladen\");
</script>";
?>

EDIT: Außerdem halte ich es nicht für Sinnvoll mit Verschiedenen Versionen zu arbeiten, entscheide dich für eine, da liegt wahrscheinlich schon einer der Fehler?

wolf

Naja klar sollte man die raus tun, ABER wenn du genauer hinsehen würdest würdest du sehen, dass die meisten Fehler damit zusammenhängen das JS mitbenutzt wird bzw. klassen usw. dafür definiert sind und dass manche Fehler keine Auswirkung haben.

Vor allem aber geht es hier um ein Codetechnisches Problem, was nicht mit irgendwelchen css Fehlern zusammenhängt.
Daher ist es die Falsche Art einfach nur validieren drunter zu schreiben, dann kann man sich das auch gleich spaaren!

Es geht hier meiner Meinung nach darum den Leuten AKTIV zu helfen und nicht ihnen nur immer zu sagen das sie Validieren sollen und in diesem Fall den Fehler dabei nicht mal finden können.

wolf

Verdammt, man könnte so viele Beiträge von dir bookmarken aber dann hätte ich alleine einen Ordner voll mit deinen Beiträgen
Ist ne supi Sache

wolf

Zitat von DerUser

und auch hier kann ich nur sagen, VALIDIEREN, VALIDIEREN, und VALIDIEREN

Ehrlich gesagt was bringt bei diesem Problem VALIDIEREN ?!?!?!??!?!?!?!?!?!?!??!?! FTW.
Die Seite an sich, natürlich aber bitte überlege dir mal ein bisschen genauer unter was du alles validieren drunter schreibst!

-was ich noch vergessen habe ..

HTML

<div id="was">
<h2>hier muss natürlich die Überschrift mit rein.. ;) </h2>
   hier dein Artikel zu "Was"
</div>

Beiträge von wolf

Allgemeine Steuerung für die Webseite

Allgemeine Steuerung für die Webseite

Wtf???

div-Tags werden vom IE 8 & 9 nicht erkannt

CMS für einfache Website mit Wordpress?

Ich seh den Code vor lauter Tags nicht mehr

Loginpasswort richtig hashen - password_hash() & password_verify()

jQuery Mobile offline benutzen?

jQuery Mobile offline benutzen?

Ich glaub, ich sollte ins Bett

jQuery Mobile offline benutzen?

jQuery Mobile offline benutzen?

jQuery Mobile offline benutzen?

Erste Zeile immer verdeckt beim Navigieren auf eine Twitter Bootstrap - Seite

Countdown mit fortschritsbalken

jQuery Mobile offline benutzen?

jQuery Mobile offline benutzen?

Erste Zeile immer verdeckt beim Navigieren auf eine Twitter Bootstrap - Seite

Countdown mit fortschritsbalken

Erste Zeile immer verdeckt beim Navigieren auf eine Twitter Bootstrap - Seite