Anzeige

Wie den Text im 2. Div runter rutschen lassen

Wie den Text im 2. Div runter rutschen lassen | PSD-Tutorials.de

Erstellt von jamie0502, 07.09.2010.

  1. jamie0502

    jamie0502 Noch nicht viel geschrieben

    Dabei seit:
    23.03.2010
    Beiträge:
    11
    Geschlecht:
    weiblich
    Wie den Text im 2. Div runter rutschen lassen
    Hab ein Problem mit 2 Divs und einem Image [​IMG]

    ich hab ein Image:[​IMG]

    und ein zweites: [​IMG]

    Weiter hab ich eine Tabelle mit den beiden Divs:
    HTML:
    1. ....
    2. <table width="100%" border="0" cellspacing="0" cellpadding="0">
    3.                 <tr>
    4.                    <td width="469" height="43" valign="top"><div id="content"><div class="content"><p>sdgsdgfhgfdfdgjdj</p>
    5.                    </div></div></td>
    6.                 </tr>
    7.                 <tr>
    8.                   <td style="width:469px;">&nbsp;</td>
    9.                 </tr>
    10.               </table>
    11. ....                                            
    CSS:
    Code (Text):
    1. #content{
    2. background:url(Bild1);
    3. padding-top:160px;
    4. background-repeat:no-repeat;
    5.  
    6. }
    7. .content{
    8. background:url(Bild2) repeat-y;
    9. padding-left:60px;
    10.  
    11. }                                            
    12.  
    Ich möchte jetzt erreichen das der Text um ca. 80px vom ersten Bild nach unten rutscht und das 2.te Bild im Hintergrund sixh an der y-Achse wiederholt.
    Das erste ist nur im Hintergrund wegen dem oberen Teil der runden Ecken.

    Warum das Image nicht anders aufteilen?
    Geht nicht. Screen: [​IMG]

    Möchte ja das der Text, im Screen weiter oben ist, als von oben ca. 80px nach unten.

    Ich hab schon alles mögliche versucht, mit Z-Index, padding, margin etc

    Aber bekomms nicht hin...
    Hoffe ihr könnt mir da iwie helfen...
     
    Zuletzt bearbeitet: 07.09.2010
    #1      
  2. Sorc

    Sorc Nicht mehr ganz neu hier

    Dabei seit:
    14.08.2009
    Beiträge:
    65
    Geschlecht:
    männlich
    Ort:
    Rostock
    Software:
    PhpStorm, Xcode, Android Studio, NetBeans, Visual Studio
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    Wenn du schon mit divs Arbeitest kannst du auch gleich table weglassen. Mache 3 boxen mit dem 1ten bild den anfang ohne text. Die 2te mit repeat wiederholen lassen und text einfügen. und in der 3ten box das ende des images. Und mit padding kannst du dann den Text einrücken. Fals du noch weitere tipps brauchst schaue mal hier --> http://little-boxes.de oder hier CSS4You
     
    #2      
  3. Momo22m

    Momo22m Pixxel-Design / Lehrling

    Dabei seit:
    01.04.2010
    Beiträge:
    604
    Geschlecht:
    männlich
    Ort:
    Körner
    Software:
    Adobe Master Collection CS3 . Ps CS5 . Dw CS5
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    genau mach mit css tabele sind out ihr ein kleiner code wie du es machen konntes

    HTML:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. div#container {
    5.     width:1000px;
    6.     height:768px;
    7.     }
    8.    
    9. div#box {
    10.     background:url(..//Bilder/dein bild.jpg) no-repeat;
    11.     width:500px;
    12.     height:500px;
    13.     position:absolute;
    14.     top:150px;
    15.     left:200px;
    16.      }
    17.      
    machst deine box ihn ein grafik rein

    musst es nur noch ausrichten mit top und left und mit der hoche und breite

    HTML:
    1.  
    2. <div id="container">
    3.  <div id="box"></div>
    4.   </div>
    5.  
    dann kannst du ihn den div box noch dein Text rein machen musst den aber auch in css an sprechen und coden

    wen du hilfe brauchst schreib es einfach

    so den text kannst du ihn der css dan so an sprechen

    HTML:
    1.  
    2. #container #box  p {
    3.    color:#333;
    4.    top:80px;
    5.    left10px;
    6.    }
    7.  
    so aber bedenke wen du den p tag ansprecht musst du die breite und hoche von den div box nutzen

    also wen du ca 80px runter willst kommt halt top 80px rein und wen du 40px von links rein willst musst du left 40px machen

    hoffe konnte hilfen
     
    Zuletzt bearbeitet: 07.09.2010
    #3      
  4. jamie0502

    jamie0502 Noch nicht viel geschrieben

    Dabei seit:
    23.03.2010
    Beiträge:
    11
    Geschlecht:
    weiblich
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    Danke für die schnelle Antwort, aber das hilft leider nix.

    Die Tabelle ist da, weil das Ganze ein Template ist.
    Die Box ist auch nur der Content ;)

    Die Problematik ist, wie ich das 2.te Bild unter das Erste bekomme, da das 2.te Bild ein Puffer für die Höhe ist.

    Also wenn mehr Text drinne steht, dient das 2.te Image als Dynamischer Hintergrund. Ich muss also dem Image irgendtwie sagen können, dass es erst nach dem 1.tem Anfängt anzuzeigen, und nicht als erstes.
     
    #4      
  5. Momo22m

    Momo22m Pixxel-Design / Lehrling

    Dabei seit:
    01.04.2010
    Beiträge:
    604
    Geschlecht:
    männlich
    Ort:
    Körner
    Software:
    Adobe Master Collection CS3 . Ps CS5 . Dw CS5
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    da kann ich leider nicht Hilfen kenn mich mit tablen nicht aus sorry
    hoffe das noch eine kommt un dir hilfen kann
     
    #5      
  6. Sorc

    Sorc Nicht mehr ganz neu hier

    Dabei seit:
    14.08.2009
    Beiträge:
    65
    Geschlecht:
    männlich
    Ort:
    Rostock
    Software:
    PhpStorm, Xcode, Android Studio, NetBeans, Visual Studio
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    HTML Code:

    HTML:
    1.  
    2. ...
    3. <table border="0" cellpadding="0" cellspacing="0">
    4.     <tr>
    5.         <td class="bild1">&nbsp;</td>
    6.     </tr>
    7.     <tr>
    8.         <td class="bild2">Text Text Text Text Text Text Text Text</td>
    9.     </tr>
    10. ...
    11.  
    CSS Code:
    Code (Text):
    1.  
    2. .bild1 {
    3.     background-image: url(bild1);
    4.     width: 469px;
    5.     height: 197px;
    6. }
    7. .bild2 {
    8.     background-image: url(bild2);
    9.     background-repeat: repeat-y;
    10.     width: 197px;
    11. }
    12.  
    So funktioniert es dann. Aber es wäre trotzdem mit div boxen machbar. Tabellen sind kein muss, auch wenn schon welche vorhanden sind.
     
    #6      
  7. Landorien

    Landorien (x)HTML-/CSS-Guru

    Dabei seit:
    06.09.2010
    Beiträge:
    35
    Geschlecht:
    männlich
    Software:
    Eclipse Helios
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    Du solltest dir zu erst überlegen was du da machst. Denn du zeichnest garantiert keinen tabellarischen Inhalt aus.

    Vllt solltest du ersteinmal deine HTML-Grundlagen auffrischen. Ansonsten kann ich das:

    Runde und andere Ecken (Webdesign) | andreas-kalt.de

    "etwas" empfehlen, wenn auch dann eine tolle div-Suppe entsteht.


    Gruß
    Lando
     
    #7      
  8. jamie0502

    jamie0502 Noch nicht viel geschrieben

    Dabei seit:
    23.03.2010
    Beiträge:
    11
    Geschlecht:
    weiblich
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    Das ist ja mein Problem bei der Tabelle, wenn ich 2 Zeilen maceh, dann muss der Text über die Erste Zeile, weil dann das Image zu groß wäre und der Text ca. 80px zu weit unten ist....

    Habe andere Lösung gefunden: Neues Design -> Kein Problem ^^
     
    #8      
  9. Landorien

    Landorien (x)HTML-/CSS-Guru

    Dabei seit:
    06.09.2010
    Beiträge:
    35
    Geschlecht:
    männlich
    Software:
    Eclipse Helios
    Wie den Text im 2. Div runter rutschen lassen
    AW: Wie den Text im 2. Div runter rutschen lassen

    Naja aber, wie schon zu oft erwähnt, du hast hier doch keine tabellarischen Daten die auszeichnest. Also wieso verwendest du eine Tabelle?
     
    #9      
Seobility SEO Tool
x
×
×