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

Mein erster Quellcode. Was kann man besser machen

Status
Für weitere Antworten geschlossen.
T

thea

Neues Mitglied
Code: 
<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?
 
Werbung:
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: 
<div style="position:absolute; top:20px; left:20px; width:200px;  border:none; padding:0">
<img src="file:///C:/XAMPP/xampp/HTML/prisma5a3.jpg">


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


</div>
werden
-unnötige Leerzeilen
 
Auch wenn du noch Xampp nutzt um deine Website zu testen, würde ich die Pfade direkt Internetkonform machen. Also statt

HTML: 
<img src="file:///C:/XAMPP/xampp/HTML/prisma5a3.jpg">
benutzt du eben
HTML: 
<img src="prisma5a3.jpg">
Die HTML Datei muss sich somit logischerweise im selben Ordner befinden, was bei dir glaube ich der Fall ist.
 
Werbung:
Du könntest die CSS-Daten in eine externe Datei auslagern.
Dies sähe dann so aus:
Code: 
<link rel="stylesheet" type="text/css" href="layout.css">
 
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: 
<style type="text/css">


/* 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; }


</style>
 
Wenn das deine ausgelagerte CSS-Datei ist, dann lösche dies am Anfang
Code: 
<style type="text/css">
sowie dies am Schluss:
Code: 
</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.
 
Werbung:
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.
Zum Vergrößern anklicken....
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. ;-)
 
ok, das musst du wissen.
Sieht nach einer Art Perspektivnavi aus.
Beachte aber: Der IE 6 kann "position: fixed;" nicht.
 
Werbung:
Werbung:
Sn0opy schrieb:
Auch wenn du noch Xampp nutzt um deine Website zu testen, würde ich die Pfade direkt Internetkonform machen. Also statt

HTML: 
<img src="file:///C:/XAMPP/xampp/HTML/prisma5a3.jpg">
benutzt du eben
HTML: 
<img src="prisma5a3.jpg">
Die HTML Datei muss sich somit logischerweise im selben Ordner befinden, was bei dir glaube ich der Fall ist.
Zum Vergrößern anklicken....

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: 
<img src="images/prisma5a3.jpg">
Die HTML Datei muss sich somit logischerweise im selben Ordner befinden, was bei dir glaube ich der Fall ist.[/quote]
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben