Wie positioniere ich via CSS diese
's ?

Moderator: Sisko1990

Forum rules
Forumregeln
Locked
User avatar
phreak_02
Joomla! Explorer
Joomla! Explorer
Posts: 375
Joined: Tue Aug 23, 2005 3:31 pm
Location: Austria
Contact:

Wie positioniere ich via CSS diese

Post by phreak_02 » Mon Jan 30, 2006 1:35 am

Hi alle...

Also ich bin gerade dabei mir das Arbeiten mit -Containern
beizubringen & möchte alle meine Templates schön langsam
umstellen.

Und da hab ich gleich ein Problem, dass ich noch mit Tabellen
zu lösen wusste. Ich spiel jetzt schon einige Zeit mit unterschied-
lichen Verschachtelungen der DIV's herum und mit den CSS-
Klassen...
> display: inline, block, static, fixed, etc...
> width: auto, 100%, etc...

Die DIV's 1 - 6 sind absolut positioniert.

1.)
Die DIV's 7 - 9 sollen sich automatisch unter die mittleren 4 - 6 setzen,
je nachdem wie lange die (4 - 6) werden.

2.)
Ist es möglich zu definieren, dass das längste der 4 - 6 auch die
Länge der anderen definiert. In diesem Fall ist es ein Blog und in
5 ist der Content. In 6 die Module und in 4 nur ein background-
image.

Kann mir jemand einen Tip geben, wie in diesem Fall die Verschachtelung
und Fomatierung auszusehen hat ?

Danke
Stefan
You do not have the required permissions to view the files attached to this post.
http://www.cycomsplat.com - I work for you !
http://www.kindaktuell.at - I'm running this !

Michelangelo
Joomla! Apprentice
Joomla! Apprentice
Posts: 47
Joined: Tue Nov 08, 2005 9:41 pm

Re: Wie positioniere ich via CSS diese

Post by Michelangelo » Mon Jan 30, 2006 4:37 pm

Hi

eines vorweg, von absolut positionierten divs würde ich grundsätzlich die finger von lassen, naja grundsätzlich nicht, aber so wie du es bisher hast keines falls.

leider ist das thema CSS etwas komplexer als man denkt, weil man schnell die nerven verliert, aufgrund der diversen Browser-Bugs, ganz speziell der IE  :laugh:

am besten ist es wenn man sich selbst damit beschäftigt, weil sonst lernt man es nie richtig. deswegen hab ich dir mal eine kleine liste
zusammengestellt, welche für mich sehr hilfreich war bzw immer noch ist!


http://www.alistapart.com
http://www.macromedia.com/devnet/dreamweaver/css.html
http://css.maxdesign.com.au/
http://www.positioniseverything.net/
http://de.selfhtml.org/


auf den jeweiligen Seiten findest u.a. How-To's, fertige CSS Designs, Tutorials, hilfe zu Browser-Bugs etc....
ich würde mir speziell mal die macromedia seite angucken, da wird u.a. einem sehr leicht step-by-step erklärt, wie man ein mehrspaltiges template erstellt.

auch selfhtml ist sehr zu empfehlen, so fern du die seite noch nicht kennst.

edit
naja, doch noch kleiner hinweis zu 1.

man kann deine div's 7-9 als footer "verpacken", so das diese divs immer unter deinem main content sind.

zu 2.
Wenn du nicht alle divs, absolut positionierst und sonstige "schweinereien"  :P anstellst, orientieren sich deine divs nach dem längsten, also dem mit dem content.

Noch ein kleiner tip, mach um deine bisherigen divs ein div. quasi als "eltern" div
Last edited by Michelangelo on Mon Jan 30, 2006 4:48 pm, edited 1 time in total.

steinefrenz
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Mar 09, 2006 10:23 am

Re: Wie positioniere ich via CSS diese

Post by steinefrenz » Thu Mar 09, 2006 2:42 pm

Ganz einfach mittels CSS
Hier ein kleines Bsp für dein Template und CSS - File (im Bsp. ist das CSS aus Platzgründen inline). Solche und ähnliches wird auch bei unserem zweitägigem Joomla - Intensivkurs (http://www.24ix.de/Seminare.122.0.html) angeboten.

Code: Select all

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
body { 								 
		 									 font-size: medium;
		 									 font-family: verdana,helvetica,sans-serif;
											 color: #333;
											 line-height: 150%;
											 margin: 0;
											 padding: 0;						
}
div.clearboth  {			 
							 				 clear:both;
} 

#header  {						 
				 							 height:125px;
				 							 background: url()no-repeat;
} 
#lefth  {		  				 
											 float: left;
											 background: yellow;
 											 width: 20%;						 
 }
#centerh	 {					 
					 						 float: left;
					  					 background: red;
					 						 width: 60%;
 }						  
