2x css probleme bei webseite - Seite 2

Seite 2 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/2x_css_probleme_bei_webseite_220660/page_2 - zur Vollversion wechseln!

watchout schrieb am 09.12.2010 um 01:38

Ich seh da keinen Facebook Link...

slateSC schrieb am 09.12.2010 um 10:39

jetzt sind auch die grafiken zu sehen

AbSailer schrieb am 09.12.2010 um 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 schrieb am 09.12.2010 um 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 schrieb am 09.12.2010 um 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 -->

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.

slateSC schrieb am 09.12.2010 um 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!

Spikx schrieb am 09.12.2010 um 14:26

Sorry, mein Fehler, vertical-align:middle

slateSC schrieb am 09.12.2010 um 14:31

hm.. das bringt leider auch nichts!?

Spikx schrieb am 09.12.2010 um 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 schrieb am 09.12.2010 um 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 schrieb am 15.12.2010 um 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 schrieb am 16.12.2010 um 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 schrieb am 16.12.2010 um 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 schrieb am 17.12.2010 um 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.