Text aus dem Main-Fenster geht rechts aus dem Bild heraus

[Sonne17]

Hallo,
ich habe eine Homepage mit CMS erstellt, der das Template CSS-Menu left+1 column zugrunde liegt. Bei mir läuft sowohl beim Firefox als auch beim Internetexplorer alles problemlos. Auf zwei anderen Rechnern mit vermutlich anderer Bildschirmauflösung bei meinem Laptop läuft der Text bei der News-Seite immer rechts aus dem Bild heraus noch über den schwarzen Rand, den ich um die gesamte Seite gemacht habe. Zudem muss man nach links und rechts scrollen, um alles lesen zu können. Was tun?


Hier ist noch eine Passage aus dem Code des Stylesheets, der meiner Ansicht nach abgewandelt werden müsste:

Code: Select all

/*****************
basic layout 
*****************/
body {
   background-color: #FFFFFF;
   color: #333;
   margin:1em;    /* gives some air for the pagewrapper */
   }

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;       /* this centers wrapper */
   max-width: 100%;   /* IE wont understand these, so we will use javascript magick */
   min-width: 100%;
   background-color: #FFFFFF;;
   color: black;
   min-height: 1500px;
}


/*** Kopfzeile (header) ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 110px;    /* adjust according your image size */
   background: #FFFF33;         
}

div#header h1 a {
/* you can set your own image here */
   background: url(images/cms/logokaz.jpg) no-repeat 0; 
   background-position: center;
   display: block;
   height: 110px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}


div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em 0;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

 div.breadcrumbs span.lastitem { 
   font-weight:bold; 
 } 

 div#content {
   margin: 1em auto 1em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 25%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 22%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
   }


/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   padding: 1em;
   border-bottom: 1px solid #ccc;
   margin: 0em;
}


div.right49 {
  float: right;
  width: 10%;
  text-align: right;
}

[mike-r]

Zu wenig Infos.

a: bei welchen Auflösungen gibt es Probleme?
b: Dein Code hier ist überflüssig, da es der normale Code der Standard-templates ist. Wenn Du Probleme mit News hast, solltest Du den Code dafür zeigen, bzw. die von Dir vorgenommenen Änderungen.

Am schnellsten und einfachsten kann Dir geholfen werden, wenn Du einen Link zur Seite gibst. 

[Sonne17]

Also hier geht's zur Seite: www.kinder-aktions-zentrum.de

Und hier das News-Stylesheet:

Code: Select all

div#news {
  margin: 2em 0 1em 0em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000; 
  background: #FFFFFF; 
}


.NewsSummary {
    padding: 0.5em 0.5em 1em; /* padding for the news article summary */
    margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
    border-bottom: 1px solid #ccc; 
}

{/if}
{foreach from=$items item=entry}
<div class="NewsSummary">

.NewsSummaryPostdate {
  font-size: 100%;
  font-weight: bold;
 }

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
  font-size: 0px;
 }

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
  font-size: 0px;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
   }

.NewsSummaryMorelink {
  padding-top: 0.5em;
}

#NewsPostDetailDate {
  font-size: 100%;
  margin-bottom: 5px;
  font-weight: normal;
  }

#NewsPostDetailSummary {
   line-height: 150%;
   }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 15px;
  line-height: 150%;
}

#NewsPostDetailAuthor {
  font-size: 0px;
  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

/* 

[Sonne17]

Ach und die Bildschirmauflösung weiß ich nicht, da es sich nicht um meinen Computer handelt. Es sind aber ganz normale 17'' Monitore.

[mike-r]

Und hier das News-Stylesheet:

Code: Select all

...

{/if}
{foreach from=$items item=entry}
<div class="NewsSummary">

...

Wie kommt das da rein?

Edit: Nochmal auf die Seite geschaut, das Problem kommt von der Tabelle, die Du da reingebastelt hast. Das ist Quark, schmeiss die weg und schau im Image-manager wie Du das Bild anordnest.

[Sonne17]

Gute Frage... Zumindest sieht es so aus, als ob es nicht da rein gehört. Ich habe es mal gelöscht. Kann das Problem damit gelöst sein? Das Dumme ist, dass die Seite auf meinen Browsern läuft, ich also nicht testen kann, ob es jetzt klappt.
... Oder hat der Eintrag einfach nur gestört...?

[mike-r]

Jein.
Und:

Edit: Nochmal auf die Seite geschaut, das Problem kommt von der Tabelle, die Du da reingebastelt hast. Das ist Quark, schmeiss die weg und schau im Image-manager wie Du das Bild anordnest.