Responsive Design Blog auf Animexx

Josey

Hallo!

Ich arbeite ehrenamtlich für Animexx eV und arbeite gerade an einem Projekt.

In diesem Projekt wird es einem HTML-Weblog geben und dieser wurde bereits von einem Helfer erstellt. Leider ist er nicht responsive und der Helfer weis leider nicht, wie das funktioniert. Ich habe mich ein bisschen eingelesen und herumprobiert, aber ich krieg das so schnell nicht hin, weil wir bis zum 15.11. fertig sein müssten.

Den Code kann ich hier oder bei pastebin posten (würde dann example.de und Lorem Ipsum einfügen, okay so?) oder ich versende ihn per PN.

Ich brauche dringend Hilfe dabei.

Wenn irgendwer etwas Zeit hat, wäre das richtig awesome. Wir haben viele User die Mobil online gehen und für das Projekt wäre es besser, wenn diese den Blog nicht so verschoben angezeigt bekämen.

Grüße

Josey

PS: Ich selber kann nicht html-Scripten und weiß auch nicht, wie das auf der Aimexx-Seite funktioniert.

Probiert habe ich das hier:

https://www.w3schools.com/html/html_responsive.asp

Und alle px-Angaben in %en anzugeben. Beides klappte nicht.

Gastl

Poste uns mal den Link zur Seite.

Prinzipiell ist responsives Design einfach. Keine Festen Pixelangaben machen, nichts starr positionieren, sich an HTML5 und CSS3 halten.

Josey

Das hier wäre ein normaler Blog:

https://www.animexx.de/weblog/117279/

Das wäre ein Blog mit HTML auf der Seite:

http://www.animexx.de/weblog/1105448/822879/

Problem ist glaub ich, dass %-Angaben sich teilweise auf das Blogkästchen beziehen und nicht auf den Bildschirm?

Als ichs versucht habe, 100% einzutragen, wurde der Blog breiter und ich musste auch auf dem PC nach links und rechts scrolen. Total verwirrend für mich. Ist aber auch eine recht alte Seite mit Code über den Programmierer fluchen.

Edit: Der Link zu dem Blog ist noch auf Privat gestellt, damit kein User schon vorgucken kann.

Ich hab ihn mal rückdatiert, dann sieht ihn vlt niemand und alles so ausgetauscht, dass man nicht erkennt, worum es geht XD

http://www.animexx.de/weblog/117279/824750/

Gastl

Das sind keine für uns verwertbaren Links. Jedesmall soll man sich einloggen, was wir nicht können.

Josey

Sorry, der Blog stand auf "Alle" aber die Übereinstellung war auf "Nur eingeloggte"

Jetzt solltet ihr den hier sehen können:

https://www.animexx.de/weblog/117279/824750/

Gastl

Kann ich nichts mit anfangen. Sieht wie ein Frame aus,

Josey

Was ist ein Frame?

Hier ist der Quellcode:

Spoiler anzeigen

Code

<div class="user_csse16045995765579"><div class="user_csse16040561277357"><div class="user_csseneu"><div class="user_csse16040508390446"><div class="user_css"><p style="text-align:center;"><img alt="" src="https://i.ibb.co/2MKtWnL/rahmenoben2.png" style="height:39px; margin-bottom:-65px; margin-top:3px; text-align:center; width:623px" /></p>

<table border="0" cellspacing="0" style="background:rgb(217,225,249); border:1px solid rgb(198,210,246); height:500px; margin-left:auto; margin-right:auto; padding:30px; width:589px">
    <tbody>
        <tr>
            <td style="width:585px;">
            <table border="0" cellspacing="0" style="background:url(&quot;https://i.ibb.co/mrjyPSR/Ankundigungb.png&quot;) no-repeat center top; box-shadow:rgb(255,255,255) 0px 0px 8px 3px; height:700px; margin-left:auto; margin-right:auto; width:574px">
                <tbody>
                    <tr>
                        <td style="width:570px;">
                        <table border="0" cellspacing="0" style="background:url(&quot;https://s12.directupload.net/images/201027/h9pb837l.png&quot;); height:700px; margin-left:auto; margin-right:auto; margin-top:25px; width:600px">
                            <tbody>
                                <tr>
                                    <td style="width:596px;">
                                    <table border="0" cellspacing="0" style="margin-left:auto; margin-right:auto; width:596px">
                                        <tbody>
                                            <tr>
                                                <td style="height:410px;text-align:center;vertical-align:bottom;text-transform:uppercase;letter-spacing:2px;width:592px;"><span style="font-size:14px"><span style="font-family:arial,helvetica,sans-serif"><b>Ank&uuml;ndigung</b></span></span></td>
                                            </tr>
                                            <tr>
                                                <td style="text-align:justify;padding:15px 15px;width:552px;">
                                                <table border="0" cellspacing="0" style="height:500px; margin-left:auto; margin-right:auto; width:546px">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width:93px;"><a class="usera1" href="#user_html_1">Allgemein</a> <a class="usera" href="#user_html_2">Teilnahme-bedingungen</a><a class="usera" href="#user_html_3">Preisverteilung</a></td>
                                                            <td style="width:447px;"><div id="user_html_fullpage"><div class="page"><section id="user_html_1">
                                                            <table border="0" cellspacing="0" style="height:520px; margin-left:auto; margin-right:auto; padding-left:5px; padding-top:5px; width:380px">
                                                                <tbody>
                                                                    <tr>
                                                                        <td style="width:393px;"><div class="ex1" style="text-align:justify;">Hallo liebe Animexxler!<br />
                                                                        <br />
                                                                        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            </section>

                                                            <div class="page"><section id="user_html_2">
                                                            <table border="0" cellspacing="15" style="height:520px; margin-left:auto; margin-right:auto; padding-left:15px; padding-top:5px; width:380px">
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Hier kann was stehen... muss es aber nicht :P</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            </section>
                                                            </div>

                                                            <div class="page"><section id="user_html_3">
                                                            <table border="0" cellspacing="15" style="height:520px; margin-left:auto; margin-right:auto; padding-left:15px; padding-top:5px; width:380px">
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Preisverteilung</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            </section>
                                                            </div>
                                                            </div>
                                                            </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css #user_html_fullpage {
overflow-y:hidden;
height:500px;
width:auto
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css .page {
height:500px;
width:248px;
font-size:11px;
font-family:arial
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera:link, .user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera:visited {
background-color:#a0b4f0;
color:#fff;
font-size:11px;
font-family:arial;
width:80px;
padding:10px;
text-align:center;
text-decoration:none;
display:inline-block;
margin-bottom:5px
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera:hover, .user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera:active {
background-color:#7a96ea
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera1:link, .user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera1:visited {
background-color:#a0b4f0;
color:#fff;
font-size:11px;
font-family:arial;
width:80px;
padding:10px;
text-align:center;
text-decoration:none;
display:inline-block;
margin-bottom:5px;
margin-top:16px
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera1:hover, .user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 .user_css a.usera1:active {
background-color:#7a96ea
}

.user_csse16045995765579 .user_csse16040561277357 .user_csseneu .user_csse16040508390446 div.ex1 {
overflow-y:scroll;
overflow-x:hidden;
height:450px;
width:410px;
padding:10px;
margin-right:-35px
}
</style>

Alles anzeigen

Gastl

Dein Code ist kein gültiger HTML-Quellcode, nicht brauchbar.

Liefere bitte eine funktionierende Webseite, sonst bin ich hier raus.

Josey

Tut mir wirklich leid, mehr als das habe ich nicht

Das ist genau der Code, der in diesem Blog ist. Dieser Code macht diesen Blog.

Wie sieht so ein Code denn sonst aus, was fehlt?

Gastl

Ein gültiger Code fängt mit dem an:

<!doctype html><html lang="de">

<head>....

u.s.w.

Josey

Hm. Möglicherweise ist das auf der Seite irgendwie "versteckt". Die Blogs sind da vorformatiert und man kann nur in diesem bestimmten Rahmen arbeiten.Wenn ich keinen Quellcode eingebe, sehen die Blogs dort so aus:

http://www.animexx.de/weblog/117279/824752/

Wenn du da gar nicht eingreifen kannst, dann sorry fürs Zeitrauben.

Gastl

Naja, ich entscheide ja wo ich meine Zeit verschwende.

Dein letzter Link sieht bei mir so aus, nichts zu sehen.

Sag selbst, wie soll man da helfen?

Josey

Der letzte Link sieht wirklich so aus, ich wollte zeigen, wie das Ding aussieht, wenn man nur ins Textfeld tippt, ohne HTML in den Quellcode zu tippen.

Der Link davor ist mit dem Code im Quellcode.

Wie gesagt, ich habe keine Ahnung von HTML und kann nur raten, wieso das dort anders funktioniert.

Edit:
Mir wurde jetzt gesagt, dass das ganze Table-Ding völlig falsch ist. Wir sollen Grid benutzen. Aber das begreif ich grad noch nicht so richtig.

Josey

Und jetzt wurde mir gesagt, dass wirs abblasen müssen.

Kann mir einer vlt sagen, mit welchem Codeschnippsel ich ein Bild über ein anderes lege, so wie in meinem Beispielcode?

Also wenn ich ohne table arbeite, kann ich dann die drei Bilder (der Rahmen oben, das grüne und das weiße), übereinanderlegen?

Oder mache ich das dann lieber statisch in einem Paintprogramm?

Wie kann ich ein Bild dann aber in den Hintergrund legen?

Tags