mein content ist zu breit!

spacefrog

hallo,
ich habe folgendes problem:
der platz für meine postings ist recht begrenzt, und ich möchte den text als blocksatz angezeigt bekommen.

meine index.php sieht folgendermaßen aus:

PHP

<?php get_header(); ?>
<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>


<div class="post">
	 <h3 class="storytitle" id="post-<?php the_ID(); ?>">[url="<?php the_permalink() ?>"]"><?php the_title("-image-"); ?>[/url]</h3>
	
	<div class="storycontent">
		<?php the_content(); ?>
	</div>
	
<div class="meta"> [ <?php the_author(); ?> | <?php the_category(' , '); ?> |   <?php the_time('Md / y'); ?>  ][ <?php comments_popup_link(__('NONE'), __('One'), __('%Com')); ?> ] <span class="feedback">  <?php wp_link_pages(); ?> </span>


 <?php edit_post_link('edit'); ?></div> 
	
	<!--
	<?php trackback_rdf(); ?>
	-->


<?php comments_template(); ?>
</div> 


<?php endforeach; else: ?>




<?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div id="rotator">[img]http://localhost/wp/wp-content/themes/AA/rotate_img/rotator.php[/img]</div>


<?php get_footer(); ?>

Alles anzeigen

leider wird jetzt der text des postings über die gesamte breite des <content> elements angezeigt, ich hätte aber gerne dass es innerhalb der "grenzen" des <storycontent> elementes bleibt, bzw. innerhalb des <post> elements.
wie bekomme ich das hin? mein padding-right ignoriert er geflissentlich :twisted: .

vielen dank,

spacefrog

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

suedkind

wie sieht denn dein css aus? das wäre an der stelle hilfreich

spacefrog

ja, sorry

Code

/* General Styles */


body {
        background: #8A2E00;
	color: #696969;
	font-family: 'Lucidia', verdana, helvetica,serif;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 75%;
        /*background-image: url(bg.gif);*/
}


#rap {
  /*width: 750px;*/
	 width: 719px;
	margin: 100px auto;
	text-align: left;
	position: relative;
	padding: 0;
}


#rotator {
	position:absolute;
	top: 0px;
	/*right:-252px;*/
	margin-left: 257px;
	margin-top: -10px;
	background: url('rotate_img/rotate.php');


}


a {
	/*color: #008CD2;*/
	color: #565656;
	text-decoration: none;
}


a img {
	border: none;
}


a:visited {
	color: #565656;
	border: none;
}


a:hover {
	color: #BC5A03;
	border-bottom: none;
}


acronym, abbr {
	border-bottom: 1px dotted #008CD2;
}


acronym, abbr, span.caps {
	cursor: help;
	letter-spacing: .07em;
}


code {
}


blockquote {
	border-left: 1px solid #C9C9C9;
	margin-left: 0px;
	padding-left: 5px;
	color:#C9C9C9;
}


cite {
	font-size: 0.9em;
	font-style: normal;
}


h2 {
	font-size: 0.7em;
	letter-spacing: 0.2em;
	margin: 15px 0 2px 0;
	padding-bottom: 2px;
	border-bottom: 1px dashed #008CD2;
}


/* .date {
	/*font-size: 1.1em;*/
	font-size: 10px;
	text-transform:uppercase;
	/*letter-spacing: 0.2em;*/
        /*background: #FFFFFF;*/
	 background: transparent;
       /* border-width: 1px;
       /* border-style: solid;
        border-color: #008CD2;*/ */
	font-weight: normal;
	font-family: arial, verdana, helvetica, sans-serif;
       color: #000;
	/* color: #008CD2; */
        /*padding: 2px 2px 2px 2px;*/
        text-align: left;
        /*margin: 0 0 5px 0;*/ */
}


h3 {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-family: arial, verdana, helvetica, sans-serif;
	font-weight: normal;
}


p {
	margin: 0 0 1em 0;
	padding: 0;
	line-height: 1.5em;
	/*font-size: 0.9em;*/
	font-size: 10px;
	color: #7F7E7E;
	width: 250px;
	
}


/* Header Styles */


#header {
	margin: 0px;
	padding: 0px;
	height: 10px;
      width: 719px;
	text-align: center;
	font-family: arial, helvetica, sans-serif;
       background-image: url('img/header.jpg');
        /*background: #FFFFFF;*/
	/*border: 1px solid #008CD2; */
	background-repeat: no-repeat;


	
}


html>body #header {
  right: 20px;
}


#header h1 {
      margin: 0 auto;
	padding-top: 25px;
	font-size: 200%;
	font-weight: bold;
	letter-spacing: 0.3em;
}


#header p {
        margin: 0;
	color: #008CD2;
	font-size: 0.9em;
}


#header a {
	color: #ff3300;
	text-decoration: none;
	font-weight: bold;
	border: none;
}


#header a:hover {
	text-decoration: underline;
	font-weight: bold;
}


/* Content Styles */


#content {
	position: absolute;
	top: 10px;
	/*margin: 0px 140px 0px 0px;*/
	margin: 0;
	width: 257px;
	font-size: 0.9em;
	/*padding: 0 0px 0;*/
	/*padding: 20px 20px 0;*/	
	padding-top: 16px;
	left: 90px;
	color: #333333;
	background: url('img/content.jpg');
	height: 429px;
	background-repeat: no-repeat;
	
}


.post {
	/*position: absolute;*/
	left: 0px;
       /*margin: 0 0 2em 0;*/
	margin-top: 0px;
       background: transparent;
      /* border: 1px solid #008CD2; */
	/*padding: 0px 5px 0px 0px;*/
	width: 250px;


}




/* classes used by the_meta() */
ul.post-meta {
	list-style: none;
}


ul.post-meta span.post-meta-key {
	font-weight: bold;
}


.meta {
	/*font-size: 0.85em;*/
	font-size: 10px;
	/*color: #008CD2;*/
	color: #767474;
	/*margin: 0 0 1em 0;*/
	/*padding: 0 0 0.5em 0;*/
	font-family: arial, verdana, helvetica, sans-serif;
	text-transform:uppercase;
}


.meta span {
  margin: 0 0 0 10px;
}


.meta li, ul.post-meta li {
	display: inline;
}


.meta ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}


.meta a {
	/*color: #FF3300;*/
	color: #767474;
	/*border-bottom: 1px dotted #008CD2;*/
	text-decoration: none;
}


.meta a:visited {
	color: #767474;
	/*color: #FF3300;*/
	/*border-bottom: 1px dotted #008CD2;*/
	text-decoration: none;
}


.meta a:hover {
	/*color: #333333;*/
	color: #BC5A03;
	border-bottom: none;
	text-decoration: none;
}




.storytitle {
	/*margin: 0 0 0.2em 0;*/
	/*font-size: 1.4em;*/
	/*font-size: 10px;*/
	/*letter-spacing: 0.1em;*/
	/*font-weight: bold;*/
	/*font-family: arial, verdana, helvetica, sans-serif;*/
	margin:0px;
	/*background:#000;*/


}


.storytitle span {
	text-transform: none;
	/*font-size: 0.7em;*/
	font-size: 10px;
	letter-spacing: 0;
	color: #7F7E7E;
}


.storytitle a {
	text-decoration: none;
	border: none;
	font-weight: bold;
	color: #008CD2;
}


.storytitle a:visited {
	color: #008CD2;
	font-weight: bold;
}


.storytitle a:hover {
	color: #999999;
	font-weight: bold;
	border: none;
}


.storycontent {
	margin: 26px 0 1em 0;
	/*border-bottom: 1px dashed #008CD2;*/
	color: #333333;
	width: 250px;
	/*background:#000;*/
	text-align: justify;


}


.storycontent li {	
	font-size: 0.9em;
}


.storyother {
	margin: 0.5em 0 1em 0;
	padding: 0;
	color: #333333;
}


.storycontent a {
        color: #565656;
}


.storycontent a:visited {
	color: #565656;
}


.storycontent a:hover {
	color: #BC5A03;
	border: none;
}


.storyother a {
        color: #008CD2;
}


.storyother a:visited {
	color: #008CD2;
}


.storyother a:hover {
	color: #333333;
	border: none;
}




/* Menu Styles */


.menustyle {
	/*background: #FFFFFF;*/
	/*border: 1px solid #008CD2;*/
	/*padding: 5px;*/
	/*margin: 0 0 50px 0;*/
	background:transparent;
	


}


.menustyle#categories {
	margin-bottom:50px;
}


.menubottom {
}


#menu {
	float: right;
	margin: 0;
	width: 80px;
	font-family: verdana, helvetica, sans-serif;
	padding-top: 10px;
	padding-bottom: 10px;
	/*padding-left: 5px;*/
	background: url('img/sidebar2.jpg');
	background-repeat: no-repeat;
	height: 429px;
}


html>body #menu {
 /* width: 150px;*/
	width: 80px;
}


#menu a {
  color: #DC9204;
	text-decoration: none;
	border: none;
}


#menu form {
}


#menu input#s {
	width: 100%;
	background: #FFFFFF;
	border: 1px solid #008CD2;
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
}


.submit-button {
	background: #FFFFFF;
	border: 1px solid #008CD2;
	color: #333333;
      margin: 3px 0 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
}


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


#menu ul li {
  color: #000000;
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: bold;
	letter-spacing: 0.2em;
}


#menu ul ul {
	list-style: none;
	text-align: left;
	font-weight: normal;
	font-size: 1.1em;
	color: #a3a3a3;
}


#menu ul ul li {
	letter-spacing: 0.1em;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}


#menu ul ul li a {
	color: #FF3300;
	text-decoration: none;
}


#menu ul ul li a:visited {
	color: #FF3300;
}


#menu ul ul li a:hover {
	color: #008CD2;
}


#menu ul ul ul.children {
	font-size: 142%;
	padding-left: 4px;
}


/* Left Column Styles */


#left {
	float: left;
	margin: 0;
	width: 90px;
	height: 429px;
	font-family: verdana, helvetica, sans-serif;
	/*padding-top: 10px;*/
	padding-right: 5px;
	/*padding-bottom: 10px;*/
	background-image: url('img/sidebar1.jpg');
	background-repeat: no-repeat;
}


.leftcontent {
	margin-top:62px;
	}


#left a {
  color: #FF6600;
	text-decoration: none;
	border: none;
}


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


#left ul li {
        color: #008CD2;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.2em;
}


#left ul li ul li li{
	list-style: none;
        font-size: 0.7em;
	text-align: left;
	font-weight: normal;
	color: #a3a3a3;
}


#left ul ul {
	list-style: none;
	text-align: left;
	font-weight: normal;
	font-size: 0.9em;
	color: #a3a3a3;
}


#left ul ul li {
	/*letter-spacing: 0.1em;*/
	letter-spacing: normal;
	padding: 0;
	text-transform: none;
	font-weight: normal;
	margin-left:30px;
	line-height:16pt;
}


#left ul ul li a {
	color: #FF3300;
	text-decoration: none;
}


#left ul ul li a:visited {
	color: #FF3300;
}


#left ul ul li a:hover {
	color: #008CD2;
}








#left ul ul ul.children {
	font-size: 142%;
	padding-left: 8px;
}


/*  Footer Styles */


/* #footer {
	margin: 50px 0px 10px;
	padding: 5px 0px 0px;
	text-align: center;
	clear: both;
	background-color: #FFFFFF;
	border: 1px solid #008CD2; */
}


#footer cite {
  color: #808080;
	font-weight: normal;
}


#footer a, a:hover, a:visited {
	color: #FF3300;
	font-weight: normal;
	border: none;
}


/*  Comment Styles */


#commentlist {
        font-size: 1em;
	color: #ccc;
}


#commentlist li {
	color: #008CD2;
        font-style: normal;
        font-size: 1em;
	background: #FFFFFF;
	border: 1px solid #008CD2;
	padding: 10px;
        margin: 0 0 5px 0;
}


#commentlist cite {
	font-size: 0.8em;
	color: #808080;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}


#commentlist cite a {
  color: #FF3300;
	border-bottom: 1px dotted #DC9204;
	text-decoration: none;
}


#commentlist p {
  margin: 0;
}


#commentlist cite a:visited, a:hover {
	color: #333333;
	border-bottom: 1px dotted #333333;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-color: #333333;
	border-right-color: #333333;
	border-left-color: #333333;
}


#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
	background: #D9F0FF;
	border: 1px solid #008CD2;
	padding: 0.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #333333;
}


#commentform #author:hover, #commentform #email:hover, #commentform #url:hover, #commentform textarea:hover {
	background: #FFFFFF;
}


.ed_button {
	background: #D9F0FF;
	border: 1px solid #008CD2;
        margin: 3px 3px 3px 0;
	padding: 0.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #333333;
}


.ed_button:hover {
	background: #FFFFFF;
}


#commentform textarea {
	width: 80%;
}


#commentform p {
  margin: 0 0 1em 0;
}


#commentlist li ul {
	border-left: 1px solid #ddd;
	font-size: 110%;
	list-style-type: none;
}


#comments {
  text-transform: uppercase;
	margin: 3em 0 1em 0;
	padding: 0 0 0.3em 0;
	color: #008CD2;
	font-size: 1em;
	letter-spacing: 0.5em;
	border-bottom: 1px dashed #008CD2;
}


#postcomment {
  text-transform: uppercase;
	margin: 0.9em 0 1em 0;
	padding: 0 0 0.3em 0;
	color: #008CD2;
	font-size: 1em;
	letter-spacing: 0.5em;
	border-bottom: 1px dashed #008CD2;
}


/*  Calendar Styles */


#wp-calendar {
  background: #FFFFFF;
	empty-cells: show;
	font-size: 1em;
	margin: 0 0 0 0;
	width: 100%;
	border-collapse: collapse;
}


#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}


#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}


#wp-calendar a {
	display: block;
	text-decoration: none;


	color: #FF6633;
}


#wp-calendar a:hover {
	background: #008CD2;
	color: #333333;
}


#wp-calendar caption {
	color: #008CD2;
	font-size: 1em;
	text-align: left;
	margin: 0 0 1em 0;
}


#wp-calendar td {
	color: #333333;
	font: normal 1em verdana, helvetica, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}


#wp-calendar td.pad:hover {
	background: #008CD2;
}


#wp-calendar td:hover {


	background: #008CD2;
	color: #FFFFFF;
}






#today {
        background: #D9F0FF;
}


#wp-calendar th {


	text-transform: capitalize;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background: #008CD2;
}
html {
	margin: 10px 0px;
}


/*  Other */


.error {
        font: normal 1.5em verdana, helvetica, sans-serif;
        color: #008CD2;
        text-align: center;
}

Alles anzeigen

spacefrog

könnte sich das vielleicht nochmal jemand anschauen, wäre echt wichtig!

danke! :D

Monika

also mit Blocksatz erzeugst Du nicht mehr Platz, nur unschöne Silbentrennungen, weil dies fast kein Browser checkt.
unter
body ganz oben, kannst

Code

text-align:justify;

dazu tun, das erzeugt Blocksatz.

(schweren Herzens geb ich so einen Tipp...)

lG
Monika

spacefrog

Zitat von spacefrog

leider wird jetzt der text des postings über die gesamte breite des <content> elements angezeigt, ich hätte aber gerne dass es innerhalb der "grenzen" des <storycontent> elementes bleibt, bzw. innerhalb des <post> elements.

das ist mein problem, wie man blocksatz hinbekommt weiß ich schon :x

chibi-bâká

Erm, evtl. einen Padding angeben? Dann halt die Breite des Divs verkürzen, so wie du rechts und links die Paddings setzt?

spacefrog

Zitat von spacefrog

wie bekomme ich das hin? mein padding-right ignoriert er geflissentlich :twisted: .

Willkommen! Melden Sie sich an oder registrieren Sie sich.

mein content ist zu breit!

Jetzt mitmachen!