Text neben Navigatoren positionieren - Quellcode vorhanden!

PhilippS

Hallo an alle und vor allem jene, die mir weiterhelfen können .
Also, ich programmiere noch nicht so lange html bzw. erstelle ich ebenso kurz das design meiner hps mit css.
deshalb meine frage: wie kann ich meine navigatoren links neben dem text positioneren? wie funktioniert das in diesem fall genau mit den Boxen!
hier die quellcodes der startsite
<html>
<title> Betonwerk Mühlböck - 5163 Palting/Mattsee </title>
<head> <center><h1>Betonwerk Mühlböck</h1></center>
<style type="text/css">

</style>
<link rel="stylesheet" href="design_für_betonwerk.css" type="text/css">
</head>
<body>
</div>
<center>
<div style ="background-color:yellow;
width:400px;
height:100px;
border:4px red solid;
margin:10px;
text-align:center;
">
</center>
<font size="5">Herzlich Willkommen!</font>

<font size="4">Betonwerk Anton Mühlböck</font> </p>

5163 Palting-Mattsee </p>

Telefon: 06217/7428 </p>
</div>
<div id="navi";>
<ul>
[*]Home
[*]Produkte
[*]Standort
[*]Geschichte
[*]Betriebsgelände
[/list]
</body>
</html>
und der ausgelagerten css-design datei
<html>
<head>
<link rel="stylesheet" type="text/css"
href="design_für_betonwerk.css" />
<style type="text/css">

<!--
body{background-color:#00C8FF;
}
</style>
</head>
<body>
</body>
</html>
Ich bitte euch wenn möglich einfach um eine Ergänzung im Code und ne kurze Erklärung dazu.
als hilfestellung die adresse der hp
http://www.betonwerk-muehlboeck.at.tt
ps: warum werden bei meiner hp die bilder im internet nicht angezeigt, die aber in der browservorschau schon zu sehen sind?

danke im voraus!
lg philipp

sejuma

Da sind zunächst einige grundlegende Fehler in der Reihenfolge deines Quelltextes.
Der muss generell so aufgebaut sein:

Doctype

<html>

<head>
hierein kommen meta-Angaben und die CSS-Style-Angaben bzw. der Verweis auf die CSS-Datei.

</head>

<body>
hierein kommen header, Navi und Content der Homepage
</body>
</html>

Sachen wie dies

Code

<center><h1>Betonwerk M&uuml;hlb&ouml;ck</h1></center>

haben im head nichts zu suchen, sondern gehören in den body.
Hier

Code

<body> 
</div>

wird ein div geschlossen, der vorher nicht geöffnet war. >>> Löschen!
Wenn du bereits eine CSS-Datei verwendest, dann solltest du konsequenter Weise auch alle Style-Angaben da rein schreiben.
Also kannst du Dinge wie dies

Code

<div style ="background-color:yellow; 
width:400px; 
height:100px; 
border:4px red solid; 
margin:10px; 
text-align:center; 
">

aus dem HTML-Teil rausnehmen und in die CSS verlagern.
Auf diese Weise solltest du deinen Quellcode nochmal sortieren. Zur Grundstruktur des Aufbaus siehe hier

Was nun die Anordnung und Positionierung innerhalb des body betrifft, sieh dir mal die Layout-Links bei den FAQ's II/2 an. Hier findest du viele Beispiele für die Anordnung der jeweiligen div's.

Zur CSS-Datei:
Hier kommen nur die Elemente mit den Style-Angaben rein, ohne "Vor- und Nachgeplänkel".
Somit musst du hier den Anfang

HTML

<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="design_f&uuml;r_betonwerk.css" /> 
<style type="text/css"> 
<!--

und das Ende

Code

</style> 
</head> 
<body> 
</body> 


</html>

löschen.

Versuch mal auf diese Weise etwas Struktur reinzubekommen und melde dich danach ggf. nochmal.

In deinem Quelltext kann ich (außer bei h1 mit bg-image) keinen einzigen Bildverweis finden. Und bei h1 selbst muss wie bereits oben erwähnt in den body. Deshalb können auch keine Bilder angezeigt werden.

PhilippS

Zitat von sejuma
Da sind zunächst einige grundlegende Fehler in der Reihenfolge deines Quelltextes.
Der muss generell so aufgebaut sein:

Doctype

<html>

<head>
hierein kommen meta-Angaben und die CSS-Style-Angaben bzw. der Verweis auf die CSS-Datei.

</head>

<body>
hierein kommen header, Navi und Content der Homepage
</body>
</html>

Sachen wie dies
Code
<center><h1>Betonwerk M&uuml;hlb&ouml;ck</h1></center>
haben im head nichts zu suchen, sondern gehören in den body.
Hier
Code
<body> 
</div>
wird ein div geschlossen, der vorher nicht geöffnet war. >>> Löschen!
Wenn du bereits eine CSS-Datei verwendest, dann solltest du konsequenter Weise auch alle Style-Angaben da rein schreiben.
Also kannst du Dinge wie dies
Code
<div style ="background-color:yellow; 
width:400px; 
height:100px; 
border:4px red solid; 
margin:10px; 
text-align:center; 
">
aus dem HTML-Teil rausnehmen und in die CSS verlagern.
Auf diese Weise solltest du deinen Quellcode nochmal sortieren. Zur Grundstruktur des Aufbaus siehe hier

Was nun die Anordnung und Positionierung innerhalb des body betrifft, sieh dir mal die Layout-Links bei den FAQ's II/2 an. Hier findest du viele Beispiele für die Anordnung der jeweiligen div's.

Zur CSS-Datei:
Hier kommen nur die Elemente mit den Style-Angaben rein, ohne "Vor- und Nachgeplänkel".
Somit musst du hier den Anfang
HTML
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="design_f&uuml;r_betonwerk.css" /> 
<style type="text/css"> 
<!--
und das Ende
Code
</style> 
</head> 
<body> 
</body> 


</html>
löschen.

Versuch mal auf diese Weise etwas Struktur reinzubekommen und melde dich danach ggf. nochmal.

In deinem Quelltext kann ich (außer bei h1 mit bg-image) keinen einzigen Bildverweis finden. Und bei h1 selbst muss wie bereits oben erwähnt in den body. Deshalb können auch keine Bilder angezeigt werden.
Alles anzeigen

werd mein bestes geben um meine fehler zu verbessern, dankeschön für die nette hilfe !

PhilippS

Also die Quelltexte hab ich jetzt nach deinen Anweisungen überarbeitet:
<html>
<head>
<title> Betonwerk Mühlböck - 5163 Palting/Mattsee </title>
<link rel="stylesheet" href="design_für_betonwerk.css" type="text/css">
</head>
<body>
<center><h1>Betonwerk Mühlböck</h1></center>
<div id="navi";>
<ul>
[*]Home
[*]Produkte
[*]Standort
[*]Geschichte
[*]Betriebsgelände
[/list]
</div>
<div id="inhalt";><font size="4">Betonwerk Anton Mühlböck</font>

5163 Palting-Mattsee </p>

Telefon: 06217/7428 </p>
</div>
</body>
</html>

#navi {
align=left;
#navi{
position: absolute;
top: 20px;
left: 20px;
width:250px;
height:400px;
margin-top:20px;
margin-left:10px;
}
#navi ul {list-style:none; }
#navi li {
background-color:yellow;
border-top:1px black solid;
border-left:25px orange solid;
border-bottom:1px red solid;
border-right:2px red solid;
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;}
body{background-color:#00C8FF; font-family:arial;margin: 20px;}
#inhalt {
margin-left: 10px;
background-color: #ffffc6;
text-align:center;}
h1{color:#FFFF00; letter-spacing:30; center; font-family:arial);
background-position:center; background-image:url("palting.jpg");}

nun gibts aber noch ein problem
beim raufladen mit limacity ins web... das design der seite ist nämlich nicht vorhanden, wenn mans durchs WWW betrachtet
wahrscheinlich stimmt irgendwas mit der verlinkung zur CSS datei nicht...
vermute ich zumindest mal! bitte um aufklärung

und ach ja wegen den bildern, die funktionieren bei mir im Web generell nicht, auch wenn ich das bg-image aus dem Head-Bereich entferne

jojo87

Mir fehlen grad leider die Möglichkeiten, codes zu testen, aber vielleicht kann ich ja trotzdem helfen.
bei #navi steht align: left.
Die angabe align: left; gibbet in css nicht. nutze mal float: left;
wegen den Bildern: so, wie dus schreibst muss das bild im selben Ordner wie die css datei liegen.
Verlinkung der css: vielleicht hilfts, wenn du der css nen einfacheren namen gibst, z.b. betonwerk.css. das ist auch suchmschinenfreundlicher.
Hoffe das hat geholfen, Gruß
jojo

sejuma

Hier sind noch zwei kleine Fehler:

Zitat

#navi {
align=left;

#navi{
position: absolute;
top: 20px;
left: 20px;
width:250px;
height:400px;
margin-top:20px;
margin-left:10px;
}

Alles anzeigen

Zitat

h1{color:#FFFF00; letter-spacing:30; center; font-family:arial);
background-position:center; background-image:url("palting.jpg");}

Rot markiertes jeweils löschen.

Falls es dann online immer noch nicht geht, könnte es daran liegen, dass die Bezeichnung deiner CSS-Datei noch Umlaute (ä,ö,ü) oder Sonderzeichen enthält. Wähle für die CSS-Datei eine Bezeichnung ohne Umlaute, ohne Sonder- und Leerzeichen und verwende durchgehend Kleinschrift. Dann den Pfad entsprechend anpassen, beides nochmal hochladen.

PhilippS

wie du sehen kannst wurde die css datei bereits umbenannt...
<link rel="stylesheet" href="betonwerk.css" type="text/css">
auch die fehler im quelltext der css wurden verbessert

#navi {
float=left;
#navi{
position: absolute;
top: 20px;
left: 20px;
width:250px;
height:400px;
margin-top:20px;
margin-left:10px;
}
#navi ul {list-style:none; }
#navi li {
background-color:yellow;
border-top:1px black solid;
border-left:25px orange solid;
border-bottom:1px red solid;
border-right:2px red solid;
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;}
body{background-color:#00C8FF; font-family:arial;margin: 20px;}
#inhalt {
position: absolute;
top:87px;
left:300px;
heigth:600px;
width:600px;
background-color: #ffffc6;
text-align:center;}
h1{color:#FFFF00; letter-spacing:30; center; font-family:arial;
background-position:center; background-image:url("palting.jpg");}
hier nochmal der link zum webspace damit ihr euch davon überzeugen könnt, dass das design wirklich nicht vorhanden ist

http://philipp02.lima-city.de/index.html

sejuma

Die Datei "betonwerk.css" ist auf deinem Server nicht vorhanden.
Zumindest nicht im gleichen Ordner wie die "index.html".
Prüf das nochmal nach, dann sollte es auch klappen.

jojo87

und hier

Code

#navi {
float=left;

fehlt ne schliessende Klammer

Tags