• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

TUMBLR / Bilder zentrieren...

H

hangout

Neues Mitglied
Hi, ich mache seit ein paar Tagen einen Blog bei Tumblr. Die Themes dort kann man ja nach belieben auch im HTML-Modus ändern, dabei brauch ich allerdings etwas Hilfe. So siehts aktuell aus: DON'T GET SICK! --> in VOG

Und hier der Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Theme: The Untitled v1. (http://theuntitledtheme.tumblr.com/)
Design: The Minimalist (The Minimalist)
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>{Title}{block:razz:eek:stSummary} | {PostSummary}{/block:razz:eek:stSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
<meta name="description" content="{MetaDescription}" />
<meta name="if:Show description" content="1" />
<meta name="if:Show search" content="1" />
<meta name="text:Twitter name" content="" />
<meta name="text:grin:isqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

<!-- Styles -->

<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">

/*----- GENERAL -----*/

header, footer, section, article, nav, aside {
display: block;
}

body {
background: #ffffff;
color: #222;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
padding-top: 25px;
text-align: center;
width:500px;
margin: 0 auto;
}

h1, h2, h3, hQ {
font-family: Cufon;
}

h1 {
font-size: 50px;
line-height: 50px;
}

h2 {
font-size: 31px;
line-height: 37px;
}

h3 {
font-size: 21px;
line-height: 27px;
}

a:link, a:visited {
color: #222222;
font-weight: bold;
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

hr{
border:0 #ccc solid;
border-top-width:1px;
clear:both;
height:0;
}

ol{list-style:decimal}

ul{list-style:disc}

li{margin-left:30px}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

#main {
padding: 0px;
}

/*----- MASTHEAD -----*/

.noMeta > div {
padding: 0px;
}

#masthead {
margin-bottom: 0px;
}

#masthead h1 {
margin-bottom: 0;
}

#masthead h1 a:link, #masthead h1 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

#masthead h1 a:active {
outline: 0;
}

#masthead p {
font-family: Georgia, serif;
font-size: 20px;
color: #fff;
margin-bottom: 0;
}

#masthead a:link, #masthead a:visited {
color: #fff;
}

#siteDescription{
font-size: 13px;
color: #222;
text-transform: Uppercase;
border-top: 1px solid #222;
margin-top: 20px;
margin-bottom: -5px;
padding: 15px 0 0 0;
font-family: Cufon;
}

/*----- SEARCH FORM -----*/

#frmSearch {
padding-top: 20px;
display: none;
}

#txtSearch {
background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
width: 225px;
padding: 2px 0 0 20px;
font: 12px/12px Georgia, "Times New Roman", Times, serif;
color: #222;
border: 0px;
}

/*----- MAIN HEADER NAV STRIP -----*/

#mainNav {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
margin-top: 20px;
padding: 15px;
font-family: Cufon;
}

#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}

#mainNav li {
margin: 5px;
display: inline;
padding: 0;
}

#mainNav a:link, #mainNav a:visited {
padding: 0;
font-size: 14px;
line-height: 14px;
margin: 0 2px;
text-decoration: none;
color: #222;
text-transform: Uppercase;
}

#mainNav a:hover, #mainNav a:active {
outline: none;
text-decoration: none;
border-bottom: 1px solid #222;
}

#mainNav a.active {
text-decoration: none;
border-bottom: 1px solid #222;
}

/*----- ARTICLE META INFO -----*/

#designline {
margin-top: 50px;
}

h5{
position: relative;
top: -35px;
margin-bottom: 0px;
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
border-bottom: 1px solid #bca474;
background: #fff;
}

h5 a:link, .line a:visited{
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
}

h5 a:hover{
text-decoration: underline;
}

h5 abbr{
display: inline-block;
position: relative;
margin: 0 auto;
padding: 0 8px;
background: #fff;
top: 10px;
}

h5.postDate a{
color: #bca474;
}

/*----- ARTICLE -----*/

article {
background: #fff;
margin-bottom: 20px;
text-align: justify;
position: relative;
}

article img {
border: none;
margin-bottom: 15px;
max-width: 500px;
}

article p img {
margin: 0;
}
article > div {
padding: 0px;
overflow: hidden;
}
article .searchPage {
margin: 35px 0 0 0;
}

.searchPageText {
margin: 0 0 30px 0;
}

article .meta a:link, article .meta a:visited {
text-decoration: none;
}

article .meta a:hover, article .meta a:active {
text-decoration: underline;
}

article h2 {
text-align: center;
color: #222222;
}

article h2 a:link, article h2 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

article h2 a:hover, article h2 a:active {
text-decoration: none;
border-bottom: 1px solid #222;
}

blockquote {
border-left: 2px solid #bca474;
margin-left: 0;
padding-left: 1em;
}

#quoteSource{
margin: 0 auto;
text-align: left;
}

#quoteText h2 {
text-align: left;
color: #222222;
}

article .chat {
list-style: none;
padding: 0;
margin: 0;
}

article .chat li {
margin: 0 0 2px;
padding: 2px 0 2px 0;
}

.photoCaption {
text-align: center;
}



</body>
</html>


----
----

Musste viel wegnehmen, sonst zu viele Zeichen für den Post. Aber ich hoffe alle wichtige drin...

Mir wäre es am liebsten wenn Text und Bilder bei einer Weite von 500px gleich ausgerichtet sind, sprich dass es "gerade", blocksatzmäßig, nach unten geht.
Dazu habe ich im ersten Schritt die Bilder auf 500*333 px verkleinert, allerdings sind mir die Bilder dann zu groß.

Dann habe ich die Weite des Bodys mal auf 427px eingestellt. Dann stimmen die Ränder der Texte und der Bilder überein, allerdings ließt sich der Text dann nicht mehr so schön, weil die einzelnen Zeilen doch sehr kurz sind.

Was machen? Hab zwei Ideen:

Zum einen den Body auf 500px einstellen und die Bilder zentriert darstellen. Allerdings weiß ich nicht, was ich da im Quelltext ändern müsste. Ihr vielleicht?

Zum anderen: Gibt es Möglichkeiten Bilder auf so zu verkleinen, dass sie 500px in der Breite haben, aber nicht 333px in der Höhe (muss ja proportional sein) sondern nur ca. 250px. Meiner Meinung nach nicht, da das Verhältnis ja stimmen muss, aber vielleicht bin ich nicht mehr up to date was das angeht?

Danke.
 
Werbung:
Bilder zentrieren tust du mit Css,

Code: 
article img {
[COLOR=Red]margin: 0px auto;[/COLOR]
        border: none;
        margin-bottom: 15px;
        max-width: 500px;
     }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben