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

Thema: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

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

    Standard Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    hallo,

    habe eine hp erstellt und verstehe nicht was ich am code ändern muss, damit ein weiteres bild in der reihe gezeigt wird. Hier kann man es sehen http://www.nesrin.at/schmetterling.html

    ein 4tes bild paßt anscheinend nicht rein. Aber als ich bei der Css datei den Wert geändert habe, hat es mein Design total zerfetzt? Welche Werte muß ich ändern, damit ein viertes Bild auch reinpasst? in der css datei oder doch in der indexdatei? ich hab z.b. 590 px in 597 geändert aber das design war dann auf einmal weg, der Inhalt war ganz unten beim footer.

    danke
    liebe grüße
    css:
    Code:
    /* CSS Document by Dieter Schneider 2006 | www.csstemplateheaven.com */
    
    * {margin: 0;
       padding: 0;
    }
    
    body {
        background-image: url(http://www.nesrin.at/images/body_tile.jpg);
        background-repeat: repeat-y;
        font-size: 62.5%;
        font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    #container {
        width: 954px;
        font-size: 1.2em;
    }
    
    #left {
        background-image: url(http://www.nesrin.at/images/left_bg.jpg);
        float: left;
        height: 434px;
        width: 274px;
        padding-top: 275px;
    }
    
    #right {
        background-image: url(http://www.nesrin.at/images/right_bg.jpg);
        float: left;
        width: 590px;
        padding-top:150px;
        padding-right: 90px;
        background-repeat: no-repeat;
    }
    
    #footer {
        background-image: url(http://www.nesrin.at/images/footer.jpg);
        background-repeat: no-repeat;
        height: 100px;
        width: 524px;
        padding-left: 430px;
        padding-top: 28px;
        clear: both;
    }
    
    #navcontainer { width: 150px; }
    
    #navcontainer ul
    {
    margin-left: 55px;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    #navcontainer a
    {
    display: block;
    padding: 3px;
    width: 160px;
    }
    
    #navcontainer a:link, #navlist a:visited
    {
        color: #74752b;
        text-decoration: none;
        background-image: url(http://www.nesrin.at/images/bullet.png);
        background-repeat: no-repeat;
        padding-left: 25px;
        padding-bottom: 7px;
        font-weight: bolder;
    }
    
    #navcontainer a:hover
    {
        color: #75492b;
        background-image: url(http://www.nesrin.at/images/bullet_hover.png);
        background-repeat: no-repeat;
    }
    
    p {margin-bottom: 15px;
       margin-top: 15px;}
    
    h1 {
        text-align: center;
        margin-top: -55px;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        color: #808D33;
        font-size: 2em;
    }
    
    h2 {
        text-align: center;
        margin-top: 7px;
        margin-bottom: 40px;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        color: #9BA46D;
        font-size: 1.2em;
    }
    
    h3 {
        text-align: left;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        color: #98A549;
        font-size: 1.5em;
    }
    
    h4 {
        text-align: left;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        color: #808D33;
        font-size: 1.5em;
        margin-left: 107px;
        margin-bottom: 30px;
    }
    
    blockquote {
        font-style: italic;
        border: 1px dotted #98A549;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 15px;
        margin-top: 15px;
        color: #74752B;
        
    }
    
    a:link {color: #7C8832}
    a:visited {color: #74752B}
    a:hover {color: #993300}
    a:active {color: #993300}
    index:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <script type="text/javascript" src="http://www.nesrin.at/lightbox/js/prototype.js"></script>
     <script type="text/javascript" src="http://www.nesrin.at/lightbox/js/scriptaculous.js?load=effects"></script>
     <script type="text/javascript" src="http://www.nesrin.at/lightbox/js/lightbox.js"></script>
     <link rel="stylesheet" href="http://www.nesrin.at/lightbox/css/lightbox.css" type="text/css" media="screen" />
     <title>Echte Schmetterlinge</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" type="text/css" href="http://www.nesrin.at/style.css" />
     </head>
     <body>
     <div id="container">
       <div id="left">
         <h4>Menu</h4>
         <div id="navcontainer">
           <ul id="navlist">
             <li id="active"><a href="http://www.nesrin.at/index.html" id="current">Home</a></li>
             <li><a href="http://www.nesrin.at/ketten.html">Ketten</a></li>
             <li>usw. links</li>
           </ul>
         </div>
       </div>
     <div id="right">
         <h1>Handmade with love</h1>
         <h2>Unique</h2>
             <p>test text usw.</p>
     <a  href="http://www.nesrin.at/gross/anhaenger 60.4.jpg"  rel="lightbox[gruen]"><img  src="http://www.nesrin.at/thumbnails/anhaenger 60.4kl.jpg"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 60.3.jpg" rel="lightbox[gruen]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 60.2.jpg" rel="lightbox[gruen]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 60.jpg" rel="lightbox[gruen]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 60.5.jpg" rel="lightbox[gruen]"></a>
     <a  href="http://www.nesrin.at/gross/anhaenger 62.3.jpg"  rel="lightbox[blau]"><img  src="http://www.nesrin.at/thumbnails/anhaenger 62.3kl.jpg"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 62.4.jpg" rel="lightbox[blau]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 62.5.jpg" rel="lightbox[blau]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 62.jpg" rel="lightbox[blau]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 62.2.jpg" rel="lightbox[blau]"></a>
     <a href="http://www.nesrin.at/gross/anhaenger 62.1.jpg" rel="lightbox[blau]"></a>
     <a  href="http://www.nesrin.at/gross/anhaenger88e.jpg"  rel="lightbox[orange]"><img  src="http://www.nesrin.at/thumbnails/anhaenger88ekl.jpg"></a>
     usw...
       </div>
     </div>
     <div id="footer">
        <p>Created by: Dieter Schneider 2007| <a  href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></p>
     </div>
     <div  align=center>This template  downloaded form <a  href='http://all-free-download.com/free-website-templates/'>free  website templates</a></div></body>
     </html>
    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
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    Du hast in Deinem div-Container keinen Platz mehr für ein Bild, da Du dem <div id="right"> ein padding-right:90px gegeben hast und und 4x149 Bildbreite + 3x 2px Rand mehr als 590px Breite sind.
    So passt es:

    #right {
    background-image: url(http://www.nesrin.at/images/right_bg.jpg);
    float: left;
    width: 608px;
    padding-top:150px;
    padding-right: 0px;
    background-repeat: no-repeat;
    }

    Jetzt passt aber Dein Hintergundbild nicht mehr. Dass musst du mit einem Bildbearbeitungsprogramm an die neue Größe anpassen.

    LG Matthias


    PS: Die Bilder der Lightbox-Show sind alle unterschiedlich groß. Die fließenden Übergänge zum nächsten Bild sindjaganz nett, aber ich muss dauernd meine Maus verschieben um auf "next"zu klicken.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    10.09.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    hallo und vielen Dank!

    wenn ich das so mache, verrutscht die ganze Seite. Ich habe dann am Rand so ein Balken der bis nach oben geht. Total mir unverständlich. Ich lasse es mal so ein paar Tage damit du es siehst. Das mit dem Mauszeiger ist unvermeidlich weil die Fotos ja nicht alle gleich gross sind. Ich kann sie ja nicht alle gleich groß machen, weil manche klein besser aussehen, oder groß sein müssen um die Details zu erkennen.

  4. #4
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    Fehlersuche:
    Gib mal
    div{border: 1px solid red}
    in die style.css ein. Dann siehst Du, dass dein div '="right" zu schmal ist.

    So wird das Bild ganz dargestellt:
    #right {
    background-image: url(http://www.nesrin.at/images/right_bg.jpg);
    float: left;
    width: 618px;
    padding-top:150px;
    padding-right: 25px;
    background-repeat: no-repeat;
    }

    Neues Problem:
    Deine Seite ist länger als die Hintergrundbilder
    (Du verwendest ein Design von 2006; Das sind Generationen im Internet, von der steigenden Nutzung durch mobile Endgeräte (Smartphone, Tablets wie Ipad) einmal abgesehen. Google mal "responsive design"!).

    Durch:
    #right {
    background: #e9e3e3 url(http://www.nesrin.at/images/right_bg.jpg) no-repeat;
    float: left;
    width: 618px;
    padding-top:150px;
    padding-right: 25px;
    }
    ... legst du eine Farbe unter dein Hintergrundbild, das die überstehende Fläche des Divs trotzdem grau (#e9e3e3) erscheinen lässt.


    Neues Problem:
    Der linke untere Rand deines Designs gehört nicht zu #right!
    Du müsstest jetzt auch das Hintergundbild left_bg.jpg ändern. Am besten 10.000px hoch (Naja jedenfalls mehr als Du je verwenden willst - durch overflow:hidden kannst Du überstehende Teile "verschwinden" lassen.


    LG Matthias

    PS:
    Das Hintergrundbild von body ist ja komplett weiß. Warum nicht:
    body {
    background:white;
    font-size: 62.5%;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    Geändert von resteverwerter (13.09.2013 um 06:27 Uhr)

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    nur zur info: das mit dem border ist ne schöne sache, um kurz mal zu gucken, aber dadurch werden objekte in verschiedenen browsern 2 px breiter, was wieder dazu führen kann, dass etwas nicht passt

    verschiedenen elementen andere background-colors zu geben sollte hier die waffe der wahl sein damit die originale größe erhalten bleibt
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    Das mit den background-colors ist schon besser, geht aber hier mit den Hintergrundbildern, die sowieso von der html-Struktur abweichen, aber eher nicht.

    LG Matthias

  7. #7
    Bandit
    Gast

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    Auszug aus den Forenregeln:
    Inhalt von Beiträgen:
    Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
    Verboten oder auch unerwünscht sind folgende Inhalte:

    • extrem politisch oder religiös orientierte Postings
    • strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte
    • Warez oder fremde copyrightgeschütze Werke
    • E-Mail Adressen
    • Songtexte
    • persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen)
    • oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.
    • Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen

  8. #8
    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: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    OT: Sag mal Bandit, hast du dafür eigentlich mittlerweile ein Makro?

  9. #9
    Bandit
    Gast

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    Zitat Zitat von lukasn Beitrag anzeigen
    OT: Sag mal Bandit, hast du dafür eigentlich mittlerweile ein Makro?
    Hähä, gute Idee

  10. Folgende User finden die Antwort von Bandit gut:


  11. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    10.09.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Welche Werte muß ich ändern, damit ein weiteres Bild in einer Reihe reinpasst?

    @Bandit wie ist das gemeint? wenn ich dort keine hilfreiche Antwort bekomme, stelle ich meine Frage wo anders rein. Warum ist das bitte nicht gestattet? wird jeder Beitrag zuerst einmal im www gesucht, ob es nicht irgendwo schon aufgetaucht ist?

    wenn beim Bäcker kein Brot da ist, frag ich halt beim anderen Bäcker nach..geht man so mit neuen Usern um. Ich werde wohl mein Problem bei noch einem anderen Forum posten-du erlaubst?

    nun danke leute für die Antworten. Ich werde wohl alle Bilder etwas verkleinern, wird etwas dauern, aber das Design sollte somit nicht verpfuscht werden-hoffe ich mal. Achja Beitrag kann gelöscht, gesperrt oder sonstwas werden, ich habe anscheinend gegen die Forumsregeln verstossen.

Ähnliche Themen

  1. Werte von einer Webseite parsen und in Datenbank schreiben?
    Von FRAD80 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 21.02.2012, 18:32
  2. [JS] Array durchlaufen und ggf. Werte ändern
    Von MyXoToD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 31.05.2010, 19:16
  3. mehrere Werte aus einer Spalte...?
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 09.01.2009, 13:34
  4. Grafik und oberes Menü nicht in einer Reihe
    Von Keschu im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.03.2008, 16:22
  5. Bild auf einer Html-Seite ändern?
    Von Programie im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 22.07.2007, 17:21

Stichworte

Berechtigungen

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