Mein erster Quellcode. Was kann man besser machen

html.de-Forum HTML, XHTML & CSS
1 
<html>
<head>
<title>home</title>
<meta name="author" content="Administrator">

<style type = "text/css">
body
{
 background-color:black;
 border-left-width: 40px;
 border-left-style: solid;

  border-left-color: B2B2B2;

  border-bottom-width: 40px;
 border-bottom-style: solid;

  border-bottom-color: B2B2B2;

  border-top-style: solid;
  border-top-width: 80px;
  border-top-color: B2B2B2;

  border-right-style: solid;
  border-right-width: 40px;
  border-right-color: B2B2B2;
  margin:0;
  padding:0;

}


#logo {
/*background-image:url(file:///C:/XAMPP/xampp/HTML/prisma5a3.jpg);    */

 background-repeat: no-repeat;
 width: 100%;
 height: 100%;
 }

</style>
</head>
<body>
<p id ="logo" >

 </p>
<div style="position:absolute; top:20px; left:20px; width:200px;  border:none; padding:0">
<img src="file:///C:/XAMPP/xampp/HTML/prisma5a3.jpg">


</div>

<div style="position: absolute; color:cccccc; left: 40px; top:190px; font-family: arial;">

blablablablablablablablabla sfejtoejmmcxjfoew sads sdsdl sadsad
<br>
asasasas
<br>
asaswec  sdsds sdsds sdsd
</div>
<div style="position:absolute; top:40px; left:230px; color:black;  font-family: arial;">

    <a href="file:///C:/XAMPP/xampp/HTML/seite1.html"> Kontakt       </a>

  <a href="file:///C:/XAMPP/xampp/HTML/home.html" style=" margin-left:20px; font-weight: bold;color:black;" >  Links   </a>
</div>

</body>
</html>

was kann mn hier anders, besser usw. machen?

2

ICh find den Quelltext gut.
+CSS benutzt und vom HTML Code getrennt
+Einrückungen gemacht

-An manchen Stellen hat es wohl mit der Einrückung gehapert z.Bsp.

[code]


[/code]würde dann zu [code]
[/code]werden -unnötige Leerzeilen
3

Auch wenn du noch Xampp nutzt um deine Website zu testen, würde ich die Pfade direkt Internetkonform machen. Also statt

[html][/html]
benutzt du eben
[html][/html]
Die HTML Datei muss sich somit logischerweise im selben Ordner befinden, was bei dir glaube ich der Fall ist.

4

Du könntest die CSS-Daten in eine externe Datei auslagern.
Dies sähe dann so aus:

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

nachdem ich hier ab und zu rumforste und tipps suche, habe ich auch mal meine css-daten ausgelagert.
funktioniert auch alles wunderbar, bis auf den hintergrund. jetzt wird weder die information über mein hintergrundbild, noch die farbe angewendet.

was mache ich da falsch?

hier meine css-daten:[code]

/* allgemeine Angaben */
body { background-image: url(hintergrund4.jpg); background-color: black; background-attachment:fixed; background-repeat: no-repeat; }

/* Inhalt */
#i1 { position:absolute; top:190px; left:200px; width:740px; z-index:1; }
#i2 { position:absolute; top:212px; left:10px; width:170px; z-index:1; border-style: dashed; border-color: silver; border-width: 1px; }

/* Navi */
#f1 { position:fixed; top:0px; left:0px; }
#f2 { position:fixed; top:0px; left:0px; z-index:2; }
#news { position:fixed; top:48px; left:384px; z-index:2; }
#band { position:fixed; top:54px; left:500px; z-index:2; }
#gigs { position:fixed; top:56px; left:613px; z-index:2; }
#media { position:fixed; top:54px; left:122px; z-index:2; }
#shop { position:fixed; top:63px; left:227px; z-index:2; }
#guests { position:fixed; top:73px; left:327px; z-index:2; }
#forum { position:fixed; top:83px; left:461px; z-index:2; }
#kontakt { position:fixed; top:92px; left:591px; z-index:2; }

p.rechts { font-family: Tahoma, sans-serif; color: white; font-size: 11pt; }

p.topicli { font-family: Tahoma, sans-serif; color: white; font-size: 12pt; padding: 5px; }
p.links { font-family: Tahoma, sans-serif; color: white; font-size: 10pt; padding: 5px; }
p.bild { padding: 0px; align: center; }

A:link { color: #ffffff; }
A:visited { color: #ffffff; }
A:hover { text-decoration: line-through; color: red; }
A:active { color: red; }

[/code]

6

Wenn das deine ausgelagerte CSS-Datei ist, dann lösche dies am Anfang

<style type="text/css">

sowie dies am Schluss:

</style>

Das ist nur zu verwenden, wenn die Style-Angaben im Headbereich einer Seite stehen.

Befindet sich das Bild „hintergrund4.jpg“ im gleichen Verzeichnis wie deine CSS-Datei?

Die vielen positions sind vermutlich überflüssig. Du erschwerst dir damit vieles. Kannst du besser mit margin- und float-Angaben lösen. Es sei denn, es soll ein gezielter Effekt erreicht werden. Aber das ist eher selten der Fall.

Um dir konkret zu helfen wäre ein Link oder zumindest noch der HTML-Code sinnvoll.

7

ahja, wunderbar, vielen dank…

Die vielen positions sind vermutlich überflüssig. Du erschwerst dir damit vieles. Kannst du besser mit margin- und float-Angaben lösen.
hm… das ist halt mal wieder eine selber ausgedachte lösung für ein problem…^^
ich will eine schicke navileiste mit besonderer schrift. also habe ich die einzelnen navi-punkte als bild eingefügt und benutze nen javascript-code, damit es nen hübschen effekt gibt, wenn man drüber hovert…
mühselig is das allerdings. :wink:

8

ok, das musst du wissen.
Sieht nach einer Art Perspektivnavi aus.
Beachte aber: Der IE 6 kann „position: fixed;“ nicht.

9

also ich würde dir empfehlen farben nach dem rgb farbensystem zu machen. Bin nie schlecht damit gefahren.
Zum Beispiel:
Weiß: #FFFFFF
Schwarz: #000000

genaueres dazu auf selfhtml: 216 Farben (Netscape-Farbpalette)

10

meines Wissens kann man da aber tricksen

siehe Beispiel auf selfhtml was bei mir sowohl auf dem IE6 funktioniert als auch auf FF

ggr Link: SELFHTML: Stylesheets / CSS-basierte Layouts / Fixe Bereiche

Throndorin

11

Ich verwende position:fixed gar nicht mehr.
Das gleichen Ergebnisse kann mann auch mit position:absolute erreichen.

12

ah ok das muss ich mir bei Gelegenheit mal ansehen, habe das anhand des Selfhtml BEispiels einmal für eine Navigation benutzt aber da bin ich nun von ab

Throndorin

13

dazu würde ich noch raten die Daten auf der Webseite zu strukturieren, damit das bei größeren Mengen übersichtlich bleibt.

also einen Ordner „images“ oder „bilder“ zb dann den Pfad halt relativ angeben
[html][/html]Die HTML Datei muss sich somit logischerweise im selben Ordner befinden, was bei dir glaube ich der Fall ist.
[/quote]