3 CSS Fragen (Positionierung)

thesa · 06. März 2006

Hi
Nun hab ich schon über 3 Stunden gegoogelt und immernoch nerven mich 3 Dinge an der Seite. Ich hoffe ihr könnt mir das eine oder andere Beantworten.

bisheriger Stand

Nun meine Fragen:
1. Wie kann ich das W3C Bild oben rechts positionieren?
2. Das Fenster links mit dem Scrollbalken (Menüauswahl) soll genau auf gleicher Höhe mit dem Rahmen rechts (Text editieren) haben. Momentan hab ich eifach den Rahmen genau der Menüauswahl angepasst, veränder man aber die Schriftgrösse gibt es minimale Abweichungen welche ich gerne auch noch eliminieren würde.
3. Wie bringe ich die 5 Buttons (unten rechts) genau gleich weit nach rechts wie das darüberstehende Textfeld? Entscheidend ist dabei aber, dass wenn das Textfeld beim verkleinern der Fenstergrösse nach links springt, das die Buttons immer darunter sind.

Ich hab mal noch den source gepostet, wobei es leider sehr viel code ist. Das CSS sollte aber schnell durchschaubar sein. Ich bin dankbar für jeden Lösungsansatz.

HTML

Code:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            <html>
                <head>    
                    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
                    <link rel="stylesheet" type="text/css" href="cms.css">
                    <title>Seitenverwaltung</title>
                    <script type="text/javascript">
                                                
                    </script>
                </head>

                <body>
                       
    <ul class="list">
		    <li>         
		       <form action="index.php" method="post">
		           <div>    
		               <input type="submit" value="Seitenverwaltung" class="button" />    
		               <!-- Hidden Control Fields -->
		               <input type="hidden" name="hf_inc" value="management" />
		           </div>            
		       </form>                        
		    </li>

        <li>
            <form action="index.php" method="post">
                <div>    
                    <input type="submit" value="Benutzerverwaltung" class="button" />    
                    <!-- Hidden Control Fields -->
                    <input type="hidden" name="hf_inc" value="accountAdmin" />
                </div>            
            </form>                        
        </li>
        <li>        
            <form action="index.php" method="post">

                <div >    
                    <input type="submit" value="Logout" class="button" />    
                    <!-- Hidden Control Fields -->
                    <input type="hidden" name="hf_inc" value="logout" />
                </div>            
            </form>                        
        </li>
    </ul>
		<form action="index.php" method="post">
	    <div id="buttonleft">    
	        <input type="submit" value="Seitenstruktur bearbeiten" class="button" />    
	        <!-- Hidden Control Fields -->

	        <input type="hidden" name="hf_sitemanager" value="siteManager" />
	        <input type="hidden" name="hf_inc" value="management" />
	    </div>            
	</form> 

	<form action="index.php" method="post">
		<!-- Menu Auswahl -->    
	  <div id="seitenhierarchy">  
		  <p>Seitenhierarchy</p>
		  		  	<p>
					<select name="AuswahlMenu" size="15">

											<option value="1,0,0">  Home </option>
												<option value="2,0,0">  Angebot </option>
												<option value="3,0,0">  Betriebe </option>
												<option value="3,1,0">       Arbeit </option>
												<option value="3,1,1">             Kunsthandwerk   </option>

												<option value="3,1,2">             Kontakanfrage Kunsthandwerk   </option>
												<option value="3,1,3">             Mechanik   </option>
												<option value="3,1,4">              </option>
												<option value="3,1,5">             Maschinenliste Mechanik   </option>
												<option value="3,1,6">             Montage   </option>

												<option value="3,1,7" selected="selected">             Kontakanfrage Montage   </option>
												<option value="3,1,8">             Maschinenliste Montage   </option>
												<option value="3,1,9">             Testseite </option>
												<option value="3,1,10">             Kontakanfrage W </option>
												<option value="3,2,0">       Wohnen1 </option>

												<option value="3,2,1">             Wohnen im Domino </option>
												<option value="3,2,2">             Wohngruppe Domino </option>
												<option value="3,2,3">             Kontaktanfrage Wohnheim Domino </option>
												<option value="3,3,0">       Gastro </option>
												<option value="3,3,1">             Caf </option>

												<option value="3,3,2">             Kontakanfrage Caf </option>
												<option value="3,3,3">             Menuliste / Menuvorschl </option>
												<option value="3,4,0">       Ausbildung </option>
												<option value="3,4,1">             Berufliche Massnahmen </option>
												<option value="3,4,2">             Berufliche Abkl </option>

												<option value="3,4,3">             Kontakanfrage Ausbildung </option>
												<option value="4,0,0">   </option>
												<option value="5,0,0">  Wollen Sie helfen? </option>
												<option value="6,0,0">  Kontaktanfrage </option>
												<option value="7,0,0">  Sitemap </option>

						  														
		    </select>														
		  	</p> 
				

			<!-- Hidden Control Fields -->
			<input type="hidden" name="hf_inc" value="management" >
			<!-- Buttons -->
			<button name="ok" type="submit" class="button">OK</button>
		</div>

	</form>
	<div id="editor"><fieldset>
        <legend>Text editieren</legend>  
        
        <form action="index.php" method="post">        

                            
            <!-- TITEL -->
            <p>
                <label class="formular" for="tf_title">Titel:</label>

                <input name="tf_title" id="tf_title" type="text" value="Kontakanfrage Montage  " />
           </p>
            
            <!-- KURZBESCHRIEB -->      
                            <p>
                    <label class="formular" for="tf_kurzbeschrieb">Kurzbeschrieb:</label>
                    <input name="tf_kurzbeschrieb" id="tf_kurzbeschrieb" type="text" value="" />
            </p>                
                            
            <!-- HILFE -->  
            <p></p>              	

            <!-- INHALT -->   
            <p>

                <label class="formular" for="ta_text">Inhalt:</label>            
                <textarea name="ta_text" id="ta_text" cols="60" rows="15"></textarea>
              
            </p>
                	<ul class="list"><li><input name="but_showHelp" type="submit" value="Hilfe einblenden" class="button"></li><li><input name="but_preview" type="submit" value="Vorschau erstellen" class="button"></li>
                    </ul>
                	
                                                         

                    <ul class="list">
                        <li><input name="but_save" type="submit" value="Speichern" class="button"></li>
                        <li><input type="reset" value="Zurücksetzen" class="button"></li>
                        <li><input name="but_cancel" type="submit" value="Abbrechen" class="button"></li>

                    </ul>
						
            <!-- Hidden Control Fields -->
            <input type="hidden" name="hf_inc" value="management" />

            <input type="hidden" name="hf_who" value="content" /><input type="hidden" name="hf_help" value="0" /><input type="hidden" name="AuswahlMenu" value="3,1,7" /><input type="hidden" name="rb_edit" value="edit" />            
        </div>   </form> 
    </fieldset>
    </div>                              
					<p id="w3">
    					<a href="http://validator.w3.org/check?uri=referer"><img
    					src="http://www.w3.org/Icons/valid-html401"
    					alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
    			  	</p> 
                </body>
            </html>

