Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe bei CSS und HTML 5.0

B

brtwrst993

Guest

Ich habe gerade folgendes Problem:

Ich wollte ein paar Texte (unteranderem ein Impressum) auf meine HP packen. Also CSS Div geschrieben mit position,top ,left.
So nun den dazugehörigen Text geschrieben und aufn Webserver gepackt. Nun wird aber meine CSS Datei nemme übernommen hoffe ihr könnt mir helfen:


Meine CSS Datei:
CSS:
         #Dolli_Pic {

         position: absolute;

         top: 175px;

         left: 75px;

         }





        #info_txt  {

        position: absolute;

        top: 550px;

        left: 75px;

        }



        #visit_guestb {

        position: absolute;

        top: 550px;

        left: 500px;

        }



        #neue_theke {

        position: absolute;

        top: 200px;

        left: 800px;

        }



        #login {

        position: absolute;

        top: 125px;

        left: 60px

       }

      

       #impressum {

        position: absolute;

        top: 825px;

        left: 100px;

        }
       
        #zulieferer {
         position: absolute;
         top: 550px;
         left: 1100px;
        }



Und die dazugehörige HTML Datei:

HTML:
<!DOCTYPE html>



<html>





<head>

    <title>Home | DoCa - RBZ</title>

    <link rel="stylesheet" type="text/css" href="style/style.css"/>

    <link rel="stylesheet" type="text/css" href="style/home_style.css"/>

    <link rel="icon" href="http://www.doca-rbz.de/Bilder/favicon.ico" type="image/x-icon" />

    <meta charset="UTF-8">

    <meta name="description" content="Diese Seite wurde f&uuml;r die Sch&uuml;lerfirma der Dollinger - Realschule Biberach erstellt. Sie soll den Sch&uuml;ler dazu dienen, den DoCa - Mitabeitern ein Feedback f&uuml;r ihre Arbeit zu geben">

    <meta name="author" content="">

    <meta name="keywords" content="DoCa, Dolli, Dollinger, Realschule, Sch&uuml;lerfirma, Biberach">





    <style>

        a:link {

            color: #000000;

            background-color: transparent;

            text-decoration: underline;

        }

       

        a:visited {

            color: #000000;

            background-color: transparent;

            text-decoration: blink;

        }

       

        a:hover {

            color: red;

            background-color: transparent;

            text-decoration: underline;

        }

       

    </style>

</head>



<body bgcolor="#DA9800">



    <div id="navi_Home">



        <a href="index.html"><img border="0" src="Bilder/HBut/Home.png" alt="Home"/></a>



    </div>



    <div id="navi_Kontakt">



        <a href="Kontakt.html"><img border="0" src="Bilder/HBut/Kontakt.png" alt="Kontakt" /></a>



    </div>

   

    <div id="navi_Gaestebuch">



        <a href="http://www.doca-rbz.de/Guestbook//index.php"><img border="0" src="Bilder/HBut/Guestbook.png" alt="G&auml;stebuch" /> </a>



    </div>



    <div id="navi_ueber_uns">



        <a href="ueber_uns.html"><img border="0" src="Bilder/HBut/Ueber_uns.png" alt="&Uuml;ber uns" /></a>



    </div>



    <div id="navi_Galerie">



        <a href="Galerie.html"><img border="0" src="Bilder/HBut/Galerie.png" alt="Galerie"/></a>



    </div>



    <div id="DoCa-Logo">



        <a href="http://www.doca-rbz.de"><img border="0" src="Bilder/Logo.png" alt="DoCa - Logo"/></a>



    </div>



    <div id="Dolli_Pic">



        <a href="http://www.dollinger-realschule.de" target="_blank"><img src="Bilder/dolli.jpg" alt="Dollinger Realschule Biberach" border="0"/></a>



    </div>



    <div id="info_txt">



        <p style="font-size: large; font-family: Verdana;">



            Diese Seite soll dazu dienen, <br> dass die Sch&uuml;ler und Sch&uuml;lerinnen <br> ein Feedback an das DoCa - Team <br> geben k&ouml;nnen. <br>

            Dies wird komplett anonym geschehen, <br> bis auf die Angabe der Klasse <br> da wir wissen wollen aus welchen <br> Klassenstufen die Anregungen, <br> Infos und Ideen kommen und so <br> darauf reagieren k&ouml;nnen

        </p>



    </div>

    <div id="visit_guestb">



        <p style="font-size: xx-large; color:#008000">

            Lasst doch ein kleines Feedback <br> in unserem <a target="_blank" style="text-decoration: underline;" href="http://www.doca-rbz.de/Guestbook//index.php"><font color="#008000">G&auml;stebuch</font></a> da

        </p>

    </div>

    <div id="neue_theke">

        <table>

            <tr>

               <td>

                    <p style="font-size: x-large;">



                        Hey Leute,

                        <br>wir haben nun eine neue Theke.

                        <br>Daf&uuml;r erstmal einen gro&szlig;en dank

                        <br> an die Schule.

                        <br> Sie haben n&auml;mlich einen

                        <br> teil der Kosten &uuml;bernommen.

                        <br>Wenn mal die <a href="Galerie.html">Galerie</a> fertig wird

                        <br>(wahrscheinlich in den  Sommerferien)

                        <br>werden da nat&uuml;rlich auch direkt Bilder eingef&uuml;gt.

                    </p>

                </td>

                <td>

                <p>

                Aber hier schenke ich euch mal eins das nicht gerade professiell ist.

                <img src="Bilder/theke_neu.jpg"/>

                    </p>

                </td>

            </tr>

        </table>

    </div>

    <div id="login">

        <a href="login.php">Login | Interner Bereich</a>

    </div>

   

    <div id="impressum">

        <a href="Impressum Dolli Cafe"><font size="4">Impressum</font></a>

    </div>

   

    <div id="zulieferer">

        <table border="0">

            <tr>

                <td>

                    <p>

                        <font size="4">

                            Unsere Produkte beziehen wir von folgenden Unternehmen:

                        </font>

                    </p>

                </td>

            </tr>

            <tr>

                <td>

                    <ul>

                        <li>

                            <p>

                                <font>

                                    <a target="_blank" style="text-decoration: underline;" href="http://hofmolkerei-depfenhart.de/">Hofmolkerei Depfenhardt</a>

                                </font>

                            </p>

                        </li>

                    </ul>

                </td>

            </tr>

            <tr>

                <td>

                    <ul>

                        <li>

                            <p>

                                <font>

                                    <a href="http://www.steigmiller-lutz.de/">Steigmiller Lutz</a>

                                </font>

                            </p>

                        </li>

                    </ul>

                </td>

            </tr>

            <tr>

                <td>

                    <ul>

                        <li>

                            <p>

                                <a href="http://www.hofladen-steigmiller.de/">Hofladen Steigmiller</a>

                            </p>

                        </li>

                    </ul>

                </td>

            </tr>

        </table>

    </div>

</body>

</html>
 

B

brtwrst993

Guest

Also ich habe den betreffenden text vorerst runtergenommen. Weil es ist einfach sonst so dass man nix lesen kann aber es handelt sich um die index seite:
 

Ilse_Schnick

Aktives Mitglied

css im richtigen Ordner?

...aber mal ganz davon abgesehen...

Der Code ist grausam... so ein Mischmasch aus html2. bis 5 tags, die nicht mehr zeitgemäß sind, Tabellen für Layoutzwecke missbraucht...

du verbaust 3 css (2x extern, die auch noch identissch sind, 1x im Dokument) dann bringst du auch noch ins html <body bgcolor="#DA9800">


...und absolute Positionierung?

Wenn jemand mit Tablett oder Smartphone diese Seite aufruft, geht gar nüscht mehr...

Wenn du das aber machst, sollten auch Breitenangaben und (ich persönlich bringe auch noch n z-index dazu) mit rein, sonst bringst absolute Positionierung eher nüscht...

Deine Ideen lassen sich wunderbar als FluidDesign umsetzen ohne absolute Positionierung...


Denk mal drüber nach und fang noch mal ganz von vorn an... (nicht böse gemeint)
 

Ilse_Schnick

Aktives Mitglied

@Ilse_Schnick ich bin n blutiger anfänger ;)
Fluid hab ich noch net gehört.... Mal schauen


Ja, das sollte auch kein Vorwurf sein... fluid oder liquid oder barrierefreies Webdesign...

Bei 'ner Schulwebseite kannst du bestimmt davon ausgehen, dass deine Leute per Smartfone draufgehen...

Da ist eine Positionierung bei 1100px schon mal suboptimal... :)

Bestimmt wirste hier noch Hilfe bekommen...

Vorher bitte einfach mal ein paar Gedanken machen (und Skizzen) :)
 
B

brtwrst993

Guest

Ja haste recht. Das merke ich auch an den 4:3 Bildschirmen an der Schule. Aber Bootstrap hab ich mir auch eben angeschaut, danke für den Tipp @pemis.
Ich schau mal was ich noch so schaffe. bin eben 10. klasse und jetzt kommen dann Prüfungen. also eben büffeln übers jahr. ;)))
 
P

pemis

Guest

Ja haste recht. Das merke ich auch an den 4:3 Bildschirmen an der Schule. Aber Bootstrap hab ich mir auch eben angeschaut, danke für den Tipp @pemis.
Ich schau mal was ich noch so schaffe. bin eben 10. klasse und jetzt kommen dann Prüfungen. also eben büffeln übers jahr. ;)))

Deine Schulseite stellt sich mir nicht so richtig dar, da laufen Schriften übereinander. Und wenn ich davon ausgehe, dass 99 Prozent deiner Leute mit dem Smartphone draufgehen, dann erleben sie ein böse Überraschung.
Schau dir nur mal als Beispiel meine Homepage an, sie ist ganz einfach mit Bootstrap erstellt. http://www.petermischur.de
 

Ilse_Schnick

Aktives Mitglied

Schau dir nur mal als Beispiel meine Homepage an, sie ist ganz einfach mit Bootstrap erstellt. http://www.petermischur.de


Naja, Textfelder mit Querscrollen zur Inhaltswiedergabe ist jetzt aber auch nicht der Weisheit letzter Schluss ;)

white-space: nowrap und <pre> für diese Bereiche ist dazu auch noch Doppelmoppel...

He aber Goldene Hochzeit :) Solche Sachen freuen mich total... :happy2:


Ich persönlich halte nicht viel von Bootstrap... schreibt keinen wirklich guten Code und man versteht nicht zwingend, was warum entsteht...

@

Wie wärs denn, denn du dir 'n Wordpresstheme draufspielst? Wobei bis dato ja nur statische Inhalte da sind...

oder mal schauen im Web:
http://designscrazed.org/free-responsive-html5-css3-templates/


http://t3n.de/news/templated-kostenlose-html5-css-templates-586466/
 

patrick_l

Hat es drauf

Hier stimmt so einiges nicht. Kurz gesagt, dein Markup und CSS ist grauenhaft. Tabellen haben dort nichts zu suchen. Ebenso ist der ganze Aufbau murks. Erst die Meta-Angaben, danach (d)ein Stylesheet und zuletzt benötigte Scripte einbinden. Letzteres wenn möglich erst am Ende der Seite, vor dem schließenden Body-Tag. Semantisch korrekt und aufgeräumt könnte dein Markup dann wie folgt aussehen.

HTML:
<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Startseite | DoCa - RBZ</title>
    <!-- more meta-tags here! -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="pfad/zur/main.css">
</head>
<body>
    <div class="base-wrap">
        <nav class="navbar" role="navigation">
            <h1 class="brand"><a href="#">DOCA</a></h1>
            <ul class="site-nav">
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Über uns</a></li>
                <li><a href="#">Galerie</a></li>
                <li><a href="#">Gästebuch</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
        <header class="header" role="banner">
            <img src="pfad/zum/bild.jpg" alt="Dollinger Realschule">
            <p>Textinhalt</p>
        </header>
        <main id="primary" role="main">
            <section>
                <!-- content here! -->
            </section>
        </main>
    </div>
</body>
</html>
Mit der Division "base-wrap" kannst du deine Seite leicht zentrieren. Alle anderen Bereiche sind sinnvoll bezeichnet und können ebenso leicht mittels float positioniert werden. Alles ganz ohne Tabellen, die wie schon gesagt, hier nichts verloren haben. Ebenso die Meta-Angaben um die für IE und mobile Devices ergänzt.

Mein Tipp, zieh dir mal die Grundlagen von Bootstrap rein, dann biste einen Siebenmeilenschritt weiter.

Wer ein Framework wie Bootstrap, Foundation und Co. einsetzt, sollte auch wissen wie ein solches arbeitet und warum dieses oder jenes so oder so umgesetzt wurde. Ohne entsprechendes Grundlagenwissen eher von der Verwendung eines solchen Frameworks abrate. Viel mehr man die einzelnen (notwendigen) "Sprachen" mit Hilfe passender Fachlektüre lernen sollte.

Bootstrap und Co. haben vor allem den großen Nachteil, dass durch dessen Einsatz und die Verwendung der einzelnen "Komponenten", auch das eigene Markup aufgebläht wird. Sei es nur der Klassen wegen. Daher verzichte ich mittlerweile weitesgehend auf Bootstrap oder Foundation und Co, und arbeite um längen lieber mit einzelnen Preprocessoren (Jade und Sass).

Zum Lernen dir vor allem die hier angebotenen Tutorials nahelege. Ebenso das HTML5 Handbuch von Stefan Münz (SelfHTML Mitbegründer) nicht fehlen sollte. Dieses kann in der Online-Version ("OpenBook") kostenlos gelesen werden. Jedoch lohnt sich sich auch der Kauf der gebundenen Ausgabe.

- HTML5 Handbuch » Webkompetenz (Stefan Münz)

Liebe Grüße, Patrick
 

hub

nicht ganz neu hier

Moin,
auch mein Senf dazu.
Wie wärs denn, denn du dir 'n Wordpresstheme draufspielst? Wobei bis dato ja nur statische Inhalte da sind...
Das ist vom Regen in die Traufe ... ABER: Wenn es schnell und brauchbar sein soll, ist es eine sinnvolle Alternative,
Ich denke, @patrick_l hat einen hilfreichen Ansatz. Bootstrap sehe ich nicht ganz so kritisch.Wenn ich mir anschaue, was so mancher WYSiWYG-Editor (keine Namen :) ) so erzeugt, ist Bootstrap noch ein Leichtgewicht ...
Allerdings, wenn es schnell und effizient werden soll, hat er recht. Solide Handarbeit ist gefragt.


Und nun Ruhe für heute - is Wochenende :)
Gruß Ulli
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben