nicht angemeldet
Internetbrowser zeigt alles anders an
0 0 1
0 HTML5 Grundgerüst
Internetbrowser zeigt alles anders an
Gunnar Bittersmann
Matthias ApselGuten Tag,
Ich habe ein Problem. Ich arbeite zur Zeit mit PsPad und nutze auch den internen Browser von PsPad.
In PsPad sieht alles schön und gut aus,aber sobald ich die Seite in z.B. Firefox öffne sieht alles anders aus verschoben etc.
Hier sieht man den Browser im PsPad
Und hier sieht man den Firefox Browser
Woran liegt das? Und wie kann ich das ändern?
Habe euch mal den Code auch reinkopiert! Vielleicht kann mir jemand den Fehler sagen
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="formatindex.css" />
<meta chraset="UTF-8">
<title> Willkommen auf der Startseite des BKWI </title>
<link href="bilder/favicon.ico" rel="shortcut icon">
</head>
<body>
<div class="titel">
<img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" />
</div>
<div class="navioben">
<a href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/></a>
<a href="schulplan.html">Schulplan</a>
<a href="anmeldeformular.html">Anmeldeformular</a>
<a href="kontakt.html">Kontakt</a>
</div>
<div class="navilinks">
</div>
<div class="inhalt">
<div class="mitte">
<img src="bilder/bkwi.png" alt="BKWI" width="400" height="200" />
<h1> Berufskolleg Wirtschaftsinformatik </h1>
<h2> Eine Schulart der <a href="www.ks-bb.de">Kaufmännischen Schule</a> in Böblingen</h2>
</div>
<p>Zweijährige Schulart, die auf ein kaufmännisch orientiertes Tätigkeitsfeld in IT-Berufen vorbereitet .</p>
<p>Die Ausbildung vermittelt fachtheoretische und fachpraktische Kenntnisse. Sie soll die Absolventen befähigen,</p>
<p>kaufmännische und verwaltende Tätigkeiten in informationstechnologisch geprägten Aufgabenfeldern zu bewältigen,</p>
und die Chancen auf einen Ausbildungsplatz in IT-Berufen verbessern
</div>
<div class="navirechts">
<br /><br /><br />
<div class="mitte">
<a href="schulplan.html"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a>
<a href="schulplan.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a>
<a href="schulplan.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a>
</div>
</body>
</html>
Und hier der CSS-Code
body
{
font-size: 12pt;
color: black;
background-color: #FFFFFF;
font-family: verdana;
/* cursor: url(bilder/cat.ani), progress; */
}
h1
{
font-size: 16pt;
}
h2
{
font-size: 14pt;
}
h3
{
font-size: 14pt;
color: #0066FF;
}
h4
{
font-size: 13pt;
}
h5 {
background-color: darkred;
color: FFFFFF;
padding: 8px;
}
a:link
{
text-decoration: none;
color: #C0C0C0;
text-underline: none;
font-size: 18pt;
}
a:active
{
text-decoration: none;
text-underline: none;
color: #C0C0C0;
}
a:visited
{
text-decoration: none;
text-underline: none;
color: #C0C0C0;
}
a:hover
{
cursor: url(bilder/finger.cur), progress;;
}
/* Nicht mehr wichtig da a:hover
.mauszeiger
body, a:hover {cursor: url(bilder/mittelfinger.cur), progress;} */
/* a.Tabelle ist die Klasse für die Tabelle */
a.tabelle:link
{
text-decoration: none;
text-underline: none;
}
a.tabelle:active
{
text-decoration: none;
text-underline: none;
}
a.tabelle:visited
{
text-decoration: none;
text-underline: none;
}
a.tabelle:hover
{
cursor: url(bilder/finger.cur), progress;
}
/* a.links ist die Klasse für die Navi links */
a.links:link
{
text-decoration: none;
text-underline: none;
}
a.links:active
{
text-decoration: none;
text-underline: none;
}
a.links:visited
{
text-decoration: none;
text-underline: none;
}
a.links:hover
{
cursor: url(bilder/finger.cur), progress;
background-color: #C0C0C0;
}
ul
{
list-style-type: circle;
}
.mitte
{
text-align:center;
}
.rechts
{
text-align:right;
}
table
{
width: 85%;
border-width: 3pt;
border-style: solid;
border-color: #000000;
background-color: #C0C0C0;
}
th
{
background-color: #99FFFF;
}
td
{
border-width: 1pt;
border-style: solid;
border-color: #000000;
}
.spalte1
{
background-color: #C0C0C0;
width: 15%;
}
.farbe1
{
background-color: #99CCFF;
}
.farbe2
{
background-color: #FFFF00;
}
.farbe3
{
background-color: #FFFFFF;
}
.farbe4
{
background-color: #FF0000;
}
.farbe5
{
background-color: #00CC00;
}
.farbe6
{
background-color: #FF00FF;
}
.farbe7
{
background-color: #FFCCFF;
}
.farbe8
{
background-color: #800080;
}
.farbe9
{
background-color: #FFCC00;
}
.titel
{
width: 1300px;
height: 100px;
background-color: #FFFFFF;
}
}
.navioben
{
width: 1300px;
height: 45px;
background-color: #494949;
color: #D2D2D2;
padding-bottom: 15px;
padding-top: 15px;
}
.navilinks
{
width: 150px;
height: 1000px;
background-color: #E0E0E0;
color: #000000;
float: left;
}
.inhalt
{
text-algin: left;
width: 950px;
height: 1000px;
background-color: #FFFFFF;
overflow: auto;
float: left;
margin: 5px;
}
.navirechts
{
width: 200px;
height: 1000px;
background-color: #FFFFFF;
color: #000000;
}
-
Hallo,
als erstes solltes du ein gültiges html markup haben. Deinem Stylesheet geht es da nicht besser.
Behebe diese Fehler und schau nochmal.
Tschüss, O.D.
-
als erstes solltes du ein gültiges html markup haben. Deinem Stylesheet
Ich bin Neuling in den Sachen. Wir lernen das so in der Schule. Was meinst du damit? Was ist ein Markup?Habe auf den Link geklickt,aber was bringt mir das jetzt weiter? ( Tut mir leid,wenn meine Frage dämlich klingt,aber bin Neuling und habe keine Plan von sowas etc. )
-
Hallo,
Ich bin Neuling in den Sachen.
Waren wir alle einmal.
Wir lernen das so in der Schule.
Nicht förderlich, wenn euch die Materie falsch gelehrt wird.
Was meinst du damit? Was ist ein Markup?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>aussagekräftiger Titel der Seite</title> </head> <body> <!-- Sichtbarer Dokumentinhalt im body --> <p>Sehen Sie sich den Quellcode dieser Seite an.<br> (Kontextmenu: Seitenquelltext anzeigen)</p> </body> </html>Das alles ist "ein" Markup. html heißt: Hypertext Markup Language. Bedeutet html ist eine Auszeichnungssprache.
Lies bitte hier: klick
Habe auf den Link geklickt,aber was bringt mir das jetzt weiter?
Dort kannst du das Markup deiner Seite auf Fehler überprüfen lassen. Du wünscht das Browser deine Seite korrekt darstellen? Dann biete ihnen das richtige Markup an.
Tschüss, O.D.
-
@@O.D.:
Nicht förderlich, wenn euch die Materie falsch gelehrt wird.
So ist es.
<p>Sehen Sie sich den Quellcode dieser Seite an.<br>
Besser nicht. Brr…
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
<p>Sehen Sie sich den Quellcode dieser Seite an.<br>
Besser nicht. Brr…
Das Zitat stammt aus unserem Wiki. Welches Markup wäre deiner Meinung nach korrekt? Kbd scheint mir passend zu sein.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bus und Buschwindröschen.
-
Hallo,
... Kbd
Bedeutet?
Tschüss, O.D.
-
-
@@Matthias Apsel:
Welches Markup wäre deiner Meinung nach korrekt?
Ich hätte gesagt
<p>Sehen Sie sich den Quellcode dieser Seite an. (Kontextmenu: Seitenquelltext anzeigen)</p>oder
<p> <span>Sehen Sie sich den Quellcode dieser Seite an.</span> <span>(Kontextmenu: Seitenquelltext anzeigen)</span> </p>Kbd scheint mir passend zu sein.
Da musste ich erstmal nachlesen. Ja, du hast völlig recht.
<p> Sehen Sie sich den Quellcode dieser Seite an. <kbd>Kontextmenu: Seitenquelltext anzeigen</kbd> </p>oder
<p> Sehen Sie sich den Quellcode dieser Seite an. <kbd>Kontextmenu: <kbd>Seitenquelltext anzeigen</kbd></kbd> </p>LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Ich halte <br> dort für ausreichend. Man kann sich einen abbrechen mit <span>s oder anderen mehr oder weniger passenden Elementen. Und dann noch CSS Styles für den Umbruch ... wo ein einfaches <br> doch tut was es soll.
Kein Grund ein Faß aufzumachen wenn ein weiteres Element keinen nenennswerten Mehrwert hat.
Juli
-
-
-
-
-
Guten Abend,
wenn du schon eine neue Seite aufbaust, dann solltest du diese gleich mit HTML5 umsetzten, hier ein Vorschlag, wie ich anfangen würde:
<body> <header> <img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" /> </header> <nav class="mainNav"> <ul> <li>Schulplan</li> <li>Anmeldeformular</li> <li>Kontakt</li> </ul> </nav> <main role="main"> <nav class="nav"> <ul> <li>Navigation links</li> </ul> </nav> <section> Hier kommt dein Content rein </section> <aside>Hier kommen deine Icons rein</aside> </main> <footer></footer> </body>Wenn du mehr wissen willst oder es gleich richtig anfangen willst, kannst dich ja ruhig gerne nochmals melden.
-
Guten Abend,
hier der komplette Code wie ich es wohl umsetzten würde, CSS ist an dieser Stelle keiner mit dabei:
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Willkommen auf der Startseite</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <header> <h1>Berufskolleg Wirtschaftsinformatik</h1> <img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" /> </header> <nav class="mainNav"> <img src="bilder/930.png" alt="BKWI" width="43" height="43"/> <ul> <li>Schulplan</li> <li>Anmeldeformular</li> <li>Kontakt</li> </ul> </nav> <main role="main"> <nav class="nav"> <ul> <li>Navigation links</li> </ul> </nav> <section> <h2> Berufskolleg Wirtschaftsinformatik </h2> <h3> Eine Schulart der <span class="grau">Kaufmännischen Schule</span> in Böblingen</h3> <p>Zweijährige Schulart, die auf ein kaufmännisch orientiertes Tätigkeitsfeld in IT-Berufen vorbereitet. Die Ausbildung vermittelt fachtheoretische und fachpraktische Kenntnisse. Sie soll die Absolventen befähigen, kaufmännische und verwaltende Tätigkeiten in informationstechnologisch geprägten Aufgabenfeldern zu bewältigen, und die Chancen auf einen Ausbildungsplatz in IT-Berufen verbessern</p> </section> <aside> <a href="schulplan.html"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a> <a href="schulplan.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a> <a href="schulplan.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a> </aside> </main> <footer></footer> </body> </html>Mehr Informationen zum HTML-Element:
-