HMTL - Probleme beim Template

mpeg.exe · 2. April 2007

Ich arbeite gerade an einem neuem Homepage Template.

So soll es mal aussehen, wenn ich es hinbekomme

Jetzt bekomm ich aber den Body (Also den großem in der Mitte wo der Test steht, nicht das ausm Quellcode

) nicht unter den Header. :huh:

http://img511.imageshack.us/img511/4338/shot00033ki6.jpg

Hier Auszug aus dem Quellcode:

HTML:

<body>
 <table cellspacing="0">
<!--Header-->
  <tr>
   <td rowspawn="2">
   	<img src="images/header.png" />
   </td>
  </tr>
<!--Navi-->
  <tr>
   <td>
    <table cellspacing="0" valign="top">
     <tr><td><img src="images/top.png"</td></tr>
     <tr><td><img src="images/middle.png"</td></tr>
     <tr><td><img src="images/bottom.png"</td></tr>
    </table>
   </td>
<!--Hauptfenster-->
   <td>
   MÖÖÖÖÖÖÖÖÖÖÖÖP
   </td>
  </tr>
 </table>
</body>

Was mich auch wundert ist, dass zwischen den Navi Buttons immernoch ein kleiner Freiraum ist, sodass die Buttons nicht genau aneinander passen. Wie kann ich erzwingen, dass die Buttons ohne Zwischenraum untereinander sind?

EDIT: Ändert mal bitte ein Mod die Überschtrift? Das tut ja in den Augene weh :ugly:

Crizzo · 2. April 2007

bist du sicher, dass du das mit Tabellen machen willst und nicht mit CSS?

Hast du eine Online Version davon?

Setzt mal alle Abstände auf null. Also:
* {margin:0; padding:0;} in der CSS Datei oder als CSS Element in den Kopf der HTML Datei.

mpeg.exe · 3. April 2007

Öhm, wenn du mit CSS eine CSS Datei meinst - ja, mit der werde ich es natürlich noch machen. Ich bin aber gerade daran das Grundgerüst mit einer HTML Datei zu entwerfen und da mach ich das gleich im HTML Dokument

Mudder · 3. April 2007

Ich glaube er meinte ehr, dass du deine Seite mittels CSS layoutest und nicht mittels der Tabellen.

Da ich aber jetzt mal ganz gemein bin und bezweifel das du dies kannst will ich dir mal eine evtl. Lösung für dein Abstandsproblem geben.

HTML:

<table cellspacing="0" cellpadding="0" valign="top">
  <tr><td><img src="images/top.png"</td></tr>
  <tr><td><img src="images/middle.png"</td></tr>
  <tr><td><img src="images/bottom.png"</td></tr>
</table>

Mittels des cellpadding="0" wird der Abstand innerhalb der Zellen auf 0 gesetzt. Die Browser setzen standardmässig ein kleinen Rahmen der deine Abstände erklären würde.

Wenn es das Problem nicht löst, dann lade deine Seite bitte mal auf ein Webspace damit man sich die Seite einmal ganz anschauen kann.

Crizzo · 4. April 2007

mpeg.exe schrieb:
Öhm, wenn du mit CSS eine CSS Datei meinst - ja, mit der werde ich es natürlich noch machen. Ich bin aber gerade daran das Grundgerüst mit einer HTML Datei zu entwerfen und da mach ich das gleich im HTML Dokument

lies mal hier: http://www.css4you.de/wslayout1/index.html

Und das Grundwissen sollte dir auch helfen: http://www.css4you.de/wscss/index.html

mpeg.exe · 4. April 2007

Aso.

Hab das jetzt mal versucht so zu machen.
Ich habe zwar immernoch eine Tabelle drin, aber das dürfte jetzt nicht das Problem sein^^
Ich habe jetz tnämlich das Problem, dass die Pixel Angaben nicht richtig übernommen werden. Dadurch passt die Grafik nicht richtig.
Auszuga aus Quelltext:

