bilder automatic in 400px bereit in blog erstellen

mamphp

hy
hab eine designe für word press gemacht. ich will so dass bilder nicht grösser als 400px in blog gezeigt werden.
das ist meine CSS

Code

body {
    margin: 0;
    padding: 0;
    font-size: 10pt;
    font-family: Unikurd Web, Tahoma, Arial;
    direction: rtl;
    color: #555;
    background-color: #f6f6f6;
}
ol, ul {
    font-size: 10pt;
    margin: 1.2em 0 1.2em 4em;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 1.3em 0;
    font-family: Unikurd Web, Tahoma, Arial;
    font-weight: normal;
    line-height: normal;
}
h1, h2 {
    font-size: 10pt;
}
h3 {
    font-size: 10pt;
}
h4 {
    font-size: 10pt;
}
p {
    margin: 1.2em 0;
    padding: 0;
}
acronym, abbr {
    cursor: help;
    border-bottom: 1px dotted
}
input, textarea, select {
    border: 1px solid #E4D9C0;
    background-color: #F4F0E6;
    color: #555;
    font-size: 10pt;
    font-family: Unikurd Web, Tahoma, Arial;
}
blockquote {
    margin: 0 30px;
    padding: 0 10px;
    border-left: 4px solid #cccccc;
    color: #666666;
}
code {
    font-family: Unikurd Web, Tahoma, Arial;
    color: #666;
}
form, img {
    margin: 0;
    padding: 0;
    border: 0;
}
a {
    text-decoration: none;
}
a:link, a:active, a:visited {
    font-family: Unikurd Web, Tahoma, Arial;
    color: #BB0000;
    font-size: 10pt;
}
a:hover {
    color: #FF0000;
    font-size: 11pt;
}
/* wrapper setting */
#wrap {
    width: 680px;
    margin: 0 auto;
    padding: 0 30px;
    background-color: #ffffff;
    background-image: url(images/background.gif);
    background-position: center;
    background-repeat: repeat-y;
}
/* header/banner style */
#header {
    background-image: url(images/banner.jpg);
    margin: 0 -10px;
    height: 110px;
    background-color: #FFF4F4;
    padding: 40px 15px 0 30px;
}
#header h1, #header small {
    padding: 0;
    margin: 0;
}
#header h1 {
    font-size: 10pt;
}
#navigation {
    text-align: center;
    letter-spacing: 1px;
    background-color: #E4D9C0;
    margin: 0.5em 0;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border: 1px solid #E4D9C0;
}
/* body/posts style */
#body {
    float: left;
    width: 480px;
    margin-bottom: 1.5em;
}
#body .postitle a:link, #body .postitle a:visited, #body .postitle a:active {
    font-weight: bold;
    color: #823400;
}
#body .postitle a:hover {
    color: #ff6666;
}
#body .postmeta {
    font-size: 10pt;
    margin: -1.8em 0 1.6em 0;
    padding: 0;
    text-align: center;
    color: #999999;
}
#body .postnavigation {
    padding: 0;
}
#body .post {
    border-bottom: 1px solid #F9DDDD;
    margin-bottom: 1.5em;
}
#body .relatedpost {}
#body .postentry {}
/* sidebar style */
#sidebar {
    margin: 0 0 0 500px;
    margin-bottom: 1.5em;
    font-size: 10pt;
}
#sidebar ul, #sidebar li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#sidebar li h2 {
    font-size: 10pt;
    margin: 1.7em 0 0 0;
    border: 1px solid #E4D9C0;
    padding: 3px 5px;
    text-align: center;
}
#sidebar ul ul {
    border: 1px solid #F9DDDD;
    border-width: 0 1px 1px 1px;
    background-color: #F4F0E6;
}
#sidebar ul ul li {
    padding: 0px 5px;
}
#sidebar .pagenav ul ul {
    border: 0px;
}
/* comments style */
#commentid {
}
#commentid .commentlist {
    margin: 1.8em 0;
    list-style-type: none;
}
#commentid .commentlist li {
     padding: 0 1.6em;
}
#commentid .commentlist li.alt {
    border: 1px solid #E4D9C0;
    background-color: #F4F0E6;
    border-width: 1px 0 1px 0;
}
#commentid .commentlist h4 {
    margin: 1em 0;
}
#commentid textarea {
    width: 470px;
}
/* footer stuff */
#footer {
    border: 1px solid #E4D9C0;
    background-color: #F4F0E6;
    border-bottom: 0px;
    margin: 0 0 0 0;
    clear: both;
    text-align: center;
    height: 2.5em;
    line-height: 2.5em;
}
/* other styles */
#wp-calendar {
    width: 160px;
    text-align: center;
}

Alles anzeigen

Danke :)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

BenediktRB

form, img {
margin: 0;
padding: 0;
border: 0;
}

nimm die auseinander und schreib:
max-width:400px;

http://www.css4you.de/shortref.html
http://www.css4you.de/browsercomp.html

Da kannste auch noch weiteres lesen

Monika

der IE hat damit Probleme,

daher musst Du in die header.php vor /head noch hineinschreiben:

Code

<!--[if IE]>
<style type="text/css">
#content img {max-width:400px;
width:expression(document.body.clientWidth > 400? "400px": "auto" );}
</style>
<![endif]-->

wenn die Bilder unterhalb des

div id=content

erscheinen,

ich habe das aber -ehrlicherweise - noch nie gemacht, daher habe ich es auch nicht überprüft

lg

mamphp

Danke
Aber keine von die beiden hat funktioniert

Thanks

Monika

Zitat von mamphp

Danke
Aber keine von die beiden hat funktioniert
Thanks

wenn helfen eh nur beide gemeinsam,

was passierte beim *Nichtfunktionieren*

lg

Monika

ich habe die header.php geöffnet und

Code

<!--[if IE]>
<style type="text/css">
 img {max-width:200px;
width:expression(document.body.clientWidth > 200? "200px": "auto" );}
</style>
<![endif]-->


</head>

das eben vor dem Ende des html headers hineingeschrieben,

öffnete die style.css und schrieb dort hinein

img{max-width:200px;}

sowohl der IE wie die Mozialla Browser haben mein 450px breites Bild auf eine maximale Breite von 200px verkleinert.

fehlt der code im header , dann zeigt der IE das Bild in der Originalgröße an.

wenn dies nicht funktionert, dann wurde beim img tag ein width hineingeschrieben, das größer als 200px ist, dann kann es natürlich nicht funktionieren, weil alles was im Quelltext schlägt hat mehr *Macht* als das was in der style.css steht.

schau mal nach , ob in der style.css irgendwo noch was zum img tag steht,
lg

mamphp

in IE funktioniert als code aber das bild wird nicht angezeigt(leer). im firefox gar nicht.

Leider
Danke dir

Willkommen! Melden Sie sich an oder registrieren Sie sich.

bilder automatic in 400px bereit in blog erstellen

Jetzt mitmachen!