estincrendibli's HTML Fragen :)

29.11.2009, 17:46

Hallo eForum;
und zwar soll das ein Thread werden, indem ich meine Probleme und Fragen zu HTML stelle

Die Sachlage ist folgende: Ich will und muss mich mit HTML beschäftigen. Hab das früher schonmal gemacht aber nur auf unterstem Level

So und beim erstellen kommen mir immer neue Fragen auf, die ich nicht mit Hilfe googles beantworten kann. Deswegen der Thread

Also Probleme zu zeit:

-Was zum Teufel sind div boxen, und wozu braucht man sie? Hab ich nirgends verständlich beantwortet bekommen.

-Und:
zum Beispiel bei dem Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-top</title>
<style type="text/css">
h1,h2,h3 { margin-top:3em; }
div.beispiel { margin-top:100px; margin-left:200px; }
</style>
</head><body>

<h1>Überschrift erster Ordnung</h1>
<div class="beispiel">
Bereich mit der Beispiel-Klasse.
<h1>Überschrift erster Ordnung</h1>
</div>

</body></html

Den hab ich in nem tut gefunden, wo es um margin und sowas geht.
meine Frage dazu: Hier ist ja das CSS teil dings mit in der Seite integriert. Macht man das nicht in nem extra dokument?

Ich hoffe man versteht was ich will

Und bedanke mich schon mal im Vorraus für eure Antworten!

LG

29.11.2009, 23:14

Zitat von estincrendibli

und zwar soll das ein Thread werden, indem ich meine Probleme und Fragen zu HTML stelle

Ich war mal so frei und habe den Thementitel entsprechend angepasst.

Zitat von estincrendibli

Also Probleme zu zeit:

-Was zum Teufel sind div boxen, und wozu braucht man sie? Hab ich nirgends verständlich beantwortet bekommen.

Eine Div-Element ist zur Gruppierung gedacht. Das ist einfach eine Box, die keinerlei Bedeutung hat - alle anderen HTML-Elemente, bis auf Span, haben eine Bedeutung, die sie transportieren. Mit einem Div-Element kann man eine Internetseite grob strukturieren: Kopfbereich, Navigation, Inhalt, Fußbereich. Diese einzelnen Boxen kann man dann sehr einfach mit Style-Angaben ausrichten.
Ein Span-Element ist so ähnlich - es transportiert auch keine Bedeutung. Bloß ist ein Span-Element ein Inline-Element und ein Div-Element ein Block-Element.

Zitat von estincrendibli

meine Frage dazu: Hier ist ja das CSS teil dings mit in der Seite integriert. Macht man das nicht in nem extra dokument?

In Beispielcodes ist es oftmals so, dass man die Style-Angaben in das HTML-Dokument integriert, damit man nur einen Beispielcode hat. Bei normalen Internetseiten ist es sinnvoller die Style-Angaben in eine extra *.css-Datei auszulagern. Das hat mehrere Vorteile:

Man hat eine zentrale Datei mit den Style-Angaben. Wenn man das Design ändern will, dann muss man nur diese eine Datei bearbeiten.
Die Style-Angaben müssen nicht jedes mal mitgeladen werden, sondern bleiben im Cache des Browsers. Somit können die weiteren Seiten schneller geladen werden.
Man kann mehrere StyleSheets erstellen, um eine Datei unterschiedlich aussehen zu lassen. Damit kann man z.B. Drucker-, Handy- und ein normales Stylesheet anbieten.
Das Dokument ist barrierefreier, da man als Benutzer die Webseite nach seinen Wünschen (um-)stylen kann.

30.11.2009, 13:42

OK Super Danke für die Erklärung, und die Anpassung

Ich melde mich dann wenn es wieder Probleme gibt

LG

30.11.2009, 17:47

Hallo,

wird eigentlich wen ich den Beitrag editiere er als neu angezeigt?
Zum Thema:

wie kann ich nun den Link (also das Bild) dahin setzten wo ich es hin haben will? Also das ist jetzt bei mir links oben am Rand.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Bionik</title>
<style type="text/css">
body
{
background-image:url(/Users/marcellindner/Desktop/Untitled.jpg);
background-repeat:no-repeat;
background-position:350px 50px;
}

#Button
{ width:370pxpx; height:25px; }

</style>
</head>
<body style="width: 242px;">
<br>
<br>
<a href="Seite%202%20test.html"><img
src="/Users/marcellindner/Desktop/Button%202.png" alt=""></a>
<br>
<br>
</body>
</html>

LG

30.11.2009, 18:15

Hi,

vielleicht hilft dir das:

SELFHTML: Navigationshilfen / Suche

weiter. Enteder scrollen oder auf CSS klicken

Die Seite Selfhtml find ich übrigens genial, jedenfalls für Anfänger. Die gab es vor über 10 Jahren schon und wird immer weiter entwickelt. Eigentlich findest du dort alles was du brauchst - und fast alles mit Beispiel.

