Ergebnis 1 bis 6 von 6

Thema: variabler Rahmen nur mit HTML und CSS - Problem

  1. #1
    HTML Newbie
    Registriert seit
    24.04.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage variabler Rahmen nur mit HTML und CSS - Problem

    Hi Ihr

    ich brauch für eine website einen variablen Rahmen:
    mit 3 bordern.
    einen Oben einen unten und einen Links.
    jedoch sollen die ecken immer gleich bleiben.

    der "rahmen" besteht aus sich wiederholenden Bildern und einem Eckbild links oben und links unten.

    folgendes problem:

    ich will dass sich das bild links unten immer automatisch anpasst.
    dies tut es aber nicht.

    folgenden Quellcode hab ich hier:


    HTML-Datei
    Code:
    <html>
    <head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    <link href="rahmen.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="alles">
    
            <div class="randtest">
                <img src="bilder/strecke/ecken/ol.jpg" class="obenlinks">
                <img src="bilder/strecke/ecken/ul.jpg" class="untenlinks">
            </div>
            <div class="randtest">
                <img src="bilder/strecke/ecken/ol.jpg" class="obenlinks">
                <img src="bilder/strecke/ecken/ul.jpg" class="untenlinks">
            </div>
    </div>
    
    </body>
    </html>
    CSS-Datei:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
        margin:0;
        padding:0;
    }
    
    #alles {
        left:auto;
        right:auto;
        width:800px;
        height:1200px;
        background:rgba(204,204,204,1);
        margin:25px auto;
        padding:55px;
    }
    
    .randtest {
        padding-bottom:20px;
        width:50px;
        height:100px;
        background:url(bilder/strecke/gerade/oben.jpg), url(bilder/strecke/gerade/unten.jpg), url(bilder/strecke/gerade/links.jpg)/*, url(bilder/strecke/ecken/ol.jpg), url(bilder/strecke/ecken/ul.jpg*/;
        background-position:top, bottom, left/*, top left, bottom left*/;
        background-repeat:repeat-x, repeat-x, repeat-y/*, no-repeat, no-repeat*/;
        margin-bottom:50px;
    }
    
    #randtest2 {
        padding-bottom:20px;
        width:200px;
        height:500px;
        background:url(bilder/strecke/gerade/oben.jpg), url(bilder/strecke/gerade/unten.jpg), url(bilder/strecke/gerade/links.jpg)/*, url(bilder/strecke/ecken/ol.jpg), url(bilder/strecke/ecken/ul.jpg*/;
        background-position:top, bottom, left/*, top left, bottom left*/;
        background-repeat:repeat-x, repeat-x, repeat-y/*, no-repeat, no-repeat*/;
    }
        
    .obenlinks {
        width:20px;
        height:20px;
        float:left;
        margin-right:0px;
    }
    
    .untenlinks {
        width:20px;
        height:20px;
        float:left;
        margin-top:100%;
        margin-left:-20px;
    }
    also das ist mein aktueller stand, nach mehreren stunden rumprobieren.
    ich will eben später den width und height dur mein template definieren lassen und dass sich der rand durch die klasse eben automatisch anpasst.

    das funzt auch soweit bis auf das bild links unten...

    das bild unten links (.untenlinks) nutzt ja den margin-top-befehl für die positionierung.
    jedoch wird nicht die höhe, sondern die breite als höhe genutzt...

    wenn ich etz zb width 200px angebe sitzt das bild links unten 200px vom oberen rand entfernt
    un wenn ich width 100px angebe sitzt das bild nur 100px vom oberen rand entfernt

    ändere ich aber den height befehl tut sich an dem bild links unten nix...

    wo ist mein denkfehler oder der fehler in meinem code??
    und wie kann ich das lösen ( ich habe leider keine ahnung von php oder javascript soviel vorneweg)
    bin am verzweifeln

    achja ich hatte eig noch vor NACH den bildern noch inhalt reinzustopfen, oda wäre es sinnvoller den inhalt vor den img-rags einzufügen??
    achja und ich darf leider keine weiteren DIV-tags oder section-tags einfügen
    geht das überhaupt?? bitte um schnelle hilfe die seite soll freitag schon online gehen
    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
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: variabler Rahmen nur mit HTML und CSS - Problem

    Da du im Voraus nicht weißt, wie hoch #alles inklusive Inhalt wird, solltest du bei den unteren Ecken auf den margin-top-Wert verzichten. Mit 100% ist ja ebenfalls unklar, auf welchen Basiswert sich diese 100% beziehen.

    Für die seitlichen Rahmen sieh dir mal hier die Demo 2 (vertikale Röhren) an.

    Für die oberen Ecken kannst du einen Div drüber setzen, oder du bastelst eine entprechend breite Grafik und fügst diese direkt als image ein.

    Zur Platzierung der unteren Ecken gibt es vermutlich mehrere Möglichkeiten:
    Du könntest sie einfach in einen div packen und diesen nach dem Schließen von #alles anfügen.
    Dann sollten sie sich nahtlos an das Ende von #alles anfügen.

    Eine weitere Möglichkeit wäre, #alles relativ zu positionieren.
    Nach dem Öffnen von #alles fügst du dann ebenfalls einen div mit den unteren Ecken ein und positionierst dieses absolut zu #alles mit "bottom: 0" bzw. einem entsprechenden Pixel-Wert in abhähnigkeit von der Grafikhöhe.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    24.04.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: variabler Rahmen nur mit HTML und CSS - Problem

    danke für die schnelle hilfe,

    das problem ist aber das mit einem cms gearbeitet wird und ich dementsprechend die vorgabe habe nur mit 1 div zu arbeiten

    mien #alles hat ja feste werte

    das einzige was sich immer anpassen soll ist
    die höhe und die breite des rahmens

    der rahmen liegt innerhalb eines Divs im #alles

    mein design sieht ungefähr so aus:
    3-zeiliges layout:
    20%oben für nav un header
    70%inhalt
    10%footer
    der inhalt ist 2 zeilig 50%-50%
    wobei die untere zeile 2spaltig ist 75% 25%
    und die rechte spalte davon wird nochmal horizontal in der mitte geteilt
    (ich hab leider grad nicht die genauen werte im kopf)

    ich hoffe das war verständlich...

    und diese letzten beiden divs sollte ich nicht unnötig mit weiteren divs füllen,
    dass das mit divs ist einfach glaub ich gerne.

    es klappt ja auch alles wunderbar, bis auf das bild in der unteren linken ecke
    das nimmt nämlich für den margin-top wert, die breite des div-containers in welchem es liegt

    wären meine divs quadratisch würde es sogar klappen aber das sind sie ja leider nicht

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    24.04.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: variabler Rahmen nur mit HTML und CSS - Problem

    ok problem gelöst
    es gibt nen css3 border-image befehl ^^ da bin ich heid zufällig drüber gestolpert

  5. #5
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: variabler Rahmen nur mit HTML und CSS - Problem

    Ja, weil dir CSS3 ja die korrekte Darstellung bei allen Besuchern garantiert... Naja, für nicht-essentiele dinge (*hust*abgerundeteecken*hust*) verwend ich ja auch CSS3, also was solls.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    24.04.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: variabler Rahmen nur mit HTML und CSS - Problem

    ich weiß worauf du anspielst...

    naja aber eine bessere lösung hab ich nicht gefunden
    weil sich das bild eben falsch positioniert

    ich hab auch schon geschaut ob es nciht vllt ein positions befehl bei position:relative oda position:absolute gibt der das bild innerhalb
    der randtest - divs unten links positioniert

    aber irgendwie wollte das auch nicht...

    ja und wie schon gesagt die positionierung sollte innerhalb des randtest-divs passieren und keine weiteren divs erstellt werden

    mein erster gedanke war mit dem: background:url(pic1, pic2, usw)
    und dann mit den positionierungsbefehlen den rand und und die bilder erstellen
    aber sobald ich im css die kommentar tags entferne (der code ist auch in meinem code-schnipsel oben angegeben) dann zeigt mir der browser schon gar keinen rand an...

    darum eben der versuch mit den img-tags und den margin-top befehl...
    funktioniert aber eben nur wenn der container eben rechteckig ist, andernfalls wird beim selben container die breite als höhenangabe für margin-top genommen
    klingt komisch, ist aber so ^^

    falls ihr ne bessere lösung habt als zig tausend divs bin ich offen dafür, denn wie schon gesagt vorgabe war es keinen maximal 1 weiteren div zu erstellen
    und es soll mit so wenig code wie möglich passieren

Ähnliche Themen

  1. HTML Positionierung mittig mit variabler höhe
    Von didistroh im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.10.2011, 15:53
  2. Antworten: 0
    Letzter Beitrag: 22.11.2010, 21:39
  3. Bild als Rahmen HTML
    Von !Florian im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 14.02.2009, 00:24
  4. Problem mit IExplorer und variabler Zellenhöhe
    Von Alex77 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.09.2006, 17:07
  5. Problem mit dem Link-Rahmen
    Von wener im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 30.08.2004, 10:22

Stichworte

Berechtigungen

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