• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout probleme

Status
Für weitere Antworten geschlossen.
C

Crazysunshine

Neues Mitglied
Hi.
Ich bin leider noch nicht zu gut im HTML und mit CSS kann ich noch viel weniger anfangen. Trotz dem versuch ich mir einiges beizubringen und meine HP zu erstellen. Jetzt hab ich wohl aber so einige Fehler in der Seite. Ich hab einen "Grundcode" genommen und das dann nach meinen Wünschen versucht abzuändern, was teilweise eigentlich recht zu meiner Zufriedenheit passiert ist.

Meine Seite ist hier: Swiss Westlife Streetteam - @ myblog.deweiter nach links platziert. Hoffe, ihr wisst was ich meine und könn


1. Der Text ist irgenwie fehl platziert. (sorry, habs auch net so mit der Fachsprache). Im :CONTENT: ist einfach der Text viel zu weit rechts. Aber ich krieg da einfach nicht raus, was ich ändern muss, damit sich das t mir da helfen.

2. Hab ich gesehen, dass es doch sehr grosse Unterschiede bei der Ansicht im IE & Firefox gibt. Gibts da einen Weg, um das zu ändern?

3. Bin mir auch nicht sicher, ob es vielleicht noch weitere "schwerwiegende" Fehler drin hat...

Danke schon mal.

Das wäre mein Code:

<html>
<head>
<title> // Swiss Westlife Streetteam // SwissWestlifeStreetteam.ch.vu</title>
<style>
body { scrollbar-face-color: #01DFD7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #04B4AE;
scrollbar-shadow-color:#01DFD7;
scrollbar-arrow-color:#01DFD7;
scrollbar-track-color: #01DFD7;
</style>
<style type="text/css">
<!--
a:link { color: #000000; cursor:crosshair; text-decoration: none}
a:visited { color: #01DFD7; cursor:crosshair; text-decoration: none }
a:active { color: #04B4AE; cursor:crosshair; text-decoration: none}
a:hover {color: #04B4AE; cursor:crosshair; text-decoration: none}
-->
</style>
b {color:#01DFD7;}
i {color:#04B4AE;}
u {color:#088A85;}
<style>
a { color: #01DFD7; }
TEXTAREA { Color: #FFFFFF;
Background-Color:#FFFFFF;
Font-Family: Verdana;
Font-Size: 7pt;
Border: 1px solid #FFFFFF;
}
INPUT { Color: #088A85;
Background-Color: #FFFFFF;
Font-Family: Verdana;
Font-Size: 7pt;
Border: 2px solid #FFFFFF;
}
.navi { color: #04B4AE; }
</style>
<style type="text/css">
.inhaltetable {
width:365;
}
</style>
<style type="text/css">
TEXTAREA {
width: 100; height: 70;}
-->
</style>
<style type="text/css">
INPUT{
width: 100; height: 20;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<img border="0" src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/Layout/SWST-Lay_new.png" scroll="no" bgproperties= "fixed"
ALIGN="left" WIDTH="1024",HEIGHT="0" STYLE="position:absolute; top:0; left:0;" >
<!------CONTENT----->
<div style="overflow:auto; position: absolute; width:460; height:375; left:380; top:375">:CONTENT_HIER:
</div>
<!----CONTENT END---->

<!-----TOP NAVIGATION----->
<div style="overflow:auto; position: absolute; width:500; height:100; left:370; top:130">
<font size=2>
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682442">Home</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682442">Home</a>
</font>
</div>
<div style="overflow:auto; position: absolute; width:500; height:100; left: 370; top: 161">
<font size=2>
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682670">Westlife</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682670">Westlife</a>
</font>
</div>
<div style="overflow:auto; position: absolute; width:500; height:100; left:370; top: 192">
<font size=2>
<a href="">Gallery</a>
</font>
</div>
<div style="overflow:auto; position: absolute; width:500; height: 100; left: 370; top: 222;">
<font size=2>
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682898">Fanzone</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1682898">Fanzone</a>
</font>
</div>
<div style="overflow:auto; position: absolute; width:500; height: 100; left: 370; top: 252;">
<font size=2>
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1683126">Website</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1683126">Website</a>
</font>
</div>
<div style="overflow:auto; position: absolute; width:500; height: 100; left: 370; top: 285;">
<font size=2>
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1683354">Online</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/page/1683354">Online</a>
</font>
</div>

<!-----END TOP NAVIGATION----->
<!----TABLE NAVIGATION---->
<table style="position: absolute; width: 180; height:; left:168; top: 370;">
<colgroup width="80" span="1"></colgroup>
<tr>
<td style="background-color: #088A85; font-family: verdana; font-size: 7.5pt; font-weight: bold; color: #FFFFFF;">
<img src="<A href="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Willkommen</td">http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Willkommen</td>
</tr>
<tr>
<td style="font-family: verdana; font-size: 7.5pt;">
Willkommen auf der Swiss Westlife Streetteam Seite, der grössten und informativsten Schweizer Fanseite über Westlife.
Hier findet ihr ausreichend Informationen, Gallery, Extras und vieles mehr. Schaut euch ruhig um.Viel Spass!
</td>
</tr>
<tr>
<td style="background-color: #088A85; font-family: verdana; font-size: 7.5pt; font-weight: bold; color: #FFFFFF;">
<img src="<A href="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Network</td">http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Network</td>
</tr>
<tr>
<td style="font-family: verdana; font-size: 7.5pt;">
<a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/gb">Gästebuch</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/gb">Gästebuch</a> | <a href="<A href="http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/contact">Kontakt</a">http://swisswestlifestreetteam.myblog.de/swisswestlifestreetteam/contact">Kontakt</a>
</td>
</tr>
<tr>
<td style="background-color: #088A85; font-family: verdana; font-size: 7.5pt; font-weight: bold; color: #FFFFFF;">
<img src="<A href="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Top">http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Top Affiliates</td>
</tr>
<tr>
<td style="font-family: verdana; font-size: 7.5pt;">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<img src="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/Affis.gif">
<br>
[mehr]
</td>
</tr>
<tr>
<td style="background-color: #088A85; font-family: verdana; font-size: 7.5pt; font-weight: bold; color: #FFFFFF;">
<img src="<A href="http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Information</td">http://i47.photobucket.com/albums/f182/swisswestlifestreetteam/Grafics/icons/pfeil-white-001.gif">Information</td>
</tr>
<tr>
<td style="font-family: verdana; font-size: 7.5pt;">
<li><b>Titel:</b>Swiss Westlife Streetteam</li>
<li><b>Webmiss:</b>Sarah</li>
<li><b>Co-Miss:</b></li>
<li><b>Online seit:</b></li>
<li><b>Version:</b></li>
</td>
</tr>
<!--END NAVIGAtiON--->

</body>
<div style="visibility: hidden;
position: absolute;
right:0;
bottom:0;">
{PLACE_POWEREDBY}
</div>
</html>
 
Hallo,

1. solltest du dich mit den Funktionsbuttons des Forums auseinandersetzen und den Code nicht einfach posten! (auf Raute klicken, dazwischen deinen Code einfügen).

2. schreibst du, dass du so gut wie keine Ahnung von HTML sowie CSS hast. Wieso erstellst du dann eine Website? Grundwissern sollte schon drin sein.

3. sind die Infos meiner Meinung nach zu wenig, um dir zu helfen.

4. Was die falschen Positionierungen von Texten usw. angeht; damit hat die HTML- Datei nichts zu tun, sondern die CSS-Datei.
 
Hallo,

ich muss mich TheBirthdayMassacre anschließen. Wenn Du selbst sagst, dass Du kaum Ahnung von HTML hast und Dich mit CSS noch weniger auskennst, wieso glaubst Du dann, dass Du eine Website erstellen kannst? Ich möchte es Dir mal direkt sagen, ohne dass das beleidigend sein soll, aber das Ergebnis kannst Du nur in die Tonne kloppen.

Nimm Dir SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) vor, und lerne erstmal.

Beginne mit HTML. Denke dabei daran, dass HTML nur eine Strukturbeschreibungssprache ist, Du legst hiermit nur fest, was Dein Inhalt bedeuten soll, also Überschrift, Adresse, Textabsatz, was es halt alles so gibt. Wie das auf dem Bildschirm dann aussieht, ist völlig egal! Das hat nichts mit HTML zu tun! Bitte Tabellen auch nur zur Darstellung tabellarischer Daten verwenden und nicht divs wie mit einem Salzstreuer verteilen. Inhalt schreiben, diesen auszeichnen.

Dann erst lernst Du CSS, wenn Du weißt, wie man seinen Inhalt richtig auszeichnet. Damit CSS in den modernen Browsern richtig funktioniert, brauchst Du einen DOCTYPE. Der sagt, in welchem Dialekt Dein HTML geschrieben ist. Empfehlenswert wäre XHTML 1.0 Strict, aber das muss natürlich zu Deinem HTML-Code passen.
Dann kannst Du mit CSS alle Deine Elemente so aussehen lassen, wie Du Dir das vorstellst, und was CSS und die Browser so hergeben. Teste dabei unbedingt mit Firefox, oder auch mit Opera, niemals als erstes mit dem Internet Exploder, der hat in Sachen CSS einige Macken.

So, dass ich das Grundprinzip. Nimm Dir zwei Wochen frei und studiere SelfHTML, dann klappts auch mit der Website :-)

Weitere Fragen beantworten wir Dir hier gerne.

Gruß,
-Efchen

P.S.: Natürlich solltest Du Dich auch noch informieren, wie das WWW funktioniert. Was sich bei verschiedenen Benutzern unterscheiden kann: Client (nicht jeder benutzt einen Browser), Fenstergröße, Schriftgröße, vorhandene Fonts, Handy/PDA usw. Pixelgenaue Layouts sind z.B. ungeeignet. Layouts sollten sich dem vorhandenen Platz anpassen, sollten aber auch nicht immer die volle Größe einnehmen, usw.
Eine Website sollte bei allen ansprechend sein, nicht nur bei Dir mit Deinen Einstellungen, Deinem Betriebssystem und Deinem Browser. Und eine Website muss in allen Browsern funktionieren. Barrierefreiheit ist ein Muss.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben