# Css Anfängerfragen



## xkoy79 (5. Dezember 2007)

Servus an alle,

da ich mich mit Css auseinandersetzen will, brauch ich eure Hilfe !

Also ich verstehs noch nit ganz !

Habe gelesen das man mit den Verschachtelten Tabellen nicht mehr viel machen sollte.

Kurz gesagt soll man Css Tabellen nehmen, so nun habe ich vers. Seiten gesehen wo aber trotzdem mit TD Tabellen gearbeitet wird, und mit DIV.

Wo ist da nun CSS 

Brauche nämlich für mein Design ein Grundgerüst, d.h. Oben ein header, darunter 3 Felder, und darunter den Bottom !!
Die 3 Felder: Links nur für den 2px Rand mit Schatten , Mitte der Inhalt, Rechts wieder der 2px Rand !!

So, soll ich nun doch wieder Tabellen ausm Html nehmen ? Oder versth ich da was nicht 

Hier mal das Design ums zu verstehen !

http://www.kitzbühler-musig.at/pre2.jpg

Vielleicht kann mich jemand aufklären !

Danke
dani


----------



## Layna (5. Dezember 2007)

Hallo .
Also, zum anfang:
HTML ist der inhalt deines Dokumentes.
CSS bestimmt das Design des selbigen.
Die Idee ist also dass du ein div hast welches deinen Text enthält... und die CSS-Anweisungen positionieren es, geben ihm aussehen etc.
Erste überlegung: welche Bereiche hat meine Seite?
Bei dir sehe ich spontan einen grossne ebreich in der Mitte, und in diesme ebreich eine Überschrift, eine Navigation und einen Hauptteil.
Also hast du ein:

```
<div>
   <div> Überschrift</div>
   <div>Navigation</div>
   <div>Inhalt</div>
</div>
```

Die diversen CSS-anweisungen sorgen dann für das aussehen etc .
Ich hoffe das hilft als Ansatzpunkt weiter.

Layna


----------



## xkoy79 (5. Dezember 2007)

Hi danke für deine Mühen 

Also ich sitze nun schon 1h dran und versuch diese DIVs zu verschachteln, kommt nur Kraut und Rüben raus 

Wenn ich dein Code nehme hab ich ja 3 "Tabellen", passt scho, aber ich brauche:

1BLOCK
3er BLOCK
1BLOCK

Also in der Mitte links und rechts auch eine Tabelle da dort der Pixelrand reinkommensoll der sich wiederholt, wenn sich der Inhalt verlängert...

danke Dir


----------



## Layna (5. Dezember 2007)

*erinnert sich an ihre erstens div's... kraut und rüben war da geschmeichelt ^^*
Aber warum links udn rechts ein block?
Die Mitte ist doch das was sich verlängern soll oder?
Du hast also, Grafisch gesehen:
Oben eine feste höhe
In der Mitte an sich einen Frauen block mit links und rechts ein paar schwarzen und grauen pixeln
Unten wieder etwas mit fester höhe.

Du kannst also:
Die Teile mit der Festen höhe normal einbinden.
Da sich die Mitte nur in der höhe, aber nicht in der breite verändert kannst du dort ein Div mit einem 1-Pixel-hohen, sich wiederholendem hintergrund machen.. an sich eben eine Pixelzeile deines Inhaltbereiches plus Schatten.
Unten schliesst sich dann wieder eine statische grafik an.

Hoffe das ergibt so sinn .

Layna


----------



## xkoy79 (5. Dezember 2007)

Hey,

Frauenblock ? öha 

Also verstehen tu ich es schon, aber wie setz ich sowas um.

Also in der Mitte brauch ich quasie 3 SPALTEN !! ja die Spacer werdn sich wiederholend angeordnet, das sich der Rand und die Mitte nach unten strecken können !!

Oben und unten am besten als BG Image, da dort Text und Navi drüberkommt !!

Hier mal ein Bild als Info:

http://www.kitzbühler-musig.at/anl.jpg

Ich brauche quasie ein LEER Gerüst... aber daran scheiter ich schon, google nun schon seid heute Mittag nach DIV Tabellen, und Spalten, aber nix kommt rum .. leider..

Hey, habe grade ne Page gefunden, da wo man sich was generieren lassen kann, bissl geschaut und kanns sein das es was mit FLOAT zutun hat ? Da werdn dann die "Tabellen" nebeneinander gereiht, schonmal ein Schritt weiter 

Kann ich das auch als ein Paket zusammsetzen ?

Also 1 oben
dann die 3 drunter
dann noch 1

danke
dani


----------



## Maik (5. Dezember 2007)

Hi,

ich hab dir mal eine kleine Vorlage erstellt:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_xkoy79</title>

<style type="text/css">
<!--
#wrap {
width:700px;
margin:0 auto;
}

#header {
height:100px;
background:#ddd;
}

#content {
border-left:2px solid #ddd;
border-right:2px solid #ddd;
}

#footer {
height:50px;
background:#ddd;
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="header">header</div>
     <div id="content">content</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
```
Den Rahmen (Schatten) für den mittleren Teil kannst du in einer Grafik vereinen, die die Breite des DIVs *#wrap* besitzt, und als Hintergrundbild im DIV *#content* eingesetzt wird., somit sind an dieser Stelle keine drei Elemente erforderlich.


----------



## xkoy79 (5. Dezember 2007)

Hi, danke Dir ! Schaut schon Super aus !!

Aber was meisnte mit vereinen ? Soll ich meine Mitte nur EINMAL auschneiden also mit den Pixelrahmen links und rechts ? Und das dann als 1px wiederholend einsetzen 


Weil ich eigentlich den Background Colour vom Inhalt nur mit Hintergrundfarbe definieren wollte....


----------



## Maik (5. Dezember 2007)

Die gewünschte Hintergrundfarbe könntest du direkt in das Hintergrundbild einfliessen lassen.


----------



## xkoy79 (5. Dezember 2007)

Jo hab schon verstanden was du gemeint hast ! habs nun mal geändert !

Also habe ich nur noch 3 Grafikteile, quasie alle als BG Images.

#top {
background-image:url(../top.jpg);
height:157px;
background:#ddd;
}


Irgendwie will der das Bild nicht anzeigen...


Hab mal das Background gelöscht, schon gings... auf sowas muss man erstmal kommen...

Ich verzweifel noch...


----------



## Maik (5. Dezember 2007)

Die background-Eigenschaft überschreibt die background-image-Eigenschaft.


```
background: #ddd url(../top.jpg);
```

Denkbar wäre auch diese Variante 


```
#wrap {
width:700px;
margin:0 auto;
background: #ddd url(shadow.png) left repeat-y;
}

