Hallo zusammen,
ich versuche gerade, mir HTML beizubringen, scheitere aber an einer Aufgabe.
Hier versuche ich gerade nach Vorbild der http://qlocktwo.com/ eine Seite zu erstellen.
Ich bekomme es nicht ganz hin, dass ich an jeder Ecke einen Punkt positioniere, der auch dort bleibt, wenn sich die Browsergröße verändert.
Hier mal mein Code:
Die CSS:
So sieht es jetzt gerade aus. Aber die Punkte an den Ecken verschieben sich, wenn die Browsergröße angepasst wird.
Danke vorab
ich versuche gerade, mir HTML beizubringen, scheitere aber an einer Aufgabe.
Hier versuche ich gerade nach Vorbild der http://qlocktwo.com/ eine Seite zu erstellen.
Ich bekomme es nicht ganz hin, dass ich an jeder Ecke einen Punkt positioniere, der auch dort bleibt, wenn sich die Browsergröße verändert.
Hier mal mein Code:
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Word Clock</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="word">
<div class="minutes">
<span class="m1">.</span>
<span class="m2">.</span>
<span class="m3">.</span>
<span class="m4">.</span>
<div class="letter">
<span class="on">IT</span>L<span class="on">IS</span>AS<span class="am">AM</span><span class="pm">PM</span><br>
AC<span class="quarter">QUARTER</span>DC<br>
<span class="twenty">TWENTY</span><span class="five_m">FIVE</span>X<br>
<span class="half">HALF</span>B<span class="ten_m">TEN</span>F<span class="to">TO</span><br>
<span class="past">PAST</span>ERU<span class="nine">NINE</span><br>
<span class="one">ONE</span><span class="six">SIX</span><span class="three">THREE</span><br>
<span class="four">FOUR</span><span class="five_h">FIVE</span><span class="two">TWO</span><br>
<span class="eight">EIGHT</span><span class="eleven">ELEVEN</span><br>
<span class="seven">SEVEN</span><span class="twelve">TWELVE</span><br>
<span class="ten">TEN</span>S<span class="oclock">O'CLOCK</span>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
HTML:
@charset "utf-8";
body {
background-color: #212121;
display: flex;
align-items: center;
justify-content: center;
}
#word{
background-color: black;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: grey;
font: 30px'Inconsolata', 'Courier';
letter-spacing: 20px;
padding: 50px;
margin: 50px 400px;
text-align: center;
}
.letter{
margin: 25px;
background-color: black;
padding: 50px;
}
.on{
color: #EEE;
}
.m1{
position:absolute;
font-size: 50px;
top: 75px;
left: 450px;
}
.m2{
position:absolute;
font-size: 50px;
top: 75px;
right: 450px;
}
.m3{
position:absolute;
font-size: 50px;
bottom: 150px;
right: 450px;
}
.m4{
position:absolute;
font-size: 50px;
bottom: 150px;
left: 450px;
}So sieht es jetzt gerade aus. Aber die Punkte an den Ecken verschieben sich, wenn die Browsergröße angepasst wird.
Danke vorab