HTML:

<body>
<!--Header-->
 <table>
  <tr>
   <td colspan="2"><div style="width:982px"><img src="images/header.png" /></div></td>
  </tr>
<!--Navi-->
  <tr>
   <td><div id="top">Home</div></td>
<!--Hauptfenster-->
   <td>
    <div id="b">MÖÖÖÖÖÖÖP</div>
   </td>
  </tr>
</body>

Wie gesagt, ich habe noch eine Tabelle drin, aber auch nur, wiel das mit dem Float nicht richtig funktioniert

Auszug aus CSS Datei:

Code:

body {
 height:100%;
 margin:0%;
 padding:0%;
}

div#top {
 float:left;
 background-image: url(images/top.png);
 width:176px;
 padding:20px;

}
div#b {
background-image: url(images/body.png);
flot:right;
width:892px;
padding:20px;
}

Livebeispiel: http://quaxnmpeg.qu.funpic.de/neu/index2.html

Crizzo · 4. April 2007

das funktioniert, du bist nur nicht in der Lage es richtig zu machen.
Setzt am Anfang mal:
*{margin:0; padding:0;} in die CSS Datei.

http://validator.w3.org/check?uri=http://quaxnmpeg.qu.funpic.de/neu/index2.html

PS: Gewöhn dir XHTML 1.0 Strict an!

mpeg.exe · 4. April 2007

1. Hab ich reingesetzt, aber es geht immernoch nicht.
2. 3 von den 5 Fehlern sind funpic speziefisch bei deren Werbung oder so.
3. Ich versuchs

Crizzo · 4. April 2007

nimm mal das padding:20px raus!
Was willst du damit erreichen?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html [COLOR="Blue"]xlmns="http://www.w3.org/1999/xhtml">
<head>
<title>Quax n' mpeg</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--Header-->
 <table>
  <tr>
   <td colspan="2"><div [COLOR="Red"]style="width:982px"><img src="images/header.png" alt="header"/></div></td>
  </tr>

<!--Navi-->
  <tr>
   <td><div id="top">Home</div></td>
<!--Hauptfenster-->
   <td>
    <div id="b">MÖÖÖÖÖÖÖP</div>
   </td>
  </tr>

 </table>
<!-- Ad by funpic.de --><noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=62232452"></script><!-- End Ad by funpic.de --></body>
</html>

sowas kommt in die CSS Datei! (rot)

Das Blaue schreibt man so: xmlns="http://www.w3.org/1999/xhtml"

mpeg.exe · 4. April 2007

Mit dem padding will ich erreichen, dass die Schrift richtig in die Grafik passt. Die Grafik ist an den Enden transparent und ohne des padding sitzt der Text im nichts

Sonst hab ich alles von dir beschriebene ausgeführt

Crizzo · 4. April 2007

stimmt, ja du bindest die Grafik als Hintergrund ein d.h. padding berührt die nicht mal. Irgendwas machst du falls und wenn es von der Größe ist

btw: wie machst du den schönen Schatten um den Header? Bitte sag jetzt nicht mit Photoshop, genauer hätte ich das schon gerne^^

mpeg.exe · 4. April 2007

ich98 schrieb:
stimmt, ja du bindest die Grafik als Hintergrund ein d.h. padding berührt die nicht mal. Irgendwas machst du falls und wenn es von der Größe ist

falls=falsch? Wenn nicht komm ich nicht hinter den Satz

ich98 schrieb:
btw: wie machst du den schönen Schatten um den Header? Bitte sag jetzt nicht mit Photoshop, genauer hätte ich das schon gerne^^

Öhm, die macht mein Partner

Kann nich dir atm nichts genaueres sagen. Ich frag ihn bei nächster Gelegenheit wie der des alles macht. Ich weis nur, dass er mit Gimp arbeitet^^

Crizzo · 4. April 2007

falsch ist schon richtig.
Hast du auch sicher keinen Zahlendreher drin? Oder irgendwelche Margin usw. was blockieren könnten, wenn die überhaupt an den Hintergrund gehen.

@Schatten
wäre nett.

mpeg.exe · 6. April 2007

Ich hab die Fehlerquelle gefunden. Und zwar liegt es am padding.
Habe jetzt alle padding Befehle rausgenommen und die Grafiken werden richtig angezeigt. Scheinbar wird die Tabelle durch padding erweitert, wodurch die Grafik dann nicht mehr stimmt.
Jetzt passt die Schroft aber wie gesagt nicht rein. Gibts da nicht einen Befehl, wodurch ich verhindern kann, dass die Tabelle sich dynamisch erweitert? Also noch neben den festen Größenangaben.

Crizzo · 6. April 2007

http://www.css4you.de/table-layout.html

mpeg.exe · 7. April 2007

Danke ich habs jetzt hinbekommen

Aber bei allem entsteht ein neues Problem :ugly:

http://img463.imageshack.us/img463/8917/shot00039rw6.jpg
So siehts atm aus. Wie bekomm ich jetzt die Navi nach oben?

Auszug aus dem Quelltext:

HTML:

 <table cellpadding="0" cellspacing="0">
  <tr>
   <td colspan="2"><div><img src="images/header.png" alt="header"/></div></td>
  </tr>
<!--Navi-->
  <tr>
   <td>
	<table cellpadding="0" cellspacing="0" valign="top">
	  <tr><td><div id="top">Home</div></td></tr>
	  <tr><td><div id="middle">Home</div></td></tr>
           <tr><td><div id="bottom">Home</div></td></tr>
	</table>
   </td>
<!--Hauptfenster-->
    <td>
    <div id="b">MÖÖÖÖÖP</div>
   </td>
  </tr>
 </table>

Crizzo · 7. April 2007

das sieht nach collapsing margins aus!
Schau mal, ob für die Navi genug Platz ist!

mpeg.exe · 7. April 2007

ich98 schrieb:
das sieht nach collapsing margins aus!
Schau mal, ob für die Navi genug Platz ist!

Nach was bitte?! :ugly:

Also eigentlich sollte da ja schon genug Platz sein. Sie ist ja nur zentriert.

EDIT: Ich hab den Fehler gefunden =)
Ich hab die ganze Zeit valgin in die Tabelle in td gesetzt. Dabei musste ich Honk es ja in td selber setzen.
Soe siehts jetzt aus: http://quaxnmpeg.qu.funpic.de/neu/
Und sogar XHTML und CSS valid^^

mpeg.exe · 8. April 2007

Neue Probleme

So, da bin ich wieder

Ich bin jetzt vorangekommen und hab schonmal mit dem groben Inhalt angefangen.

Allerdings treten jetzt einige Probleme bzw. Fragen auf.

1. Ich habe eben gemerkt, dass in der html Datei ein Fehler ist: Klick
Da stimmt irgendwas mit div nicht. Ich habe die Buttons durch Buttons mit Schrift ersetzt. Jetzt habe ich ja nichts mehr das zwischen dem div steht. Kann ich da einfach

HTML:

<div id="a"></div>

schreiben oder muss ich

HTML:

<div id="a />

draus machen?
Bei mir hat keines funktioniert^^

2. Wie kann ich es machen, dass sich die Grafik vom Button wechselt, wenn man z.B. mit der Maus drüber ist oder wenn der Button aktiv ist.
Also wie bekomm ich das in der CSS Datei in den jeweiligen div Befehl rein?

Crizzo · 8. April 2007

:hover funktioniert im IE nur mit Links d.h. du musst das alles in einen <a></a>-Tag packen

<div id="a"></div> ist richtig, wird in der CSS Datei mit: #a {} angesprochen

HMTL - Probleme beim Template

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Benutzer

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Bekanntes Gesicht

Similar threads