herrgarnele
Erfahrenes Mitglied
Guten Morgen zusammen!
Wir setzen gerade mit Joomla ein CMS auf, meine Kollege macht das "technische" gecode, ich CSS. Das heisst, ich habe relativ wenig Einfluss auf den generierten Quellcode.
Nun zu dem Problem: Nach einer Suchanfrage wird ein formatiertes Suchergebnis angezeigt. Bei diesem Suchergebnis schaffe ich es nicht, bei einer gewissen Breite einen Zeilenumbruch zu erzwingen.
Bzw wird der Zeilenumbruch bei "normalem" Ausgabetext erreicht, nicht aber wenn die Suchanfrage Links als Ausgabetext enthält.
Meine Vermutung ist, dass bei Links der white space fehlt, an denen sich dann der Zeilenumbruch orientiert..?
Dennoch muss es doch eine Möglichkeit geben, dass mir nicht das ganze Layout zerhackt wird!!?
Bitte nicht erschrecken, ich habe den (generierten) html-Code entschlackt soweit es geht..
Und der zugehörige CSS-Code: (ich habe vorsichtshalber das gesamte Dokument gepostet, die betreffende Klasse habe ich "gefettet")
Wie gesagt habe ich relativ wenig Einfluss auf den html-Code, daher muss ich die Elemente im CSS teilweise recht kompliziert ansprechen..
Zur Verdeutlichung habe ich mal zwei Grafiken angehängt: Suchergebnisse in FF 1.5 und im IE6..
Hier sieht man schon, dass der FF diesen Fehler noch relativ gütig behandelt. Wohingegen IE die grüne Box schon nach unten verschiebt
Ich hoffe Ihr könnt mir helfen, ich komme hier echt nimmer weiter
Schonmal vielen Dank an jeden, der sich die Mühe gemacht hat, diesen Mammutbeitrag zu lesen !!
PS.: Ja, der CSS-Code ist ganz schön verwirrend. Auch für Vorschläge, ebendiesen übersichtlicher zu gestalten, bin ich dankbar!
Wir setzen gerade mit Joomla ein CMS auf, meine Kollege macht das "technische" gecode, ich CSS. Das heisst, ich habe relativ wenig Einfluss auf den generierten Quellcode.
Nun zu dem Problem: Nach einer Suchanfrage wird ein formatiertes Suchergebnis angezeigt. Bei diesem Suchergebnis schaffe ich es nicht, bei einer gewissen Breite einen Zeilenumbruch zu erzwingen.
Bzw wird der Zeilenumbruch bei "normalem" Ausgabetext erreicht, nicht aber wenn die Suchanfrage Links als Ausgabetext enthält.
Meine Vermutung ist, dass bei Links der white space fehlt, an denen sich dann der Zeilenumbruch orientiert..?
Dennoch muss es doch eine Möglichkeit geben, dass mir nicht das ganze Layout zerhackt wird!!?
Bitte nicht erschrecken, ich habe den (generierten) html-Code entschlackt soweit es geht..
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xyz - Suchen</title>
<meta name="author" content="www.blue-silver.de" />
<link rel="stylesheet" href="template_css.css" type="text/css"/>
</head> <!-- end of head -->
<body>
<div id="wrapper">
<div id="header"></div> <!-- end of header -->
<div id="middle_container">
<div id="left">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="#" class="mainlevel" >Home</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
<tr align="left"><td><a href="#" class="mainlevel" >Link</a></td></tr>
</table>
</td>
</tr>
</table>
</div> <!-- end of left -->
<div id="middle">
<div class="componentheading">
Suchen
</div>
<form action="index.php" method="get">
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="99999999" />
<table class="contentpaneopen">
<tr>
<td>
<input type="text" name="searchword" id="search_searchword" size="30" maxlength="20" value="joomla" class="inputbox" />
</td>
<td width="100%">
<input type="submit" name="submit" value="Suchen" class="button" />
</td>
</tr>
</table>
</form>
<table class="searchintro">
<tr>
<td colspan="3" align="left">
Suchwörter <b>joomla</b><br/>
Insgesamt 10 Ergebnisse. Suche nach [ <b>joomla</b> ] mit<a href="http://www.google.com/search?q=joomla" target="_blank">
<img src="http://localhost/joomla/images/M_images/google.png" alt="Google" name="Google" align="middle" border="0" /></a>
</td>
</tr>
</table>
<br />
<div align="center">
Ergebnisse 1 - 10 von 10
<select name="limit" class="inputbox" size="1" onchange="document.location.href='http://localhost/joomla/index.php?option=com_search&Itemid=99999999&searchword=joomla&searchphrase=any&ordering=newest&limit=' + this.options[selectedIndex].value + '&limitstart=0';">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30" selected="selected">30</option>
<option value="50">50</option>
</select>
</div>
<table class="contentpaneopen_searchresults"> <!-- HIER WIRD DER RESULT-TABLE GENERIERT -->
<tr class="">
<td>
<fieldset>
<div>
<span class="small">1.</span>
<a href="http://localhost/joomla/index.php?option=com_content&task=view&id=2&Itemid=39">Newsflash 1</a><br/>
<span class="small">(Newsflashes/Newsflash)</span>
</div>
<div>
<span class="highlight">Joomla</span>! 1.0 - 'Experience the Freedom'!. It has never been easier to create your own dynamic site. Manage all your content from the best CMS admin
interface. </div>
</fieldset>
<br/>
<fieldset>
<div>
<span class="small">2.</span>
<a href="http://localhost/joomla/index.php?option=com_content&task=view&id=1&Itemid=39">Welcome to Joomla!</a>
<br/>
<span class="small">(News/Latest)</span>
</div>
<div>
...mean really, complicated and lastly Portals are absolutely, outrageously, often unaffordably expensive.
<span class="highlight">Joomla</span>! is set to change all that ... <span class="highlight">Joomla</span>! is different from the normal models for portal s...
</div>
</fieldset>
<br/>
<fieldset>
<div>
<span class="small">
9. </span>
<a href="http://localhost/joomla/index.php?option=com_newsfeeds&task=view&feedid=2" target="_blank">
Joomla! - Community News </a>
<br/>
<span class="small">
(Newsfeeds / Joomla!)
</span>
</div>
<div>
http://www.<span class="highlight">joomla</span>.org/index.php?option=com_rss_xtd&feed=RSS2.0&type=com_content&task=blogcategory&id=0&Itemid=33 </div>
</fieldset>
<br/>
<!-- ... usw. insgesamt 10 Suchergebnisse ... -->
</td>
<tr>
<td colspan="3">
<div align="center">
<span class="pagenav"><< Anfang</span> <span class="pagenav">< Vorherige</span> <span class="pagenav">1</span> <span class="pagenav">Nächste ></span> <span class="pagenav">Ende >></span>
</div>
</td>
</tr>
</table>
<br/>
</div> <!-- end of middle -->
<div id="right"></div> <!-- end of right -->
<div class="clear"></div>
</div> <!-- end of middle_container -->
<div id="footer">
<a href="#">Kontakt</a> | <a href="#">Impressum</a>
</div> <!-- end of footer -->
</div> <!-- end of wrapper -->
</body>
</html><!-- 1165216015 -->
Code:
/* --------------- div-Template Settings | Aufbau von index.php --------------- */
body, html {
margin:0;
background-color:#e1e1e2;
color:#363636;
text-align:center;
}
#wrapper { /* Main Wrapper | gibt die Breite der Site vor */
width:924px;
margin:0px auto;
border-left:6px solid #fff;
border-right:12px solid #fff;
/*background-color:#fff;*/
text-align:left;
}
#header {
width:918px;
border-left:6px solid #fff;
height:108px; /* GRÖSSE ABCHECKEN */
background-color:#e22630;
}
#middle_container { /* Wrapper für die mittlere Zeile, d.h. left+middle+right */
background-image:url(../../../Programme/xampp/htdocs/joomla/images/BG_middle_container.gif);
background-repeat:repeat-y;
height:1%;
}
#left { /* left = Menu, Suche, deutsch|english */
float:left;
width:176px;
border-top:12px solid #fff;
/*background-color:#00ff00;*/
}
#middle { /* middle = Content */
float:left;
width:455px;
border-top:12px solid #fff;
border-left:12px solid #fff;
padding:40px 12px 20px 40px;
/*background-color:#ffff00;*/
}
#right { /* right = Image-Ecke */
float:right;
width:229px;
height:220px;
background-color:#00ff00;
}
#footer {
height:24px;
border-left:6px solid #fff;
border-right:12px solid #fff;
background-color:#fff;
padding:6px 100px 0 0;
text-align:right;
}
.clear { /* Hebt floating auf */
clear:both;
font-size:1px;
line-height:0px;
height:0;
}
/* --------------- Globale Settings --------------- */
img {
border:0;
}
/* --------------- left Settings | also Menu, Suche usw. --------------- */
table.moduletable { /* Tabelle in der Module wie Menu, Suche usw angeordnet werden (AUCH NEWS-MODUL!) */
width:100%;
margin:0;
/*background-color:#00ff00;*/
}
table.moduletable td { /* Einzelne Zellen von moduletable, also einzelne Module */
text-align:left;
/*background-color:#00ff00;*/
}
table.moduletable th { /* s.o. Überschrift */
/*background-color:#00ff00;*/
}
/* --------------- MENU --------------- */
#left table.moduletable_menu { /* Tabelle für Modul Menu */
margin:40px 0 0 0; /* ÄNDERN! */
border-top:1px solid #fff; /* NUR obere Linie über dem GESAMTEN Modul Menü */
}
#left table.moduletable_menu tr td table tr td { /* GENAU eine Zelle des Menus */
border-bottom:1px solid #fff; /* untere Linien im Menu */
}
a.mainlevel:link, a.mainlevel:visited { /* Menu-ZELLE */
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size:1.1em;
color:#fff;
text-decoration:none;
line-height:2.1em;
display:block;
width:141px;
height:2.1em;
padding-left:35px;
}
a.mainlevel:active, a.mainlevel:hover { /* Menu-ZELLE hover */
color:#e22630;
/*background-image:url(../../../images/BG_menu_active.gif);
background-repeat:repeat-y;*/
background-color:#fff;
}
#left table.moduletable_menu tr td table tr td a.mainlevel:hover { /* Menu-ZELLE hover! DRINLASSEN wegen IE6 */
background-color:#fff;
}
#left table.moduletable_menu #active_menu{ /* Menu-ZELLE active = angewählter Menupunkt */
background-image:url(../../../Programme/xampp/htdocs/joomla/images/BG_menu_active.gif);
background-repeat:repeat-y;
color:#e22630;
/*background-color:#fff;*/
}
a.sublevel:link, a.sublevel:visited { /* Submenu-ZELLE */
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
font-size:0.9em;
color:#c3c2c4;
text-decoration:none;
line-height:2.1em;
display:block;
width:131px;
height:2.1em;
padding-left:45px;
background-image:url(../../../Programme/xampp/htdocs/joomla/images/BG_menu_active.gif);
background-repeat:repeat-y;
/*background-color:#fff;*/
}
a.sublevel:active, a.sublevel:hover { /* Submenu-Zelle SCHRIFT hover */
color:#e22630;
background-image:url(../../../Programme/xampp/htdocs/joomla/images/BG_menu_active.gif);
background-repeat:repeat-y;
}
#left table.moduletable_menu tr td table tr td a.sublevel:hover { /* Submenu-ZELLE hover! DRINLASSEN (IE6) */
background-color:#fff;
}
#left .moduletable_menu table td div { /* Überschreibt Submenu hardcoding im html (padding-left:4px;) */
margin-left:-4px;
}
/* --------------- Generelle FORM settings | input fields, buttons, etc --------------- */
.button { /* Buttons bei Formularen u.ä., z.B. 'Suche'*/
font-size:11px;
color:#363636;
background-color:#f0f0f0;
border:1px solid #9f9ea1;
}
.inputbox { /* input-Felder, z.B. 'Suche'-Eingabefeld */
font-size:12px;
color:#363636;
background-color:#f0f0f0;
border:1px solid #9f9ea1;
padding:1px;
}
/* --------------- Content settings --------------- */
.contentpaneopen { /* Zelle eines Artikels im Content */
/*background-color:#00ff00;*/
}
.contentheading, .componentheading { /* Überschriften in Artikeln / Modulen */
/*background-color:#00ff00;*/
}
.createdate { /* Erscheinungsdatum */
background-color:#00ff00;
}
/* --------------- type settings --------------- */
body {
font-family:Arial,Helvetica,sans-serif;
font-size:0.75em;
color:#363636;
}
#left table.moduletable td { /* Einzelne Zellen von moduletable, also einzelne Module in #left!! */
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
line-height:1.4em;
color:#fff;
}
#middle table.moduletable td { /* Module im Contentbereich, also in #middle */
color:#363636;
font-size:1em;
line-height:1.4em;
}
table.moduletable th { /* Überschrift von Modulen */
font-size:1em;
font-weight:normal;
color:#fff;
}
.contentpaneopen { /* Zelle eines Artikels im Content */
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
line-height:1.4em;
color:#363636;
}
.contentheading, .componentheading { /* Überschriften in Artikeln / Modulen */
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:1.5em;
color:#e22630;
}
#footer {
color:#e22630;
}
h1, h2, h3, h4, h5, h6 { /* Überschriften, NOCH DIFFERENZIEREN!! */
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
line-height:1.4em;
color:#363636;
margin:0;
padding:0;
}
ul { /* Listen */
padding:0 0 0 14px;
}
li { /* listen */
list-style-type:disc; /* ÄNDERN!! */
}
/* --------------- link settings --------------- */
a:link, a:visited, a:active, a:hover { /* normale textlinks */
color:#e22630;
text-decoration:underline;
}
a.readon:link, a.readon:visited,
a.readon:active, a.readon:hover { /* 'mehr'-Link bei Teasern */
color:#e22630;
text-decoration:none;
}
a.contentpagetitle:link, a.contentpagetitle:visited,
a.contentpagetitle:active, a.contentpagetitle:hover { /* verlinkte Überschriften */
background-color:#00ff00;
}
#footer a:link, #footer a:visited,
#footer a:active, #footer a:hover {
color:#e22630;
text-decoration:none;
}
/* --------------- Printansicht --------------- */
body.contentpane { /* bei Printansicht: BG-color!! */
background-color:#fff;
padding:0 0 10px 25px;
}
body.contentpane .contentheading { /* Tabelle in der Drucktext steht */
text-align:left;
padding:2em 0 0.5em 0;
}
body.contentpane .small { /* bei Printansicht: close-button! */
font-size:1em;
}
body.contentpane #printlogo {
text-align:right;
}
/* --------------- Email-Ansicht Mailform --------------- */
body.contentpane form table tr td{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
text-align:left;
}
body.contentpane input {
}
/* --------------- Suchergebnisse Site settings --------------- */
#middle .componentheading { /* evtl noch für ANDERE COMPONENTS ? */
margin:1.4em 0 0.5em;
}
.contentpaneopen_searchresults {
white-space:normal;
width:455px;
}
.highlight {
white-space:normal;
width:300px;
}
.small { /* geklammerte Schrift / written by... */
}
/* --------------- Joomla Fehlermeldungen --------------- */
.moscode { /* {moscode} output. Dont set the colour! */
background-color: #f0f0f0;
}
.message { /* Text passed with mosmsg url parameter */
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
font-size:10pt;
color:#ff6600;
text-align: center;
}
hr { /* Trennerlinie, gibt es im Moment noch nicht. Kann aber im Backend im Texteditor eingegeben werden!! */
height:1px;
width:100%;
color:#e22630;
}Zur Verdeutlichung habe ich mal zwei Grafiken angehängt: Suchergebnisse in FF 1.5 und im IE6..
Hier sieht man schon, dass der FF diesen Fehler noch relativ gütig behandelt. Wohingegen IE die grüne Box schon nach unten verschiebt
Ich hoffe Ihr könnt mir helfen, ich komme hier echt nimmer weiter
Schonmal vielen Dank an jeden, der sich die Mühe gemacht hat, diesen Mammutbeitrag zu lesen
!!PS.: Ja, der CSS-Code ist ganz schön verwirrend. Auch für Vorschläge, ebendiesen übersichtlicher zu gestalten, bin ich dankbar!
