Ankündigung

Einklappen
Keine Ankündigung bisher.

Abstände - Achtung Anfänger -

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Abstände - Achtung Anfänger -

    Hey,
    vorweg ich bin ganz schlecht in PHP und Html. Kann da sehr wenig. Jetzt habe ich ein neues Layout. Was so im Großen und Ganzen fertig ist.
    Hier und da sind halt noch ein paar (kleine) Baustellen wo ich jetzt ganz dringend Hilfe für brauche.

    Code:
    <? include ('header.php'); ?>
    <meta http-equiv=content-type content="text/php; charset=ISO-8859-1"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <section class="bg-primary" id="about">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                        <h2 class="section-heading"><span lang="de"><b><script type="text/javascript">
    // Begrüßung
     var H=new Date(); H.getHours(); var S = H.getHours(); var a="";
    
     if(S<12 ) {a="Guten Morgen"};
     if(S<=17 && S>=12) {a="Guten Tag"};
     if(S>=18) {a="Guten Abend"};
    
     document.write(a);
    </script>, wünscht Ihnen die St. Martini Schützenbruderschaft xxx!</b>
    </span></h2>
                    </div>
                </div>
            </div>
        </section>
    
        <section id="services">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="service-box">
                            <img height="111" src="Kalender.jpg" width="113"><br><br>
                            &nbsp;<table style="width: 101%">
                <tr>
                    <td>Datum&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Veranstaltung</td>
                </tr>
                <tr>
                    <td>21.02.2016&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Schützengebetstag in Maria Lind</td>
                </tr>
                <tr>
                    <td style="height: 23px">
                    30.04.2016&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Maibaum aufsetzten</td>
                </tr>
                <tr>
                    <td style="height: 23px">06.-08.05.2016&nbsp;&nbsp; Bundesköniginnentag in 
                    Erkelenz</td>
                </tr>
                </table>
                            <p class="text-muted">&nbsp;</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="service-box"style="padding-left: 500px;">
                            <img height="111" src="News.jpg" width="113"><br>&nbsp;<table style="width: 101%">
                <tr>
                    <td style="height: 23px">Datum</td>
                    <td style="width: 14px; height: 23px"></td>
                    <td style="height: 23px">Schlagzeile</td>
                </tr>
                <tr>
                    <td>23.12.2015</td>
                    <td style="width: 14px">&nbsp;</td>
                    <td>xxx ist Schülerprinzessin mit 29 Ringen.</td>
                </tr>
                <tr>
                    <td>16.08.2015</td>
                    <td style="width: 14px">&nbsp;</td>
                    <td>Unser neuer König heißt: xxx!</td>
                </tr>
                <tr>
                    <td>22.03.2015 </td>
                    <td style="width: 14px">&nbsp;</td>
                    <td>Tim ist neuer Bezirksschülerprinz </td>
                </tr>
            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    
        <section class="no-padding" id="portfolio">
            <div class="container-fluid">
                <div class="row no-gutter">
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Sommerfest</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/2.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Königspaar 2015
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/3.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Frauengruppe
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/4.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Spassparade
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/5.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Schützenfest xxx
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a href="#" class="portfolio-box">
                            <img src="img/portfolio/6.jpg" class="img-responsive" alt="">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-Bilder text-faded">
                                        Bilder
                                    </div>
                                    <div class="project-name">
                                        Kirmesaufzug</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
    <? include ('footer.php'); ?>
    Code:
    <meta http-equiv=content-type content="text/php; charset=ISO-8859-1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
     <section id="contact">
            <div class="container text-center">
                <div class="call-to-action">
                    <h2>&nbsp;</h2>
                    </div>
            </div>
        </section>
    
           <aside class="bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                    </div>
                    <div class="col-lg-4 col-lg-offset-2 text-center">
                        <p><span lang="de">   
                                             <SCRIPT LANGUAGE="JavaScript" SRC="http://www.onlinewebservice3.de/onlinecount.php?id=c130833&offset=5&style=5"></SCRIPT><p>
                        &nbsp;<p>
                        <a  target="_self" href="Impressum.php">Impressum</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a  target="_self" href="Credits.php">Credits</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a  target="_self" href="Links.php">Links</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="https://www.facebook.com/?ref=hl">
                        Facebook</a>
                 
                         
                 
    
    
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    
        <!-- Plugin JavaScript -->
        <script src="js/jquery.easing.min.js"></script>
        <script src="js/jquery.fittext.js"></script>
        <script src="js/wow.min.js"></script>
    
        <!-- Custom Theme JavaScript -->
        <script src="js/creative.js"></script>

    Nun zu meinen „Problemzonen“
    Würde gern die einzelnen Abschnitte schmaler in der Höhe zu machen. Bis auf den Bereich der Bilder.

    Gibt es eine Lösung für die Termine und News wo der Text nicht so untereinander steht?
    Auch ganz unten beim Impressum und den Links das sie die ganze Breite ausnutzen?

    Kann ich bei den Unterseiten das so einstellen das sie so 2 bis 3 cm vom Rand weg sind?


    Wäre über positive Antworten dankbar.

  • #2
    Vielleicht hilft dir das weiter (falls du noch in diesen Thread schaust):
    https://wiki.selfhtml.org/wiki/CSS/Box-Modell

    Kommentar


    • #3
      Don'ts:
      - <? ist Sache der Server-Konfiguration und keine Gute Idee. <?php ... oder wenn du direkt eine Variable ausgeben willst <?= $var ?>
      - Den mime type "text/php" vergesse lieber ganz schnell wieder: text/html, besser weglassen, den liefert der Webserver eigentlich schon aus. In HTML5 definierst du <meta charset="...">
      - mit &nbsp; zu formatieren ist eine schlechte Idee.

      Zu deiner Frage:
      Margin und Padding steuern Abstände innerhalb oder außerhalb von Block- oder Inline-Elementen, nachzulesen in der Box-Model-Definition ( wie schon von lordzwieback richtig verlinkt ): https://developer.mozilla.org/de/doc..._CSS_Boxmodell
      [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

      Kommentar

      Lädt...
      X