Balken in html/css hinbekommen?

4 Antworten

threadi
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
17.12.2020, 20:40

Zwei Elemente die jeweils die unterschiedlichen Inhalte umgeben und denen Du die unterschiedlichen Hintergründe gibst.
Woher ich das weiß:Berufserfahrung – mit dem Internet verbunden seit 1993
David618
17.12.2020, 20:42

Hier im Anhang kannst du einmal finden wie man einen Balken konstruiert und darauf wurde eine Schrift eingefügt. Mit diesen Anfang solltest du schon was gutes Designen können ;)

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

.container {

 width: 100%;

 background-color: #ddd;

}

.skills {

 text-align: right;

 padding-top: 10px;

 padding-bottom: 10px;

 color: white;

}

.html {width: 90%; background-color: #4CAF50;}

.css {width: 80%; background-color: #2196F3;}

.js {width: 65%; background-color: #f44336;}

.php {width: 60%; background-color: #808080;}

</style>

</head>

<body>

<h1>My Skills</h1>

<p>HTML</p>

<div class="container">

 <div class="skills html">90%</div>

</div>

<p>CSS</p>

<div class="container">

 <div class="skills css">80%</div>

</div>

<p>JavaScript</p>

<div class="container">

 <div class="skills js">65%</div>

</div>

<p>PHP</p>

<div class="container">

 <div class="skills php">60%</div>

</div>

</body>

</html>
ImmerVergeben 
Fragesteller
 17.12.2020, 20:43

Danke. Habs auch so ungefähr jetzt gelöst

1
Christoph987
17.12.2020, 20:44 
<div style="background-color:#000000; color:#FFFFFF;">Inhalt</div>

Ggf. noch margin vom body anpassen. Mit Firefox kannst du die Elemente auch mit Rechtsklick untersuchen und dir die Position und Abstände anzeigen lassen.
Woher ich das weiß:Studium / Ausbildung – Abgeschlossenes Informatik-Studium