kostenloser Webspace werbefrei: lima-city


CSS befehl zentrieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    pcundsoftware

    Kostenloser Webspace von pcundsoftware, auf Homepage erstellen warten

    pcundsoftware hat kostenlosen Webspace.

    Hallo,

    kann mir jemand in die CSS Datei den Zentrierbefehl einfügen, dass die Seite nicht am rand sondern in der Mitte des Bildschirms angezeigt wird.

    body { font-size: 12px;
    
        font-family: Helvetica,Arial,sans-serif;
        }
    
      #Teil1 { border: 2px dotted green;
        width: 950px;
        height: 4em;
        }
      #Teil2 { border: 2px dotted yellow;
        float: left;
        width: 950px;
        }
    
      #Teil3 { border: 2px dotted red;
        float: left;
        width: 950px;
        }
    
      #Bereich1 { border: 1px dashed silver;
        margin: 0pt 0pt 1.2em;
        width: 18em;
        background-color: rgb(238, 238, 238);
        float: left;
        }
    
      #Bereich2 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        background-color: rgb(238, 238, 238);
        float: right;
        width: 16em;
        }
    
      #Bereich3 { border: 1px dashed silver;
        background-color: rgb(238, 238, 238);
        }
    
      #Bereich4 { border: 1px dashed silver;
        margin: 0pt 0pt 1.2em;
        float: left;
        width: 15em;
        }
    
      #Bereich5 { border: 1px dashed silver;
        margin: 0pt 12em 1em 16em;
        padding: 0pt 1em;
        }
    
      #Bereich6 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        float: right;
        width: 12em;
        background-color: rgb(238, 238, 238);
        }
    
      #Bereich7 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        background-color: rgb(238, 238, 238);
        }



    und noch was: wie kann ich da bilder einbinden?

    Schöne Grüße

    pcundsoftware
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Versuch das

    <html>
    <body>
    <div class="page">content</div>


    CSS:
    .page
    {
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    margin:-200px 0px 0px -300px;
    background:#cccccc
    }


    Grüsse
    Color

    Beitrag zuletzt geändert: 14.9.2009 13:15:36 von color
  4. Autor dieses Themas

    pcundsoftware

    Kostenloser Webspace von pcundsoftware, auf Homepage erstellen warten

    pcundsoftware hat kostenlosen Webspace.

    Ich glaube das hätte wo anders hinmüssen so gehts nämlich nicht. wohin aber?

    body { font-size: 12px;
    
        font-family: Helvetica,Arial,sans-serif;
        }
    .page
    {
    position:absolute;
    top:50px;
    left:50px;
    width:600px;
    height:400px;
    margin:-200px 0px 0px -300px;
    background:#cccccc
    }
      #Teil1 { border: 2px dotted green;
    float: left;    
    width: 950px;
        
        }
      #Teil2 { border: 2px dotted yellow;
        float: left;
        width: 950px;
        }
    
      #Teil3 { border: 2px dotted red;
        float: left;
        width: 950px;
        }
    
      #Bereich1 { border: 1px dashed silver;
        margin: 0pt 0pt 1.2em;
        width: 18em;
        background-color: rgb(238, 238, 238);
        float: left;
        }
    
      #Bereich2 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        background-color: rgb(238, 238, 238);
        float: right;
        width: 16em;
        }
    #Bereich8 { border 1px dashed silver;
    margin 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    float: center;
    width: 16em;
    }
    
      #Bereich3 { border: 1px dashed silver;
        background-color: rgb(238, 238, 238);
        }
    
      #Bereich4 { border: 1px dashed silver;
        margin: 0pt 0pt 1.2em;
        float: left;
        width: 15em;
        }
    
      #Bereich5 { border: 1px dashed silver;
        margin: 0pt 12em 1em 16em;
        padding: 0pt 1em;
        }
    
      #Bereich6 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        float: right;
        width: 12em;
        background-color: rgb(238, 238, 238);
        }
    
      #Bereich7 { border: 1px dashed silver;
        margin: 0pt 0pt 1.1em;
        background-color: rgb(238, 238, 238);
        }
  5. Ich habe keine Ahnung wie die HTML-Strucktur auf deiner Webseite aussieht, ich habe dir ein Beispiel gegeben wie es funktioniert. Wenn ich deinen CSS-Code verwenden soll muss ich wissen wie dein HTML aussieht.
  6. d************h

    so


    html
    ...
    <div class="page">
       <div class="page_c">
            [hier dein conent]
       </div>
    </div>
    ...


    css
    .page {
      text-align: center;
    }
    
    .page_c {
      text-align: left;
    }


    müsste klappen!
  7. Autor dieses Themas

    pcundsoftware

    Kostenloser Webspace von pcundsoftware, auf Homepage erstellen warten

    pcundsoftware hat kostenlosen Webspace.

    der obrige code verändert leider überhaupt nichts
  8. Nein, weil keine breite und nix angegeben ist. Mal so gefragt, wie gut sind deine Kenntnisse im Bereich CSS?

    Weil, wenn du dich damit kaum auskennst brauchen wir auch keine Codeschnippsel liefern sonder müssten wir deinen COde kennen und den Verändern.

    Schreib uns doch wie deine HTML-Strucktur aussieht und dazu deine CSS-Datei.
  9. Soll die Seite eine feste Breite haben? Wenn ja, pack den gesamten Inhalt in einen zusätzlichen Container

    <body>
       <div id="page">
          Alle Seiteninhalte
       </div>
    <body>


    Css dazu:

    body{
      width:100%;
    }
    #page {
       width: Die gewünschte Seitenbreite;
       margin: 0 auto;
    }


    FF
  10. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Entweder so wie ff geschrieben hat oder so, wie ich es auf dieser Seite gemacht habe:

    html:

    <div class="box">
    Dein content
    </div>


    css:

    .box { 
    background: transparent url(sooche.png) no-repeat;
    left: 50%;
    margin-left: -270px;
    position: absolute;
    width: 540px; 
    }


    "margin-left" muss immer halb so breit sein wie die "box" in der der gesamte content steckt. Habe dir übrigens noch ein Beispiel dazu getan, wie man Bilder einfügt, weil du das auch gefragt hast - einfach mit "background: url(deinBild.jpg);".
  11. t*****b

    Warum so umständlich?

    <div id="main">
    ...
    </div>


    CSS:

    #main {
     width:800px; 
     margin-left:auto;
     margin-right:auto;
  12. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    trueweb schrieb:
    Warum so umständlich?

    <div id="main">
    ...
    </div>


    CSS:

    #main {
     width:800px; 
     margin-left:auto;
     margin-right:auto;


    Funktioniert mit dem IE6 eben nicht - wenn man den bei seinen Seiten berücksichtigen will...
  13. t*****b

    kaetzle7 schrieb:
    trueweb schrieb:
    Warum so umständlich?

    <div id="main">
    ...
    </div>


    CSS:

    #main {
     width:800px; 
     margin-left:auto;
     margin-right:auto;


    Funktioniert mit dem IE6 eben nicht - wenn man den bei seinen Seiten berücksichtigen will...


    Mit Sicherheit, wenn du als Doctype XHTML strict oder transitional angibst und dabei die XML-Deffinition weglässt, da der Doctype für den IE 6 in der ersten Reihe stehen muss ;-)

    Beitrag zuletzt geändert: 14.9.2009 13:54:47 von trueweb
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!