2x css probleme bei webseite

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

09.12.2010 - 01:38

Ich seh da keinen Facebook Link...

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1256

09.12.2010 - 10:39

jetzt sind auch die grafiken zu sehen

AbSailer

boo hoo wendy

Registered: Aug 2002
Location: Linz/Stmk
Posts: 1160

09.12.2010 - 11:23

funzt ja alles

nur beim Footer, in der letzten box, brauchst nicht wirklich eine Tabelle für den IMPRESSUM-Link, reicht wenn dein link in der Box steht.

probiers einfach mal aus, Tabellendesign sollte nach Möglichkeit auf jeden Fall vermieden werden, und wenn man's zumindest ein bisschen beherrscht kann man damit besser umsetzen/gestalten als mit Tabellen

MfG

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1256

09.12.2010 - 12:32

Zitat von AbSailer
funzt ja alles

Naja.. fast!

Ich hätt jetzt halt noch gerne, dass zwischen den Logos und dem Impressum nur
wenige Pixel Abstand sind und dass die Grafiken vertikal zentriert sind!

Dann bin ich glücklich!

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

09.12.2010 - 12:47

Zitat von slateSC
Naja.. fast!

Ich hätt jetzt halt noch gerne, dass zwischen den Logos und dem Impressum nur
wenige Pixel Abstand sind und dass die Grafiken vertikal zentriert sind!

Dann bin ich glücklich!

In dem Fall wäre es imho am einfachsten folgendes

Code: PHP

<div id="footer">
<div id="pos_footext">
<div class="box">
<a href="http://www.facebook.com/pages/Metaphor-Motions/139939086031027" target="_blank">
<img src="/templates/metaphor-motions/layout/fb.gif" border="0" width="20" height="20" alt="FB" /></a>
<!-- hier grafik soundso -->
</div>
<div class="box">
<a href="http://www.youtube.com/user/METAPHORMOTIONS" target="_blank">
<img src="/templates/metaphor-motions/layout/youtube.gif" border="0" width="53" height="20" alt="YT" />
<!-- hier grafik soundso -->
</div>
<div class="box"><table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><a href="/impressum" class="mainlevel" >IMPRESSUM</a></td></tr></table>

<!-- noch eine Box für impressum -->
</div>
</div><!-- #pos_footext ends -->
</div><!-- #footer ends -->

in

Code: PHP

<div id="footer">
	<a href="http://www.facebook.com/pages/Metaphor-Motions/139939086031027" target="_blank">
		<img src="/templates/metaphor-motions/layout/fb.gif" border="0" width="20" height="20" alt="FB" />
	</a>
	<a href="http://www.youtube.com/user/METAPHORMOTIONS" target="_blank">
		<img src="/templates/metaphor-motions/layout/youtube.gif" border="0" width="53" height="20" alt="YT" />
	</a>
	<a href="/impressum" class="mainlevel" >IMPRESSUM</a>
</div>

umzuwandeln und im CSS für #footer text-align:right; vertical-align:middle; definieren und dann natürlich noch margins und paddings nach belieben für #footer und dessen Inhalte.

Bearbeitet von Spikx am 09.12.2010, 14:26

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1256

09.12.2010 - 13:18

Nice! Danke!

Allerdings zeigt das vertical-align noch keine Wirkung!?
Das sollte den Inhalt ja auf die höhe von 55px vertikal zentrieren?

Code: PHP

#footer {
	height: 55px;
	text-align:right;
	vertical-align:center;
	margin-left: 7px;
	margin-right: 26px;
	font-size: 11px;
	letter-spacing: 2px;
	}

edit:
mit dieser einstellung siehts so aus:

hab jetzt in der zwischenzeit: margin-top:16px; eingestellt damits nicht so weit oben klebt...
währ nice wenn mir noch jemand sagen könnte wie ich das impressum zentriert bekomme!

Bearbeitet von slateSC am 09.12.2010, 14:20

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

09.12.2010 - 14:26

Sorry, mein Fehler, vertical-align:middle

slateSC

The Suntoucher

Registered: Jul 2004
Location: oö
Posts: 1256

09.12.2010 - 14:31

hm.. das bringt leider auch nichts!?

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

09.12.2010 - 14:42

Achja, da war ja was...

Wieder ein noob Fehler meinerseits, vertical-align gilt nur innerhalb von Tabellenzellen in einer Tabellenzeile oder Textpassagen, nicht aber für div Blöcke. Damit das in einem div funktioniert, müsstest du das div als table-cell definieren (display:table-cell), das versteht aber nicht jeder Browser (oder zumindest der IE6 nicht).

Vertikale Zentrierung ist mit CSS leider ein Graus.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

09.12.2010 - 14:49

2 Alternativen die ich seh - bzw. 3

1.: Floaten. Der Impressum-Link soll ein Block werden (display: block

weil er braucht eine definierte Höhe (height: 20px), damit die Boxen auf die gleiche Höhe kommen. Den Text in der Box musst du u.U. durch line-height anpassen (line-height: 22px)

2.: Table. Das ganze in ne Table, valign=middle. Ist zwar eine Unart was accessability angeht, aber funktioniert...

3.: Margins. So lange spielen mit den Margins bis alles vertikal zentriert erscheint. Das kann aber ziemliche Probleme machen wenn jemand einen anderen DPI-Wert eingestellt hat (Auf jeden Fall die Einheit em statt px verwenden!)

Bitte lies nochmal meinen letzten Post wie du uns weitgehend problemlos den aktuellen Stand deiner Seite hochladen kannst.

UnleashThebeast

unsäglicher Prolet

Registered: Dec 2005
Location: 127.0.0.1
Posts: 3568

15.12.2010 - 21:12

Naja, ich verstehe nicht, warum du die Layout-Tabellen überhaupt ersetzt. Das, was du da fabrizierst ist eigentlich größtenteils grausige <div>-Suppe, wo du einfach jedes <table>, <tr> oder <td> mit einem <div> ersetzt hast...

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

16.12.2010 - 18:42

Das Problem dürfte eher sein dass da wo es zählt - nämlich beim Content - dieser wieder durch eine Table zerfetzt wird.

Der Sinn von Divs ist schon da, weil wenn die Seite halbwegs gut gemacht ist, kannst du zB. alle HTML-Markups mit div, span rausnehmen (bzw. durch Leerzeichen ersetzen) und den Text in einem Stück sinngemäß durchlesen. Das geht bei Table-Designs meistens nicht.

Auch aus dem Grund macht man als "Braver Designer" Menüs in List-Elements und nicht etwa als Haufen <a>'s mit display:block was ja eigentlich einfacher wäre.

UnleashThebeast

unsäglicher Prolet

Registered: Dec 2005
Location: 127.0.0.1
Posts: 3568

16.12.2010 - 21:27

Das ist mir durchaus bewusst, dass man HTML-Elemente semantisch korrekt einsetzen sollte. Nur wozu mach ich eine <div>-box, die eine <div>-box umschließt, in der dann ein <p> drin is?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

17.12.2010 - 13:19

Sowas braucht man hin und wieder um Margin-Collapse zu verhindern oder für Border-Textures u.Ä.

Ich weiß aber nicht worauf du dich beziehst, also kann ich auch nicht sagen was es bewirken soll.

watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	09.12.2010 - 01:38 Ich seh da keinen Facebook Link...
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1256	09.12.2010 - 10:39 jetzt sind auch die grafiken zu sehen
AbSailer boo hoo wendy Registered: Aug 2002 Location: Linz/Stmk Posts: 1160	09.12.2010 - 11:23 funzt ja alles nur beim Footer, in der letzten box, brauchst nicht wirklich eine Tabelle für den IMPRESSUM-Link, reicht wenn dein link in der Box steht. probiers einfach mal aus, Tabellendesign sollte nach Möglichkeit auf jeden Fall vermieden werden, und wenn man's zumindest ein bisschen beherrscht kann man damit besser umsetzen/gestalten als mit Tabellen MfG
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1256	09.12.2010 - 12:32 Zitat von AbSailer funzt ja alles Naja.. fast! Ich hätt jetzt halt noch gerne, dass zwischen den Logos und dem Impressum nur wenige Pixel Abstand sind und dass die Grafiken vertikal zentriert sind! Dann bin ich glücklich!
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	09.12.2010 - 12:47 Zitat von slateSC Naja.. fast! Ich hätt jetzt halt noch gerne, dass zwischen den Logos und dem Impressum nur wenige Pixel Abstand sind und dass die Grafiken vertikal zentriert sind! Dann bin ich glücklich! In dem Fall wäre es imho am einfachsten folgendes Code: PHP <div id="footer"> <div id="pos_footext"> <div class="box"> <a href="http://www.facebook.com/pages/Metaphor-Motions/139939086031027" target="_blank"> <img src="/templates/metaphor-motions/layout/fb.gif" border="0" width="20" height="20" alt="FB" /></a> <!-- hier grafik soundso --> </div> <div class="box"> <a href="http://www.youtube.com/user/METAPHORMOTIONS" target="_blank"> <img src="/templates/metaphor-motions/layout/youtube.gif" border="0" width="53" height="20" alt="YT" /> <!-- hier grafik soundso --> </div> <div class="box"><table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><a href="/impressum" class="mainlevel" >IMPRESSUM</a></td></tr></table> <!-- noch eine Box für impressum --> </div> </div><!-- #pos_footext ends --> </div><!-- #footer ends --> in Code: PHP `<div id="footer"> <a href="http://www.facebook.com/pages/Metaphor-Motions/139939086031027" target="_blank"> <img src="/templates/metaphor-motions/layout/fb.gif" border="0" width="20" height="20" alt="FB" /> </a> <a href="http://www.youtube.com/user/METAPHORMOTIONS" target="_blank"> <img src="/templates/metaphor-motions/layout/youtube.gif" border="0" width="53" height="20" alt="YT" /> </a> <a href="/impressum" class="mainlevel" >IMPRESSUM</a> </div>` umzuwandeln und im CSS für #footer text-align:right; vertical-align:middle; definieren und dann natürlich noch margins und paddings nach belieben für #footer und dessen Inhalte. Bearbeitet von Spikx am 09.12.2010, 14:26
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1256	09.12.2010 - 13:18 Nice! Danke! Allerdings zeigt das vertical-align noch keine Wirkung!? Das sollte den Inhalt ja auf die höhe von 55px vertikal zentrieren? Code: PHP `#footer { height: 55px; text-align:right; vertical-align:center; margin-left: 7px; margin-right: 26px; font-size: 11px; letter-spacing: 2px; }` edit: mit dieser einstellung siehts so aus: hab jetzt in der zwischenzeit: margin-top:16px; eingestellt damits nicht so weit oben klebt... währ nice wenn mir noch jemand sagen könnte wie ich das impressum zentriert bekomme! Bearbeitet von slateSC am 09.12.2010, 14:20
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	09.12.2010 - 14:26 Sorry, mein Fehler, vertical-align:middle
slateSC The Suntoucher Registered: Jul 2004 Location: oö Posts: 1256	09.12.2010 - 14:31 hm.. das bringt leider auch nichts!?
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	09.12.2010 - 14:42 Achja, da war ja was... Wieder ein noob Fehler meinerseits, vertical-align gilt nur innerhalb von Tabellenzellen in einer Tabellenzeile oder Textpassagen, nicht aber für div Blöcke. Damit das in einem div funktioniert, müsstest du das div als table-cell definieren (display:table-cell), das versteht aber nicht jeder Browser (oder zumindest der IE6 nicht). Vertikale Zentrierung ist mit CSS leider ein Graus.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	09.12.2010 - 14:49 2 Alternativen die ich seh - bzw. 3 1.: Floaten. Der Impressum-Link soll ein Block werden (display: block weil er braucht eine definierte Höhe (height: 20px), damit die Boxen auf die gleiche Höhe kommen. Den Text in der Box musst du u.U. durch line-height anpassen (line-height: 22px) 2.: Table. Das ganze in ne Table, valign=middle. Ist zwar eine Unart was accessability angeht, aber funktioniert... 3.: Margins. So lange spielen mit den Margins bis alles vertikal zentriert erscheint. Das kann aber ziemliche Probleme machen wenn jemand einen anderen DPI-Wert eingestellt hat (Auf jeden Fall die Einheit em statt px verwenden!) Bitte lies nochmal meinen letzten Post wie du uns weitgehend problemlos den aktuellen Stand deiner Seite hochladen kannst.
UnleashThebeast unsäglicher Prolet Registered: Dec 2005 Location: 127.0.0.1 Posts: 3568	15.12.2010 - 21:12 Naja, ich verstehe nicht, warum du die Layout-Tabellen überhaupt ersetzt. Das, was du da fabrizierst ist eigentlich größtenteils grausige <div>-Suppe, wo du einfach jedes <table>, <tr> oder <td> mit einem <div> ersetzt hast...
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	16.12.2010 - 18:42 Das Problem dürfte eher sein dass da wo es zählt - nämlich beim Content - dieser wieder durch eine Table zerfetzt wird. Der Sinn von Divs ist schon da, weil wenn die Seite halbwegs gut gemacht ist, kannst du zB. alle HTML-Markups mit div, span rausnehmen (bzw. durch Leerzeichen ersetzen) und den Text in einem Stück sinngemäß durchlesen. Das geht bei Table-Designs meistens nicht. Auch aus dem Grund macht man als "Braver Designer" Menüs in List-Elements und nicht etwa als Haufen <a>'s mit display:block was ja eigentlich einfacher wäre.
UnleashThebeast unsäglicher Prolet Registered: Dec 2005 Location: 127.0.0.1 Posts: 3568	16.12.2010 - 21:27 Das ist mir durchaus bewusst, dass man HTML-Elemente semantisch korrekt einsetzen sollte. Nur wozu mach ich eine <div>-box, die eine <div>-box umschließt, in der dann ein <p> drin is?
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	17.12.2010 - 13:19 Sowas braucht man hin und wieder um Margin-Collapse zu verhindern oder für Border-Textures u.Ä. Ich weiß aber nicht worauf du dich beziehst, also kann ich auch nicht sagen was es bewirken soll.

2x css probleme bei webseite

Forum Index > Software > Coding Stuff

watchout

slateSC

AbSailer

slateSC

Spikx

slateSC

Spikx

slateSC

Spikx

watchout

UnleashThebeast

watchout

UnleashThebeast

watchout