Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Seitenaufteilung / Positionierung

  1. #1
    Teeny
    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Seitenaufteilung / Positionierung

    im "alten" Thread habe ich schon beschlossen die Seite von Grund auf neu aufzubauen. Durch Hilfe / Tipps habe ich nun die Seite mit den bereitgestellten "Containern" : Header; Nav; Main; und Footer das Grundgerüst mir zusammengestellt.

    Hier mal der zwischenstand :

    screen2.jpg

    In der Mitte befinden sich zwei "Main" Container welche auf einer Ebene nebeneinander sind. Diese sollen sich auch je nach inhalt in der Höhe anpassen. Allerdings sollte es auch eine Mindesthöhe geben, undzwar mindestens bis zum Footer. ("left" und "right")

    ich habe es durch die angabe von height:100%; versucht, allerdings änderte sich da garnichts. wenn ich aber statt % px eingesetzt habe, hat es geklappt.

    Aber da ich ja möglichst mit wenig pixel arbeiten möchte, da es ja auf möglichst vielen verschiedenen auflösungen gut dargestellt werden soll, suche ich nach einer passenden lösung.

    Aktueller Quellcode :

    HTML-Code:
    <body>
    <div class="gridContainer clearfix">
      <div id="div1" class="fluid">
        <header class="fluid header"><img src="Bilder/header.jpg" alt="" width="100%"/></header>
      </div>
      <p>
        <nav class="fluid nav">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</nav>
        <nav class="fluid unternav"><img src="Bilder/unternav.png"  alt="" width="100%"/></nav>
      </p>
      <main class="fluid left">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>Text</p>
        <p>&nbsp;</p>
        <p>Text Text</p>
      </main>
      <main class="fluid right">
        <p>Text</p>
        <p>&nbsp;</p>
        <p>Text</p>
        <p>&nbsp;</p>
        <p>Text</p>
        <p>&nbsp;</p>
      </main>
      <footer class="fluid footer">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </footer>
    </div>
    </body>
    und das die CSS :

    Code:
    @charset "utf-8";
    
    img, object, embed, video {
        max-width: 100%;
    }
    
    .fluid {
        width: 100%;
        float: left;
        display: block;
    }
    
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 86.45%;
        background-color:#000;
    }
    .nav {
        background-color:#000;
    }
    .footer {
        background:url(../Bilder/footer.png);
        background-repeat:no-repeat;
        position:fixed;
        bottom:0px;
    }
    .left {
    background:url(../Bilder/mainleft.png);
    background-repeat:no-repeat;
    width: 20%;
    }
    .right {
        background: url(../Bilder/maintext.png);
        background-repeat: repeat-y;
        background-size: 100%;
        width: 80%;
        clear: none;
    }
    .unternav {
        width:100%;
    }

    Gruß z1000
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von z1000 (28.01.2014 um 19:51 Uhr)

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Hallo,

    bevor du weiter unnütz rumdoktorst solltest du vielleicht doch erst mal die Grundlagen von HTML5 / CSS3 lernen.

    So darf das main-Element nur einmal auf jeder Seite vorkommen.

    Da die Semantik bei HTML5 eine große Rolle spielt läßt sich eine Seite ohne konkreten Inhalt auch kaum beurteilen. Deine Quellcodeschnipsel helfen da nicht viel weiter.

    Gruss

    MrMurphy

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Habe nochmals von Grundauf alles neu "geschrieben".

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <style type="text/css">
    <!--
    body {
      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
        background-color:#000;
        color:#FFF;
    }
    
    * {
      margin:0;
      padding:0;
    }
    
    #seite {
      width:100%;
      margin: 0 auto;
    }
    
    #header {
    }
    
    #nav {
        clear: both;
        text-align: center;
    }
    #unternav {
        background:url(Bilder/unternav.png);
        background-size:100% 2.7%;
        size:100% 2.7%;
    }
    
    #main {
        background: url(Bilder/maintext.png);
        background-size:100% 100%;
        background-repeat:repeat;
        margin-left: 25%;
        height:450px;
    }
    
    #left {
      float: left;
      width:25%;
      background:url(Bilder/mainleft.png);
      background-repeat:no-repeat;
      height:450px;
    }
    
    #footer {
      background:url(Bilder/footer.png);
      background-repeat:no-repeat;
      background-size:100% 100%;
      position:fixed;
      bottom:0px;
      width:100%;
      height:10%;
    }
    -->
    </style>
    
    </head>
    <body>
    <div id="seite">
      <header id="header"><img src="Bilder/header.jpg" width="100%" height="17.5%"  alt=""/></header>
      <nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
      <nav id="unternav">
        <p>&nbsp;</p>
      </nav>
      <div id="left">
        TEXT TEXT TEXT !!!
      </div>
      <main id="main">
         TEXT TEXT TEXT !!!
      </main>
      <footer id="footer">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </footer>
    </div>
    </body>
    </html>
    #


    Wenn ich fertig werden sollte würde ich dann die CSS als extra file machen. vorerst habe ich mal alles in der .html.

    die Höhenangaben von "left" und "main" habe ich mal mit der angabe von "450px" gesetzt. Allerdings hätte ich dies gerne prozentuell bzw. bis hin zum Footer. Ob nun genügend inhalt da ist oder nicht sollte keine Rolle spielen.


    Hier mal ein Screen in FireFox, wo mir bisher ganz gut gefällt

    screen.jpg

    Was haltest du / ihr nun vom Code. Sauberer ? Übersichtlicher ?

    Gruß

    z1000

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Sieht doch schon ganz gut aus.
    Die Höhenangaben von #left und main würde ich auf min-height: 450px setzen, dann hast du die MIndesthöhe bist aber nach unten falls es mehr Inhalt wird flexibel.


    Code:
    #header {
    }
    kannst du auch
    Code:
    header {
    }
    schreiben. Ersteres spricht die ID an, letzteres das Element.

    Dir fehlt das Meta-Element Charset für den Zeichensatz im head und auch das title-Tag ist zwingend notwendig für den Seitentitel.

    In HTMl5 kannst du
    <style type="text/css">
    abkürzen zu <style>

    font: 100.01% ist aus uralten Zeiten und sieht man noch viel. Ein font: 100% ist ausreichend oder gleichbedeutend zu 1em.

    Die Schrift im Header ist keine Schrift sonder Bildbestandteil. Das sollte besser Schrift sein und das Bild ein Hintergrundbild. Auch würde ich mir das Auto freigestellt vom Grafiker geben lassen und dann über den Hintergrund packen. Im Moment verzerrt dein Bild wenn die Proportionen des Viewport nicht stimmen. MAch dazu mal dein Fenster kleiner von rechts nach links, dann siehst du es, was ich meine.

    Ansonsten -> weiter so.

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Seitenaufteilung / Positionierung

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <meta charset="utf-8">
    <title>Titeltext :-)</title>
    <head>
    <style>
    <!--
    body {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color:#000;
        color:#FFF;
    }
    
    #logo {
        position: absolute;
        left: 60%;
        top: 4.5%;
        width:33%;
        height:8.65%;
    }
    
    #auto {
        width:25%;
        height:22.5%;
        padding-left:1%;
        padding-top:4%;
    }
    
    #seite {
      width:100%;
      margin: 0 auto;
    }
    
    #header {
        background:url(Bilder/header.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        width:100%;
    }
    
    #nav {
        clear: both;
        text-align: center;
    }
    #unternav {
        background:url(Bilder/unternav.png);
        background-size:100% 2.7%;
        size:100% 2.7%;
    }
    
    #main {
        background: url(Bilder/maintext.png);
        background-size:100% 100%;
        background-repeat:repeat;
        margin-left: 25%;
        height:450px;
    }
    
    #left {
      float: left;
      width:25%;
      background:url(Bilder/mainleft.png);
      background-repeat:no-repeat;
      height:450px;
    }
    
    #footer {
      background:url(Bilder/footer.png);
      background-repeat:no-repeat;
      background-size:100% 100%;
      position:fixed;
      bottom:0px;
      width:100%;
      height:10%;
    }
    -->
    </style>
    </head>
    <body>
    <div id="seite">
      <header id="header">
        <p><img src="Bilder/mercedes.png" alt="" id="auto"/><img src="Bilder/logo.png" alt="" id="logo"/></p>
      </header>
      <nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
      <nav id="unternav">
        <p>&nbsp;</p>
      </nav>
      <div id="left">
        TEXT TEXT TEXT !!!
      </div>
      <main id="main">
         TEXT TEXT TEXT !!!
      </main>
      <footer id="footer">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </footer>
    </div>
    </body>
    </html>


    habe es nun mal bearbeitet...

    habe nun das auto und das logo als einzelne grafiken. ebenfalls habe ich die anderen änderungen soweit mit angepasst. charset utf-8 i.o. ?

    mein größtes problem ist immernoch, dass z.B. Main eine höhe bis hin zum footer haben sollte. dies möglichst "prozentuell" bzw. automatisch bis zum footer. wie bekomme ich das gelöst ?

  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Nimm mal den http://csslayoutgenerator.com/ und schau dir den Quelltext an.

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Seitenaufteilung / Positionierung

    super, werde mich nachher mal damit beschäftigen wusste garnicht das es solche "tools" gibt danke im vorraus

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.

    Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen

    In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :

    s1.jpg

    Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :

    s2.jpg


    Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <meta charset="utf-8">
    <title>Titeltext :-)</title>
    <style type="text/css">
    a:link {
        color: #FFF;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #FFF;
    }
    a:hover {
        text-decoration: none;
        color: #FFF;
    }
    a:active {
        text-decoration: none;
        color: #FFF;
    }
    </style>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
    </head>
    <body>
    <div id="seite">
      <header id="header">
        <p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png"  alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png"  alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png"  alt="" width="209" height="12" id="domain"/></a></p>
      </header>
      <nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
      <div id="left">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>TEXT !!!</p>
      </div>
      <main id="main">
         <p><img src="Bilder/unternav.png"  alt="" width="100%" height="2.7%" id="wb"/></p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
      </main>
      <footer id="footer">
        <p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
        <p style="text-align: center">&nbsp;</p>
        <p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
      </footer>
    </div>
    </body>
    </html>
    HTML-Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color:#000;
        color:#FFF;
    }
    #intro {
    }
    #logo {
        position: absolute;
        left: 70%;
        top: 4.5%;
        /* width:20%;
        height:8.65%; */
        size:auto;
    }
    #auto {
        width:25%;
        height:22.5%;
        padding-left:1%;
        padding-top:4%;
    }
    #seite {
      width:100%;
      margin: 0 auto;
    }
    #header {
        background:url(../Bilder/header.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        width:100%;
    }
    #head_text1 {
        position: absolute;
        left: 20%;
        padding-top: 4%;
    }
    #head_text2 {
        position: absolute;
        left: 30%;
        padding-top: 8%;
    }
    #domain {
        position: absolute;
        left: 77%;
        padding-top: 10%;
    }
    #nav {
        clear: both;
        text-align: center;
        font-size:14px;
    }
    #wb {
        width:100%;
    }
    #main {
        background: url(../Bilder/maintext.png);
        background-size:100% auto;
        background-repeat:repeat;
        margin-left: 25%;
        min-height:450px;
    }
    
    #left {
      float: left;
      width:25%;
      background:url(../Bilder/mainleft.png);
      background-repeat:no-repeat;
      background-size:100% auto;
      min-height:450px;
      background-position:left 1em;
    }
    
    #footer {
        background: url(../Bilder/footer.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 10%;
    }
    #fb {
        position: absolute;
        left: 3%;
        bottom:30%;
        width:auto;
        height:auto;
    }
    #designedby {
        position: absolute;
        right: 5%;
        bottom:20%;
        width:auto;
        height:auto;
    }
    Geändert von z1000 (15.02.2014 um 18:44 Uhr) Grund: Tippfehler korrigiert :-)

  9. #9
    Youngster
    Registriert seit
    06.02.2014
    Beiträge
    19
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Seitenaufteilung / Positionierung

    Zitat Zitat von z1000 Beitrag anzeigen
    Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.

    Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen

    In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :

    s1.jpg

    Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :

    s2.jpg


    Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <meta charset="utf-8">
    <title>Titeltext :-)</title>
    <style type="text/css">
    a:link {
        color: #FFF;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #FFF;
    }
    a:hover {
        text-decoration: none;
        color: #FFF;
    }
    a:active {
        text-decoration: none;
        color: #FFF;
    }
    </style>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
    </head>
    <body>
    <div id="seite">
      <header id="header">
        <p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png"  alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png"  alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png"  alt="" width="209" height="12" id="domain"/></a></p>
      </header>
      <nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
      <div id="left">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>TEXT !!!</p>
      </div>
      <main id="main">
         <p><img src="Bilder/unternav.png"  alt="" width="100%" height="2.7%" id="wb"/></p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>TEXT TEXT TEXT !!! </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
      </main>
      <footer id="footer">
        <p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
        <p style="text-align: center">&nbsp;</p>
        <p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
      </footer>
    </div>
    </body>
    </html>
    HTML-Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color:#000;
        color:#FFF;
    }
    #intro {
    }
    #logo {
        position: absolute;
        left: 70%;
        top: 4.5%;
        /* width:20%;
        height:8.65%; */
        size:auto;
    }
    #auto {
        width:25%;
        height:22.5%;
        padding-left:1%;
        padding-top:4%;
    }
    #seite {
      width:100%;
      margin: 0 auto;
    }
    #header {
        background:url(../Bilder/header.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        width:100%;
    }
    #head_text1 {
        position: absolute;
        left: 20%;
        padding-top: 4%;
    }
    #head_text2 {
        position: absolute;
        left: 30%;
        padding-top: 8%;
    }
    #domain {
        position: absolute;
        left: 77%;
        padding-top: 10%;
    }
    #nav {
        clear: both;
        text-align: center;
        font-size:14px;
    }
    #wb {
        width:100%;
    }
    #main {
        background: url(../Bilder/maintext.png);
        background-size:100% auto;
        background-repeat:repeat;
        margin-left: 25%;
        min-height:450px;
    }
    
    #left {
      float: left;
      width:25%;
      background:url(../Bilder/mainleft.png);
      background-repeat:no-repeat;
      background-size:100% auto;
      min-height:450px;
      background-position:left 1em;
    }
    
    #footer {
        background: url(../Bilder/footer.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 10%;
    }
    #fb {
        position: absolute;
        left: 3%;
        bottom:30%;
        width:auto;
        height:auto;
    }
    #designedby {
        position: absolute;
        right: 5%;
        bottom:20%;
        width:auto;
        height:auto;
    }
    Hallo, kannst du das mal als Testcase(zb. square7.ch) hochladen, ich habe deinen Code jetzt local übernommen aber da mir die Grafiken nicht zur Verfügung stehen kann ich dir nicht wirklich helfen...

    Zur info noch: size: auto; gibt es nicht

  10. #10
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenaufteilung / Positionierung

    @DerUser Mal so als Tipp: Es ist nicht notwendig den ganzen Beitrag samt Code zu zitieren, wenn du allgemein antwortest. Wenn du dich auf eine bestimmte Stelle des Beitrages beziehst reicht es auch aus nur auszugsweise zu zitieren.

    Danke.

Ähnliche Themen

  1. CSS Positionierung
    Von jensnrw im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 17.05.2009, 18:32
  2. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 14:13
  3. CSS Positionierung
    Von daniel8888 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 07.12.2007, 14:22
  4. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 18:56
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 20:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •