✔ [Hilfe]Fragen&Probleme

Giovanni · 2. März 2007

Hallo alle zusammen,

So ich hab ein paar Fragen bzw Probleme.

Ich hab zum ersten mal meine eigene Homepage gemacht,
selber Designet und gecodet.
Ich hab es erst mit nem WYSIWYG-Editor versucht, aber mir geviel es nicht so wirklich, der Editor ist NVU glaubt den kennt ihr bestimmt. Da hab ich dann auch CSS versucht mit diesem Editor, naja dann langsam hab ich css geplickt und um 3 uhr früh komplett kapiert =)
Also für Anfänger so wie ich, lernt man mit nem WYSIWYG-Editor richtig gut wenn man sich nach der Aktion den Quelcode anschaut.

So nun habe ich mit dem phase 5 editor meine Page komplett selbst geschrieben und hab jetzt einpaar Probleme bzw Fragen wie ich das machen könnte.
Ich Arbeite ohne Tabellen und Frames, sondern mit html und css (<div> Containern)
habe keine PHP kenntnisse bzw nur minimale mal reingeschnuppert in PHP mehr auch nicht.

1. Wie bekomme ich das alles Zentriert?
-Ich hab es versucht mit

HTML:

<center> 
oder 
<body align="center>

es klappt einfach nichts das ich das komplette Designe in die Mitte bekomme.

2. Content
2.1. Dann zu meinem Content, ich will es in einer bestimten höhe haben ok das ist kein problem mit css da mach ich nur

Code:

height: 400px

zb. , aber ich will es nicht auf dauer in dieser größe haben, sondern nur solang bis sich dann der Content füllt mit meinem Text und sich dann von selbst dehnt.
Gibts dafür ein extra Befehl?

2.2. Ich will auch im Content Texte verfassen, wie zb.: News, Neuerungen, Bilder mit Text, Formulare, Bilder Gallery, usw. was halt so rein soll.
2.2.1. Wie kann ich das machen, dass das sich der Inhalt, Links und Rechts im Content nicht am rand ist sondern weiter drinnen. Mit

Code:

margin: 25px;

klappt das nicht =( Schmeißt mein ganzes Designe durcheinander. Wie kann ich es noch machen?
2.2.2. Wie kann ich machen wenn ich in der Navi auf New's kliche, das sich der Inhalt im Content nur geladen wird und nicht die ganze Homepage?
2.2.3. So nun noch was zum Content und zwar, wie kann ich das machen wenn für mich zb. die News bei ca 10 News-Einträge überstreiten und dann einfach oben und unten ein Text-Link machen kann wo zur Seite 2 führt um ältere Beiträge zu Lesen. Wie ist das möglich genau?

3. Zur Navi, es sind lauter Bilder die einen Link haben,so sieht eine Navi menü bei mir aus

HTML:

<a class="home" href="#"><img src="bilder/home.jpg" border="0"></a><br>

So da ist meine Frage dazu, wie ich das hinbekomme, diesen Grafik-Link, bisschen Transparent zu machen? Damit sozusagen signalisiert werden soll das dieser Link noch nicht zur Verfügung steht?

Später werde ich ein Aufklapp-Navi-Menü machen aber das hat zeit erstmal so hinbekommen alles.

So das wären erstmal meine wichtigsten Fragen und Probleme die ich zuzeit habe, bei weiter Problemen oder Fragen die mir einfallen werde ich natürlich Posten um von euch Hilfe zu bekommen.

Ich freue mich jetzt schon auf eure Posts, vielen dank für eure Hilfe im vorraus.
Mit freundlichen Grüßen
Sky2High

Maik · 2. März 2007

Hi!

@1. Binde das Layout in ein übergeordnetes DIV ein, und wende darauf folgende Regel an:

Code:

div#wrapper {
width: 700px; /* Elementbreite von mir frei gewählt */
margin: 0 auto;
}

@2.1 Eine Mindesthöhe lässt sich mit dem folgenden Stylesheet einrichten:

Code:

div#content {
min-height: 400px;
height: auto !important;
height: 400px;
}

@2.2.1 Der Ansatz mit der margin-Eigenschaft war schon richtig, nur wird vermutlich der Wert zu hoch gewählt sein. Von daher solltest du hier den dazugehörigen Quellcode (HTML + CSS) posten, damit man da mal einen Blick drauf werfen kann.

@2.2.2 Hier steht dir entweder ein iFrame oder PHP zur Verfügung - siehe hierzu z.B. das PHP-Tutorial Navigation über die URL "index.php?section=index".

@2.2.3 Auch hier steht dir PHP zur Verfügung - schau dich hierfür einfach mal im PHP-Forum um.

Giovanni · 2. März 2007

Also Punkt eins klappt leider nicht so ganz =(

Nun ja Punkt zwei klappt perfekt! hab sogar den rest weg gelassen

bzw weiß ich nicht was diese punkte für nutzen haben

Code:

height: auto !important;

@2.2.1 hab ich mehrere px angaben gemacht aber das komplette layout verstellt sich immer.

@2.2.2 iFrames möchte ich lieber nicht, da wende ich mich schon eher dem PHP zu, da ich später falls nötig noch ein Login bereich machen möchte, ein Forum, Gästebuch und Umfrage noch hinzufügen möchte da lohnt sich php mehr.

So nun hier mal der
HTML CODE

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sky-</title>
<meta name="author" content="Sky">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <br>
  <div class="header"></div>
  <div class="login"></div>
  <div class="navi">
   <a class="HOME" href="#"><img src="bilder/home.jpg" border="0"></a><br>
   <a class="NEWS" href="#"><img src="bilder/news.jpg" border="0"></a><br>
   <a class="RAP" href="#"><img src="bilder/rap.jpg" border="0"></a><br>
   <div align="right">
   <a class="artist" href="#"><img src="bilder/artist.jpg" border="0"></a><br>
   <a class="media" href="#"><img src="bilder/media.jpg" border="0"></a><br>
   <a class="alben" href="#"><img src="bilder/alben.jpg" border="0"></a><br>
   </div>
   <a class="POESIE" href="#"><img src="bilder/poesie.jpg" border="0"></a><br>
   <div align="right">
   <a class="eigene" href="#"><img src="bilder/eigene.jpg" border="0"></a><br>
   <a class="freunde" href="#"><img src="bilder/freunde.jpg" border="0"></a><br>
   <a class="fremde" href="#"><img src="bilder/fremde.jpg" border="0"></a><br>
   </div>
   <a class="DESIGNE" href="#"><img src="bilder/designe.jpg" border="0"></a><br>
   <div align="right">
   <a class="wallpaper" href="#"><img src="bilder/wallpaper.jpg" border="0"></a><br>
   <a class="logo_banner" href="#"><img src="bilder/logo_banner.jpg" border="0"></a><br>
   <a class="avatar_signatur" href="#"><img src="bilder/avatar_signatur.jpg" border="0"></a><br>
   <a class="templates" href="#"><img src="bilder/template.jpg" border="0"></a><br>
   <a class="tutorial" href="#"><img src="bilder/tutorials.jpg" border="0"></a><br>
   <a class="service" href="#"><img src="bilder/service.jpg" border="0"></a><br>
   </div>
   <a class="GALLERY" href="#"><img src="bilder/gallery.jpg" border="0"></a><br>
   <div align="right">
   <a class="me" href="#"><img src="bilder/me.jpg" border="0"></a><br>
   <a class="freunde" href="#"><img src="bilder/freunde.jpg" border="0"></a><br>
   <a class="pics" href="#"><img src="bilder/pic.jpg" border="0"></a><br>
   </div>
   <a class="GAESTEBUCH" href="#"><img src="bilder/gästebuch.jpg" border="0"></a><br>
   <a class="UMFRAGE" href="#"><img src="bilder/umfrage.jpg" border="0"></a><br>
   <a class="KONTAKT" href="#"><img src="bilder/kontakt.jpg" border="0"></a><br>
   <a class="IMPRESSUM" href="#"><img src="bilder/impressum.jpg" border="0"></a>
   <div class="navi_ende"></div>
  </div>
  <div class="content_menu">
  <a class="menu1" href="#"><img src="bilder/menu_1.jpg" border="0"></a><a class="menu2" href="#"><img src="bilder/menu_2.jpg" border="0"></a><a class="menu3" href="#"><img src="bilder/menu_3.jpg" border="0"></a><a class="menu4" href="#"><img src="bilder/menu_4.jpg" border="0"></a>
  </div>
  <div class="content"><br><br><b>Diese Seite ist noch im Aufbau<br>Bitte haben Sie noch etwas gedult<br>Mit freundlichen Grüßen Sky-</b><br><br><br></div>
  <div class="content_ende"></div>
</body>
</html>

Hier der CSS Code

Code:

body {
background-color: #333333;
background-position: center;
width:741px;
}
.header {
background-image: url(bilder/header.jpg);
background-position: center;
width: 741px; height: 153px;
}
.login {
background-image: url(bilder/login.jpg);
background-position: center;
width: 741px; height: 31px;
}
.navi {
background-image: url(bilder/navi_bg.jpg);
float: left;
background-repeat: repeat-y;
width: 198px; /*height: 400px;*/
}
.navi_ende {
background-image: url(bilder/navi_ende.jpg);
/*background-position: center;*/
float: left;
width: 198px; height: 13px;
}
/*
.HOME {
background-image: url(bilder/home.jpg);
width: 198px; height: 31px;
}  */
.content {
background-image: url(bilder/content_bg.jpg);
background-position: center;
float: right;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
min-height: 346px;
width: 543px;/* height: 400px;*/
}
.content_menu {
background-image: url(bilder/content_bg.jpg);
background-position: center;
float: right;
width: 543px; height: 95px;
}   /*
.menu1 {
background-image:url(bilder/menu_01.jpg);
background-position: center;
width: 144px; height: 95px;
}
.menu2 {
background-image:url(bilder/menu_02.jpg);
width: 127px; height: 95px;
}
.menu3 {
background-image:url(bilder/menu_03.jpg);
width: 129px; height: 95px;
}
.menu4 {
background-image:url(bilder/menu_04.jpg);
width: 143px; height: 95px;
}  */
.content_ende {
background-image: url(bilder/content_ende.jpg);
float: right;
width: 543px; height: 202px
}

Hoffe es hilft weiter, ps hier noch die Homepagelink damit du sehen kannst das alles funktioniert eigendlich HOMEPAGE

andreasst · 2. März 2007

ad 2.2.2
Wenn ich das Problem richtig verstanden habe, möchtest du, dass nur der Inhalt eines div Containers geladen wird.
Das Schlagwort dazu wäre Ajax.
Da ich selbst noch nicht lang mit dieser Technologie arbeite hab ich angefangen mit einer PHP Klasse http://xajaxproject.org/.
Dadurch kannst du mit Javascript und PHP einfacher AJAX auf die Beine stellen. Natürlich gibt es noch jede Menge anderer Möglichkeiten AJAX zu realisieren.

Da ich dich jetzt nicht so mit dem Schlagwort abfertigen will, ein Teil der Navigationslösung auf meiner HP:

PHP:

include ("xajax_core/xajax.inc.php");

function getnavtohtml($key)
{	
$keys = explode("_",$key);
	$template="error.php";
	if ($keys[0]=='error')		$template='error.php';
	if ($keys[0]=='impress')	$template='impressum.php';
	if ($keys[0]=='foto')			$template='foto.php';
	if ($keys[0]=='info')			$template='info.php';
	if ($keys[0]=='projekt')	$template='projekt.php';
	if ($keys[0]=='themen')	$template='themen.php';
	ob_start();
  	if ($_SESSION['nav']['lng']=='en')require("templates_en/".$template);
		else require("templates/".$template);
		$_SESSION['nav']['cur']= $key;
		$html=ob_get_contents(); 
	ob_end_clean();
	return $html;
}

function navto($key)
{	$objResponse = new xajaxResponse();
	$objResponse->setCharEncoding("iso-8859-1");
	$html= getnavtohtml($key);
	//$objResponse->alert("Inhalt geladen");
	$objResponse->assign('content','innerHTML',$html);
	return $objResponse;
}
$xajax->registerFunction('navto');

Die Idee dabei ist, Links nur mit einem Schlüssel anzusteuern, und die Funktion ladet den Inhalt einer Datei und sendet diesen Asynchron an meine Index Site.

Hinweis: Die Funktion funktioniert nur mit XAJAX ind der Version 0.5. Sollte aber auch so ähnlich mit der Version 0.2.4 funktionieren.
Es fehlt die Implementierung von XAJAX, aber solltest du dich entscheiden eine solche Variante zu realisieren wirst du dich mit AJAX sowieso noch ein bisschen auseinandersetzen müssen.
So schaut dann ein Navigationslink von mir aus:

HTML:

<a href="#" onclick="xajax_navto('foto_alle');" title="">Alle</a>

In Aktion schaut das dann so aus:http://www.stephanides.eu

AJAX ist meines Wissens, die einzige Möglichkeit ohne Frame nur einen Teil der Site zu laden.

Maik · 2. März 2007

@1. Probier es mal auf diese Weise:

Code:

body {
background-color: #333333;
background-position: center;
}

div#wrapper {
width:741px;
margin:0 auto;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sky-</title>
<meta name="author" content="Sky">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div id="wrapper">
   <!-- Hier folgt der Bestand -->
  </div>
</body>
</html>

Giovanni · 2. März 2007

Spitze =)
Das Zentrieren hat nun geklappt und ich glaub weiß jetzt wo der fehler lag, und zwar in der css datei bei body {...} da hätte width: 741px; nicht rein dürfen.
Hab das nun raus und klappt so =)

So nun zum Ajax, ich will ja nichts sagen oder mich beklagen, aber ich kann noch nicht mal wirklich PHP geschweigend irgendwas in Java und ich soll dann AJAX noch mit rein nehmen

super^^
Naja trotzdem danke, aber esmüsste doch auch ohne ajax gehn.
Den Content bereich anderst zu laden.

So nun sind aber 2.2.1 und 2.2.2 und 2.2.3 und 3 noch offen
ok bei 2.2.2 und 2.2.3 ist aufjedenfall php erforderlich oder?
und ist es aufjedenfall möglich es hinzubekommen.

Naja bei punkt 3 hab ich bis jetzt noch keine hilfe bekommen,
hoffe mir kann da noch einer helfen, dann wäre es super =)

Danke schonmal für eure geleistete Hilfe und weiter hilfe =)

andreasst · 2. März 2007

ad 3
Mir ist nicht klar was du mit transparent meinst,
es wäre möglich die Links auszublenden, auch mit CSS
etwa display:none;
macht aber eigentlich nicht viel Sinn weil man auch gneausogut den Link raus nehmen könnte.

Ansonsten gibts die Möglichkeit dein Bild "transparent" oder SW zu machen mit einem Bildbearbeitungsprogramm.

Einen Filter im Browser gibt es nur für einige Versionen des IE, den ich aber noch nie verwendet habe.

Ein alternativer Text für die Bilder sehr anzuraten, falls jemand entweder die Bilder nicht anzeigen kann oder die Seite von Software gelesen wird. (Such-Bot, Lesesoftware für Sehbehinderte)

Maik · 2. März 2007

Für die Punkte 2.2.2 und 2.2.3 solltest du dich mal im PHP-Board umschauen und dort die Suchfunktion nutzen.

@2.2.1 schlage ich dir folgende CSS-Regel vor:

Code:

.content {
background-image: url(bilder/content_bg.jpg);
background-position: center;
float: right;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
width: 493px;
padding: 25px;
}

Punkt 3 liesse sich z.B. auf diese Weise realisieren:

Code:

a:link img, a:visited img {
filter: alpha(opacity=50); /* Für IE */
-moz-opacity: 0.5; /* Gecko-Browser */
opacity: 0.5; /* Opera 9+ */
}

a:hover img {
filter: alpha(opacity=100); /* Für IE */
-moz-opacity: 1; /* Gecko-Browser */
opacity: 1; /* Opera 9+ */
}

Giovanni · 2. März 2007

Ich bedanke mich Herzlich für eure Hilfe =)

2.2.1 hat wunderbar geklappt =) hab nur bissle die werte anpassen müssen.
und nun verstehe ich auch diesen befehl besser

So mit 2.2.2 und 2.2.3 werde ich jetzt im PHP-Bord rumsuchen

Danke nochmals für eure hilfe

Grüße
Giovanni

✔ [Hilfe]Fragen&Probleme

Giovanni

Mitglied

Maik

Giovanni

Mitglied

andreasst

Mitglied

Maik

Giovanni

Mitglied

andreasst

Mitglied

Maik

Giovanni

Mitglied

Neue Beiträge