Logoff Button zerreisst Layout @ tutorials.de: Tutorials, Forum & Hilfe

tester33 · 15.06.11 13:05

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-Code:

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

Maniac · 15.06.11 13:12

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.

tester33 · 15.06.11 13:21

Sorry,
hier:

HTML-Code:

<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.

Maniac · 15.06.11 13:40

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?

tester33 · 15.06.11 13:51

gecleart? Was ist das? Oder wie meinst du das?

Maniac · 15.06.11 13:54

Wenn der Float beendet ist sollte dieser wieder aufgehoben werden, da sonst verschiedene Browser in taumeln kommen und das Layout verschieben.

Code css:

1
2
3

.clear{
clear: both; /*  auch einzeln: left oder right*/
}

tester33 · 15.06.11 14:03

Hi,
leider funktioniert das alles grad nicht, ich fange nochmals von vorne an, ich muss wohl einen Fehler gemacht haben.
Trotzdem danke!

tester33 · 15.06.11 14:07

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?

tester33 · 15.06.11 14:12

Hi,
ich habe nun die ganzen Probleme mit dem Layout behoben, danke vielmal!

MfG
Simon

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

aus <a href='login.php?logoff=1'>Ausloggen?</a> Button erzeugen

Formular zerreisst Design

[Swing]Button-/Textfeldgröße/Layout(manager)

Service stoppt bei logoff

Service stopt bei LogOff

Stichworte

E-Mail:

Abonnieren Abbestellen