LG

30.11.2009, 18:56

Okay danke

01.12.2009, 16:58

CSS4you ist auch sehr gut wenn es um CSS spezifische Fragen geht

CSS 4 You - The Finest in Stylesheets

LG
Sméagol

01.12.2009, 16:59

Danke, da treib ich mich sowiso schon rum

23.12.2009, 14:45

Hi Leute

Bionik

wie bekomme ich die beiden CSS elemente hin?

Hier der CSS Quelltext:

.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
left:200;
top:100px;
width:800px;
height:700px;
position:absolute;

}

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
left:415;
top:10px;
width:420px;
height:130px;
position:absolute;

}

Danke schonmal im Vorraus :
LG und Frohe Weihnachten

23.12.2009, 14:49

Zitat von estincrendibli

wie bekomme ich die beiden CSS elemente hin?

sorry aber irgendwie versteh ich die Frage jetzt nicht!?

23.12.2009, 14:50

sorry da fehlt das Wort zentriert^^

LG

23.12.2009, 14:53

margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Also mit "margin: 0 auto;" wird das ganze Horizontal Zentiert
mit "margin: auto 0;" wird das ganze Vertikal Zentiert

Gruß
Sméagol

#Edit: Immer ausgehend vom Parent-Element!!

23.12.2009, 15:14

Hallo,
danke erstmal,
aber iregendwie funktioniert das immernoch nicht so wie ich das will^^

hier nochmal der css code

.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
left:200;
top:100px;
width:800px;
height:700px;
position:absolute;
margin: auto 0;
margin: 0 auto;
}

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
left:415;
top:10px;
width:420px;
height:130px;
position:absolute;
margin: auto 0;
margin: 0 auto;

}

23.12.2009, 15:17

Zitat von estincrendibli

aber iregendwie funktioniert das immernoch nicht so wie ich das will^^

Die Roten Zeilen Löschen und die Orangnen Zeilen überarbeiten...

dann sollte das ganze Zentiert sein^^

.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
left:200;
top:100px;
width:800px;
height:700px;
position:absolute;
margin: auto;
margin: 0 auto;
}

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
left:415;
top:10px;
width:420px;
height:130px;
position:absolute;
margin: auto;
margin: 0 auto;

}

#Edit:
Nur hast du dann das Problem das Beides Centered ist also höchstwahrscheinlich nicht über/untereinander ist...

23.12.2009, 15:25

Sodale
hab alles bearbeitet wie dus gesagt hast:

.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
width:800px;
height:700px;
margin: auto;

}

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:130px;
margin: auto;

}

und das Ergebnis:
Bionik

LG

((edit: hat sich erledigt Klappt nun alles

Danke bis hierhin

23.12.2009, 16:07

So nächstes problem:

möchte eine Navileiste zwischen Banner und Hauptinhalt einfügen.

(Bionik)

So hier ist der aktuelle CSS code:

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:130px;
margin: auto;

}

.navileiste {
background-image:url(../Bilder/navileiste.png);
background-repeat:no-repeat;
width:700px;
height:500px;
margin: auto;

}
.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
width:800px;
height:700px;
margin: auto;

}

Kann mir jemand sagen, warum die Navileiste nicht angezeigt wird?

LG

23.12.2009, 16:18

Zitat von estincrendibli

Kann mir jemand sagen, warum die Navileiste nicht angezeigt wird?

Jo

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css"
href="../scripts/CSS_SHEET.css" />
</head>
<body>

<div class="banner" align="center">
</div>

<div align="center" class="hintergrund">
</div>
</body>
</html>

wo ist dein Navi Leiste im HMTL code?

LG
Sméagol

23.12.2009, 16:20

ich bin doof

Ich hab vergessen das HTML Dokument zu speichern- Danke

06.01.2010, 15:48

Hey, hab wieder ein Problem

ich möchte dass der Button "Lilienthal" neben den Button 1 (Da Vinci) erscheint Quasi als Navileiste.

hier der Link
Bionik

und der HTML Code

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css"
href="../scripts/CSS_SHEET.css" />
</head>
<body bgcolor=#000000>

<div class="banner" align="center">
</div>

<div class="Button1">
</div>

<div align="center" class="hintergrund">
</div>
<div align=center class="button.lilienthal">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png"></a>

</div>

</body>

</html>

CSS code

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:160px;
margin: auto;

}

.Button1 {
background-image:url(../Bilder/button2.png);
background-repeat:no-repeat;
width:700px;
height:65px;
margin: auto;

}
.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
width:800px;
height:670px;
margin: auto;

}

.button.lilienthal {

width:700px;
height:65px;
margin: auto;

}

Bin für jede Hilfe dankbar

LG macDonald

06.01.2010, 16:00

versuchs mal mit ner html-code änderung

ca.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css"
href="../scripts/CSS_SHEET.css" />
</head>
<body bgcolor=#000000>

<div class="banner" align="center">
</div>

<div class="Button1">
</div>
<div align=center class="button.lilienthal">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png"></a>

</div>
<div align="center" class="hintergrund">
</div>

</body>

</html>

Könnte passieren das es dann Problemchen mit der horizontalen Ausrichtung gibt aber erst mal so testen

Gruß
Sméagol

06.01.2010, 16:04

Jo Danke schonmal schaumal wie es jetzt aussieht hab das geändert was du gesagt hast.
Bionik
LG

06.01.2010, 16:15

<div align=center class="button.lilienthal">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png"></a>

</div>

Versuch's mal ohne des align

dann schaut das ganze glaub ich mal besser aus

Außerdem müsstest du vill mal testen den ersten Button auf <img [...]></img> umzubauen

damit das ganze gleichmäßig bleibt...

LG

#Edit Versuch's mal damit

HTML:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css" href="../scripts/CSS_SHEET.css" />
</head>
<body bgcolor=#000000>

<div class="banner" align="center">
</div>

<div class="Button1">
<img src="../Bilder/button2.png">
</div>

<div class="button.lilienthal">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png"></a>
</div>

<div align="center" class="hintergrund">
</div>

</body>
</html>

CSS:

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:160px;
margin: auto;

}

.Button1 {
width:700px;
height:65px;
margin: auto;

}
.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
width:800px;
height:670px;
margin: auto;

}

.button.lilienthal {

width:700px;
height:65px;
margin: auto;

}

06.01.2010, 16:21

Hmm und wie bekomm ich das jetzt ca. in die Mitte der Seite aber neben das D Vinci?!

LG

06.01.2010, 16:32

Die beiden sollten ca. nebeneinander sein dank Margin Auto nur müsstest das jetzt anpassen das es nicht mehr untereinander ist.

Also sieht das ganze im CSS dann so (o.ä.) aus:

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:160px;
margin: auto;
}

.Button1 {
background-image:url(../Bilder/button2.png);
background-repeat:no-repeat;
width:700px;
height:65px;
margin: auto, 5px;

}
.hintergrund {
background-image:url(../Bilder/fertig_BG.png);
background-repeat:no-repeat;
width:800px;
height:670px;
margin: auto;

}

.button.lilienthal {

width:700px;
height:65px;
margin: auto, 5px;

}

bin mir aber nicht ganz sicher^^

06.01.2010, 16:36

Hmm jetzt sind beide untereinander, danke trotzdem für deine Mühe

06.01.2010, 16:57

.banner {
background-image:url(../Bilder/banner.png);
background-repeat:no-repeat;
width:420px;
height:160px;
margin: auto;
}

.buttons {
height: 65px;
}

.hintergrund {
background-image: url(../Bilder/fertig_BG.png);
background-repeat: no-repeat;
width: 800px;
height: 670px;
margin: auto;
}

.navi {
margin: auto;
width: 700px;
}

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css" href="../scripts/CSS_SHEET.css" />
</head>
<body bgcolor=#000000>
<div class="banner" align="center">
</div>
<div class="navi">
<img src="../Bilder/button2.png" class="buttons">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png" class="buttons"></a>
</div>
<div align="center" class="hintergrund">
</div>
</body>
</html>

so geht's

LG
Sméagol

06.01.2010, 17:07

Hallo,
danke schonmal bis hierhin.

Allerdings seh ich nicht genau durch was du gemacht hast

Also das button 1 hast du irgendwie ganz rausgenommen dafür unter buttons wieder reingenommen oder?!

Und in die div navi haste eine weiter div buttons gemacht oder?
und ich möchte ja dann insgesamt 4 Buttons in der oberen Leiste Da Vinci Lilienthal und Gebrüder Wright und Home. Wo kann ich die dann hinzufügen?

LG und ein Platz im impressum ist dir sicher

06.01.2010, 18:46

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Bionik</title>
<link rel="stylesheet" type="text/css" href="../scripts/CSS_SHEET.css" />
</head>
<body bgcolor=#000000>
<div class="banner" align="center">
</div>
<div class="navi">
<img src="../Bilder/button2.png" class="buttons"> 
<!-- Das ist ein Button mit Link

--><a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png" class="buttons"></a> 
</div>
<div align="center" class="hintergrund">
</div>

</body>
</html>

<div class="navi">
<img src="......" class="buttons">
</div>

Du musst einfach ein Bild ("<img src="....." class="buttons">") einfügen...
in dem DIV Navi.

und schon hast du einen weiteren Button

LG
Sméagol

PS: was ist wenn ich gar nicht ins Imp will?

06.01.2010, 19:02

Ok das hab ich jetzt verstanden- Danke

Aber was macht jetzt der Javascript code darunter???

LG
PS: du musst wollen

06.01.2010, 19:05

Zitat von estincrendibli

Aber was macht jetzt der Javascript code darunter???

Das war Copy & Paste BUG

LG
Sméagol

06.01.2010, 19:10

Dacht ich mir schon -OK

06.01.2010, 20:56

Das ist gar keine schöne Lösung. Das sieht jetzt zwar so aus, wie du das wolltest, ist aber kein sinnvolles HTML. Bei HTML geht es darum den Inhalt bestmöglich mit HTML-Elementen auszuzeichnen. Z.B. schreibt man: das ist eine Tabelle, das ist eine Liste, das ist ein Textabsatz, das ist ein Bild, usw.. Generell sollte man erst den HTML-Quellcode schreiben (die Inhalte bestmöglich mit HTML-Elementen auszeichnen) und danach erst das Design erstellen (mithilfe von CSS).

Eine Navigation ist eine unsortierte Liste (das HTML-Element ul). Dieses Element solltest du auch nutzen, wenn du eine Navigation erstellst. Danach kannst du es immer noch "umstylen".
Bei CSS gibt es auch Individualformate, die man über IDs erstellt. Diese Designangaben gelten dann nur für ein Element. Du benutzt immer Klassen. Die dienen dazu gleiche Teile gleich zu designen.

07.01.2010, 16:09

Hallo Spyx,

es mag ja alles richtig sein, was du sagst, aber ich beschäftige mich nicht freiwillig mit html.
Und da bin ich zufrieden wenn das so aussieht wie ich das will

Das ist nix gegen dich, ich weiß du meinst es gut!

LG

PS: ein Kumpel von mir der geht genauso an die Sache ran, und er macht ds hobbymäßig

20.01.2010, 14:28

Hallo,

hab mal wieder me Frage

Finde den Fehler^^

warum zeigt der mir die Schrift auf der Home Seite nicht in der Schriftgröße 18 an?
Link: Bionik
HTML Code:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Bionik</title>

<link rel="stylesheet" type="text/css" href="../scripts/CSS_SHEET.css" />
</head>

<body bgcolor=#000000>
<div class="banner" align="center">
</div>

<div class="navi">
<img src="../Bilder/button2.png" class="buttons">
<a href="lilienthal.html"><img src="../Bilder/lilienthalbutton.png" class="buttons"></a>
</div>
<div align="center" class="hintergrund">
<br>
<br>
<br>
<br>
<FONT COLOR="#ffffff" SIZE="18">Herzlich Wilkommen auf der Homepage ueber die Anfaenge des fliegens.
</FONT></div>

</body>
</html>

edit:// Habs selber gelöst!
Ich hab gefunden dass das von 1-7 ist und net die normalen Schriftgröpen wir bei pages...

06.02.2010, 10:45

Hallo bzw, Guten Morgen

hab wieder einen Fehler im Quellcode.

Warum wird die Grafik "button2.png"

nicht angezeigt?

Seite:
Bionik
und Quelltext:

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Bionik</title>

<link rel="stylesheet" type="text/css" href="../scripts/CSS_SHEET.css" />
</head>

<body bgcolor=#000000>
<a href="HTML_INDEX.html">
<div class="banner" align="center">
</div>
</a>
<div class="navi">
<a href="davinci.html"><img src="../Bilder/Button2.png" class="buttons"></a>
<a href="Lilienthal.html"><img src="../Bilder/lilienthalbutton.png" class="buttons"></a>
</div>
<div align="center" class="hintergrund">
<br>
<br>
<br>
<br>
<div align="center" class="textindex">
<FONT COLOR="#OOOOOO" size="5" face="Chalkboard,Comic Sans MS,Purisa">Herzlich Wilkommen auf der Homepage über die Anfänge des fliegens.
</FONT>
<br>
<br>
<br>
<br>
<font color="#OOOOOO" size="4" face="Chalkboard,Comic Sans MS,Purisa">Hier finden sie alle wichtigen Informationen und Lebensläufe über: <br>
<br>
<br>
<br>
<br>
<br>
<font color="00B233" face="Chalkboard,Comic Sans MS,Purisa">
<b>Leonardo Da Vinci
<br>
<br>
<br>
<br>
<a href="Lilienthal.html"><font color="00B233"><b>Otto Lilienthal</b> sowie</font></a>
<br>
<br>
<br>
<br>
die Gebrüder Wright
</b>
</font>
</font>
</div>

</body>
</html>

Danke euch =)

estincrendibli's HTML Fragen :)

estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

AW: estincrendibli's HTML Fragen :)

Ähnliche Themen

alis213`s html fragen

estincrendibli's Anzeigebild (Moderator?)

Heimnetzwerk - Fragen über Fragen