erotikbaer: bild in div ausrichten

SELF-Forum

bild in div ausrichten

erotikbaer
– Informationen zu den Bewertungsregeln

Hi!
Vielleicht kann mir ja jemand helfen, ich seh den Wald vor lauter Bäumen nicht mehr.
Folgendes habe ich:
erstmal den link: www.chrisruby.de/tmp/meins.html

und nun den quelltext:

  
<div style="border:5px solid red;max-width:1100px;min-width:1100px; min-height:800px;max-height:1500px;background-image: url(http://chrisruby.de/tmp/Hintergrundneu.jpg);background-repeat:no-repeat;">  
<div style="max-width:1100px;min-width:1100px; min-height:720px;max-height:1420px;" >  
<div style="height:160px;width:1100px;text-align:center;vertical-align:bottom;"><img src="http://chrisruby.de/tmp/LogoAS.gif" alt="Smiley face" width="400"></div>  
<div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;z-index:1;">  
<p>hallllloooo111aaa</p>  
<p>hallllloooo111bbb</p>  
</div>  
<div style="border-radius: 18px;max-width:700px;min-width:700px;align:center;vertical-align:top;background-color:white;min-height:560px;max-height:1260px;float:left;">  
<div style="padding-left:10px;"><p>Hier kommt text</p></div>  
</div>  
<div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;text-align:center;"><img src="http://chrisruby.de/tmp/testneu.jpg" alt="Smiley face" align="center" width="190px"></div>  
</div>  
<div style="position:relative;max-width:1100px;min-width:1100px; min-height:80px;max-height:80px;" >  
<div style="position:absolute;float:left;width:200px;align:left;height:80px;"><img src="http://chrisruby.de/tmp/Auto.gif" align="left"></div>  
<div style="position:absolute;float:left;width:600px;align:left;height:80px"></div>  
<div style="position:absolute;float:left;width:200px;align:right;height:80px;"><img src="http://chrisruby.de/tmp/sie.gif" align="right" width="100px"></div>  
</div>  
</div>

Ich möchte, dass das Bild sie.gif rechts ausgerichtet unten rechts auf der Seite ist (in der untersten Ecke vom ersten Div) und das Bild Auto.gif in der untersten linken Ecke.

ich bekomm das einfach nicht hin.

Gruß Christian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. bild in div ausrichten

    erotikbaer
    – Informationen zu den Bewertungsregeln

    Hi!
    Vielleicht kann mir ja jemand helfen, ich seh den Wald vor lauter Bäumen nicht mehr.
    Folgendes habe ich:
    erstmal den link: www.chrisruby.de/tmp/meins.html

    und nun den quelltext:

    <div style="border:5px solid red;max-width:1100px;min-width:1100px; min-height:800px;max-height:1500px;background-image: url(http://chrisruby.de/tmp/Hintergrundneu.jpg);background-repeat:no-repeat;">
    <div style="max-width:1100px;min-width:1100px; min-height:720px;max-height:1420px;" >
    <div style="height:160px;width:1100px;text-align:center;vertical-align:bottom;"><img src="http://chrisruby.de/tmp/LogoAS.gif" alt="Smiley face" width="400"></div>
    <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;z-index:1;">
    <p>hallllloooo111aaa</p>
    <p>hallllloooo111bbb</p>
    </div>
    <div style="border-radius: 18px;max-width:700px;min-width:700px;align:center;vertical-align:top;background-color:white;min-height:560px;max-height:1260px;float:left;">
    <div style="padding-left:10px;"><p>Hier kommt text</p></div>
    </div>
    <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;text-align:center;"><img src="http://chrisruby.de/tmp/testneu.jpg" alt="Smiley face" align="center" width="190px"></div>
    </div>
    <div style="position:relative;max-width:1100px;min-width:1100px; min-height:80px;max-height:80px;" >
    <div style="position:absolute;float:left;width:200px;align:left;height:80px;"><img src="http://chrisruby.de/tmp/Auto.gif" align="left"></div>
    <div style="position:absolute;float:left;width:600px;align:left;height:80px"></div>
    <div style="position:absolute;float:left;width:200px;align:right;height:80px;"><img src="http://chrisruby.de/tmp/sie.gif" align="right" width="100px"></div>
    </div>
    </div>

    
>   
> Ich möchte, dass das Bild sie.gif rechts ausgerichtet unten rechts auf der Seite ist (in der untersten Ecke vom ersten Div) und das Bild Auto.gif in der untersten linken Ecke.  
>   
> ich bekomm das einfach nicht hin.  
>   
> Gruß Christian  
  
  
Ergänzung: in einem anderen Forum habe ich mittlerweile den Hinweis/Tipp bekommen, dass ich die align angaben und auch die position angaben wegmachen muss und dann bei dem sie.jpg float:left zu float:right ändern muss.  
  
es sieht schonmal besser aus, ist aber noch nicht perfekt.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. bild in div ausrichten

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber erotikbaer,

      und nun den quelltext:

      ehrlich, das ist eher ein Quältext!

      <div style="border:5px solid red;max-width:1100px;min-width:1100px; min-height:800px;max-height:1500px;background-image: url(http://chrisruby.de/tmp/Hintergrundneu.jpg);background-repeat:no-repeat;">
      <div style="max-width:1100px;min-width:1100px; min-height:720px;max-height:1420px;" >
      <div style="height:160px;width:1100px;text-align:center;vertical-align:bottom;"><img src="http://chrisruby.de/tmp/LogoAS.gif" alt="Smiley face" width="400"></div>
      <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;z-index:1;">
      <p>hallllloooo111aaa</p>
      <p>hallllloooo111bbb</p>
      </div>
      <div style="border-radius: 18px;max-width:700px;min-width:700px;align:center;vertical-align:top;background-color:white;min-height:560px;max-height:1260px;float:left;">
      <div style="padding-left:10px;"><p>Hier kommt text</p></div>
      </div>
      <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;text-align:center;"><img src="http://chrisruby.de/tmp/testneu.jpg" alt="Smiley face" align="center" width="190px"></div>
      </div>
      <div style="position:relative;max-width:1100px;min-width:1100px; min-height:80px;max-height:80px;" >
      <div style="position:absolute;float:left;width:200px;align:left;height:80px;"><img src="http://chrisruby.de/tmp/Auto.gif" align="left"></div>
      <div style="position:absolute;float:left;width:600px;align:left;height:80px"></div>
      <div style="position:absolute;float:left;width:200px;align:right;height:80px;"><img src="http://chrisruby.de/tmp/sie.gif" align="right" width="100px"></div>
      </div>
      </div>

        
Warum nutzt Du so viele <div>-Elemente? Welchen \_inhaltlichen\_ Sinn sollen die haben?  
  
Warum schreibst Du alle Layoutangaben (Deine style-Attribute) Direkt ins HTML-Dokument? Diese gehören in ein externes Stylesheet ausgelagert! Näheres findest Du hier im Wiki: <http://wiki.selfhtml.org/wiki/CSS/Einbindung>  
  

> > Ich möchte, dass das Bild sie.gif rechts ausgerichtet unten rechts auf der Seite ist (in der untersten Ecke vom ersten Div) und das Bild Auto.gif in der untersten linken Ecke.  
  
Du sprichst von einem visuellen Element, welches kein Inhalt, sondern lediglich Hintergrundbild ist. Also solltest Du auch kein <img>-Element verwenden (das wäre Inhalt), sondern im CSS-Code (Deine style-Attribute, später hoffentlich Dein Stylesheet) unterbringen!  
  

> Ergänzung: in einem anderen Forum habe ich mittlerweile den Hinweis/Tipp bekommen, dass ich die align angaben und auch die position angaben wegmachen muss und dann bei dem sie.jpg float:left zu float:right ändern muss.  
  
