✔ Logoff Button zerreisst Layout

tester33

tester33

Erfahrenes Mitglied
Hi zusammen,
ich habe meine Homepage überarbeitet, nun habe ich einen Bereich der nur für registrierte Benutzer sichtbar ist. Dort soll natürlich ein Logoff Button hin. Nun möchte ich den machen, ich habe ihn erstellt, doch bei grösseren Bildschirmen richtet er sich vollommen falsch aus.
Ich möchte ihn rechts vom Layout machen, doch dass Layout besteht aus divs in einer Reihe, wie kann ich machen dass der immer schön rechts ist und zwar relativ? Ich habe auch schon die Position versucht doch er ist bei grossen Bildschirmen immer ausserhalb des Hintergrunds.

HTML: 
body div#logoff-button { 
		width:900px; 
		position:fixed; 
		top:0px; 
		left:0px;
		}
		
		
body div#logoff-button input.button {
		background:url(../images/logoff-button.png);
		width: 118px;
		height: 32px;
		border: 0px;
		}
		

body div#logoff-button input.button:hover {
		background: url(../images/logoff-button-hover.png);
		}
		
body div#logoff-button input.button:active {
		background: url(../images/logoff-button-activ.png);
		}

MfG
Simon
 
Dazu müsste man den Quelltext des HTML auch kennen.
Ein kleiner Hinweis, vielleicht hilft es dir ja. Wenns ohne Position geht, dann verwende doch float.
 
Sorry,
hier:

HTML: 
<body>              
    <!-- Gesamthülle -->                
    <div id="sitehulle">                   
                 
      <!-- Menü,  Logo und Abmelden-->  	                     
	<div id="header" class="clearfix">
		<h1 id="logo" class="left">
      <a href="http://www.simon-stucki.ch/" title="Simon Stucki" rel="home">
        <img src="http://www.tutorials.de/images/simon-stucki.png" />
      </a>
    </h1>
	</div>        	   
                           
      <ul id="menu">                               
        <li>                                 
        <a href="http://www.xxx" class="textreplaced active" id="lebenslauf">Lebenslauf</a>                               
        </li>                               
        <li>                                 
        <a href="http://www.xxx" class="textreplaced" id="bewerbung">Bewerbung</a>                               
        </li>                               
        <li>                                 
        <a href="http://www.xxx" class="textreplaced" id="zeugnisse">Zeugnisse</a>                               
        </li>                               
        <li>                                 
        <a href="http://www.xxx" class="textreplaced" id="kontakt">Kontakt</a>                               
        </li>                               
        <li>                                 
        <a href="http://www.xxx" class="textreplaced" id="impressum">Impressum</a>                               
        </li>
        <li>
            <form action="../deutsch.php?logoff=1" method="post" class="right">                       
          <input type="submit" value="" class="button">                     
        </form> 
        </li>                       
      </ul>                    
      <!-- Ende Menü und Logo -->                      
      <!-- "Hüllen" Beginn -->                      
      <!-- nun Überschrift -->                      
      <div id="betreff" class="clearfix">	                           
        <div id="betreffcontent" class="left">		                                 
          <h2 class="betreff">Titel</h2>		                                 
          <p>			Titel Beschreibung 			                                 
          </p>		                           
        </div>                          
        <!-- Ende Überschrift -->                            
        <!-- Content (Inhalt) -->                            
        <div id="content" class="clearfix">	                                 
          <div id="contenttext" class="left">		<h1>Übertitel</h1>		                                       
            <p class="left">
            Text
            </p>				 	 		 		 	                                 
          </div>		 	                           
        </div>	 	                           
        <!-- Ende content -->    			                      
      </div>                    
      <!-- Ende "Hüllen" -->                
    </div>              
    <!-- Ende Gesamthülle -->                
    <!-- Footer -->                
    <div id="footerhulle">	                     
      <div id="footercontent">		                           
        <span class="footertext left">                                       
          <a class="footertext" href="mailto:info@xxx">info@xxx</a> - xxx                           
        </span>	                     
      </div>              
    </div>              
    <!-- Ende Footer -->          
  </body>

Ist das so gut? Mit float hab ichs auch probiert, aber dann zereisst es mir alles.
 
Ich sehe in deinem Quelltext kein Element mit der ID "#logoff-button" wie du ihn deinem CSS benannt hast.
Hast du nach dem floaten auch wieder gecleart?
 
Wenn der Float beendet ist sollte dieser wieder aufgehoben werden, da sonst verschiedene Browser in taumeln kommen und das Layout verschieben.
CSS: 
.clear{
clear: both; /*  auch einzeln: left oder right*/
}
 
Hi,
leider funktioniert das alles grad nicht, ich fange nochmals von vorne an, ich muss wohl einen Fehler gemacht haben.
Trotzdem danke!
 
Hi,
ich habe nun einen relativ guten Ansatz. Das Layout bleibt, doch er klebt in der rechten oberen ecke, wie kann ich ihn von dort wegkriegen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück