hilfe für anpassung eines 3 Spalten designs

Fragen zur Implementierung und/oder Anpassung von ConPresso 4 werden in diesem Forum diskutiert.
Antworten
dichty
ConPresso-Newbie
Beiträge: 9
Registriert: 17.10.2006 23:13

hilfe für anpassung eines 3 Spalten designs

Beitrag von dichty »

Hallo erstmal,
wollte ein Design mit 3 spalten einbinden, jedoch habe ich das problem das die 2 äußeren spalten nicht mitgehen wenn der content erweitert wird.
das sieht nciht wirklich gut aus :(
hier mal der css teil:

#content{
width:701px;
float:left;
background-color: #CCCCCC;
}
#partner{
width:151px;
float:left;
background-image:url(Bilder/bild15.gif);
}
#termine{
width:151px;
float:left;
background-image:url(Bilder/bild13.gif);
}

html:

<div id="termine">
</div>
<div id="content"> content</div>
<div id="partner"> </div>

was muss ich da ändern damit die leisten mit dem conent mitziehn?
also hab das design noch nicht in conpresso eingefügt, aber muss ja vorher schonmal alles gehn ^^
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Kurze Frage dazu:

Was verstehst Du unter "mitgehen"? :-)

Balu
dichty
ConPresso-Newbie
Beiträge: 9
Registriert: 17.10.2006 23:13

Beitrag von dichty »

ahja das spalten auch mit zum footer gehen und nicht einfach nach dem inhalt fertig sind ^^
kann zur not auch mal pics uppen wenn irh wollt ^^
dichty
ConPresso-Newbie
Beiträge: 9
Registriert: 17.10.2006 23:13

Beitrag von dichty »

hier die pics:

http://www.antifa-bi.de/hp1.jpg ohen das es mitgeht
http://www.antifa-bi.de/hp2.jpg so soll es aussehen
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Bei so einem Layout wird ueblicherweise gemogelt :-)

Setz die allgemeine Hintegrundfarbe auf den dunklen Farbton und das mittlere auf einen helleren. Dann sieht es so aus, als wuerden die rechts und links mit "runterwandern" - allerdings geht das nur, wenn der mittlere Bereich immer laenger ist als die beiden anderen.

Statt alles zu floaten, arbeite ich oft gerne mit zwei gefloateten Elementen (die Raender rechts und links). Damit der mittlere Bereich dann nicht breiter wird, sobald die Floats zuende sind, gibt man ihm links und rechts jeweils ein margin, das so breit ist, wie die Seiten.

Vielleicht reicht Dir das ja schon als Ansatz.

Balu
dichty
ConPresso-Newbie
Beiträge: 9
Registriert: 17.10.2006 23:13

Beitrag von dichty »

ok danke hatte das schonmal versucht ^^ aber dann werd ich den noch ne min-height geben dann dprfte das nicht so übeöl sein ^^
dann werd ich es wohl noch anderster slicen müssen ^^
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

dichty hat geschrieben:aber dann werd ich den noch ne min-height geben dann dprfte das nicht so übeöl sein
Da macht der IE6 aber nicht mit, der kennt das nicht. Beim IE7 hab ichs noch nicht getestet, aber der müsste es kennen.
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
oliverr
ConPresso-User
Beiträge: 43
Registriert: 19.11.2006 12:03
Hat sich bedankt: 2 Mal
Danksagung erhalten: 1 Mal

Beitrag von oliverr »

Matthias V hat geschrieben:
dichty hat geschrieben:aber dann werd ich den noch ne min-height geben dann dprfte das nicht so übeöl sein
Da macht der IE6 aber nicht mit, der kennt das nicht. Beim IE7 hab ichs noch nicht getestet, aber der müsste es kennen.
Den IE kann man damit überlisten:

min-height: 450px; _height: 450px; /* ie hack */
Benutzeravatar
Feuer112
ConPresso-User
Beiträge: 56
Registriert: 02.10.2006 15:08
Hat sich bedankt: 8 Mal
Danksagung erhalten: 3 Mal

Beitrag von Feuer112 »

Hi zusammen,

ich möchte mein Projekt vom aussehen her gerne so wie dieses hier gestalte. (siehe Link) http://intensivstation.ch/files/templates/temp07.html Ich habe hierfür einfach die CSS übernommen. Der <DIV> "Content" wird im global_header gestartet und im global_footer geschlossen

Leider gibt es ein paar Probleme:

1) der untere (graue) Balken richtet sich immer nach der Länge des Content Inhaltes und nicht nach den Spalten Links (das sitzt die Navigation) oder Rechts (Mod_latest_news)

2) Lange Texte, Tabelle oder ein eingefügtes Bilderalbum über "mod_gallery" bleiben nicht im inneren Bereich, sondern werden über den rechten Teil geschrieben. Ebenso werden ergebnisse von den Module Search, contact usw. nicht nur im mittleren Teil angezeigt.

kann mir bitte bitte jemand von euch helfen. ich verzweifle fast..... :evil:
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7361
Registriert: 01.01.1970 01:00
Hat sich bedankt: 110 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Kannst Du villeicht noch zwei Dutzend funktionierende Beispiele zeigen?

Um so weniger ist es möglich zu beurteilen, warum Dein von Dir erstellter und geheim gehaltener Code nicht funktioniert.

Und solche Rätsel sind natürlich fast so interessant wie ein Sack Reis, der in China umgefallen ist...

SCNR

Es gibt da solche Sachen wie clear=both, aber nur wenn es auch eine konkrete Anwendung dafür gibt...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
Feuer112
ConPresso-User
Beiträge: 56
Registriert: 02.10.2006 15:08
Hat sich bedankt: 8 Mal
Danksagung erhalten: 3 Mal

Beitrag von Feuer112 »

sorry.. tut mir leid hier der Code... Wäre super wenn du mir da weiter helfen könntest.

global header

Code: Alles auswählen

 <!-- start of _cfg/global_header.php.dist -->
<html>
<head>
	<link rel="stylesheet" type="text/css" href="../_cfg/style.css.dist" /> 
    <title>
        <?php echo htmlspecialchars($cpoRubricSettings['title']); ?>
    </title>

<style>         
</style> 


</head>

<body>

<div id="balken_bild"><img src="../logo.gif" width="778" height="100" border="0"></div>
<br>
<div id="balken_top">hier soll der Breadcrump rein </div>
 
<div id="links">
	<div id="menu">
        	<p align="left"> 
        	<?php printNavigation('', 0, 1); ?> 

        	<!-- noetig, damit es unterhalb der mit "float" formatierten LI-Elemente weitergeht --> 
  
         	<?php 
         	/* Hier wird getActiveElements() benutzt, um bei der Unternavigation 
         	* nur die Unterpunkte der aktiven "erste Ebene" ($ae[1]) auszugeben. 
         	* 
         	* Verantwortlich hierfuer ist der vierte Parameter von printNavigation() 
         	*/ 
        	$ae = getActiveElements(); 
         	if (isset($ae[1])) { // nur ausgeben, wenn es eine aktive erste Ebene gibt 
         	printNavigation('', 0, 1, $ae[1]); // es wird wieder nur eine Ebene ausgegeben (die zweite) 
         	} 
         	?>
	 
	 	<?php 
         	/* Hier wird getActiveElements() benutzt, um bei der Unternavigation 
         	* nur die Unterpunkte der aktiven "erste Ebene" ($ae[1]) auszugeben. 
         	* 
         	* Verantwortlich hierfuer ist der vierte Parameter von printNavigation() 
         	*/ 
         	$ae = getActiveElements(); 
         	if (isset($ae[2])) { // nur ausgeben, wenn es eine aktive erste Ebene gibt 
         	printNavigation('', 0, 2, $ae[2]); // es wird wieder nur eine Ebene ausgegeben (die zweite) 
         	} 
		 	?> 
	</div>

</div>
<div id="rechts">   
<table border="0">        <td width="200">
            <div id="box"> 
                  <b>Suchen</b></div>

              
                    <form method="get" action="../mod_search/index.php" >
