Ergebnis 1 bis 9 von 9

Thema: Schrift in Container exakt platzieren

  1. #1
    HTML Newbie
    Registriert seit
    01.10.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Schrift in Container exakt platzieren

    Hallo,

    ich befasse mich noch neu mit CSS und komme hier einfach nicht weiter. Vielleicht kann mir jemand helfen

    Ich bekomme die Schrift Abacus einfach nicht in die Mitte des linken Containers plaziert und finde nicht woran das liegt.

    2017-10-01_102306.jpg

    Hier die CSS dazu

    Code:
    body {
    background-color:lightblue;
    width:980px;
    max-width:90%;
    margin-top:0px;
    margin:0 auto;
    }
     
    #headercont{
    width:980px;
    height:120px;
    margin-bottom:20px;
    }
    
    
    #header {
    float:left;
    text-align:center;
    height:100px;
    width:320px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    margin-top:20px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0084e2+0,61a3d8+52,0084e2+100 */
    background: rgb(0,132,226); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0,132,226,1) 0%, rgba(97,163,216,1) 52%, rgba(0,132,226,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,132,226,1) 0%,rgba(97,163,216,1) 52%,rgba(0,132,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,132,226,1) 0%,rgba(97,163,216,1) 52%,rgba(0,132,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084e2', endColorstr='#0084e2',GradientType=0 ); /* IE6-9 */
    }
    
    
    #header h1 {
    font-size:60px;
    font-weight:bold;
    color:blue;
    font-family:Verdana;
    }
    
    
    #headtextfield {
    padding-top:0;
    float:right;
    text-align:center;
    height:70px;
    width:60%;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    margin-top:0px;
    }
    
    
    #headtextfield h2 {
    font-size:30px;
    font-weight:bold;
    color:blue;
    font-family:arial;
    
    
    }
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <title>Abacus</title>
       <link rel="stylesheet" type="text/css" href="abacus.css">
    </head>
    
    
    <body>
       <div id="headercont">
          <div id="header">
             <h1>Abacus</h1>
          </div>
          <div id="headtextfield">
             <h2>Versenden Sie Faxe, SMS und Briefe schnell und einfach und telefonieren Sie sehr kostengünstig !</h2>
          </div>
       </div>
    </body>
    
    
    </html>
    Danke fuer jeden Hinweis!

    Vagabundo
    Geändert von Vagabundo (01.10.2017 um 17:32 Uhr)

  2. #2
    Interessierte/r
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    112
    Danke
    0
    Bekam 37 mal "Danke" in 37 Postings

    Standard AW: Schrift in Container exakt platzieren

    Versuche für <h1> das margin-top auf einen Wert 0px zu setzten. Dann schrittweise erhöhen, bis es passt.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. Folgende User finden die Antwort von Sailor gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    01.10.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schrift in Container exakt platzieren

    Super - danke fuer die schnelle Hilfe!

    Hat prima funktioniert!

    Vagabundo

  5. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    01.10.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schrift in Container exakt platzieren

    Hallo Sailor,

    vielleicht kannst Du mir nochmal helfen:
    Wenn ich den Browser nun schmal ziehe, wie es bei einem tablet oder einem handy ist, sollten die beiden container sich eigentlich untereinander setzen, und auch von breite her anpassen,damit man nicht scrollen muss.

    Aber das passiert leider nicht. Ich meine aber ich habe alles so gemacht, wie es in dem Online-Kurs bei youtube gezeigt wurde.

    Hast Du eine Idee, was da falsch laeuft?

    Vagabundo

  6. #5
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Schrift in Container exakt platzieren

    Hallo

    Dein HTML und CSS sind veraltet, das CSS teilweise sachlich falsch. Mit Responsive Design hat das CSS schon gar nichts zu tun.

    Da bleibt nur auf die float- und height-Angaben zu verzichten, das restliche CSS korrigieren, veraltete CSS Angaben weglassen und das Layout dann mit Flexbox neu zu erstellen.

    Ich habe mal ein Beispiel mit aktuellem HTML und CSS erstellt:

    Beispielseite

    Gruss

    MrMurphy
    Geändert von MrMurphy (02.10.2017 um 02:28 Uhr)

  7. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    01.10.2017
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schrift in Container exakt platzieren

    Hallo MrMurphy,

    danke fuer den Hinweis.

    Kennst Du eine Anleitung, wo man das so lernen kann?
    Oder wurde das mit einer Software erstellt? Wenn ja mit welcher?

    Vagabundo

    - - - Aktualisiert - - -

    Hallo MrMurphy,

    danke fuer den Hinweis.

    Kennst Du eine Anleitung, wo man das so lernen kann?
    Oder wurde das mit einer Software erstellt? Wenn ja mit welcher?

    Vagabundo

  8. #7
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Schrift in Container exakt platzieren

    Hallo

    HTML und CSS habe ich mir zunächst selbst beigebracht, dann aber gemerkt, dass mir dadurch viel Hintergrundwissen fehlte.

    Da ich keine guten kostenlosenlose Anleitungen fand habe ich mir mehrere Bücher und Videotrainings gekauft, die sinnvoll aufgebaut waren und das notwendige Hintergrundwissen enthielten und diese komplett durchgearbeitet. Dabei auch die Erstellung von barrierefreien (besser: zugänglichen) Webseiten und wie sinnvoll diese sind.

    Danach habe ich Grundlagen über auf dem gleichen Weg Design und Layout gelernt. Dabei auch, was im Web sinnvoll ist und, noch wichtiger, was nicht.

    Seitdem halte ich mich über alle Entwicklungen und deren Vor- und Nachteile auf dem Laufenden.

    Bis heute gibt es im Internet leider keine kostenlosen empfehlenswerten Anleitungen.

    "Learning by doing" funktioniert bei HTML und CSS bereits seit über 15 Jahren nicht mehr.

    Bis vor sieben, acht Jahren konnte das fehlende Hintergrundwissen noch durch Überzeugung überspielt werden.

    Seit der Einführung von Smartphones und Tablets und dem damit erforderlichen oder zumindest sinnvollen Responsive Design funktioniert das nicht mehr.

    Aktuell würde ich die Bücher und Videotrainings von Peter Müller (manchmal auch Peter M. Müller) empfehlen.

    Oder wurde das mit einer Software erstellt?
    Nein, mit einem ganz normalen Editor, in meinem Fall "Sublime Text".

    Gruss

    MrMurphy

  9. #8
    HTML Newbie
    Registriert seit
    10.10.2017
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Schrift in Container exakt platzieren

    Vielleicht kann mir jemand helfen


    หีฟิต

  10. #9
    Interessierte/r
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    112
    Danke
    0
    Bekam 37 mal "Danke" in 37 Postings

    Standard AW: Schrift in Container exakt platzieren

    Das kann bestimmt 'jemand', wenn er denn wüsste, worum es geht!
    Also bitte - erstelle einen neuen Threat, gib dem Thread eine aussagekräftige Überschrift, stelle deine Frage und beschreibe dabei dein dein Problem so genau, dass 'jemand' mit der Frage was anfangen kann!
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 01.07.2017, 17:27
  2. Zeichenstift Werkzeug: 2 (Anker-)Punkte auf exakt gliecher Höhe
    Von onlydp im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 07.04.2011, 19:12
  3. Div-Container _direkt_ untereinander platzieren (HTML, CSS)
    Von HolyMarcell im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 26.02.2007, 21:50
  4. Bild exakt teilen
    Von DornigerWeg im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 08.10.2006, 15:46
  5. Bilder exakt nebeneinander???
    Von htmli im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.07.2005, 11:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •