Eure Homepage

AnD3rS · Beitrag von **AnD3rS** » 28.12.2004, 22:08

blufill ist aber scheiße bei einer Auflösung von über 1024x768. Da rutscht der Blogtitel links aus der Tabelle raus.

Wenn dus geschafft hast, ein neues Template zu machen, könntest du mir mal dabei helfen.

Beitrag von **Tante Google** » 28.12.2004, 22:08

Readmaster · Beitrag von **Readmaster** » 28.12.2004, 22:18

Hm.. hab auch 1024, hast recht, ist ein wenig zu klein

Jack_X · Beitrag von **Jack_X** » 30.12.2004, 12:54

Dann will ich auch mal meinen Blog vorstellen:

http://www.cosmopolitan.net.tc/

... und bevor ich jetzt wegen dem Namen gehauen werde: Lest bitte den 2ten Beitrag !

Kritik erwünscht

Benijamino · Beitrag von **Benijamino** » 30.12.2004, 12:59

gefällt mir

beaver · Beitrag von **beaver** » 30.12.2004, 14:45

gefällt mir auch! werd mir wohl auch mal nen blog einrichten *g*

Lionhead · Beitrag von **Lionhead** » 05.01.2005, 00:36

Hallo bin am verzweifeln. Versuche vergebens die Abstände zwischen den Buttons zu entfernen. Doch es will einfach nicht. Kann mir einer sagen was ich falsch mache oder was ich ändern muss damit es geht?

Bild

Code: Alles auswählen


<table align="center" height="30"  width="800">
           <td>
                  <a href="test1.htm"><img src="home.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test2.htm"><img src="news.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test3.htm"><img src="tutorials.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test4.htm"><img src="Gallery.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test5.htm"><img src="Downloads.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test6.htm"><img src="links.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
                  <a href="test7.htm"><img src="gaestebuch.png" hspace="0" vspace="0" cellpadding="0" cellspacing="0" border="0" /></a>
          </td>
</table>

beaver · Beitrag von **beaver** » 05.01.2005, 00:41

hast du die files schon hochgeladen? wenn ja gib mir nen link, dann schau ich mir das genau an!

hspace="0" vspace="0" cellpadding="0" cellspacing="0" hat eigentlich im img-tag überhaupt nichts verloren

und welchen browser verwendest du?

Lionhead · Beitrag von **Lionhead** » 05.01.2005, 00:51

Ist nicht hochgeladen. Will das Menü erst offline hinbekommen und wenn es läuft soll es das Textmenü ersetzten. Aber ob das noch was wird

bekomme es irgendwie nit ganz hin. Wie würdest du die Sache angehen wenn du diese Grafiken nebeneinander setzten wolltest und sie je mit einem Link versehen wolltest?

Hab es in Firefox und mim IE getestet. Bei beiden gleich.

Habe schon sämtliches ausprobiert doch es will einfach nicht.

beaver · Beitrag von **beaver** » 05.01.2005, 02:54

Lionhead hat geschrieben:Habe schon sämtliches ausprobiert doch es will einfach nicht.

ich probier das jetzt schon seit mehr als 1 1/2 stunden (hab grad nichts besseres zu tun

)
hab zuerst valides xhtml 1.1 draus gemacht und dann ein stylesheet dazugeschrieben! aber per css schaff ichs auch nicht

das einzige was hilft (und das ist ja das kuriose) ist, die ganze "wurst" in einer zeile zu schreiben! dann sind diese kleinen zwischenräume auch weg.

funzt nicht

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="standard.css" type="text/css" media="screen" />
<title>MyTitle</title>
</head>

<body>

<div id="navbar">
<a href="test1.htm"><img src="home.jpg" alt="home" /></a>
<a href="test2.htm"><img src="news.jpg" alt="news" /></a>
<a href="test3.htm"><img src="tutorials.jpg" alt="tutorials" /></a>
<a href="test4.htm"><img src="gallery.jpg" alt="gallery" /></a>
<a href="test5.htm"><img src="downloads.jpg" alt="downloads" /></a>

</div>

<p>
<a href="http://validator.w3.org/check/referer">XHTML 1.1</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS2</a>
</p>

</body>

</html>

funzt schon

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="standard.css" type="text/css" media="screen" />
<title>MyTitle</title>
</head>

<body>

<div id="navbar">
<a href="test1.htm"><img src="home.jpg" alt="home" /></a><a href="test2.htm"><img src="news.jpg" alt="news" /></a><a href="test3.htm"><img src="tutorials.jpg" alt="tutorials" /></a><a href="test4.htm"><img src="gallery.jpg" alt="gallery" /></a><a href="test5.htm"><img src="downloads.jpg" alt="downloads" /></a>
</div>

<p>
<a href="http://validator.w3.org/check/referer">XHTML 1.1</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS2</a>
</p>

</body>

</html>

das stylesheet poste ich jetzt nicht hier! (funzt ja eh nicht)!
aber vielleicht weiß jemand wie ich das problem per css löse ohne das ganze in einer wurst zu schreiben! da bleibt die übersicht unweigerlich auf der strecke - und so einen code will ich nicht freiwillig produzieren!

alternativ kannst du das ganze noch folgendermaßen machen
ACHTUNG kein valider code mehr! nur ein häßlicher hack mit tables! (aber es funzt)

Code: Alles auswählen

<table align="center" height="30"  width="800" cellspacing="0px" cellpadding="0px" border="0px">
<tr>
<td><a href="test1.htm"><img src="home.png" border="0" /></a></td>
<td><a href="test2.htm"><img src="news.png" border="0" /></a></td>
<td><a href="test3.htm"><img src="tutorials.png" border="0" /></a></td>
<td><a href="test4.htm"><img src="Gallery.png"  border="0" /></a></td>
<td><a href="test5.htm"><img src="Downloads.png" border="0" /></a></td>
<td><a href="test6.htm"><img src="links.png"  border="0" /></a></td>
<td><a href="test7.htm"><img src="gaestebuch.png"  border="0" ></a></td>
</tr>
</table>

jeju · Beitrag von **jeju** » 05.01.2005, 11:17

@ Lionhead
Die Tags cellspacing und cellpadding gehören, wenn du sie verwendest in den "table-Tag". Diese müssen dort beide 0px haben, damit der Abstand weg ist. Mit CSS wäre es alternativ padding ( Abstand eines Elementes (zu dem, was es umgibt)), welches auch 0px sein sollte...

Ich probier auch mal was...

//edit: Achso, hinzukommt, dass cellpadding und cellspacing nur wirken, wenn es auch mehrere Spalten und Zeilen gibt. Bei dir sind alle Links in einer Zelle. Wenn du jeden Link in eine eigene Zelle packst, dann sollte es auch gehen.

@ DarkMind
der Code des "Tabellen-Hacks" ist schon valide nur nicht semantisch richtig, weil Tabellen eigentlich nur für strukturierte Daten dienen und ich zum Aufbau eines "Tabellen-Layouts"

Grüße jeju

jeju · Beitrag von **jeju** » 05.01.2005, 11:51

so:
mit HTML 4.01

mit Tabelle:

Code: Alles auswählen

<table cellpadding="0" cellspacing="0" height="30px">
  <tr>
           <td><a href="test1.htm"><img src="home.png" border="0"></a>
           <td><a href="test2.htm"><img src="news.png" border="0"></a>
           <td><a href="test3.htm"><img src="tutorials.png" border="0"></a>
           <td><a href="test4.htm"><img src="Gallery.png" border="0"></a>
           <td><a href="test5.htm"><img src="Downloads.png" border="0"></a>
           <td><a href="test6.htm"><img src="links.png" border="0"></a>
           <td><a href="test7.htm"><img src="gaestebuch.png" border="0"></a></td>
  </tr>
</table>

Allerdings musste ich die Größe der Tabelle entfernen, weil die Elemente sonst zentriert ausgerichtet werden. Lösung: noch ne Tabelle mit der Größe drum rum (ist zwar auch nicht das Wahre

) Alle Links sind in einer Zeile aber in unterschiedlichen Spalten.
//edit: oder alle Elemente sind so groß, dass sie zusammen 800px ergeben und du die Breite der Tabelle wieder angeben kannst (ohne eine zusätzliche Tabelle drum rum)

mit einem DIV-Container:

Code: Alles auswählen

<div style="margin:0px; padding:0px; width:800px">
<a href="test1.htm" style="float:left; margin:0px; padding:0px"><img src="home.png" border="0" width="50px"></a>
<a href="test2.htm" style="float:left; margin:0px; padding:0px"><img src="news.png" border="0" width="50px"></a>
<a href="test3.htm" style="float:left; margin:0px; padding:0px"><img src="tutorials.png" border="0" width="50px"></a>
<a href="test4.htm" style="float:left; margin:0px; padding:0px"><img src="Gallery.png" border="0" width="50px"></a>
<a href="test5.htm" style="float:left; margin:0px; padding:0px"><img src="Downloads.png" border="0" width="50px"></a>
<a href="test6.htm" style="float:left; margin:0px; padding:0px"><img src="links.png" border="0" width="50px"></a>
<a href="test7.htm" style=" margin:0px; padding:0px"><img src="gaestebuch.png" border="0" width="50px"></a>
</div>

Alle Links werden durch float:left rechts an das linke Element "angesetzt". Beim letzten hab ich float weggelassen, weil sonst das folgende Element auch rechts davon wäre (gibts ja aber nicht).

und mit der Liste (was ich am besten finde, aber irgendwie noch nen Abstand hat):

Code: Alles auswählen

<div style="margin:0px; padding:0px;">
  <ul style="margin:0px; padding:0px; list-style:none;">
    <li style="padding:0px; margin:0px; display:inline;"><a href="test1.htm"><img src="home.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test2.htm"><img src="news.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test3.htm"><img src="tutorials.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test4.htm"><img src="Gallery.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test5.htm"><img src="Downloads.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test6.htm"><img src="links.png" border="0" width="50px"></a></li>
    <li style="padding:0px; margin:0px; display:inline;"><a href="test7.htm"><img src="gaestebuch.png" border="0" width="50px"></a></li>
  </ul>
</div>

Display:inline bedeutet das alle Punkte der Liste hintereinander angeordnet werden.

Vielleicht gefällt dir ja ne Lösung, Lionhead.
Ich hab die HTML Elemente wie border, width und height aber noch nicht in CSS geschrieben und auch keine CSS-Datei angelegt, deshalb sieht der Code "komisch" aus.

jeju

Lionhead · Beitrag von **Lionhead** » 05.01.2005, 12:24

1000 Dank euch beiden. Werde das mit der Tabelle nehmen.

Code: Alles auswählen

<table cellpadding="0" cellspacing="0" height="30px">
  <tr>
           <td><a href="test1.htm"><img src="home.png" border="0"></a>
           <td><a href="test2.htm"><img src="news.png" border="0"></a>
           <td><a href="test3.htm"><img src="tutorials.png" border="0"></a>
           <td><a href="test4.htm"><img src="Gallery.png" border="0"></a>
           <td><a href="test5.htm"><img src="Downloads.png" border="0"></a>
           <td><a href="test6.htm"><img src="links.png" border="0"></a>
           <td><a href="test7.htm"><img src="gaestebuch.png" border="0"></a></td>
  </tr>
</table>

Mir ist nur eins aufgefallen. Im IE hängt der Button Gästebuch ein px weiter unten und im Firefox nicht.

dead_man_walkin · Beitrag von **dead_man_walkin** » 05.01.2005, 12:45

IE? was ist das? braucht ma das?

ne ma ernst..... komisch..... könnte es an den pngs liegen?

jeju · Beitrag von **jeju** » 05.01.2005, 12:55

Hmm, ich glaub nicht, dass es an den PNGs liegt, weil es damit eigentlich bloß Probleme gibt, wenn sie Transparenzeffekte haben.

beaver · Beitrag von **beaver** » 05.01.2005, 14:15

jeju hat geschrieben: @ DarkMind
der Code des "Tabellen-Hacks" ist schon valide nur nicht semantisch richtig, weil Tabellen eigentlich nur für strukturierte Daten dienen und ich zum Aufbau eines "Tabellen-Layouts"

Grüße jeju

ja, genau das meinte ich (aber man beachte die uhrzeit des posts *g*)