Schrift in Container exakt platzieren

Vagabundo

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.

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;




}

Alles anzeigen

HTML

<!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>

Alles anzeigen

Danke fuer jeden Hinweis!

Vagabundo

Sailor

Versuche für <h1> das margin-top auf einen Wert 0px zu setzten. Dann schrittweise erhöhen, bis es passt.

Vagabundo

Super - danke fuer die schnelle Hilfe!

Hat prima funktioniert!

Vagabundo

Vagabundo

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

MrMurphy

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

Vagabundo

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

MrMurphy

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.

Zitat

Oder wurde das mit einer Software erstellt?

Nein, mit einem ganz normalen Editor, in meinem Fall "Sublime Text".

Gruss

MrMurphy

phallyka

Vielleicht kann mir jemand helfen

หีฟิต

Sailor

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!

Tags