CSS

Code:

/*Default Settings*/
/*#########################################################*/
* {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4 {
	padding: 0.2em 0;
	clear: both;
}

body {
	padding: 0 0.8em;
	background-color: #EEE;
}

#strong {
	font-weight: bold;
}

hr {
	width: 10.2em;
	margin-left: -0.2em;
}

a:link {text-decoration:none;color: #096826;}
a:visited {text-decoration: none;color: #096826;}
a:active {text-decoration: none;color: #096826;}
a:hover {text-decoration: underline;color: #000;}
/*Button Farbe und Abstände*/
/*#########################################################*/
.button, .button_h0 {
  background-color: #96EC8D;
  border-left: 1px solid #f9f9f9;
	border-top: 1px solid #f9f9f9;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
  cursor: pointer;
  margin: 0.3em 0;
  color: #000;
  width: auto;
}

.button_h0 { 
  margin: 0;
}

#buttonleft {
	clear:both;
}
/*Liste nebeneinander*/
/*#########################################################*/
.list {
	clear: both;
	text-align: center;
}

.list li {
	list-style: none;
	float: left;
	padding-right: 0.1em;
}
/*2 Listen gefloatet*/
/*#########################################################*/
.left li, .right li {
	list-syle: none;
	height:1.4em;
	font-weight: bold;
}	

ul.left {
	float: left;
	width: 10em; 
	list-style: none;
}
  
ul.right {
	float: left;
	list-style: none;
}

.right li input {
	width: 150px;
}

#cbox {
	width: 15px;
}
/*Editor*/
/*#########################################################*/
#seitenhierarchy {
	float: left;
	padding-right: 1em;
}

fieldset {
	padding-left: 0.3em;
	margin-top: 0.7em;
	margin-bottom: 0.3em;
}

#editor .formular {
	display: block;
	float: left;
	height: 1.4em;
	width: 6em;
}

#editor p {
	clear: left;
}

#editor #ta_text {
	width: 70%;
}

#uf_file {
	margin-left: 0.3em;
}

#cb_status {
	margin-right: 0.3em;
}
/*Bild w3*/
/*#########################################################*/
#w3 {
	margin-top: 0.5em;
	clear: both;
}

#w3 img {
	height: 31px;
	width: 88px;
	border: 0;
}

thesa · 07. März 2006

Hat echt keiner eine Idee?
Ich währe doch schon dankbar wenn ich nur eins der Probleme fixen könnte, zumindest das mit dem Bild weiss doch sicher jemand nicht?
Oder kennt ihr gute Internetseiten wo man solche Antworten finden könnte?
Ich bin wirklich dankbar für jeden Tipp.

Gruss Thesa

dkdenz · 07. März 2006

Das:

Code:

<p id="w3">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>

könnte man so lösen:

Code:

#w3 {
    position:absolute;
    top:0px;
    left:100%;
    z-index:1;
}

thesa · 07. März 2006

Merci das hast wunderbar funktioniert.
Gibt es noch eine Möglichkeit das das Bild hinter den Navigationsbuttons ist, wenn ich das Fenster verkleinere?

dkdenz · 07. März 2006

Das ist etwas aufwendig, denn dann müsste das Pic ohne z-index gesetzt werden und sämtliche anderen Elemente müssten einen z-index höher als 0 erhalten.

Zudem frage ich, ob das denn Not tut, den W3C-Button auf der Seite zu haben.
Wenn Du unbedingt zeigen willst das die Seite konform ist,
dann kann man das auch eleganter mit einem Textlink machen.

Zudem ist die Seite ja nicht valide:
http://www.validome.org/validate/?uri=http://homepage.hispeed.ch/Thesa/editor.html

dkdenz · 07. März 2006

Und hier kannst Du mit padding-left etwas rumtesten,
bis die Links auf einer Höhe sind wie das Formfeld.

Code:

.list {
	clear: both;
	text-align: center;[B]padding-left:90px;[/B]
}

.list li {
	list-style-type: none;
	float: left;
	padding-right: 0.1em;
}

thesa · 07. März 2006

Mal schauen was ich mit dem Bildchen mach. Und zu dem validen Zeugs, das kommt noch, bzw. css ist es und das html wirds auch noch.
Aber wenn ich anstatt dem Bild einen Textlink hätte, hab ich ja immernoch das selbe Problem den zu verschieben oder nicht?

Das mit dem padding-left hab ich auch schon probiert. Aber wenn ich dann das Fenster kleiner mache, springt das Textfeld unter den Titel (Inhalt) und somit weiter nach links. Die doofen Buttons chillen aber trotzdem noch mittem im Fenster wegen dem padding.

dkdenz · 07. März 2006

thesa schrieb:
Aber wenn ich anstatt dem Bild einen Textlink hätte, hab ich ja immernoch das selbe Problem den zu verschieben oder nicht?

Ja klar, sieht aber meiner Meinung nach eleganter aus...
...ist aber Geschmackssache.

3 CSS Fragen (Positionierung)

thesa

New member

thesa

New member

dkdenz

New member

thesa

New member

dkdenz

New member

dkdenz

New member

thesa

New member

dkdenz

New member