Du bist also ein Cross-Poster? Das ist hier nicht gern gesehen. Wenn wir hier Dein Problem lösen sollen, dann ist das Hin- und Herspringen zwischen verschiedenen Foren eine saumäßig schlechte Idee, weil man der Diskussion über verschiedene Foren hinweg einfach nicht sinnvoll folgen kann (und will) - und ein Tritt in den Rücken der freiwilligen Helfer! Siehe dazu [unsere Tipps für Fragende](/hilfe/charta.htm#tipps-fuer-fragende).  
  

> es sieht schonmal besser aus, ist aber noch nicht perfekt.  
  
"Perfekt" wäre es, wenn in Deinem HTML nichts auf Deine Layout-Orgie hinweisen würde.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. bild in div ausrichten

      erotikbaer
      – Informationen zu den Bewertungsregeln

      Hi!
      Vielleicht kann mir ja jemand helfen, ich seh den Wald vor lauter Bäumen nicht mehr.
      Folgendes habe ich:
      erstmal den link: www.chrisruby.de/tmp/meins.html

      und nun den quelltext:

      <div style="border:5px solid red;max-width:1100px;min-width:1100px; min-height:800px;max-height:1500px;background-image: url(http://chrisruby.de/tmp/Hintergrundneu.jpg);background-repeat:no-repeat;">
      <div style="max-width:1100px;min-width:1100px; min-height:720px;max-height:1420px;" >
      <div style="height:160px;width:1100px;text-align:center;vertical-align:bottom;"><img src="http://chrisruby.de/tmp/LogoAS.gif" alt="Smiley face" width="400"></div>
      <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;z-index:1;">
      <p>hallllloooo111aaa</p>
      <p>hallllloooo111bbb</p>
      </div>
      <div style="border-radius: 18px;max-width:700px;min-width:700px;align:center;vertical-align:top;background-color:white;min-height:560px;max-height:1260px;float:left;">
      <div style="padding-left:10px;"><p>Hier kommt text</p></div>
      </div>
      <div style="max-width:200px;min-width:200px;vertical-align:top;float:left;min-height:560px;max-height:1260px;text-align:center;"><img src="http://chrisruby.de/tmp/testneu.jpg" alt="Smiley face" align="center" width="190px"></div>
      </div>
      <div style="position:relative;max-width:1100px;min-width:1100px; min-height:80px;max-height:80px;" >
      <div style="position:absolute;float:left;width:200px;align:left;height:80px;"><img src="http://chrisruby.de/tmp/Auto.gif" align="left"></div>
      <div style="position:absolute;float:left;width:600px;align:left;height:80px"></div>
      <div style="position:absolute;float:left;width:200px;align:right;height:80px;"><img src="http://chrisruby.de/tmp/sie.gif" align="right" width="100px"></div>
      </div>
      </div>

      
> >   
> > Ich möchte, dass das Bild sie.gif rechts ausgerichtet unten rechts auf der Seite ist (in der untersten Ecke vom ersten Div) und das Bild Auto.gif in der untersten linken Ecke.  
> >   
> > ich bekomm das einfach nicht hin.  
> >   
> > Gruß Christian  
>   
>   
> Ergänzung: in einem anderen Forum habe ich mittlerweile den Hinweis/Tipp bekommen, dass ich die align angaben und auch die position angaben wegmachen muss und dann bei dem sie.jpg float:left zu float:right ändern muss.  
>   
> es sieht schonmal besser aus, ist aber noch nicht perfekt.  
  
  
hab es jetzt hinbekommen.  
<div  style="max-width:1100px;min-width:1100px; min-height:80px;max-height:80px;z-index=2;">  
   <img src="http://chrisruby.de/tmp/Auto.gif" style="vertical-align:bottom;align:left; float:left;margin-top:-145px;">  
       <img src="http://chrisruby.de/tmp/sie.gif" style="width:220px;vertical-align:bottom;align:right;float:right;margin-top:-365px;">  
</div>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln