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

Problem mit Überschrift

Link18

Neues Mitglied
Hallo,
vorab ich bin sozusagen ein Frischling was HTML angeht.
Weiß auch nicht genau ob diese Frage hier reingehört.

Ich hoffe meine Erklärung/Darstellung reicht aus und Ihr versteht wo mein Problem ist.
Ich habe von einem Kumpel ein HTML-Gerüst bekommen, um für meine Mutter eine HP zu basteln.
Mein Problem ist jetzt:
Als erstes oben auf der HP ist ein Blümchen, dahinter soll der Firmen Name meiner Mutter stehen. Im HTML steht dann

Code:
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
  <div id="header" style="width: 760; height: 100">
              <h1><font face="Arial">Paul Mustermann</font></h1>
  </div>
  <div id="menu">
              <ul>
                          <li class="first"><a href="#">Home</a></li>
                          <li><a href="#">Beratung</a></li>
                          <li><a href="#">Behandlung</a></li>
                          <li><a href="#">Kontakt</a></li>
                          <li><a href="#">Anfahrt</a></li>

So, aber dieses Paul Mustermann wird nur "klein" geschrieben.
Ich hab auch schon versucht das "h1" zu ändern, aber dann ist die Blume davor weg. Ich finde diese "blume" auch nicht als definitive Bezeichnung im "Gerüst".
Hat jemand eine Idee bzw. Lösung wie ich die Blume behalten kann und das "Paul Mustermann" ganz normal mit großen Anfangsbuchstaben einbetten kann.
Vielen vielen Dank
Link18
 
Zuletzt bearbeitet von einem Moderator:
Es kommt vermutlich drauf an, was so alles in der style.css steht.
Am besten mal einen Link zur Seite posten.

Hier fehlen die Einheiten ( 760px; ) und die Style-angaben solltest du auch in die CSS-Datei schreiben.
Code:
<div id="header" style="width: 760; height: 100">

Sowas gehört nicht in den HTML, sondern in den CSS-Code:
Code:
<font face="Arial">
 
Ich kann mich da nur anschließen. Man trennt HTML und CSS.
HTML:
<div id="header" style="width: 760; height: 100">
#header {
width: 760px;
height: 100px;
}

HTML:
<h1><font face="Arial">Paul Mustermann</font></h1>
h1 {
font-family: Arial;
}
 
das steht in der style.css datei


Code:
/** Common Styles */
* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    background: #393939;
    line-height: 25px;
    text-align: justify;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}

h1, h2, h3 {
    margin-top: 1.5em;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1em;
}

p, ul, ol {
    margin-top: 1.5em;
}

ul, ol {
    margin-left: 3em;
}

blockquote {
    margin-left: 3em;
    margin-right: 3em;
}

a {
    color: #CB347E;
}

/** Header Style Starts Here */

#header {
    width: 800px;
    height: 100px;
    margin: 0 auto;
    padding: 0;
}

#header h1 {
    margin: 0;
    background: url('images/image08.gif') no-repeat left 90%;
    text-transform: lowercase;
    font-size: 36px;
    font-weight: normal;
    color: #FFFFFF; padding-left:55px; padding-right:0; padding-top:40px; padding-bottom:10px
}

/** Menu Style Starts Here */


#menu {
    width: 760px;
    height: 43px;
    margin: 0 auto;
    background: url('images/image01.jpg') no-repeat left top;; padding-left:20px; padding-right:20px; padding-top:0; padding-bottom:0
}

#menu ul {
    margin: 0;
    list-style: none;
    padding-top: 10px;
}

#menu li {
    display: inline;
}

#menu a {
    background: url('images/image06.gif') no-repeat right 50%;
    text-decoration: none;
    color: #FFFFFF; padding-left:20px; padding-right:20px; padding-top:0; padding-bottom:0
}

#menu a:hover {
}

#menu .first a  {
    padding-left: 0;
}

/** Page Style Starts Here */

#page {
    width: 800px;
    margin: 0 auto;
    padding: 0;
    background: url('images/image05.jpg') repeat-y;
}

#page-top {
    background: url('images/image03.jpg') no-repeat left top;
}

#page-bottom {
    background: url('images/image04.jpg') no-repeat left bottom;
}

#content {
    float: right;
    width: 420px;
    padding: 40px 50px 30px 60px;
}

#content h2 {
    margin: 0;
    padding: 20px 0 10px 0;
    border-bottom: 1px dotted #CFCFCF;
    text-transform: lowercase;
    font-size: 24px;
    font-weight: normal;
}

#sidebar {
    float: left;
    width: 250px;
    padding: 20px 0 0 20px;
}

#sidebar h2 {
    margin: 0;
    padding: 20px 0 10px 0;
    border-bottom: 1px dotted #CFCFCF;
    text-transform: lowercase;
    font-size: 24px;
    font-weight: normal;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px dotted #CFCFCF;
}
/** Footer Style Starts Here */

#footer {
    width: 800px;
    height: 43px;
    margin: 0 auto;
    background: url('images/image02.jpg') no-repeat left top;; padding-left:0; padding-right:0; padding-top:0; padding-bottom:20px
}

#footer p {
    margin: 0;
    padding: 8px 0 0 0;
    text-align: center;
    font-size: 11px;
    color: #FFFFFF;
}

#footer a {
    color: #FFFFFF;
}


Könntet Ihr mir vielleicht sagen/schreiben was ich da ändern muß bzg der Großschreibung!?
Vielen Dank

Mod-Edit: Code-Tags editiert - Beim nächsten Mal bitte dran denken (Auch wenns langsam sinnlos wird...) (XraYSoLo)
 
Zuletzt bearbeitet von einem Moderator:
das steht in der style.css datei


Code:
#header h1 {
    margin: 0;
    background: url('images/image08.gif') no-repeat left 90%;
    text-transform: lowercase;
    font-size: 36px;
    font-weight: normal;
    color: #FFFFFF; padding-left:55px; padding-right:0; padding-top:40px; padding-bottom:10px
}
Könntet Ihr mir vielleicht sagen/schreiben was ich da ändern muß bzg der Großschreibung!?
Vielen Dank

Hallo,

entferne die Zeile text-transform: lowercase;, dann wird Deine Überschrift so geschrieben, wie sie in der HTML-Datei steht...

Weitere Informationen zu CSS findest Du auf CSS4you

Grüße
Bernhard
 
Zurück
Oben