#righth  {						
				 							 float:right;
				  						 background: blue; 
				 							 width: 20%;
}
#topnavigation {			 
							 				 background:purple;
							 				 height: 25px;
}

ul.topnavi {					 
					 						 list-style: none;
}

li.topnavi {					 
					 						 float: right;
					 						 margin-left: 5px;
											 border-left: 1px solid #FF0000;
}

li.topnavi a:link, li.topnavi a:visited  {
					 				 		 text-decoration:none;
					 	 					 color: white;
									     display: block;    
 											 padding: 1px 4px 1px 4px;
											 white-space: pre;
}
li.topnavi a:hover  {	   
					 				 		 background:black; 
					 	 					 color: white;
}
#leftnav {						 float: left;
				 							 width: 20%;
											 background: pink;
}
ul.leftnavi {					 
											 list-style-type: none;
											 margin-left: 0; /* wg IE  */
											 margin-bottom: 0; /* IE und Moz */
											 margin-top: 0;  /* wg Moz */
											 padding-left:0; /* wg Moz */
}

li.leftnavi  {
											 border-bottom: 1px solid white;
											 border-right: 1px solid white;
}
li.leftnavi a {
					 	 					 color: black;
											 display: block;
											 padding: 2px 5px 2px 5px;
}

li.leftnavi a:link, li.leftnavi a:visited  {
					 				 		 text-decoration:none;
											 white-space: pre;
}
li.leftnavi a:hover  { 
					 				   	 background:black; 
					 	 					 color: white;
}
#rightnav  { 					 
					 						 float: right;
					 						 width: 20%;
											 background:green;
 }
#content  {						 
											 float: left;
											 width: 60%;
											 background: #ccc;				
}
#footer  {						 
				 							 height:125px;
				 							 background: url()no-repeat;
} 
#leftf  {		  				 
											 float: left;
											 background: olive;
 											 width: 20%;						 
 }
#centerf	 {					 
					 						 float: left;
					  					 background: brown;
					 						 width: 60%;
 }						  
#rightf  {						 
				 							 float:right;
				  						 background: navy; 
				 							 width: 20%;
} 											  
</style>
</head>
<body>
<div id ="container">
		 <div id ="header">
		 			<div id ="lefth">
							 <h1>1</h1>
					</div>
          <div id="centerh">
							 <h1>2</h1>
					</div>
					<div id="righth">
				 			 <h1>3</h1> 
					</div> 
					<div class="clearboth"></div>
		 </div>
		 <div id="topnavigation">
		 			<ul class="topnavi">
							<li class="topnavi"><a href="#">Kontakt</a></li>
							<li class="topnavi"><a href="#">Über uns</a></li>
							<li class="topnavi"><a href="#">Impressum</a></li>
					</ul>		
		 </div>
		 <div class="clearboth"></div>
		 <div id="leftnav">
		 			<ul class="leftnavi">
							<li class="leftnavi"><a href="#">Startseite</a></li>
							<li class="leftnavi"><a href="#">Produkte</a></li>
							<li class="leftnavi"><a href="#">Support</a></li>
					</ul>	
		 </div>
		 <div id ="rightnav">
		 			<h1>6</h1>
		 </div>
		 <div id="content">
		 			<h1>5</h1>
		 </div>
		 <div class="clearboth"></div>
		 <div id="footer">
		 			<div id="leftf">
							 <h1>7</h1>
					</div>
					<div id="centerf">
							 <h1>8</h1>
					</div>
					<div id="rightf">
							 <h1>9</h1>
					</div>
			</div>
</div>

</body>
</html>
Ich hoffe das hilft Dir weiter.

Herzliche Grüße

Michael
http://www.24ix.de

steinefrenz
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Mar 09, 2006 10:23 am

Re: Wie positioniere ich via CSS diese

Post by steinefrenz » Fri Mar 10, 2006 3:55 pm

Zu dem Beispiel Sourcecode in diesem Thread (http://forum.joomla.org/index.php/topic ... #msg242173) habe ich jetzt auch eine Beispielinstallation mit genau diesem Code installiert. Lief auf Anhieb. Vollkommen liquid, auch Schriftgrößen (CTRL + - bei Firefox). Die Demo/Beispielinstallation befindet sich auf http://www.joomla-now.de. Bei Fragen oder Unklarkeiten einfach eine Email an support@24ix.de.

Beste Grüße

Michael
http://www.24ix.de

User avatar
phreak_02
Joomla! Explorer
Joomla! Explorer
Posts: 375
Joined: Tue Aug 23, 2005 3:31 pm
Location: Austria
Contact:

Re: Wie positioniere ich via CSS diese

Post by phreak_02 » Mon Apr 17, 2006 1:58 am

Vielen Dank steinefrenz !

Grüße
phreak
http://www.cycomsplat.com - I work for you !
http://www.kindaktuell.at - I'm running this !


Locked

Return to “Template, CSS und Designfragen 1.0.x”