<input type="hidden" name="action" value="search" />
<input type="hidden" name="rubric" value="<?php echo $cpoRubric['id']; ?>" />
<input type="text" name="q" value="" />
<input type="submit" value=GO>
                </form>
    </td>
    
    </tr>
<br><br>

</table><br>
<table border="0">
    <tr>
        <td width="200">
            <div id="box"> 
                   <b>Einsätze</b> </div>
                <font size="2">&nbsp;<?php include("http://www.meineadresse.de/conpresso/mod_latest_news/index_php.php?profid=11"); ?>  </font>
        </td>
    </tr>
</table><br>
<table border="0">
    <tr>
        <td width="200">
           <div id="box"> 
                 <b>Termine</b> </div>
              &nbsp;<?php include("http://www.meineadresse.de/conpresso/mod_latest_news/index_php.php?profid=12"); ?> </p>
        </td>
    </tr>
</table>
</div>

<p><!-- end of _cfg/global_header.php.dist -->

global_footer

Code: Alles auswählen

 <!-- start of _cfg/global_footer.php.dist --><br><br></div><div id="balken_bottom">
  <?php
 echo "© 2006 - " . date("Y");
?>
 ...Sitemap, Impressum usw...</div>

    </body>
</html>
<!-- end of _cfg/global_footer.php.dist -->
CSS

Code: Alles auswählen

body 	{
  	  background-color: #e1ddd9;
  	  font-size: 12px;
  	  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  	  color:#564b47;  
  	  padding:0px;
  	  margin:0px;
	}	

a 	{ 
	  color: #000000;
	  font-size: 12px;
	  text-decoration: none; 
	}


a.link 	{ 
	  color: #000000;
	  font-size: 12px;
	  text-decoration: none; 
	}

a.visited { 
	  color: #000000;
	  font-size: 12px;
	  text-decoration: none; 
	}
	
a:hover { 
	  color: #ddd000;
	  font-size: 12px;
	  text-decoration: underline; 
	}
	
#box 	{ 
	  padding: 0.3em; 
	  margin: 0.3em 0; 
	  display: block; 
	  width: 150px; 
	  color: #0000; 
	  border-left: 1em #be2828 solid; 
	  border-top: 1px #be2828 solid; 
	  border-bottom: 1px #be2828 solid; 
	  text-decoration: none; 
	}  

#links 	{
	  position: absolute;
	  left: 0px;
	  width: 190px;
	  color: #564b47;
	  margin: 0px; 
	  padding: 0px;
}

#content {
	  margin: 0px 180px 0px 180px;
	  padding: 0px 0px 100px 0px;
	  border-left: 2px solid #564b47;
	  border-right: 2px solid #564b47;
	  padding: 0px;
	  background-color: #ffffff;    
	}

#rechts {
	  position: absolute;
	  right: 0px;        
	  width: 190px;
	  color: #564b47;
	  margin: 0px; 
	  padding: 0px;;
	}

#balken_bild {
	  background-color: #be2828;
}

#balken_top {
	  font-size: 12px;
	  text-align: left;
	  color: #FFFFFF;
	  background-color: #be2828;
	  padding:5px 15px;	  
	  margin:0px
	}

#balken_bottom {
	  font-size: 12px;
	  text-align: center;
	  color: #FFFFFF;
	  background-color: #be2828;
	  padding:5px 15px;
	  margin:0px
	}
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7361
Registriert: 01.01.1970 01:00
Hat sich bedankt: 110 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

*lol*

guter Konter... ich habe es ja herausgefordert... :mrgreen: :wall: :mrgreen:

Ich müsste jetzt also erst eine Domain einrichten, eine Datenbank anlegen, ConPresso inkl. Module installieren, um dann dort Deine Code-Häppchen einzubauen, noch einen Handvoll Text einzugeben um dann zu SEHEN, was Du als Problem schilderst... :shock:

Da komme ich aber dieses Jahr nicht mehr zu und bei Dir gucken darf man ja nicht, daher schaue Du einfach auf www.50n.de wo ich ein solches Layout umgesetzt habe... nur eben nicht mit absoluten Positionen...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Antworten