HTML & CSS: Warum sind meine DIVs versetzt und wie...

JumpinJack · Beitrag von **JumpinJack** » 23.05.2005 20:11

Hallo Leute.

ich habe heute morgen schon nach einer Möglichkeit gefragt mit CSS meine Tabellen zu formatieren. Nun stellten sich weitere.

Also ich habe auf: http://dsum.replay.schwad-dich-moed.de/index.php 3 Tabellen neben einander. Jedoch ist die letzte leicht versetzt. Könnt ihr mir sagen warum?

<table width="700" border="0" cellpadding="1" cellspacing="1" style="border-collapse: collapse">
<tr>
<td colspan="3" height="25"><center><p class="style1"><b>"Die Schlacht um Mittelerde"-Replay-Posthilfe</b></p></center></td>
</tr>
<tr>

<TD width=40%>
<div align="left" valign="TOP">
<form action="index.php" method="POST">
<?php
include("./teama.htm");
?>
</div>
</TD>
<TD width=20%>
<div align="center" valign="middle">

<img src="sword2.gif">
</div>
</TD>
<TD width=40%>
<div align="right" valign="TOP">
<?php
include("./teamb.htm");
?>
</div>
</TD>
</tr>
<TD width=100% colspan="3">
<?php
include("./info.htm");
?>
</TD>
</TR>
</TABLE>

Dann würde ich gerne den Hintergrund meine Eingabefelder transparent bzw halbtransparent gestalten damit das Hintergrundbild besser zur geltung kommt. Mit Mouseover oder bei Eingabe sollten dann die Farbe wechseln um besser die eingabe zu tätigen. Beim verlassen sollte die Urdarstellung wiederhergestellt werden. Geht das? Wenn ja könnt ihr mir einen Tipp geben wie oder wo ich ein Beispiel dafür finde?

Und dann hätte ich noch gerne gewußt, wie man mit einer .htaccess nur bestimmte externe URLs zugriff auf das Verzeichnis zuläßt.

Wäre klasse wenn ihr mir wieder einmal helfen könntet.

Beitrag von **Markus67** » 23.05.2005 20:25

Hi ...

erstmal damit die Tabellen gleich hoch sind ...

<head>
<title>Replay-Post-Helper</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.tdoben1 { border-style:solid; border-color: blue; border-width: 1px 1px 1px 1px; }
.tdlinks1 { border-style:solid; border-color: blue; border-width: 0px 1px 1px 1px; }
.tdmitte1 { border-style:solid; border-color: blue; border-width: 0px 1px 1px 0px; }
.tdrechts1 { border-style:solid; border-color: blue; border-width: 0px 1px 1px 0px; }
</style>
</head>

<body>

<table height="275" background="bg1.jpg" cellspacing="0">
<tr>
<td colspan="3" nowrap class="tdoben1"><div align="center">TEAM A </div></td>
</tr>
<tr>
<td class="tdlinks1" nowrap> </td>
<td" class="tdmitte1">Armee</td>
<td class="tdrechts1">Spielername</td>

Markus

JumpinJack · Beitrag von **JumpinJack** » 23.05.2005 20:51

Ähm, ja danke dir. Wobei beim Firefox immernoch ein höhenunterschied existiert. Witzigerweise ist die rechte beim Firefox tiefer. das war auch schon vor der kleinen Fehlerbehebung.

Beitrag von **Markus67** » 23.05.2005 20:57

Hi ....

du solltest mal in der html-datei ein bischen aufräumen, da stehen mehrere body & head-Tags drin. einmal sollte aber genügen

Der IE verzeiht im Gegensatz zum Firefox vieles

Und hier die Styleanweisung für die transparenz.

Code: Alles auswählen

.transparent {
	filter: Alpha(opacity=30, finishopacity=25)
		}

welche du den einzelnen Boxen zuordnen kannst. Das ganze hat nur den Nachteil dass es wahrscheinlich nur im IE funzt.

Markus

JumpinJack · Beitrag von **JumpinJack** » 24.05.2005 00:40

Hm... nun habe ich aufgeräumt und den Code ein wenig verschoben damit nichts dopplt drin steht. Aber es ist immer noch nicht besser.

Was habe ich noch übersehen?

btw: Danke für die Hilfe.

Beitrag von **Markus67** » 24.05.2005 00:46

Hi ...

ich werde es morgen nochmal anschauen ... im Büro hab ich den Firefox installiert

Markus

FatFreddy · Beitrag von **FatFreddy** » 24.05.2005 02:21

1. Deine Hintergrundbilder haben unterschiedliche Größen:

bg1=524*270
bg2=504*276

2. Die Tabellenstruktur hat einen Fehler:

suche (html-Zeile 171ff.):

Code: Alles auswählen

  </tr>
  	<TD width=100% colspan="3">
<table width="100%" border="1" background="bg3.jpg">

ersetze durch:

Code: Alles auswählen

  </tr>
  <tr>
  	<TD width=100% colspan="3">
<table width="100%" border="1" background="bg3.jpg">

FatFreddy

JumpinJack · Beitrag von **JumpinJack** » 24.05.2005 08:12

Ah ein <tr> vergessen. Danke dir. Aber das sieht immernoch so aus.

btw: Danke wegen der Info von den hintergundbildern. Werd ich gleich mal korrigieren.

Und mal was anderes. Ich hab hier folgenden Code:

Code: Alles auswählen

<h1>Kontakt</h1>
<form method="post" action="kontakt.html?id=5">
<dl>

<dt><label for="form_mitteilung">Hier ist Platz für Ihre Nachricht:</label></dt>
<dd><textarea id="form_mitteilung" name="nachricht" rows="10" cols="40"></textarea></dd>
</dl>
</form>

CSS:

/*kontaktformular*/

#inhalt input, #inhalt textarea {
background-color: #EAEBEB;
border: 2px solid #ADADAD;
}

#inhalt input:focus, #inhalt textarea:focus, #inhalt checkbox:focus {
background-color: #E0EECD;
}

Dieser soll das wechslen der Farbe eines eingabefeldes verursachen. Jedoch habe ich keine Ahnung wie das gehen soll!? Ich seh hier keine class="xxx" Zurodnung. Wie macht man das?

Beitrag von **Markus67** » 24.05.2005 08:59

Hi ...

das Problem liegt an den doofen <DIV>

Pack das ganze immer in den darüberliegenden td-Tag und du hast keine Probleme

Zeile 114 ff

Code: Alles auswählen

	    <TD  width=40%> 
		<div align="right" valign="TOP"> 
				<table height="275" background="bg2.jpg" cellspacing="0">

ersetze mit:

Code: Alles auswählen

	    <TD  width=40% align="right" valign="TOP"> 
				<table height="275" background="bg2.jpg" cellspacing="0">

In Zeile 185 kannst du dann das </div> auch rausnehmen dann wird das gaze richtig angezeigt.

Markus

JumpinJack · Beitrag von **JumpinJack** » 24.05.2005 09:15

Aha.... ok, jetzt sind sie draussen, die doofen DIVs.

Danke für die Hife. Man das war ja ne schwere Geburt. Ich sollte mir doch mal ein Buch für html und css kaufen.

btw: Ich hab jetzt bei selfhtml gelesen das man den Code von css in "" schreiben soll. Nun, das habe ich gemacht. Aber dann streikt der Firefox. Also er macht das css nicht. Finde ich dann doch ein bissle merkwürdig.