Beiträge von Martius

Cool, danke! Wieder was dazugelernt

- - - Aktualisiert - - -

Aber bitte lass die Beispiele noch ein paar Tage online, da ich gerade nur das Ergebnis sehen kann und nicht den Quelltext

OK, danke. Dann werde ich mir das Thema Checkbox-Hack mal ansehen.

Mein 'ungewöhnliches' Vorgehen habe ich auf einem Javascript-Kurs gelernt. Na ja, hat anscheinend halt jeder seine eigene spezielle Art zu coden

Hallo,

sorry, wenn es dir so vorkommt, als würde ich deine Anregungen nicht umsetzten wollen ..

Ich bin ziemlich lange aus dem Webdesign raus und brauchte schnell eine Website für den Apple Store. Ich habe bei meinem Provider leider kein PHP sonst hätte ich es auf jeden Fall mit PHP gelöst.

Im Quelltext der main.js sieht man doch genau wie das Ganze funktioniert. Je nach angeklicktem Link werden der Text ausgetauscht und die Höhe der nicht benötigten Bilder auf 0px gesetzt.

Martin

Hallo MrMurphy,

danke für die schnelle Antwort!

Leider kommt dieser InlineStyle von der Javascript Datei. Wie du vielleicht gesehen hast, sind es ja eigentlich drei img-divs in der HTML-Datei untereinander.
Das heisst, dass ich beim Wechseln der Inhalte immer zwei Bilder auf height='0px' setze und das dritte auf seine Originalhöhe. Ich weiß nicht, wie ich das sonst lösen soll ..

Hallo,

ich hatte eine Website mit folgender Struktur:

<section id="main">
    <article>
        <h2>Überschrift hier</h2>
        <img src="" alt="" />
        <p>Text hier</p>
   </article>
</section>

Dazu der css Code:

#main {    
    display: block;
    width: 96%;
    max-width: 980px;
    margin: 1.25em auto;
    padding: 0em;
}


#main article {
    display: inline-block;
    width: 65.3%;
    background: #FFF;
    vertical-align: top;
    margin: 0em;
    padding: 0em;
    text-align: center;
    border-radius: 4px;
}

Jetzt habe ich mich entschlossen, die Website mit Hilfe von Javascript zu füllen, also Container zu erstellen, in denen der Text ausgetauscht wird.
Die Struktur sieht jetzt so aus:

<section id="main">
    <article>
        <div id="headBox"></div>
        <div id="homeImage"><img src="" alt="" /></div>
        <div id="textBox"></div>
     </article>
</section>

Der neue css Code dazu:

#homeImage img {
    max-width: 600px;
    box-shadow: 0px 0px 10px -5px #4C4948;
    border-radius: 5px;
}


#headBox {
    display: block;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.563em;
    line-height: 1.0em;
    font-weight: 100;
    margin: 0em;
    padding: 0.9em;
    text-align: left;
    color: #2F2D2C;
}




#textBox {
    display: block;
    font-family: 'Helvetica', 'Arial', sans-serif;
    line-height: 1.25em;
    font-weight: 100;
    min-height: 200px;
    margin: 0em;
    padding: 1.38em;
    text-align: justify;
    color: #2F2D2C; 
}

Das Design wurde mit Hilfe von viewport und media screen für mobile gerate optimiert.
Leider rutscht der Text beim verkleinern der Breite immer mal nach unten und bleibt nicht direkt unter dem Bild, wie das in meiner ursprünglichen Version super geklappt hat. Ich habe schon versucht, den Text-Container oben zu positionieren, aber auch mit float habe ich es nicht hinbekommen.

Hier der Link zu meiner Seite und dem vollständigen Quellcode: http://00101010.de

Irgendeine Idee, was ich verändern kann, damit der Text oben bleibt?

Danke
Martin