Anordnung nebeneinander von Charly2010, 15.07.2009 22:17

Anordnung nebeneinander

Charly2010 15.07.2009 22:17

Hallo Charly2010

Hi Detlef,

… Eine Frage hätte ich allerdings noch, und zwar wie kann ich das linke Bild noch etwas einrücken, so dass es ca. 1 mm unter dem "v" von "vorstellen" steht?

Schau dir an, bei welchem Element welcher Abstand (margin bzw. padding) vergrößert oder verkleinert werden muss, damit der von dir gewünschte entsteht.

Ja da hatte ich zwar dran rumgespielt, aber irgendwie hat sich da nich wirklich was bewegt, vermutlich wegen dem "float-left", was aber natürlich wichtig ist.

An einer Grafik kann man das schlecht sehen. Übrigens: Millimeter ist in dem Fall eine der unsinnigsten Maßeinheiten.

ich meinte jetzt halt etwas einrücken, 1 mm war vielleicht etwas übertrieben, aber so ca. 0,5 cm oder so.

Selbstverständlich sind nicht nur ganze Zahlen möglich (Numerische Angaben).

Cool, dass das geht, hatte es mit einem normalen Komma, statt mit einem Punkt versucht - wie dämlich von mir. ;-)

Ansonsten hätte ich nur noch das Problem auf der Hauptseite, dass sich sämtliche Objekte je nach Bildschirmauflösung verschieben.

Da wir deine Hauptseite nicht kennen, können wir das weder beurteilen noch dabei helfen eine Lösung zu finden. Die beste Hilfe ist möglich, wenn ein Link auf die problematische Seite gepostet wird.

Die Seite ist (zum Glück) noch nicht oben, aber hier wäre mal der Code (da sind natürlich noch genug andere Bugs drin, diese mal bitte ignorieren, auch pos. absolute etc., sofern das nicht für diesen unerwünschten Effekt mit verantwortlich ist):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>


 <head>
     <title></title>
     <style type="text/css">

a.color1:link, a.color1:visited{text-decoration:none; color:white}
a.color1:hover, a.color1:active{text-decoration:none; color:white}
a.color2:link, a.color2:visited{text-decoration:underline; color: #330033}
a.color2:hover, a.color2:active{text-decoration:underline; color: #330033}
a.color3:link, a.color3:visited{text-decoration:none; color: #455063}
a.color3:hover, a.color3:active{text-decoration:none; color: #455063}


html:



#head {
        width:                         100%;
        text-align:                    center;
}



navikasten {
  position:

 }
 .navi {
   font-weight: bold;
   font-family: arial;
   line-height: 2em;
   text-align:left;
   color:white;
   font-size:12px
 }


#Table1 {
       font-family:                    Century Gothic;
       color:                          darkblue;
       font-size:                      80%;
       font-weight:                    bold;
}



#content {
        border:                        black px inset;		
        width:                         690px;
        background-color:              #DCDCDC;
        font-family:                   Arial;
        padding:                       30px;
	padding-top:		       620px;

        margin:                        0px auto;
	filter:                        alpha(opacity=80);          /** MS IE only **/
        -moz-opacity:                  0.8;                        /** Gecko only **/

}



#content p {
        color:                         black;
        font-family:                   Arial;
        font-size:                     108%;
        font-weight:                   ;
}


body {
        background-color:              #455063;
        background-position:           ;
        background-repeat:             ;
        margin:                        0px;
        padding:                       0px;

}
#Div {
        height:                        0px;
        overflow:                      auto;
}

DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 0px;
   -moz-border-radius: 0px;
   }
DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #455063;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #455063;
   border: 1px solid #455063;
   margin: 150px 50px;
   }

DIV.shadow IMG {
   border: 0px solid #666;
   margin: 0;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   }

               </style>

        </head>


        <body>


             <div id="head">

				<div style="position:absolute; bottom:500px; left:25px;">
<br>
<p style="text-align:center;font-family:Arial;font-size:12px;color:white;margin-left:0;margin-right:50px;">
<b>Firmenname<br>Strasse<br>PLZ Ort<br>
<br>Firmensitz<br>Strasse<br>PLZ Ort</b></p>
                </div>

<div style="position:absolute; bottom:100px;left:288px;"><br>
<img src="Bilder\CIMG6818.JPG" width="690" height="500" alt="Background"></div>

                <div class="shadow5"><div
                class="shadow4"><div
                class="shadow3"><div
                class="shadow2"><div
                class="shadow">
                <a class="color3" href="Max Mustermann"><img src="" width="120" height="130" alt="Max Mustermann"></a></div>
                </div></div></div></div>

			
<div style="position:absolute; bottom:232px; left:36px;">
				<Table border="0" bgcolor="" cellspacing="0" cellpadding="4" face="Arial">

<colgroup>
    <col width="5">
    <col width="140">
	
</colgroup>


<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">Inhaber:

<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">Dr. Max Mustermann
<td>
</td>
</tr>
<tr>
<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">

Phone:<br>Mobile:<br>Fax:</td>
								
<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">+49 (0) 711 -
								
<br>+49 (0) 170 -
<br>+49 (0) 711 - 		
							
</td>
</tr>
								
<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">e-mail:
									
<td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">info@max-mustermann.de
								
</td>
								
</tr>
								
</table>
</div>


<div style="position:absolute; bottom:82px; left:14px;">
			  <div class="navikasten">

			  <ul style="text-align:left;">
			   <li class="navi">
				 <a class="color1"href="Firmenprofil.html">Das Unternehmen</a>
			   </li>
			   <li class="navi">
				 <a class="color1"href="Referenzen.html">Referenzen</a>
			   </li>
			   <li class="navi">
				 <a class="color1"href="Anfahrt.html">So finden Sie uns
				 </a>
			   </li>
			   <li class="navi">
				 <a class="color1" href="Kontakt.html">Kontakt
				 </a>
			   </li>
			   <li class="navi">
				 <a class="color1" href="Impressum.html">Impressum
				 </a>
			   </li>
			</div>



                </div>

                <div id="#Table1">

                        <div style="position:absolute; bottom: 10px; left:1022px;">

                      <Table border="0"; bgcolor="#DCDCDC"; cellspacing="0"; cellpadding="2"; face="Arial>
                      <thead>
                           </thead>
                              <tfoot>
                                    <col width="230">
                                         <td><p style="text-align:left;font-family:Century Gothic;font-size:20px;color:#455063"><u>Leistungen</u></p></td>
                                         <tr></tr>
                                         <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063">
                                         <b><li><a class="color3" href="">Bodenabdichtung (Tiefbau)</a></p></li></b><br>
                                         <ul>
                                         <li>Schwimmb&auml;der</li>
                                         <li>Teiche</li>
                                         <li>Deponien</li>
                                         <li>Chemielagerfl&auml;chen</li>
                                         <li>Werkhallen</li>
                                         <li>Hoffl&auml;chen</li>
                                         <li>Sprinklerbeh&auml;lter</li>
                                         <li>Trinkwasserbeh&auml;lter etc.</li>
                                         </ul>
                                         </td>
                                         <tr></tr>
                                         <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li>
										 <a class="color3" href="">Dach- und Geb&auml;udeabdichtung</a></li></b><br>
                                         <ul>
                                         <li>Flachd&auml;cher</li>
                                         <li>Dachbegr&uuml;nung</li>
                                         <li>Membranbau etc.</li>
                                         </ul>
                                         </td>
                                         <tr></tr>
                                         <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li>
										 <a class="color3" href="">Fensterbau</a></li></b><br>
                                         <ul>
                                         <li>Aluminiumfenster</li>
                                         <li>Aluminiumt&uuml;ren</li>
                                         <li>Winterg&auml;rten</li>
                                         <li>Fassaden etc.</li>
                                         </ul>
                                         <tr></tr>
                                         <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li>
										 <a class="color3" href="">Alternative Energie- <br> u. W&auml;rmetechnik</a></li></b><br>
                                         <ul>
                                         <li>Photovoltaik</li>
                                         <li>Solarthermikanlagen</li>										
                                         <li>Energieberatung</li>
                                         </ul>
                                         <tr></tr>
                                    </Table>
                        </div>


                       <div id="content">		


                              </div>
                </div>
          </div>


        </div>

		</div> </div>

        </body>
</html>

So sollte die Seite nach möglichkeit auf allen Monitoren und sämtlichen Browsern dargestellt werden:

Firefox Normal:

http://www.bilder-upload.eu/show.php?file=0lBY4BoVLiFVyM5.jpg

So sieht sie beim Firefox leider im Vollbild aus:

http://www.bilder-upload.eu/show.php?file=49TrmSUXvKGqAHg.jpg

Und so sieht sie im IE 7.0 aus:

http://www.bilder-upload.eu/show.php?file=rwKo4Kg6BKzjTSX.jpg

Die rechte Tabelle werde ich vermutlich auch noch per Navikasten lösen, doch das sind ja Details die hier jetzt erst mal nebensächlich sind.

Ich wäre Dir sowas von dankbar, wenn Du mir sagen kannst woran das liegt, denn das ist wirklich noch mein Hauptproblem.

Auf Wiederlesen Detlef

Bis dann.

Gruß

Charly2010

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Charly2010: Anordnung nebeneinander

Beitrag lesen

Anordnung nebeneinander

Objekte innerhalb einer Scrollbar mit <div frei positionieren

Anordnung nebeneinander