#header {
height:100px;
background:#ddd;
}

#content {
background: #fff url(shadow.png) right repeat-y;
padding:0 2px;
margin-left:2px;
}

#footer {
height:50px;
background:#ddd;
}
```


----------



## xkoy79 (5. Dezember 2007)

Hey, danke für deine Super Hilfe !!

Ohne dich säss ich immer noch vorm Google :O

Hier mal zu sehen: Möchte schon den Schatten vom Grafik dabei haben !!

http://www.kitzbühler-musig.at/test1.php

Schaut ganz cool aus 

Was ist den wrap 

Wo deklariere ich nun noch die BG Colour von der ganzen Page  Im Header oder externe css 

Danke Dir !!


----------



## Maik (5. Dezember 2007)

Das DIV *#wrap* dient zur Aufnahme der einzelnen Seitenbereiche.

Den Seitenhintergrund legst du ebenso im Stylesheet fest:


```
body {
background: #ddd; /* von mir frei gewählt */
}

#wrap {
width:780px;
margin:0 auto;
}

#top {
background-image:url(../top.jpg);
height:157px;
}

#inhalt {
background-image:url(../spacer.jpg);
height:100px;
}

#bottom {
background-image:url(../bottom.jpg);
height:117px;
}
```
und kannst das Stylesheet in eine externe CSS-Datei auslagern, die folgendermaßen im Dokumentheader eingebunden wird:


```
<link rel="stylesheet" type="text/css" href="style.css">
```


----------



## xkoy79 (5. Dezember 2007)

Jaa genau "BODY" das hab ich gesucht 

Man du bist der Wahnsinn, ohne dich wär da nix los !

Geile Sache mit Dir  Bist ab heute mein Freund 

Danke vorerst mal ok


----------



## Maik (5. Dezember 2007)

Danke 

Aber keine Ursache, dafür bin ich doch da


----------



## xkoy79 (5. Dezember 2007)

margin:0 auto; <---- wenn ich das vom hauptrahmen lösche, setzt er mir die ganze page nach links  kurios...

Gibts da nit nen positions tag ?


----------



## Maik (5. Dezember 2007)

Mit margin:0 auto wird das Element im Browserfenster horizontal zentriert; der erste Wert steht für den oberen und unteren, der Zweite für den linken und rechten Außenabstand.

Ansonsten gibt es noch diese Möglichkeit der horizontalen Zentrierung:


```
#wrap {
width:780px;
position:absolute;
left:50%;
margin-left:-390px; /* negative Hälfte von width:780px */
}
```


----------



## xkoy79 (5. Dezember 2007)

Aso, ok aber ich lass es so, dachgte irgendwie an "center" oder so... komiche sache 

Du siehst ja den schwarzen Rand unter meinem Überschriften text, wie könn tich da nun die Text Links am besten arangieren !?


----------



## Maik (5. Dezember 2007)

Zunächst mal müsstest du dafür sorgen, dass die Links an der gewünschten Stelle platziert werden:


```
#top {
background-image:url(../top.jpg);
height:24px;
padding-top:133px;
}
```
Auf http://css.maxdesign.com.au/listamatic/ kannst du dich umschauen und inspirieren lassen, wie CSS-Listenmenüs arrangiert werden können.


----------



## xkoy79 (5. Dezember 2007)

Möchte eigentlich nur Textlinks mit Text Hover, das mach ich ja mit einer externen css.

Hää wie gehtn das nu  Warum splittet der die Höhe  Ich versteh das nit...


----------



## Maik (5. Dezember 2007)

Kannst du deine Frage bitte etwas präzisieren, denn ich weiß nicht, was du mit "Höhe splitten" meinst.

Und wer ist "er"?


----------



## xkoy79 (5. Dezember 2007)

height:24px;
padding-top:133px;

Meine Tabellenhöhe ist ja 157,

du hast nun 133 und 24 , = 157 !

ich versteh einfach die funktionsweise nicht.

Also höhe 24px, aber dann muss ja die tabelle viel zu klein sein, ist sie aber nicht.
padding-top: 133... drückt man damit den text nach unten  aber die tabelle ist doch durch die 24px begrenzt ?

Da war mit Tabellen einfacher zu arbeiten


----------



## Maik (5. Dezember 2007)

Achso, hiervon sprichst du.

Ich habe das CSS-Boxmodell angewendet, nach dem sich die Boxdimension u.a. aus der height- und padding-top-Eigenschaft zusammensetzt - siehe http://www.css4you.de/wsboxmodell/index.html#buh.

Wenn du die von mir gesetzten Werte addierst, kommst du auf 157px, und das entspricht der gewünschten Höhe, wie sie dargestellt werden soll.

Legst du für die Box height:157px und padding-top:133px fest, wird sie vom Browser 290px hoch dargestellt.


----------



## xkoy79 (5. Dezember 2007)

Achso, wird addiert, verstehe ! Danke für die Info !!

Wenn du Lust und Zeit hast kannst ja nochmal schauen:

http://www.kitzbühler-musig.at/test1.php

Hab die Texte nun so gesetzt:

#top {
background-image:url(../top.jpg);
height:22px;
padding-top:135px;
text-align:center;
word-spacing:20px
}

Aber das "Über uns" wird auch getrennt, logischerweise. Gibts da was womit ich das indirekt zu einem Wort machen kann  Ohne das man es sieht natürlich  Oder soll ich mir nen anderes Wort überlegen ?

Danke Dir !


----------



## Maik (5. Dezember 2007)

Ersetze word-spacing durch margin 


```
<div id="top">
     <a href="#">Start</a> <a href="#">Über uns</a> <a href="#">Spielorte</a> <a href="#">Bilder</a> <a href="#">Media</a> <a href="#">Kontakt</a>
</div>
```


```
#top {
background-image:url(../top.jpg);
height:22px;
padding-top:135px;
text-align:center;
/*word-spacing:20px*/ /* auskommentiert = deaktiviert */
}

a {
        color: #c71585;
        margin:0 20px;
}
```


----------



## xkoy79 (6. Dezember 2007)

Öha geht ja Super, schonwieder sowas mit einer 0 am ANfang, verstehen tu ichs nicht, aber es geht... was du alles weisst... möcht ich auch gern können


----------



## Maik (6. Dezember 2007)

Hi,

bitte den Absatz "Erläuterung" lesen: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin


----------



## xkoy79 (6. Dezember 2007)

Morgen !


Und was heisst das "a" ? Steht sicher für TEXT oder !

Also die 0 gibt an das nach unten und oben 0 Pixel Abstand ist (Ist doch aber Abstand)
Und die 20 Pixel nach rechts und Links jeweils Abstand !

Passt 

Hmm wollte gestern nen Form Mailer einbauen, da war ich dann wieder bei Tabellen ! Wie macht man das nun am besten ? Auch css  Oder php oder wie gewonnt mit Tabellen ? Is es da nicht wild wenn man Tabellen benutzt ?

Danke Dir !!


----------



## Maik (6. Dezember 2007)

xkoy79 hat gesagt.:


> Und was heisst das "a" ? Steht sicher für TEXT oder !


Das a steht für das a-Element, das einen Link oder Anker definiert.

Ein Formular lässt sich auch ohne eine Tabelle auszeichnen, beispielsweise mit einem unsortierten Listenelement ul, denn hierfür sind Tabellen semantisch überhaupt nicht vorgesehen, sondern um tabellarische Daten auszuzeichnen.


----------



## xkoy79 (6. Dezember 2007)

hi,

so hab nun nen Formular erstmal erstellt mit DIVs .. Schaut gut aus, Nur mag er das nicht Mittig setzen ! Ind er Kontakt.php hab ichs schon mit "body style" mittig gesetzt:

<div style="width:760px;margin:0px auto;">

Und in der Hauptseite wo die PHP eingebunden wird so:

#inhalt {
background-image:url(../spacer.jpg);
height:100%;
padding:30px;
margin:0px auto;
}

Nun weiss ich auch nit weiter...


----------



## Maik (6. Dezember 2007)

Das DIV wird doch horizontal zentriert, einfach mal zur Visualisierung einen gelben Rahmen außen rumziehen:


```
<div style="width:660px;margin:0px auto;border:1px solid yellow;"> ... </div>
```


----------



## xkoy79 (6. Dezember 2007)

Asoo also das is quasie schon zentriert nur man siehts nicht weils rechts leer ist ...

Also muss ich INERHALB des Divs zentrieren.. gleich ma machen..

DANKE


----------



## Maik (6. Dezember 2007)

Achtung! Beim Includen wird nicht ein vollständiges HTML-Grundgerüst in das Hauptdokument geladen, sondern nur, was sich im Dokumentkörper body befindet:


```
<div id="inhalt">
<html>
<head>

</head>
<body>

<div style="width:410px;margin:0px auto;">
<form method="post" action="sendend.php">

<div style="height:35px;width:150px;float:left;text-align:left;">Vorname:</div><div style="height:35px;width:400px;text-align:left;"><input type="text" name="vorname"></div>

<div style="height:35px;width:150px;float:left;text-align:left;">Nachname:</div><div style="height:35px;width:400px;text-align:left;"><input type="text" name="nachname"></div>

<div style="height:35px;width:150px;float:left;text-align:left;">Wohnort:</div><div style="height:35px;width:400px;text-align:left;"><input type="text" name="wohnort"></div>

<div style="height:35px;width:150px;float:left;text-align:left;">E-Mail:</div><div style="height:35px;width:400px;text-align:left;"><input type="text" name="mail"></div>

<div style="height:110px;width:150px;float:left;text-align:left;">Text:</div><div style="height:110px;width:400px;text-align:left;"><textarea name="nachricht" cols="24" rows="5"></textarea>
</div>

<div style="height:35px;width:150px;float:left;text-align:left;"></div><div style="height:35px;width:400px;text-align:left;"><input type="submit" name="Button" value="Abschicken"></div>
</form>
</div>
</body>
</html>
 
</div>
```
Die rotmarkierten Zeilen haben dort nichts zu suchen und erzeugen invaliden Code.


----------



## xkoy79 (6. Dezember 2007)

Hey, danke für den Tip !! Dachtes mir schon, hab das früher auch mal gesehen.. aber lange her 

Aber oben das INHALT DIV haste nur so jetzt reingesetzt


----------



## Maik (6. Dezember 2007)

xkoy79 hat gesagt.:


> Aber oben das INHALT DIV haste nur so jetzt reingesetzt





Maik hat gesagt.:


> Die rotmarkierten Zeilen haben dort nichts zu suchen und erzeugen invaliden Code.


Ist das DIV *#inhalt* rotmarkiert?


----------



## xkoy79 (6. Dezember 2007)

hehe, nein ! Aber ich hatte es vorher nicht drin 

Also wenn ich das richtig verstehe, soll ich noch ein DIV Rahmen um das Kontaktformular erzeugen, und dann IN EINS Hinein Loaden


----------



## xkoy79 (7. Dezember 2007)

Argh, schonwieder ein Problem.

Der macht ständig ein BR, will nur vom Text die Zahlen farbig haben.
Scheint ein leidiges Problem zu sein, habs leider nicht hinbekommen:



h1 {
color:#c71585;
}

---------------------------------------------------------

<div id="bottom">
<h1><? echo number_format("$gesamt",0,"",".") ?></h1> Besucher seit Dezember 2007,
<? echo number_format("$heute",0,"",".") ?> davon Heute, 
<? echo number_format("$online",0,"",".") ?> gerade Online.
</div>


----------



## Maik (7. Dezember 2007)

Hi,

setz den voreingestellten unteren Außenabstand des h1-Elements auf null:


```
h1 {
color:#c71585;
margin-bottom:0;
}
```


----------



## Felix Kunsmann (7. Dezember 2007)

Wenn ich noch ein Paar tipps abgeben darf:
- Eine Navigation ist eine LinkListe, also sollte man dort auch <ul>/<ol></dl> verwenden.
- <div id="bottom"> ist eher <p> als <div>
- <h1> in #bottom sollte wohl eher <strong> oder <em> sein, wenn du es nur fett dargestellt
haben möchtest, eventuell auch ein <span> mit entsprechenden Darstellungsanweisungen
im HTML.
- Das Auskommentieren (<!-- -->) in <style> ist in der heutigen Zeit nicht mehr notwendig.
- Das CSS sollte man in eine CSS-Datei auslagern und mittels <link> einbinden.


----------



## Maik (7. Dezember 2007)

Felix Kunsmann hat gesagt.:


> - Eine Navigation ist eine LinkListe, also sollte man dort auch <ul>/<ol></dl> verwenden.
> 
> - Das CSS sollte man in eine CSS-Datei auslagern und mittels <link> einbinden.


Das hatte ich hier auch schon vorgeschlagen.



Maik hat gesagt.:


> und kannst das Stylesheet in eine externe CSS-Datei auslagern, die folgendermaßen im Dokumentheader eingebunden wird:
> 
> 
> ```
> ...





Maik hat gesagt.:


> Auf http://css.maxdesign.com.au/listamatic/ kannst du dich umschauen und inspirieren lassen, wie CSS-Listenmenüs arrangiert werden können.





xkoy79 hat gesagt.:


> Möchte eigentlich nur Textlinks mit Text Hover, das mach ich ja mit einer externen css.





Felix Kunsmann hat gesagt.:


> - <div id="bottom"> ist eher <p> als <div>


Wieso denn das?

Zudem darf das p-Element keine weiteren Blockelemente, wie z.B. das h1-Element, enthalten - siehe http://de.selfhtml.org/html/referenz/elemente.htm#p


----------



## xkoy79 (7. Dezember 2007)

hallo,

also ich seh hier überhaupt nimmer durch !!

Habe doch die CSS ausgelagert, gut das andere hab ich jetzt noch drin, lager ich später aus, zum bearbeiten jetzt erstma gut so.

@maik, habe mir schon die Listenmenus angeschaut, aber kann davon nix gebrauchen, will ja nur Text mit Hover, mehr nicht ! Brauch keine Buttons oder etc... So wie es jetzt ist, ist es gut !

"wieso denn das" ? was ?

Also mit dem margin-bottom macht er mir auch nen absatz ... leider..


----------



## Maik (7. Dezember 2007)

xkoy79 hat gesagt.:


> Also mit dem margin-bottom macht er mir auch nen absatz ... leider..


Einen Absatz macht das h1-Element weiterhin, da es zur Familie der Blockelemente gehört, und diese erzeugen nunmal automatisch einen Absatz im Textfluss.

Mit meinem Vorschlag verringert sich zumindest der Abstand zum nachfolgenden Text, und dass nun zwischen den neu hinzugefügten h1-Elementen ein größerer Abstand entsteht, liegt einfach daran, dass der obere Außenabstand (noch) nicht auf null zurückgesetzt ist.


----------



## xkoy79 (7. Dezember 2007)

Achso, wusste nicht das es einen Absatz macht, kurz gesagt hab ichs rausgeschmissen, und unten direkt mit Span gemacht ! Jetzt ENDLICH gehts... ich zitter schon.. wahnsinn.. 

Danke !!


----------



## xkoy79 (7. Dezember 2007)

Soo nun hab ich wieder was neues 

Möcht ein News Script laufen lassen.

Lasse es ja nur mit php aufrufen.

Da schauts so aus: http://www.kitzbühler-musig.at/news.php
Und eingebunden ändert er mir den Sytle aber wieder... weiss leider nicht wo ich anfangen soll was zu ändern, darum frag ich lieber wieder...

http://www.kitzbühler-musig.at/test1.php

Sollte ich den Inhalt immer gleich lassen 

#inhalt {
background-image:url(../spacer.jpg);
height:100%;
padding:25px;
text-align:left;
}

Oder soll ich in der Start.php dort nochmal nen CSS anlegen und dort definieren  Das mans auch nachher sieht wenns eingebunden ist..

Verwirrend alles..

DANKE


----------



## Maik (7. Dezember 2007)

Ich hatte dich doch gestern darauf hingewiesen, dass beim PHP-Includen nicht ein vollständiges HTML-Grundgerüst in das Hauptdokument geladen wird.

Dass die Tabellen-Hintergrundfarben und Schriftfarben im Hauptdokument *test1.php* nicht dargestellt werden, liegt am fehlenden #-Zeichen vor den Hex-Farbwerten, denn im Standardsmode werden diese benötigt, und die *news.php* wird für sich im Quirksmode übergeben.


----------



## xkoy79 (7. Dezember 2007)

Aber ich include doch keine Datei wo noch HTML Code drinsteht !!


----------



## Maik (7. Dezember 2007)

Von welchem Dokument sprichst du jetzt, *test1.php* oder *news.php*?

Du lädst doch die "News" in die Hauptseite *test1.php* in das DIV *#inhalt*, also lautet der Code für die *news.php*:


```
<script type="text/javascript">
function check() {
if( document.form1.name.value == "" ) {
alert( "Du hast keinen Namen angegeben!" );
document.form1.name.focus();
return false; }
if( document.form1.title.value == "" ) {
alert( "Du hast keinen Titel angegeben!" );
document.form1.title.focus();
return false; }
if( document.form1.text.value == "" ) {
alert( "Du hast keinen Text geschrieben!" );
document.form1.text.focus();
return false; } }
function smilie(name) {
document.form1.text.focus();
document.form1.text.value = document.form1.text.value + name;
document.form1.text.focus(); }
function fett() {
text = prompt( "Hier den Text der fett dargestellt werden soll eingeben:","");
document.form1.text.value+="[ b]"+text+"[ /b]"; }
function kursiv() {
text = prompt( "Hier den Text der kursiv dargestellt werden soll eingeben:","");
document.form1.text.value+="[ i]"+text+"[ /i]"; }
function unterstrichen() {
text = prompt( "Hier den Text der unterstrichen dargestellt werden soll eingeben:","");
document.form1.text.value+="[ u]"+text+"[ /u]"; }
function bild() {
text = prompt( "Hier die Bild-Url eingeben:","");
document.form1.text.value+="[ img]"+text+"[ /img]"; }
function mail() {
url1=prompt("Bitte die E-Mail Adresse eingeben:","");
url2=prompt("Bitte den Text eingeben:","");
if (url2=="") url2=url1;
document.form1.text.value+="[mail]"+url1+"[mailm]"+url2+"[/mail]"; }
function link() {
url1=prompt("Bitte die Link-Url eingeben:","http://");
url2=prompt("Bitte den Link-Text eingeben:","");
if (url2=="") url2=url1;
document.form1.text.value+=""+url1+"[urlm]"+url2+""; }
</script>

<table width="600" border="1" bgcolor="#000000" cellpadding="2" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000"><tr><td align="center">
<a href="news.php?page=addnews">News schreiben</a>
</td></tr></table><br>
<table width="600" border="1" bgcolor="#000000" cellpadding="3" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000">
<tr><td bgcolor="#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td><b>Test</b></td><td align="right">07.12.2007 - 13:46</td></tr></table>

Autor: Test</td></tr>
<tr><td bgcolor="#ffffff"><font color="#000000">Test.asd.aS<br>D<br>AS<br>F<br>SDAF<br></font></td></tr>
<tr><td bgcolor="#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td></td><td align="right"><a href="news.php?page=edit&nr=0"><img src="http://www.tutorials.de/forum/images/edit.gif" border="0" alt="News editieren"></a>&nbsp;<a href="news.php?page=delete&nr=0"><img src="http://www.tutorials.de/forum/images/delete.gif" border="0" alt="News löschen"></a></td></tr></table>
<tr><td>&nbsp;</td></tr>
<tr><td bgcolor="#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td><b>Auftritt Hotel Tenne</b></td><td align="right">07.12.2007 - 12:49</td></tr></table>
Autor: maxi</td></tr>
<tr><td bgcolor="ffffff"><font color="#000000">blablablablablablabl<br>sadas<br><br>sdad<br>a<br>sd</font></td></tr>

<tr><td bgcolor="#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td></td><td align="right"><a href="news.php?page=edit&nr=1"><img src="http://www.tutorials.de/forum/images/edit.gif" border="0" alt="News editieren"></a>&nbsp;<a href="news.php?page=delete&nr=1"><img src="http://www.tutorials.de/forum/images/delete.gif" border="0" alt="News löschen"></a></td></tr></table>
</table>
<br>
<table  width="600" border="1" bgcolor="#000000" cellpadding="2" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000"><tr><td align="center">
Newsscript<br>(C) 2007 by <a target="_blank" href="http://www.top-side.de">Top-Side.de</a>
</td></tr></table>
```


----------



## xkoy79 (7. Dezember 2007)

Das soll ich includen ? Das ist doch der Code einfach rauskopiert...

Eingebunden ist es ja schon, nur hats halt den Text im "TOP" wieder zerissen, bzw. andersrum. Also die Symbole in dem Sycript waren auch auseinander gestellt, wie oben meine LINK Liste !!

Der wendet das "a" überall an, ich dachte nur im TOP !! Unten solln die Texte ja normal dastehen !

Habs mit "word-spacing" versucht, geht auch, aber dann steht das "Unter uns" wieder auseinander...

HABS, der Wahnsinn, bin ein Genie 


```
<div id="top">
<a style="margin:0 20px;" href="test1.php?action=start">Start</a>
<a style="margin:0 20px;" href="test1.php?action=uns">&Uuml;ber uns</a>
<a style="margin:0 20px;" href="test1.php?action=spielorte">Spielorte</a>
<a style="margin:0 20px;" href="test1.php?action=bilder">Bilder</a>
<a style="margin:0 20px;" href="test1.php?action=media">Media</a>
<a style="margin:0 20px;" href="test1.php?action=kontakt">Kontakt</a>
</div>
```


----------



## Maik (7. Dezember 2007)

Ja, das sollst du includen, und ja, das ist der einfach herauskopierte Code, den ich vom HTML-Grundgerüst befreit habe, denn ansonsten kommt das hier bei heraus:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Kitzb&uuml;hler-Musig.at</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body {
background: #666666;
}

#rahmen {
width:780px;
margin:0 auto;
}
#top {
background-image:url(../top.jpg);
height:22px;
padding-top:135px;
text-align:center;
}

a {
        margin:0 20px;
}
#inhalt {
background-image:url(../spacer.jpg);
height:100%;
padding:25px;
text-align:left;
}
#bottom {
background-image:url(../bottom.jpg);
height:90px;
padding-top:27px;
text-align:center;
}
</style>
</head>
<body>
<div id="rahmen">
<div id="top">
<a href="test1.php?action=start">Start</a>
<a href="test1.php?action=uns">&Uuml;ber uns</a>

<a href="test1.php?action=spielorte">Spielorte</a>
<a href="test1.php?action=bilder">Bilder</a>
<a href="test1.php?action=media">Media</a>
<a href="test1.php?action=kontakt">Kontakt</a>
</div>
<div id="inhalt">
<script>
function check() {
if( document.form1.name.value == "" ) {
alert( "Du hast keinen Namen angegeben!" );
document.form1.name.focus();
return false; }
if( document.form1.title.value == "" ) {
alert( "Du hast keinen Titel angegeben!" );
document.form1.title.focus();
return false; }
if( document.form1.text.value == "" ) {
alert( "Du hast keinen Text geschrieben!" );
document.form1.text.focus();
return false; } }
function smilie(name) {
document.form1.text.focus();
document.form1.text.value = document.form1.text.value + name;
document.form1.text.focus(); }
function fett() {
text = prompt( "Hier den Text der fett dargestellt werden soll eingeben:","");
document.form1.text.value+="[ b]"+text+"[ /b]"; }
function kursiv() {
text = prompt( "Hier den Text der kursiv dargestellt werden soll eingeben:","");
document.form1.text.value+="[ i]"+text+"[ /i]"; }
function unterstrichen() {
text = prompt( "Hier den Text der unterstrichen dargestellt werden soll eingeben:","");
document.form1.text.value+="[ u]"+text+"[ /u]"; }
function bild() {
text = prompt( "Hier die Bild-Url eingeben:","");
document.form1.text.value+="[ img]"+text+"[ /img]"; }
function mail() {
url1=prompt("Bitte die E-Mail Adresse eingeben:","");
url2=prompt("Bitte den Text eingeben:","");
if (url2=="") url2=url1;
document.form1.text.value+="[ mail]"+url1+"[ mailm]"+url2+"[ /mail]"; }
function link() {
url1=prompt("Bitte die Link-Url eingeben:","http://");
url2=prompt("Bitte den Link-Text eingeben:","");
if (url2=="") url2=url1;
document.form1.text.value+=""+url1+"[ urlm]"+url2+""; }
</script>
<html>
<head>
<title>Neuigkeiten</title>
<style TYPE="text/css"></style>

</head>

<body bgcolor="" text="ffffff" link="#c71585" vlink="ffffff" alink="ffffff">
<table width="600" border="1" bgcolor="000000" cellpadding="2" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000"><tr><td align="center">
<a href="news.php?page=addnews">News schreiben</a>
</td></tr></table><br>
<table width="600" border="1" bgcolor="000000" cellpadding="3" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000">
<tr><td bgcolor="000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td><b>Test</b></td><td align="right">07.12.2007 - 13:46</td></tr></table>
Autor: Test</td></tr>
<tr><td bgcolor="ffffff"><font color="000000">Test.asd.aS<br>D<br>AS<br>F<br>SDAF<br></font></td></tr>

<tr><td bgcolor="000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td></td><td align="right"><a href="news.php?page=edit&nr=0"><img src="http://www.tutorials.de/forum/images/edit.gif" border="0" alt="News editieren"></a>&nbsp;<a href="news.php?page=delete&nr=0"><img src="http://www.tutorials.de/forum/images/delete.gif" border="0" alt="News löschen"></a></td></tr></table>
<tr><td>&nbsp;</td></tr>
<tr><td bgcolor="000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td><b>Auftritt Hotel Tenne</b></td><td align="right">07.12.2007 - 12:49</td></tr></table>
Autor: maxi</td></tr>
<tr><td bgcolor="ffffff"><font color="000000">blablablablablablabl<br>sadas<br><br>sdad<br>a<br>sd</font></td></tr>
<tr><td bgcolor="000000"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td></td><td align="right"><a href="news.php?page=edit&nr=1"><img src="http://www.tutorials.de/forum/images/edit.gif" border="0" alt="News editieren"></a>&nbsp;<a href="news.php?page=delete&nr=1"><img src="http://www.tutorials.de/forum/images/delete.gif" border="0" alt="News löschen"></a></td></tr></table>
</table>
<br>
<table  width="600" border="1" bgcolor="000000" cellpadding="2" cellspacing="0" align="center" style="border-collapse: collapse" bordercolor="#000000"><tr><td align="center">

Newsscript<br>(C) 2007 by <a target="_blank" href="http://www.top-side.de">Top-Side.de</a>
</td></tr></table>
</body>
</html> 
</div>

<div id="bottom">
<span style="color:#c71585;">44</span> Besucher seit Dezember 2007,
<span style="color:#c71585;">44</span> davon Heute, 
<span style="color:#c71585;">2</span> gerade Online.

</div>


</div>
</body>
</html>
```
Leider kann ich dir das w3c-Validator-Ergebnis zum Markup der *test1.php* nicht präsentieren, da der Validator ein Problem mit dem Umlaut "ü" im Domainnamen "kitzbühler-musig.at"  hat.


----------



## xkoy79 (8. Dezember 2007)

Morgen,

so ich mach die News jetzt selber in nem DIV drinn. Brauche eigentlich garkein Script, da es nicht so viele News gibt !


```
<div style="width:600px;margin:auto;">
<div style="text-align:left;height:20px;width:300px;float:left; text-decoration:underline;">Weihnachtsauftritt</div><div style="text-align:right;width:600px; text-decoration:underline;">07.12.2007</div>

<div style="text-align:left;width:100%;">dsfs</div>


</div>
```

Die 3 Box setzt den Text nich "left" , wieso nicht ? Die anderen machen es auch ! Komich ist auch, sobald ich über 300 gehe passiert das, sobald ich 300px breit habe die Box dann setzt er es auf left...


----------



## Maik (8. Dezember 2007)

Hi.

```
<div style="clear:left;text-align:left;width:100%;">dsfs</div>
```
 hebt die Floatumgebung wieder auf und richtet so den Text linksbündig im normalen Textfluss aus.

Zudem solltest du die Breitenangaben der umschlieesenden Box und die der ersten beiden, die der float:left-Deklaration zufolge nebeneinander ausgerichet werden sollen, aufeinander abstimmen.


----------



## xkoy79 (8. Dezember 2007)

Hi, mit dem Clear hab ich auch schonmal gesehen.. aber da erstmal drauf kommen ! Danke !!

Die hauptbox hat 600px. die anderen ersten beiden 300, und die rechte 600 , is ja irgendwie ein relatives system .. also immer bei null anfangen oder. Weil die irgendwie immer übereinanderliegen ...


----------



## Maik (8. Dezember 2007)

Sollen sich denn die beiden ersten DIVs ("Weihnachtsauftritt" u. "07.12.2007") überlagern?

Und hast du das Modell schon mal im IE6 betrachtet, wie er die drei Boxen anordnet?


----------



## xkoy79 (8. Dezember 2007)

Nein sollen sich nicht überlagern, aber ich bekomm die DIVs nicht anders nebeneinander, 

ist auch so bei der kontakt.php  Dachte geht nicht anders !

IE hab ich garnicht  nutz nur firefox, ich muss das mal testen !


----------



## Maik (8. Dezember 2007)

```
<div style="width:600px;margin:auto;">
     <div style="text-align:left;height:20px;width:300px;float:left;text-decoration:underline;margin-right:0 !important;margin-right:-3px;">Weihnachtsauftritt</div>
     <div style="text-align:right;width:300px;text-decoration:underline;">07.12.2007</div>
     <div style="clear:left;text-align:left;width:100%;">dsfs</div>
</div>
```


----------



## xkoy79 (8. Dezember 2007)

Hi, mit deinem Code stimmts nit irgendwie, die 2 ersten Boxen liegen nun übereinander...


----------



## Maik (8. Dezember 2007)

Sorry.


```
<div style="width:600px;margin:auto;">
     <div style="text-align:left;height:20px;width:300px;float:left;text-decoration:underline;margin-right:0 !important;margin-right:-3px;">Weihnachtsauftritt</div>
     <div style="text-align:right;margin-left:300px;text-decoration:underline;">07.12.2007</div>
     <div style="clear:left;text-align:left;width:100%;">dsfs</div>
</div>
```


----------



## xkoy79 (8. Dezember 2007)

Jetzt ists perfekt, Danke Dir  Werd dann gleich mal die kontakt.php genauso anpassen !


----------



## xkoy79 (9. Dezember 2007)

Morgen,

der Verzweiflung nahe brauche ich rat....

Auf der Startseite möcht ich gern, ein Bild (links) und rechts davon den Text !
Unter dem Bild das selbe nochmal nur versetzt, also Bild Rechts und Text links... 

Aber irgendwie will das nit gehen.. bzw. die Seite verlängert sich nichtmal mit...

Ich weiss nichts mehr...

#bild1 {
background-image:url(bilder/title1.jpg);
width:250px;
height: 300px;
float: left;
border-style: solid;
border-color: black;
border-width: 1px;
}

#bild2{
background-image:url(bilder/title1.jpg);
background-position: right;
width:250px;
height: 300px;
float:right;
border-style: solid;
border-color: black;
border-width: 1px;
margin: 250px;
}



<div style="width:700px;height:100%;margin:auto;">

<div id="bild1">BILD1</div>Text von Bild 1

<div id="bild2">BILD2</div>Text von Bild 2


</div>




Danke


----------



## Maik (9. Dezember 2007)

Hi,

versuch es mal auf diese Weise:


```
.bild1 {
background-image:url(bilder/title1.jpg);
width:250px;
height: 300px;
float: left;
border-style: solid;
border-color: black;
border-width: 1px;
}

.bild2{
background-image:url(bilder/title1.jpg);
background-position: right;
width:250px;
height: 300px;
float:right;
border-style: solid;
border-color: black;
border-width: 1px;
/*margin: 250px;*/ /* auskommentiert = deaktiviert */
text-align:right;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
```


```
<div style="width:700px;height:100%;margin:auto;" class="clearfix">
     <div class="bild1"><img src="...">Text von Bild 1</div>
     <div class="bild2">Text von Bild 2<img src="..."></div>
     <div class="bild1">Text von Bild 3<img src="..."></div>
     <div class="bild2"><img src="...">Text von Bild 4</div>
</div>
```
Die Erläuterung zur verwendeten "clearfix"-Methode kannst du auf http://positioniseverything.net/easyclearing.html nachlesen.


----------



## xkoy79 (9. Dezember 2007)

Hi danke, geht soweit, versth noch nit warum aber komm schond rauf 

Zwichenzeitlich hab ichs so probiert: Geht das auch ?


```
<div id="bild1"></div><div id="textbox1">Text von Bild 1</div>
```

Dann könnte ich den Text auch formatieren aus meiner CSS datei 

Um es nur mal an einem Bild zu demonstrieren, reicht ja erstmal.

Da reichen doch 2 Divs nebeneinander, mit Float left. oder ? Kann ich nur Background images setzen ? im css meine ich !


----------



## Maik (9. Dezember 2007)

Der Text lässt sich auch in meiner Variante mit CSS formatieren, und erfordert hierfür kein weiteres DIV.

Außerdem muß eine ID in einem Dokument eindeutig sein und darf darin nicht mehrmals vergeben werden. Aus diesem Grund habe ich in meinem Vorschlag die IDs in Klassen umgewandelt, da sie unbegrenzt vorkommen dürfen, und du die Boxen *bild1* und *bild2* wohl mehrmals in der Seite einsetzen willst.


----------



## xkoy79 (9. Dezember 2007)

HI, ja richtig, benutze sie ja mehrmals.

Merkwürdigerweise reagiert die CLASS nicht wenn ich meine css datei ändere, zb. anahnd eines Rahmens. Passiert einfach nichts !


```
<div style="width:700px;height:100%;margin:auto;" class="clearfix">
     <div class="bild1"><img src="bilder/title1.jpg">Text von Bild 1</div>
     <div class="bild2">Text von Bild 2<img src="bilder/title1-1.jpg"></div>
</div>
```

Und hier: 


```
#bild1 {
border-style:solid;
border-color:black;
border-width:1px;
}

#bild2 {
border-style:solid;
border-color:black;
border-width:1px;
text-align: right;
}
```


----------



## Maik (9. Dezember 2007)

Dann schau dir doch bitte einfach meinen CSS-Code genauer an.

ID-Namen werden im Stylesheet mit dem #-Zeichen, und Klassen-Namen mit einem Punkt benannt.

Ich empfehle dir an dieser Stelle auch  SELFHTML: Stylesheets (CSS) als Lektüre und Nachschlagewerk, denn darin werden u.a. solche grundlegenden Fragen behandelt.


----------



## xkoy79 (9. Dezember 2007)

Ja die Seite ist schon in meinen Favouriten !

Das mit der Raute und dem Pukt wusst ich nicht...

Schau mal hier:

<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>


```
<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>

<div style="width:700px;height:100%;margin:auto;"class="clearfix">
<p><img src="bilder/title1.jpg" width="240" height="182">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna … </p>
<p>In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt. Quisque consequat velit vitae orci. Suspendisse potenti. Nulla facilisi. Proin ullamcorper, neque quis suscipit gravida, augue dolor pellentesque purus, sed viverra nulla nulla consequat leo … </p>
</div>
```

Bekomme den css Code oben nicht da raus, bzw, weiss einfach nicht wie ich den verlinken soll 

#bild {
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
}


Vielleicht weisst du mal wieder was


----------



## Maik (9. Dezember 2007)

Ich versteh gerade nicht, worauf du hinaus willst.


----------



## xkoy79 (9. Dezember 2007)

So sieht mein Code aus:


```
<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>

<div style="width:700px;height:100%;margin:auto;"class="clearfix">
<p><img src="bilder/title1.jpg" width="240" height="182" border="1px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna … </p>
<p>In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt. Quisque consequat velit vitae orci. Suspendisse potenti. Nulla facilisi. Proin ullamcorper, neque quis suscipit gravida, augue dolor pellentesque purus, sed viverra nulla nulla consequat leo … </p>
</div>
```

Oben steht da ja CSS code drin, möchte aber gerne das der in der CSS datei steht, also extern.

Und das IMG SRC kann man das auch extern setzen, also auch in die CSS datei ?

Weiss halt nicht wo und wie ich die ID einfügen kann das er es aus der externen css datei liest !! und natürlich anwendet


----------



## Maik (9. Dezember 2007)

Und wo ist da jetzt bitte das Problem, den CSS-Code in der CSS-Datei http://www.kitzbühler-musig.at/style.css einzufügen? 

Zumal die beiden Zeilen schon darin enthalten sind, wenn auch in der syntaktisch falschen Form :suspekt:

Der Pfad zur Grafik-Datei lässt sich für ein img-Element nicht im Stylesheet festlegen.


----------



## xkoy79 (9. Dezember 2007)

Den in der CSS datei reinzuschreiben ist nicht das Probem, aber den zu VERLINKEN, im Start.php dokument 

Aber habs mal anders gemacht:

hab einfach eine Start.css angelegt, und die im Start.php verlinkt:

<link rel="stylesheet" type="text/css" href="start.css">

Kann ich das so machen ? Funktionieren tuts mal...

Syntaktisch falscher Form ? Was meinst du ?


----------



## Maik (9. Dezember 2007)

Ich meinte dieses "Konstrukt":


```
#bild {
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
}
```
Ja, auf diese Weise wird eine externe CSS-Datei in das Dokument geladen. Wenn du dir aber nicht sicher bist, wie ein Stylesheet in ein HTML-Dokument eingebunden wird, schlag doch einfach bei deinen "Favoriten"  Stylesheets in HTML einbinden nach.


----------



## xkoy79 (9. Dezember 2007)

Du verstehst mich anscheinend nicht... 

Ich weiss doch wie ich eine externe CSS einbinde. Mir gings drum nicht noch eine CSS Datei anzulegen.

Wollte nur die CSS Datei verlinken in einem DIV Container !! Das meinte ich !

Und was ist an dem Konstrukt komisch ? Die längenangaben ?

Eigentlich brauche ich ja nur das:


```
img { 
float: left; margin-right:10px;
border: 1px;
border-color: black;
border-style: solid;
}
```


----------



## Maik (9. Dezember 2007)

Jetzt versteh ich dich 

Also, du nimmst die Regel in deiner bestehenden CSS-Datei auf und wählst den CSS-Selektor für Nachfahrenelemente, wie beispielsweise:


```
#ID-Name_des_Elements img { ... }
```
oder

```
.Klasse-Name_des_Elements img { ... }
```
damit diese Regel für das enthaltende img-Element inherhalb des DIVs mit dem ID- oder Klassen-Bezeichner gilt.


----------



## Felix Kunsmann (12. Dezember 2007)

Maik hat gesagt.:


> Felix Kunsmann hat gesagt.:
> 
> 
> > - <div id="bottom"> ist eher <p> als <div>
> ...


Weil #bottom nur Text beinhaltet, und <div> mehrere Elemente gruppieren soll.



> Zudem darf das p-Element keine weiteren Blockelemente, wie z.B. das h1-Element, enthalten - siehe http://de.selfhtml.org/html/referenz/elemente.htm#p


Daher ja auch:


> - <h1> in #bottom sollte wohl eher <strong> oder <em> sein, wenn du es nur fett dargestellt
> haben möchtest, eventuell auch ein <span> mit entsprechenden Darstellungsanweisungen
> im CSS.


----------



## Maik (12. Dezember 2007)

Naja, es ist wohl Ansichtssache und eine Glaubensfrage, mit welchem Element der "Footer" ausgezeichnet wird.


----------

