Beiträge von bärbel

bärbel · 29. Dezember 2010

die geschweiften Klammern habe ich nur im Post vergessen. Im code sieht es so aus:

Code

html, body,
{
    font: 100% Arial, Helvetica, sans-serif;
    border-style:solid;
    border-left-width:100px;
    border-left-color: #808080;
    border-right-width:75px;
    border-right-color: #808080;
    border-top-width:5px;
    border-top-color: #808080;
    border-bottom-width:5px;
    border-bottom-color: #808080;
}
* {
  margin:0;
  padding:0;
}




#kopfbereich
{
    background:url(banner2.jpg) repeat-x left top;
  height:80px; width:970px;
    border-top-style: solid;
    border-top-width:1px;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width:3px;
}
#kopfbereich p
{
    color:white;
    font-size:2em;
    padding: 15px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#kopftext p
{
    color:black;
    font-size:2em;
    padding: 0px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#inhaltsbanner p
{
    text-indent:150px;
}
#inhaltsbanner
{
    text-indent:150px;
}




#steuerung
{
    background-color:white;
    font-size:14pt;
    font-weight:normal;
    line-height:1em;
    text-align:left;
    text-indent:150px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    margin-right:15px;
}
#inhalt p
{
    background-color: #FFFFFF;
    font-size:12pt;
    font-weight:normal;
    margin: 0em 2em 0em 150px




}
#inhalt h1, h2, h3, p, ul
{
    padding-bottom:.3em;
}
#inhalt ul
{
    padding-left:2em;
}




#inhalt dd
{
    text-indent:0px;
}
#inhalt dt
{
    text-indent:100px;
}
h1
{
    text-indent:150px;
    font-size:16pt;
    font-weight:bold;
    padding-top:0.9em;
    color:#000080;
}
h2
{
    text-indent:150px;
}




.bild
{
    float:left;
}




.untertitel
{
    text-indent:20px;
    float:left;
    color:#000080;
    font-size:10pt;
    font-weight:bold;




}
.grundtext
{
    color:black;
    font-size:12pt;
}







.copyright
{
    text-indent:150px;
    font-size:8pt;
    color: #808080;
}

Alles anzeigen

ist denn em besser, um Schriftgrössen anzugeben? oder was würdet ihr da empfehlen?

bärbel · 29. Dezember 2010

z.B.
#steuerung
font-size: 14pt;

bärbel · 29. Dezember 2010

achso, ja. das ist ja font-size, oder? das habe ich eben gemacht, aber irgendwie ist die schrift doch immer kleiner. oder verwechsel ich da was?

bärbel · 29. Dezember 2010

Danke für die schnelle Antwort.

Zitat

Nur musst du dann jedes Element selber so "biegen" wie du es brauchst, da z.B. alle Überschriften(h1, h2,...) die selbe größe bekommen,...

Ich verstehe nicht, wie ich jedes Elemten selber so "biegen" soll, wie ich es brauche. Könntest du mir dazu ein Beispiel geben?

bärbel · 29. Dezember 2010

Hallo zusammen

Ich habe für einen Verein eine Webseite erstellt und auch ins Internet gestellt. Beim Ausprobieren mit verschiedenen Browsern habe ich festgestellt, dass es bei der Anzeige grosse Unterschiede gibt. Internet Explorer zeigt die Seite so an, wie ich das will. Bei Firefox und Opera gibt es mehrere Probleme; die Schrift ist zu klein, der Rahmen, den ich um das ganze gelegt habe, wird nicht angezeigt und ein Bilderbanner wird verschoben angezeigt. Weiss jemand, woran das liegen könnte?
Dies ist der Link zur Seite: http://www.jugenderholungsheim.at

Das ist der HTML-Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Jungvolk Vorarlberg-Herzlich willkommen!</title>
    <link rel="stylesheet" type="text/css"
    media="screen" href="design.css" />
    <style type="text/css">




    </style>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




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




<body>
<div id="kopfbereich">
      <img class="bild" src="adler.jpg" border="0px" height="147px" width="147px" alt="website design" />
      <p>Jungvolk Vorarlberg</p>







</div>




<div id="inhaltsbanner">
     <img src="inhaltsbanner1.jpg" alt="Jungvolk Website Design"
      width="822px"/>
</div>




<div id="steuerung">
     <a href="index.htm">Home</a>|
     <a href="ueber-uns.htm">Über uns</a> |
     <a href="jv.htm">Was ist das JV?</a> |
     <a href="programm.htm">Programm</a> |
     <a href="kontakt.htm">Kontakt</a>  |
     <a href="berichte-und-fotos.htm">Berichte + Fotos</a> |
     <a href="links.htm">Links</a>







</div>




<div id="inhalt">




<h1>Was ist das Jungvolk?</h1>
<div class="untertitel"> Geschichte:</div>
<div class="grundtext"> <p>Das Jungvolk wurde 1974 von Grete und Beat Schindler gegr&uuml;ndet.</p></div>
   </br>
<div class="untertitel"> Wieso Jungvolk?</div>
<div class="grundtext"> <p>Das Jungvolk bietet Kindern und Jugendlichen in den Ferien und an Wochenenden spannende Abwechslung in der Natur. Das Jungvolk unterst&uuml;tzt eine positive Pers&ouml;nlichkeitsentwicklung; es werden Freundschaften f&uuml;rs Leben geschlossen, die Natur neu und anders erlebt und viele neue Erfahrungen gesammelt.</p></div>




   </br>
<div class="untertitel"> F&uuml;r wen?</div>
<div class="grundtext"> <p>F&uuml;r alle motivierten Jugendlichen von 10 bis zum vollendeten 16.Lebensjahr, die Spass haben wollen abseits von Computer und Fernseher und neue Bekanntschaften f&uuml;rs Leben schliessen wollen.</p></div>
   </br>
<div class="untertitel"> Winterlager:</div>
<div class="grundtext"> <p>In den Semesterferien veranstalten wir unser alljährliches Winterlager. Neben Schifahren und Snowboarden stehen stehen auch viele weitere tolle Dinge auf dem Plan wie zum Beispiel Winter- und Schigeländespiel.
Zur Abendgestaltung gehören lustige Spieleabende und verschiedene Wettbewerbe wie "Wer wird Schokoladär". Aber zu den absoluten Highlights gehören auf jeden Fall die Lagerdisco und die Miss - und Mister-Bürserberg Wahl. </p></div>
   </br>
<div class="untertitel"> Sommerlager:</div>
<div class="grundtext"><p>Unser Sommerlager findet zu Beginn der Sommersemesterferien statt und dauer 2 Wochen. Gleich zu Beginn gehen wir den Lageraufbau an, das Wichtigste ist hier sicherlich der Lagerturm und der Zeltaufbau, in welchen wir die ganzen zwei Wochen übernachten.
Mit dem Lagerturm können wir unsere Lagerfahne gegen "Fahnenklauer" verteidigen. Am meisten Spaß haben alle sicher am Nachmittag bei den Geländespielen. Hier gibt es das Hexengelände, Tag-Nacht, Schatzsuche, Zauberwald, Indianer Jones und die Olympischen Lagerspiele.
Auch an den Abenden haben wir es sehr lustig, je nach Wetter befinden wir uns am Zeltplatz beim Lagerfeuer oder im Heim, wo wir lustige Spieleabende haben. Ein Highlight des Lagers ist sicherlich die Lagerdisco. Je nach Begeisterung der Lagerteilnehmer, geht die Lagerdisco auch mal etwas länger.
Den krönenden Abschluss unseres Sommerlagers bildet die Abschlussfeier. Hier werden je nach vollbrachten Leistungen, Leistungsabzeichen verteilt. Mit schönen Erinnerungen und der ein oder anderen Medaille muss man dann nach den zwei Wochen leider wieder nach Hause. ABER, man kann ja beim nächsten Lager schon wieder dabei sein!</p></div>
   </br>
<div class="untertitel"> Waldl&auml;uferlager:</div>
<div class="grundtext"> <p>Das Waldl&auml;uferlager findet am letzten Sommerferienwochenende im September unter freiem Himmel an der Bregenzer Ache statt. Auf dem Programm stehen Biwakieren, Grillen auf dem offenen Feuer, Orientierungsl&auml;ufe, Ironman/ Ironwoman, &Uuml;berlebenstraining und vieles mehr.</p></div>




</div>
<hr />
<div class="copyright">Copyright 2010, Jungvolk Vorarlberg</div>
</body>
</html>

Alles anzeigen

und das ist design.css:

Code

html, body,
{
    font: 100% Arial, Helvetica, sans-serif;
    border-style:solid;
    border-left-width:100px;
    border-left-color: #808080;
    border-right-width:75px;
    border-right-color: #808080;
    border-top-width:5px;
    border-top-color: #808080;
    border-bottom-width:5px;
    border-bottom-color: #808080;
}
* {
  margin:0;
  padding:0;
}







#kopfbereich
{
    background:url(banner2.jpg) repeat-x left top;
  height:80px; width:970px;
    border-top-style: solid;
    border-top-width:1px;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width:3px;







}
#kopfbereich p
{
    color:white;
    font-size:2em;
    padding: 15px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#kopftext p
{
    color:black;
    font-size:2em;
    padding: 0px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#inhaltsbanner p
{
    text-indent:150px;
}
#inhaltsbanner
{
    text-indent:150px;
}




#steuerung
{
    background-color:white;
    font-size:14pt;
    font-weight:normal;
    line-height:1em;
    text-align:left;
    text-indent:150px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    margin-right:15px;




}
#inhalt p
{
    background-color: #FFFFFF;
    font-size:12pt;
    font-weight:normal;
    margin: 0em 2em 0em 150px




}
#inhalt h1, h2, h3, p, ul
{
    padding-bottom:.3em;
}
#inhalt ul
{
    padding-left:2em;
}




#inhalt dd
{
    text-indent:0px;
}
#inhalt dt
{
    text-indent:100px;
}
h1
{
    text-indent:150px;
    font-size:16pt;
    font-weight:bold;
    padding-top:0.9em;
    color:#000080;
}
h2
{
    text-indent:150px;
}













.bild
{
    float:left;
}




.untertitel
{
    text-indent:20px;
    float:left;
    color:#000080;
    font-size:10pt;
    font-weight:bold;




}
.grundtext
{
    color:black;
    font-size:12pt;
}
.klein
{
     font-size:10pt;
     color:purple
}
table
{
    margin-left:130px;
    border:2px;
}




.copyright
{
    text-indent:150px;
    font-size:8pt;
    color: #808080;
}

Alles anzeigen

Schöne Feiertage und Danke schonmal!

Beiträge von bärbel

verschiedene Anzeigen in verschiedenen Browsern

verschiedene Anzeigen in verschiedenen Browsern

verschiedene Anzeigen in verschiedenen Browsern

verschiedene Anzeigen in verschiedenen Browsern

verschiedene Anzeigen in verschiedenen Browsern