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

Thema: CSS Rahmen platzieren

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

    Standard CSS Rahmen platzieren

    Hi Leute,

    ich bin ein totaler Anfänger in CSS und habe mir ein paar Tutorials dazu angesehen
    und bin jetzt dabei eigene Seite zu erstellen. Aber Leider habe ich ein Problem.

    Und zwar habe ich einen Hintergrund in CSS erstellt und möchte in diesen Hintergrund
    noch einen Platzhalter reinmachen um da Buttons einzufügen.

    So sieht meine CSS aus:

    Code:
    @charset "utf-8";
    /* CSS Document vom Joe Petts Seite */
    
    #content { background-image:url(../Bilder/Hintergrund.png);
        background-repeat:no-repeat;
        margin-left:auto;
        margin-right:auto;
        margin-top:0px;
        width:700px;
        height:800px;}
        
    #head { margin-top:207px;
    background-repeat:no-repeat;
    margin-top:260px;
    margin-left:228px;
    margin-right:auto;
    width:151px;
    height:26px;}
    
    .bilder {margin-left:300px;
    margin-right:auto;
    margin-top:500px
    width:300px;
    height:300px;}
    Hier soll das Fenster ".bilder" in dem "#content" Rahmen so platziert werden. Aber jedes mal
    wenn ich in HTML (Dreamweaver) Div-Tag einfügen mache, hat der Rahmen ".bilder" ganz andere Massen und ist keine 500px von dem oberen Rand entfernt.
    Könnt ihr mir vielleicht erklären wie man die richtig platziert? Wäre echt hilfreich.
    (Ich habe im Forum nach einer Lösung gesucht, aber fand leider kein passendes Thread. Kann vielleicht daran liegen, dass ich die richtige Begriffe nicht kenne.)

    Danke schonmal!


    Grüße.
    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 !!!!!

  2. #2
    Kämpfer
    Gast

    Standard AW: CSS Rahmen platzieren

    Zitat Zitat von Joe Petts Beitrag anzeigen
    Hi Leute,

    ich bin ein totaler Anfänger in CSS und habe mir ein paar Tutorials dazu angesehen
    und bin jetzt dabei eigene Seite zu erstellen. Aber Leider habe ich ein Problem.

    Und zwar habe ich einen Hintergrund in CSS erstellt und möchte in diesen Hintergrund
    noch einen Platzhalter reinmachen um da Buttons einzufügen.

    So sieht meine CSS aus:

    Code:
    @charset "utf-8";
    /* CSS Document vom Joe Petts Seite */
     
    #content { background-image:url(../Bilder/Hintergrund.png);
        background-repeat:no-repeat;
        margin-left:auto;
        margin-right:auto;
        margin-top:0px;
        width:700px;
        height:800px;}
     
    #head { margin-top:207px;
    background-repeat:no-repeat;
    margin-top:260px;
    margin-left:228px;
    margin-right:auto;
    width:151px;
    height:26px;}
     
    .bilder {margin-left:300px;
    margin-right:auto;
    margin-top:500px
    width:300px;
    height:300px;}
    Hier soll das Fenster ".bilder" in dem "#content" Rahmen so platziert werden. Aber jedes mal
    wenn ich in HTML (Dreamweaver) Div-Tag einfügen mache, hat der Rahmen ".bilder" ganz andere Massen und ist keine 500px von dem oberen Rand entfernt.
    Könnt ihr mir vielleicht erklären wie man die richtig platziert? Wäre echt hilfreich.
    (Ich habe im Forum nach einer Lösung gesucht, aber fand leider kein passendes Thread. Kann vielleicht daran liegen, dass ich die richtige Begriffe nicht kenne.)

    Danke schonmal!


    Grüße.

    Mach mal im #content margin: 0 auto; und im #head das zweite margin-top raus, das ganze an sich ist voll durcheinander

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    17.07.2007
    Beiträge
    26
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Rahmen platzieren

    Danke erstmal für die Antwort.
    Meine CSS sieht jetzt so aus:

    Code:
    @charset "utf-8";
    /* CSS Document vom Joe Petts Seite */
    
    #content { background-image:url(../Bilder/Hintergrund.png);
        background-repeat:no-repeat;
        margin-left:auto;
        margin-right:auto;
        margin: 0 auto;
        width:700px;
        height:800px;}
        
    #head { margin-top:207px;
    background-repeat:no-repeat;
    margin-left:228px;
    margin-right:auto;
    width:151px;
    height:26px;}
    
    .bilder {margin-left:300px;
    margin-right:auto;
    margin-top:500px
    width:300px;
    height:300px;}
    Und hier ist die HP:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Joe Petts Homepage</title>
    <link href="CSS/Hauptseite2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body bgcolor="#000000">
    <div id="content">
      <div class="bilder" id="head">Raum für den Inhalt von  class "bilder" id "head"</div>
    </div>
    </body>
    
    </html>
    Und trotzdem hat ".bilder" nicht die Größe und Postion die ich in CSS eingegeben habe.

  4. #4
    Kämpfer
    Gast

    Standard AW: CSS Rahmen platzieren

    Zitat Zitat von Joe Petts Beitrag anzeigen
    Danke erstmal für die Antwort.
    Meine CSS sieht jetzt so aus:
    .......
    Du musst auch die anderen sachen rausnehmen, margin-left:auto;
    margin-right:auto;
    wenn du margin: 0 auto; schreibst bedeutet das 0px von oben und auto beudetet zentritert(mittig), bei allen anderen auch.
    Kurzschreibweise von margin, padding etc íst margin: 0 0 0 0; wenn du die letzten drei nullen ersetzt ist es zentriert.

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    17.07.2007
    Beiträge
    26
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Rahmen platzieren

    Ah ok, habs jetzt gemacht.
    Aber wie kriege ich den jetzt ".bilder" dazu 300px hoch und 300px breit zu sein und es 500px von oben und 300px von links zu positionieren?

  6. #6
    Kämpfer
    Gast

    Standard AW: CSS Rahmen platzieren

    Ganz ehrlich du hast voll viele fehler drin, etwas mehr musst dich auch etwas damit befassen

    Nimm erst mal einen korrekten Doctype

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Deiner ist unvollständig. Das ruft unter anderem auch fehlerursahcne hervor.


    Nun zu deinen divs , was soll das sein

    HTML-Code:
    <div id="content">
      <div class="bilder" id="head">Raum für den Inhalt von  class "bilder" id "head"</div>
    </div>
     

    Richtig wäre es so
    HTML-Code:
    <div id="content">
      <div id="head">"</div>
       <div class="bilder"></div>
    </div>
    Eventuell den .bilder noch position: absolute; geben, oder z-index: 1; <-- Ungetestet

    P.s. Schau dir die 2 Seiten in meiner Signatur mal an, kennste ja hoffentlich

    Zudem schreibst du teilweise HTML und XHTML , näheres hierzu siehst du bei deinen Metaangaben />

    Mfg
    Geändert von Kämpfer (17.12.2009 um 02:10 Uhr)

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    17.07.2007
    Beiträge
    26
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Rahmen platzieren

    Oh oh oh, da brauche ich wohl wirklich bisschen mehr Übung.
    Ich werde mir das mal in deiner Signatur nochmal durchlesen.

    Aber danke für die Tips und die Hilfe!

    Grüße!

  8. #8
    Kämpfer
    Gast

    Standard AW: CSS Rahmen platzieren

    Zitat Zitat von Joe Petts Beitrag anzeigen
    Oh oh oh, da brauche ich wohl wirklich bisschen mehr Übung.
    Ich werde mir das mal in deiner Signatur nochmal durchlesen.

    Aber danke für die Tips und die Hilfe!

    Grüße!
    Kein Problem, gerne doch

    Das in meiner Signatur kannst nicht wirklich lesen, zum Anfang ist das hier ganz gut
    http://www.html-seminar.de

    Die Seite natürlich von Anfang an aber wenn du paar befehle schon kennst, schau dir das Boxmodell mal an http://www.html-seminar.de/boxmodell-anwendung.htm

    Mfg


    Edit:

    Setz mal diese zwei dokumente ein

    index.html
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Titel der Seite</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="keywords" content="">
        <link href="css.css" type="text/css" rel="stylesheet">
        <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon">
    </head>
    <body>
        <div id="content">
         <div id="header"></div>
         <div class="bilder"></div>
        </div>
    </body>
    </html>
    Css
    Code:
    /*** Dieses Charset für was brauchste das , lass das mal weg. ***/
    /**** setz alle Elemente auf 0 ****/
    * {margin: 0; padding: 0;}
    body {
    font-size: 14px;
    font-family: consolas, arial;
    background-color: #000;
    }
    /******** Ende Allgemeine Angaben ****/
    #content { 
    width:700px;
    height:800px;
    margin: auto; /*** margin: auto reicht auch, du definierst ja oben mit * für alles auf 
    null **/
    background-color: #ff0000; /*** Das ersetzt du durch deine bildurl **/
    }
    #head { 
    width:151px;
    height:26px;
    margin: 207px 0 0 228px;
    background-color: #ff55ee;
    }
    .bilder {
    width:300px;
    height:300px;
    margin: 300px 0 0 300px; /*** Margin: oben rechts unten links; verstehst?? * ohne 
    Trennzeichen****/
    /*** Dieser margin wert verschiebt dir das bild dann an die jeweilige stelle **/
    background-color: #ff22ee; /***  durch deine bildurl/angabe ersetzen **/
    }
    Funktioniert, jetzt tauscht du alle background-color gegen deine pics aus, also background-image: url(img/bild.png) no-repeat; und lalla es funktioniert

    Und alles kleinschreiben, ordner, Dokumente, etc... immer klein der besseren Übersicht wegen
    Geändert von Kämpfer (17.12.2009 um 19:47 Uhr)

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    17.07.2007
    Beiträge
    26
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Rahmen platzieren

    Danke dir vielmals Kämpfer!

    Jetzt läuft bei mir wieder alles nach Plan! Warst wirklich großartige Hilfe!
    Danke, danke, danke, danke!

  10. #10
    Kämpfer
    Gast

    Standard AW: CSS Rahmen platzieren

    Da du schon länger in dem Thread hier anhängst.....PN Antwort gesendet, so müsste der code jetzt funktionieren

Ähnliche Themen

  1. Table fest Platzieren
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 30.10.2009, 21:30
  2. bild platzieren
    Von killruki im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.06.2007, 09:15
  3. Slices richtig platzieren
    Von Jana im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.06.2007, 23:41
  4. objekte platzieren mit javascript
    Von FR0SCH im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 29.03.2005, 21:48
  5. Fenster platzieren
    Von Johannes im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.06.2004, 22:41

Stichworte

Berechtigungen

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