1. #1

    Registriert seit
    03.12.2011
    Beiträge
    1.339
    Thanked 841 Times in 422 Posts

    Standard Wie passe ich meine Seite an?

    Guten Tag Community,

    ich versuche die ganze Zeit meine Seite wie auf den folgenden Screen anzupassen aber bei mir sieht es nicht so aus wie ichs wollte, hier erstmal die screens:
    [HIDE]
    So soll es aussehen:
    Spoiler:
    Klicke auf die Grafik für eine größere Ansicht 

Name:	Cjhdh.jpg 
Hits:	170 
Größe:	434,6 KB 
ID:	8470


    So sieht es aber aus:
    Spoiler:
    Klicke auf die Grafik für eine größere Ansicht 

Name:	my_technobase_1920x108v743.jpg 
Hits:	177 
Größe:	119,4 KB 
ID:	8471


    Der HTML Code (den hat mein Kollege so erstellt) sieht folgendermaßen aus:
    Spoiler:
    HTML-Code:
    <?php
    $page = $_GET["page"];
    if ($page == "") { echo $page = "";}
    ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Teccistopia</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="js/snow.js" type="text/javascript"></script>
    </head>
    <body>
    <div>
    <div id="menu">
    <a href="index.php?page=home" class="logo"><img src="https://u-labs.de/images/banner.png" alt=""></a>
    </div>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="/forum/"> Projekte</a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Finanzierung </a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Team </a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#"> Server </a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#">|</a>
    <a style="color:#FF5D00; float:right; font-size:22px;" href="#">Startseite </a>
    </div>
    <div id="includearea" style="margin: 0 auto;">
    <?php 
    ?>
    </div>
    <div style="position:absolute; bottom:10px; background-color:#0094FF; opacity:0.5; filter:alpha(opacity=30); width:100%; 
    
    id=footer">
    <p>Copyright (C) 2014-2015 Domenik Landgraf. All rights reserved.</p>
    </div>
    </body>
    </html>

    [/HIDE]
    Hoffentlich könnt ihr mir helfen :x

    Die Orange farbigen Punkte sollen Social Icons sein sprich Facebook, Twitter und Google.
    Geändert von Bazs (08.01.2015 um 15:44 Uhr)

  2. #2
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: Wie passe ich meine Seite an?

    Hi,
    probiers mal mit folgendem:

    body {
    margin: 5px;
    padding: 5px;
    }

    a {
    margin: 5px;
    padding: 5px;
    }

    Edit:
    Bzw. poste mal dein Stylesheet^^

    Edit2:
    Bzw. solltest du unter anderem für die Menü Links auch eine eigene Klasse erstellen.
    Geändert von exception (08.01.2015 um 16:05 Uhr)
    Ich will Geld haben und zwar so viel, das ich auch mal sagen kann das es Wichtigeres gibt...

  3. #3

    Registriert seit
    03.12.2011
    Beiträge
    1.339
    Thanked 841 Times in 422 Posts

    Standard AW: Wie passe ich meine Seite an?

    [HIDE]
    Spoiler:
    body {
    background: url(../images/background.png) repeat top center;
    color: #FF5D00;
    font-family: Arial Black, Arial, sans-serif;
    }
    #menu > div > div {
    height: 147px;
    margin: 0 auto;
    padding: 49px 0 0;
    position: relative;
    width: 960px;
    z-index: 5;
    float: left;
    }
    #menu a.logo {
    display: block;
    padding: 0;
    float: left;
    width: 540px;
    margin: 0 auto;
    }
    #menu a.logo img {
    border: 0;
    display: block;
    }
    #main {
    margin-bottom:25%;
    margin-top:25%;
    width:100%;
    height:40%;
    }
    [/HIDE]

    Hier den Stylesheet

    /e oben im Menü möchte ich ja gerne immer ein Leerzeichen haben wie im vorbereitetem Bild.
    Geändert von Bazs (08.01.2015 um 16:11 Uhr)

  4. #4

    Registriert seit
    17.09.2012
    Beiträge
    1.865
    Thanked 384 Times in 258 Posts

    Standard AW: Wie passe ich meine Seite an?

    Solltest deinem Menü schon ne id zuweisen damit es gleich aussieht Gell?


    Wen du es in css angepasst hast musst es im HTML auch zuweisen

    Währe hier wohl #menü Habe es aber nur überflogen. ^^

    Hast Menü zwar oben verwendet aber schnell wieder geschlossen


    Soll heißen du hast einmal </div> zuviel bzw einmal <div> zu wenig
    Geändert von Chrissy (08.01.2015 um 19:20 Uhr)

  5. #5
    Avatar von Flo
    Registriert seit
    03.12.2011
    Beiträge
    501
    Thanked 482 Times in 266 Posts

    Standard AW: Wie passe ich meine Seite an?

    Dein Freund scheint nicht viel Ahnung von HTML zu haben. Geschweige denn CSS.
    Das ist nicht nur SEO-Technisch eine Sünde, sondern auch W3C-mäßig.
    Wenn du nen 20er locker hast, mach ich dir das sauber und wunderschön. Fürn 50er sogar n ganzen Design. Überlegs dir.




  6. The Following User Says Thank You to Flo For This Useful Post:

    Chrissy (08.01.2015)

  7. #6

    Registriert seit
    17.09.2012
    Beiträge
    1.865
    Thanked 384 Times in 258 Posts

    Standard AW: Wie passe ich meine Seite an?

    Flo? Auch für andre Seiten ? ^^ suche eventuell ein neues Design für ne Liga Seite .

  8. #7

    Registriert seit
    03.12.2011
    Beiträge
    1.339
    Thanked 841 Times in 422 Posts

    Standard AW: Wie passe ich meine Seite an?

    Ich habe meine Webseite etwas anpassen können, habe nur noch das Problem, ab Impressum soll es halt alles Rechts stehen nicht links.

    Hier der neue Code:
    Spoiler:

    [HIDE]
    HTML-Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Teccistopia</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="js/snow.js"></script>
    
    <style>
    * {
     margin:0;
     padding:0;
    }
    
    html,body {
     height:100%;
    }
    
    html {
     background:#333;
    }
    
    body {
     width:90%;
     margin:0 auto;
     position:relative;
     background:#000;
    }
    
    header {
     overflow:hidden;
     }
    
    #logo {
     float:left;
    }
    nav {
     text-align:right;
    }
    nav a {
     color:#F50; 
     display:-inline-block; 
     font-size:22px; 
     padding:5px 5px 5px 0;
     font-weight:bold;
     text-decoration:none;
     vertical-align:top;
     
    }
    
    #footer {
     position:absolute;
     bottom:10px;
     padding:10px 0;
     background-color:#00a; 
     color:#F50; 
     width:100%;
     font-weight:bold;
    } 
    
    #footer a , #footer p {
     float:left; 
      padding:5px;
     font-weight:bold;
     font-size:75%;
     text-decoration:none;
     vertical-align:top; 
     color:#F50; 
    }
    
    #footer p { 
     margin-right:20px;
    }
    #footer :nth-child(4) { 
     margin-left:40px; 
    }
    </style>
    </head>
    <body>
    <header>
    <div id="logo"><a href="index.php?page=home" class="logo"><img src="" width="700" height="150"alt=""></a></div>
    <nav>
    <a href="#">Startseite |</a>
    <a href="#">Server |</a>
    <a href="#">Team |</a>
    <a href="#">Finanzierung |</a>
    <a href="/forum/">Projekte</a>
    </nav>
    </header>
    <div id="includearea" >
    <?php 
    ?>
    </div>
    <div id="footer">
    <p>Copyright (C) 2014-2015 Domenik Landgraf. All rights reserved.</p>
    <a href="#">Impressum |</a>
    <a href="#">Datenschutzerklärung</a>
    <a href="#">Partner |</a>
    <a href="#">Sponsoren</a>
    </div>
    
    </body>
    </html>
    [/HIDE]
    Geändert von Bazs (09.01.2015 um 18:31 Uhr)

Ähnliche Themen

  1. Antworten: 5
    Letzter Beitrag: 30.08.2012, 15:57
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.