1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

CSS Bild in Beitrag mittig

Dieses Thema im Forum "Design" wurde erstellt von Malebo, 9. Juli 2016.

Schlagworte:
  1. Malebo

    Malebo Well-Known Member

    Registriert seit:
    20. Juni 2015
    Beiträge:
    48
    Zustimmungen:
    0
    Hallo Gemeinde,

    ich habe ein CSS-problem welches ich nicht verstehe. Ich habe einen Beitrag, mit einem großen Bild. Dieses soll bildschirmfüllend sein. Ich habe das Bild vergrößert hochgeladen und die Dateiabmesseungen in den Bildeigenschaften abgeändert. Das WP ist nicht von mir und wurde von einem Vorgänger zusammengebastelt. Das ist ein problem.
    Auf jeden Fall bekomme ich das Bild mit keiner Eigenschaft (margin etc.) mittig gesetzt. Unten steht der Link zum Beitrag und darunter die CSS.
    Vielleicht hat jemand Lust mal reinzuschauen

    danke
    Stephan



    http://terrain.redrice.biz/upcoming-lecture/



    CSS//:

    *{ color:#444; margin:0; padding:0;}
    html,body{ height:100%; width:100%; }

    .grid-page{
    font-family: Times, Georgia, serif; font-size:14px; line-height:28px; color:#777;
    text-align:center;
    }

    a{ text-decoration:none; }
    a:hover, a li:hover { border-bottom:1px solid; }

    hr{ margin-top:20px; }

    p{
    margin-bottom:30px;
    }

    .page{ padding:20px; }
    .grid-page{ width:900px; height:100%; padding-top:40px; margin:0 auto; }

    .terrain{ font-family: 'Roboto', sans-serif; font-weight:300; text-decoration:none; text-transform:lowercase; font-size:50px; line-height:60px; }
    .terrain:hover { border:0; }

    /*.terrain2{ font-family: 'Roboto', sans-serif; font-weight:300; text-decoration:none; text-transform:lowercase; font-size:30px; line-height:40px; }
    .terrain2:hover { border:0; }
    */
    ul.tabs{ margin: 0px; padding: 0px; list-style: none; }
    ul.tabs li{ cursor: pointer; }
    ul.tabs li.current{ }
    .tab-content{ display: none; }
    .tab-content.current{ display: table-cell; }


    .cat-item, .page_item{ display:inline; }
    .cat-item a{ border-bottom:0px solid; }
    .cat-item a:hover{ border-bottom:1px solid; }
    .cat-item.current a{ border-bottom:1px solid; }
    .current-cat a { border-bottom:1px solid; }


    .grid{ clear:both; padding:15px; padding-top:40px; }

    .thumb{ float:left; margin-right:15px; }
    .thumb a:hover{ border:0; }
    /*.thumb-tags{ max-width:290px; }*/


    .cat-item, .page_item { font-family: 'Roboto', sans-serif; font-weight:300; margin-right:30px; text-transform:uppercase; font-size:12px; }
    h3{ font-family: 'Roboto', sans-serif; font-weight:300; text-transform:uppercase; font-size:16px; margin:0; padding:0; }
    .thumb-tags, .thumb-tags a, .single-tags, single-tags a{ font-family: Times, Georgia, serif; font-size:13px; line-height:17px; color:#555;}
    .thumb-meta{ font-family: Times, Georgia, serif; font-size:12px; line-height:16px; color:#777; }
    .single-content{font-family: Times, Georgia, serif; font-size:14px; line-height:28px; color:#777; }

    h4{ font-family: 'Roboto', sans-serif; font-weight:300; text-transform:uppercase; font-size:14px; margin:0; padding:0; }



    /*.table { display: table; height:250px; width:100%; vertical-align:middle; text-align:center; }*/
    .table { display: table; height:200px; width:100%; vertical-align:middle; text-align:center; }
    .row-1 { display: table-row; vertical-align:middle; }
    .row-2 { display: table-row; height:35px; }
    .row-3 { display: table-row; height:25px; }
    .cell-1 { vertical-align:middle; display: table-cell; text-align:center; }
    .cell-2 { vertical-align:top; display: table-cell; text-align:center; }


    blockquote{ font-family: 'Roboto', sans-serif; font-weight:300; margin-right:30px; text-transform:uppercase; font-size:11px; line-height:15px; }


    .table-single{ display: table; vertical-align:middle; text-align:center; width:900px; clear:both;}
    .tr-single{ display:table-row; vertical-align:middle; }
    .td-single-1{ display:table-cell; vertical-align:middle; }
    .td-single-2{ display:table-cell; vertical-align:middle; width:50%; }
    .td-single-3{ display:table-cell; vertical-align:middle; width:25%; }
    .td-single-4{ display:table-cell; vertical-align:middle; width:25%; }



    input { outline:none; border-bottom:1px solid #000; }
    #searchform { display:inline; border:0; margin-right:10px;}
    #search-input{ font-size:14px; text-decoration:none; text-transform:uppercase; margin-right:30px; color:#777; display:inline; padding-bottom:2px; border:0; border-bottom: 1px solid #777; width:200px;}
    .lupe{ margin-right:10px; }

    .nav-below{
    clear:both;
    width:100%;
    height:100%;
    }

    .fixed{
    width:100%;
    height:60px;
    position: fixed;
    bottom: 0px;
    text-align:center;
    background:#fff;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    }

    .wrap-fixed{
    width:100%;
    margin:0 auto;
    }

    .prev, .next {
    width:50%;
    height:50px;
    float:left;
    }

    .content-single, .content-page{
    font-family: Times, Georgia, serif; font-size:14px; line-height:28px; color:#777;
    width:900px;
    margin:0 auto;
    padding-bottom:100px;
    text-align:center;
    }


    .single-tags{
    margin-bottom:20px;
    }


    .slideshow { background:#fff !important;}
    .flexslider { background:#fff !important;}

    .attachment-thumb{ float:left; margin-right:10px; margin-bottom:10px; }
    .content-single { clear:both; }

    .playicon {display: none !important;}

    .alignnone.wp-image-1123 {

    width: 2000px; margin:auto !important;

    }
     
  2. Michael_Drauer

    Michael_Drauer Well-Known Member

    Registriert seit:
    14. November 2015
    Beiträge:
    212
    Zustimmungen:
    0
    Das sollte helfen:

    .content-single, .content-page{
    width: auto;
    }

    .alignnone.wp-image-1123 {
    width: 100%;
    }



    ..aber das Problem ist das du das Bild mit 2000px viel zu groß gemacht hast, das gibt das Theme einfach nicht her.

    Mein CSS hat halt das Problem das es sich auf die Unterseiten vererbt. Das heißt jeder Content wird jetzt über die ganze Seite gezogen.
    Du müsstest vllt. noch eine Klasse auf der Startseite hinzufügen.
     
  3. Malebo

    Malebo Well-Known Member

    Registriert seit:
    20. Juni 2015
    Beiträge:
    48
    Zustimmungen:
    0
    ich danke dir :)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden