Zum Inhalt springen

posintionierung mit css geht nicht

Erstellt am 10. Oktober 2006 · 2 Antworten · letzte Antwort am 19. Oktober 2006

Tags: HTML & CSS, Frage

manoman ·

Hi, ich hab vor auf meinen Header 2 Buttons zu legen(Drucken, Kontakt). Den Drucken Button kann ich beliebig herumschieben nur der Kontakt Button hängt immer unter dem Header. Ich bin nicht sicher wo der Fehler oder die Lösung liegt also gibts mal TS,CSS und das Template

10.marks {
      
       # Link zur Druckversion erzeugen
       DRUCKEN = TEXT
       DRUCKEN {
       	field = uid
       	wrap =<div class="Drucken"> <a href="index.php?id=|&L=0&type=1" target="_new"><img src="fileadmin/images/print.jpg" alt="" /></a></div>                       	
       }
       
       KONTAKT = IMAGE
       KONTAKT.file = fileadmin/images/Kontakt.jpg
       KONTAKT.wrap = <div class="Kontakt">|</div>
       
       
       HEADER = IMAGE
       HEADER.file = fileadmin/images/Header.jpg
img {
	border-style:none;
	display: block;
	
}

div.Drucken {
	margin-left:40em;
	margin-top: -1.3em;
	float:left;
	display:inline;
}

div.Kontakt {
	margin-left:20em;
	margin-top: -2.7em;
	display:inline;	
}


body{
	text-align:center;
     	margin=0 0;
}

div#container {
	margin-right: auto;
	margin-left: auto;
	width: 746px;
	text-align: left;
}

div#header {
	height:59px;
	width:746px;
	display:inline;
	
}

div#links { 
	
	float:left; 
	width:180px;
	height:556px;			
	margin:0;	
}

div#center { 
	padding-top:37px;
	width: 563px; 
	height:545px;
	text-align:left;
	margin:0; 
}
<div id="container">
    	
      <div id="header">
        	###HEADER###
                ###DRUCKEN###    
                ###KONTAKT###   
      </div>
    
      <div id="links">
	<div>
		###MENU###
	</div>      	
      </div>      
      
      <div id="centerpic">
      	<div>
      		###BILD###
      	</div>
      </div>
  	
      <div id="center">       
        <div>
          ###INHALT###
        </div>
      </div>
      
</div>
LineMan ·

Hi... also, so wie ich das sehe, kann das so nicht funktionieren, denn du versuchst drei elemente inline zu positionieren, die aber eigentlich deutlich mehr breite benötigen. versuchs mal mit absoluter positionierung. für solche fälle sicher geeigneter...

div.Drucken {
        position:absolute;
        top:10px;
        right:40px;
}
 
div.Kontakt {
        position:absolute;
        top:10px;
        right:20px;
}

div#header {
        height:59px;
        width:746px;
        position:relative;
}

gruß

matthias