CSS/DOM - Hidden Elements verzerren Design

[kerbstone]

Hallo fleißige Designer und Entwickler!

Zur Zeit versuche ich ordentlich CSS zu schreiben,
allerdings verzerrt sich hierbei mein Design.
Ich habe ein Uploadformular mit Textfeldern
und einem Filefeld. Beim Absenden des Formulars
setze ich alle Felder hidden und mache ein
Loading Symbol visible.
Problem hierbei: Bevor das Formular abgeschickt wird,
ist der Bereich, wo das Loading Symbol erscheint
komplett frei, anstelle 'überdeckt' von den Formelementen.

Kann mir jemand sagen, wie ich die Felder ohne absolute
Positionsangaben in die Position des versteckten Loader Symbols
bekommen kann?

<div id="loader">Loading...<br/><br/>
<img src="../../images/loader.gif" /><br/></div>
    <div id="upload_form"><br/>
    
	<label>Title:  
        <input name="title" type="text" size="30" />
    </label><br />
	<label>Author:  
        <input name="author" type="text" size="30" />
    </label><br />
	<label>Editor:  
        <input name="editor" type="text" size="30" />
    </label><br />
	<label>File:  
        <input name="myfile" type="file" size="30" />
    </label><br />
    <label>
        <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
    </label>
    </div>

[AmicaNoctis]

Hallo,

ich hoffe, ich hab es richtig verstanden, wenn nicht, musst du das alles nochmal präzisieren.

Nimm mal display: none statt visibility: hidden.

Gruß,

Amica

[Kropff]

Du arbeitest offenbar mit visible. Dabei wird aber der entsprechende Platz der ausgeblendeten Elemente nach wie vor reserviert. Arbeite mit display: block und none.

Peter

[kerbstone]

Hey, klasse! Genau das habe ich gesucht

Nur das Anzeigen des Loader funktioniert nun nicht mehr.
Ich habe die Befehle 'block' und 'inline' ausprobiert.

Für eine weitere Erläuterung zu den Eigenheiten von visibility und display
wäre ich zudem sehr dankbar.

Beste Grüße

function startUpload() {
      document.getElementById('loader').style.display = 'block';
      document.getElementById('upload_form').style.display = 'none';
	  
      return true;
}

[wahsaga]

Nur das Anzeigen des Loader funktioniert nun nicht mehr.

"Funktioniert nicht" hat noch nie funktioniert - als Problembeschreibung.

Ich benutze den Befehl 'inline'.

Nein, tust du nicht.
Weder HTML noch CSS kennen "Befehle".

Eine weitere Erläuterung zu den Eigenheiten von visibility und display
wäre ich zudem sehr dankbar.

Und wir dafür, wenn du dich künftig informierst, bevor du zu absoluten Basics fragst.
http://de.selfhtml.org/css/eigenscha...tionierung.htm

[kerbstone]

Danke, mit den Grundlagen geht's doch wesentlich einfacher.