kostenloser Webspace werbefrei: lima-city

Bild + Text

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   b****g

   22:58, 9.1.2010

   Hi,
   
   ich will eigentlich was einfaches machen, krieg es aber nicht hin :( Ich bin zu blöd dazu :( :D
   Hier eine Skizze:
   
   http://bettag.lima-city.de/lc.png
   
   danke im Voraus!
   
   Beitrag zuletzt geändert: 9.1.2010 23:00:36 von bettag

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tibel

   tibel hat kostenlosen Webspace.

   23:04, 9.1.2010

   Als Anregung:
   
   

   <div id="wrapper">
     <div id="bild">
       <img src="bild.jpg" />
     </div>
     <div id="text" style="margin:auto;">
       Hier steht der Text
     </div>
   </div>

   
   
   Nichts für copy&paste, sondern zum Anpassen und natürlich ohne Garantie
4. Autor dieses Themas

   b****g

   23:06, 9.1.2010

   tibel schrieb:
   Als Anregung:
   
   

   <div id="wrapper">
     <div id="bild">
       <img src="bild.jpg" />
     </div>
     <div id="text" style="margin:auto;">
       Hier steht der Text
     </div>
   </div>

   
   
   Nichts für copy&paste, sondern zum Anpassen und natürlich ohne Garantie
   

   
   
   Jetzt steht der Text aber unter dem Bild :D

5. tibel

   tibel hat kostenlosen Webspace.

   23:12, 9.1.2010

   dann schau dir mal die CSS-Eigenschaften position und float an.
   
   Der wrapper müsste glaube ich position:relative; die anderen beiden divs position:absolute; haben.
   Das bild float:right; und/ oder der Text float:left;
   
   Mit Position muss ich aber selbst auch immer rumspielen und ich habe leider auch schon (viel zu) lange nichts mehr mit html gemacht

6. juwie69

   juwie69 hat kostenlosen Webspace.

   23:17, 9.1.2010

   andere Variante von mir, mal mit ner Tabelle, schreib was nicht so ist wie du dir das vorstellst
   

   <table align="center" border width=80%>
   		<tr>
   		<td align="center" valign="top" width=50%>
   			<p align="center" ><img width=80% height=80% src="bilder/bild.jpg"></p>
   		</td>
   		<td align="center" width=50%> 
   		hier kann dein Text stehen
   		</td>
   		</tr>
   	</table>

7. psd

   psd hat kostenlosen Webspace.

   7:43, 10.1.2010

   Die DIV Variante:
   
   HTML
   
   

   <div id="wrapper">
          <div id="bild">
             <img src="../deinbild.jpg" height="80px" width="80px">
          </div>
          <div id="text">
             Ich Stehe am oberen rand, mittig!
          </div> 
   </div>

   
   
   CSS:
   
   

   #wrapper{
          height:160px;
          width:160px;
          margin: auto;
          padding: 0;
   }
   #bild {
          height:80px;
          width:80px;
          margin: auto;
          padding: 0;
          float:left;
   }
   #text {
          height:80px;
          width:80px;
          margin: auto;
          padding: 0;
          float:left;
          text-align: center;
   }

   
   
   Beitrag zuletzt geändert: 10.1.2010 7:44:37 von psd

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?