HTML ausrichten

  • Seite 1 von 2
31.03.2011 20:40
avatar  spectro ( gelöscht )
#1 HTML ausrichten
sp
spectro ( gelöscht )

Ich verzweifel langsam...
Vielleicht könnt ihr mir ja helfen, ich möchte einen Timer auf der linken Seite und einen Statistik Zähler auf der rechten Seite in EINER Zeile in der Fußzeile haben.
Das habe ich auch hinbekommen allerdings richtet der mir die beiden Dinge dann linksbündig (ist mehrzeilig) auf der linken und rechten Seite aus möchte es aber mittig links und rechts haben...

Wie geht das???

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<p style="float: left;"><a href="">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum 01 April 2011 / 00:00 Uhr</small>
</div>
 
<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');
 
function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}
 
function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}
 
function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a></p>
 

 
<p style="float: right;"><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></p>
<div style="clear: both"></div>
 

 


 Antworten

 Beitrag melden
31.03.2011 21:49
avatar  Olaf
#2 RE: HTML ausrichten
Ol
Mitglied

Du kannst die beiden Anzeigen in einer Tabelle setzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<table align="center">
<tr>
<td>
<a href="">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum 01 April 2011 / 00:00 Uhr</small>
</td>

<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');

function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}

function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}

function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a>

 

<td><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></td></tr></table>
<div style="clear: both">
 



Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
31.03.2011 21:54 (zuletzt bearbeitet: 31.03.2011 21:54)
avatar  spectro ( gelöscht )
#3 RE: HTML ausrichten
sp
spectro ( gelöscht )

Hallo Olaf das löst mein Problem aber noch nicht, füge meinen Code mal bei deiner Fußzeile ein dann merkst du was ich möchte!
Ich möchte die beiden einmal links und einmal rechts mittig zentriert haben und nicht links und rechts linksbündig zentriert!


 Antworten

 Beitrag melden
31.03.2011 22:01
avatar  Olaf
#4 RE: HTML ausrichten
Ol
Mitglied

Mhh,bei mir ist es zentriert mittig...

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/
Bildanhänge

 Antworten

 Beitrag melden
31.03.2011 22:07 (zuletzt bearbeitet: 31.03.2011 22:09)
avatar  spectro ( gelöscht )
#5 RE: HTML ausrichten
sp
spectro ( gelöscht )

Ah Bilder sagen mehr als tausend Worte

Der Text unter dem Countdown bzw der Statistik ist jeweils linksbündig mit der Grafik und ich möchte das die Grafik jeweils mittig über dem Text steht so wie auf meinem angehängten Foto!

Möchte es im Prinzip wie auf dem Foto haben nur das eine links und das andere rechts in EINER Zeile


 Antworten

 Beitrag melden
31.03.2011 22:24 (zuletzt bearbeitet: 31.03.2011 22:25)
avatar  Olaf
#6 RE: HTML ausrichten
Ol
Mitglied

Also die Anzeigen nebeneinander und die Schrift unter den Anzeigen mittig.Ich hoffe das ich Dich richtig verstanden habe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<table align="center">
<tr>
<td align="center">
<a href="">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum 01 April 2011 / 00:00 Uhr</small>
</td>

<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');

function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}

function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}

function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a>



<td align="center"><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></td></tr></table>
<div style="clear: both">
 



Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
31.03.2011 22:28 (zuletzt bearbeitet: 31.03.2011 22:30)
avatar  spectro ( gelöscht )
#7 RE: HTML ausrichten
sp
spectro ( gelöscht )

Fast perfekt nur möchte ich die zweite Grafik ganz rechts haben!
Bitte mit unterem Code machen weil beim anderem was falsch kopiert war von mir.
(das nun der Code von meinem Foto!)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<div style="text-align: center;">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum Saisonstart des Kuchenblechfahrers</small>
</div>
 
<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');
 
function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}
 
function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}
 
function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
 

<p></p>
 

<center><script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script></center>
 


 Antworten

 Beitrag melden
31.03.2011 22:45
avatar  Olaf
#8 RE: HTML ausrichten
Ol
Mitglied

Warum so kompliziert?
Meine Tabelle funktioniert doch.
Du wirst auch so nicht beide Anzeigen in einen "div" bekommen.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
31.03.2011 22:47 (zuletzt bearbeitet: 31.03.2011 22:53)
avatar  spectro ( gelöscht )
#9 RE: HTML ausrichten
sp
spectro ( gelöscht )

Ich möchte die aber nicht nebeneinander haben sondern eins links und eins ganz rechts.
Bei dem jetzigen Code verlinkt der immer auf meine HP bei dem linken Countdown wenn man da drüber fährt mit der Maus, das soll nicht sein!
Deswegen der ursprprüngliche Code wo dieses nicht auftritt.


 Antworten

 Beitrag melden
31.03.2011 23:00 (zuletzt bearbeitet: 31.03.2011 23:01)
avatar  spectro ( gelöscht )
#10 RE: HTML ausrichten
sp
spectro ( gelöscht )

So hab den Code nun ohne Verlinkung hinbekommen nun möchte ich nur noch den Statistik Zähler rechts in der gleichen Zeile haben...


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<table align="center">
<tr>
<td align="center">
<div style="text-align: center;">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum Saisonstart des Kuchenblechfahrers</small>
</div>
 
<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');
 
function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}
 
function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}
 
function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a>
 

<td align="center"><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></td></tr></table>
<div style="clear: both">
 
 


 Antworten

 Beitrag melden
31.03.2011 23:08
avatar  Olaf
#11 RE: HTML ausrichten
Ol
Mitglied

Das ist er doch.Rechts neben den Counter,in einer Zeile.Oder willst Du den ganz am rechten Rand haben?

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
31.03.2011 23:09 (zuletzt bearbeitet: 31.03.2011 23:12)
avatar  spectro ( gelöscht )
#12 RE: HTML ausrichten
sp
spectro ( gelöscht )

Genau ganz rechts am Rand aber ansonsten alles so lassen wie es ist, am aller schönsten wäre es wenn das linke nicht ganz links und das ganz rechte nicht ganz rechts wäre (also mit kleinem Abstand zum linken bzw. rechtem Rand) aber das wohl zu schwierig denk ich mal.


 Antworten

 Beitrag melden
01.04.2011 10:04
avatar  Olaf
#13 RE: HTML ausrichten
Ol
Mitglied

Zitat von spectro
Genau ganz rechts am Rand aber ansonsten alles so lassen wie es ist, am aller schönsten wäre es wenn das linke nicht ganz links und das ganz rechte nicht ganz rechts wäre (also mit kleinem Abstand zum linken bzw. rechtem Rand) aber das wohl zu schwierig denk ich mal.


Jetzt steig ich bei Deinen "aller schönsten" Wunsch nicht mehr durch. Vielleicht kannst Du ja mal ein Bild davon machen.

Ich habe das Script nach Deinen letzten "verständlichen" Wunsch geändert:Counter in der Mitte,Statistik nicht ganz an der rechten Seite:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<table width="100%">
<tr>
<td width="33%"></td>
<td width="33%" align="center">
<a href="">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum 01 April 2011 / 00:00 Uhr</small>
</td>

<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('April 01, 2011 00:00:00');

function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}

function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}

function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a>



<td width="33%" align="right" style="padding-right:50px"><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></td></tr></table>
<div style="clear: both">
 



Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
01.04.2011 10:44 (zuletzt bearbeitet: 01.04.2011 10:47)
avatar  spectro ( gelöscht )
#14 RE: HTML ausrichten
sp
spectro ( gelöscht )

Ich möchte die Dinger ca. da haben wo die 2 Kreuze sind, also beide gleichmäßig entfernt von links und rechts (zum ausrichten zählt immer die Grafik und nicht der Text drunter)
Habe es bisher nur so hinbekommen wie auf dem Foto das wäre auch schon ok, aber wird nicht gleichmäßig dargestellt auf verschiedenen Browsern...
Mit dem Firefox sieht es so aus wie auf dem Foto, mit IE8 verschiebt sich das ganze stark nach rechts leider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 

<table align="center">
<tr>
<td align="center">
<div style="text-align: center;">
<span id="c1" style="font: bold 30px arial; color: #299C39;"></span><br>
<span id="c2" style="font: bold 25px arial; color: #FF0000;">;</span><br>
<small>...bis zum Saisonende des Kuchenblechfahrers</small>
</div>
 
<script type='text/javascript'>
// Erstellt mit dem Countdown-Generator - Homepage-Total.de
// Die Monatsnamen bitte in englisch eintragen (Monatsname, Tag, Jahr, Uhrzeit)
var end = new Date('November 01, 2011 00:00:00');
 
function toSt2(n) {
var s = '';
if (n < 10) {
s += '0';
}
return (s + n).toString();
}
 
function toSt3(n) {
var s = '';
if (n < 10) {
s += '00';
}
else if (n < 100) {
s += '0';
}
return (s + n).toString();
}
 
function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
setTimeout('countdown()', 100);
}
}
countdown();
</script>
</a>
 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 

<td align="center"><a href="">
<script type="text/javascript" language="JavaScript"
src="http://www1.stats4free.de/counter.php?sid=1838691452"></script>
</a></td></tr></table>
<div style="clear: both">
 
 


 Antworten

 Beitrag melden
01.04.2011 10:56 (zuletzt bearbeitet: 01.04.2011 10:56)
avatar  mihca02
#15 RE: HTML ausrichten
mi
Mitglied

mit dem einfügen von "Leerzeichen" wirst du nie eine gescheite Formatierung hinbekommen.

Olaf hatte dir das table doch gescheit gedrittelt, das was du jetzt haben willst ist eine 4-spaltige Tabelle.

Du solltest dich mal eingehender mit der Formatierung und dem Layout von Tabellen beschäftigen

http://de.selfhtml.org ist eine gute Seite dafür mit anschaulichen Beipielen.

Um da weiter zu machen, was auf deinem Bild ist:

du musst eine weitere Spalte hinzufügen, die Spalten auf 25% Breite setzen, dann kommst du deinem Ziel näher.

Ein anderer Weg wäre, es alles in divs zu setzen und die Positionen der Divs anzupassen.

Grüße
Achim

-------------------------------------------------------------------


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!