Probleme mit css styling

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

kingluui

Intermediate

Posts: 81

Wednesday, January 19th 2011, 3:50pm

Probleme mit css styling

Hallo liebes Team,

noch nachträglich ein frohes neues Jahr 2011.

Zu meinem Problem, habe da unter germanserv.de eine Testseite eingerichtet. Es handelt sich dabei um in accordion eingebettete tabs realisiert mit jquery. Die tabs innerhalt der accordions laden auf Wunsch per ajax den Content in die tab-container. Jetzt die Sache die ich mir nicht erklären kann:

Wenn der Content der da geladen wird aus Text besteht mit mit oder ohne p tag ist dabei egal, dann wird der Text schön mit dem container-Rahmen umschlossen. Wenn der Content aber aus div Elementen besteht, dann bricht/fährt der Rahmen zusammen und das sieht natürlich nicht gut aus.

Hier mal die css Datei main.css:

Cascading Style Sheets

BODY {
	margin: 0.75em;
	padding: 0.75em;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #333333;
}
UL.mytabs {
	position: relative;
	z-index: 2;
}
UL.mytabs, UL.mytabs LI {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
	float: left;
	padding: 7px;
	border: 1px solid #CCCCCC;
	border-bottom: 1px solid #E0E0E0;
	background: #F0F0F0;
	font-size: 0.8em;
	text-decoration: none;
	text-align: center;
	color: #333333;
	height: 22px;
	min-width: 100px;
	-webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A, UL.mytabs LI.current2 A {
	background: #FFFFFF;	
}
UL.mytabs LI.current A, UL.mytabs LI.current2 A {
	font-weight: bold;
	font-size: 0.8em;
	border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
	position: relative;
	clear: both;
	width: 100%;
	height: 100%;
	border: 1px solid #E0E0E0;
	padding: 0.6em;
	top: -1px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
/*.accordion {
	padding: 0.5em;
}*/
.accordion h3 {
	padding-left: 1.5em;
}
.liste {
	position: relative;
	width: 100%;
	height: 100%;
}
.listitem {
	float: left;
	margin: 1em;
	width: 4em;
	height: 4em;
	background: #03C;
}

Kenn jemand das Phenomen? Weil man kann jetzt nicht sagen, der geladen Content wird nicht von der css Datei verarbeitet, ich habe den div Elementen eine Class zugewiesen und die werden richtig dargestellt. Aber wie gesagt, wenn jemand eine Lösung für dieses Phenomen kenn, ich bitte um Hilfe.

Liebe Grüße

kingluui

n0x-f0x

Trainee

Posts: 50

Wednesday, January 19th 2011, 7:28pm

vllt. mal screenshots und html beispieldatein zu den screenshots, kann mir das schlecht vorstellen

kingluui

Intermediate

Posts: 81

Wednesday, January 19th 2011, 8:13pm

Oh ja gerne,

hier mal die index.html:

HTML Code

<!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">
<head>
<title>Test</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/main.css" type="text/css" media="all" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
var containerId = '#tabs-container';
var tabsId = '#sortable';
 
$(document).ready(function() {
	// Preload tab on page load
	if($(tabsId + ' LI.current A').length > 0){
		loadTab($(tabsId + ' LI.current A'));
	}
 
    $(tabsId + ' A').click(function(){
    	if($(this).parent().hasClass('current')){ return false; }
 
    	$(tabsId + ' LI.current').removeClass('current');
    	$(this).parent().addClass('current');
 
    	loadTab($(this));    	
        return false;
    });
 
	$('#sortable').sortable({
		items: 'li'
	});
 
	$('.accordion').accordion({
	active: 3,
		autoHeight: false,
		clearStyle: true,
		collapsible: true,
		header: 'h3'
	});
});
 
function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');
 
    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}
 
</script>
</head>
 
<body>
<div class='accordion'>
 
			<h3><a href='#'>Login</a></h3>
			<div>
				<p>Login...</p>
			</div>
 
			<h3><a href='#'>Werbung</a></h3>
			<div>
				<p>Werbung...</p>
			</div>
 
			<h3><a href='#'>Formulare</a></h3>
			<div>
				<p>Formulare...</p>
			</div>
 
			<h3><a href='#'>Favoriten</a></h3>
	<div id='tabs'>
		<ul class="mytabs" id='sortable'>
            <li class="current"><a href="./tabs/tab-1.html">Server</a></li>
            <li><a href="./tabs/tab-2.html">Standard</a></li>
            <li><a href="./tabs/tab-3.html">News</a></li>
		</ul>
        <div class="mytabs-container" id="tabs-container">
            Loading. Please Wait...
        </div>
	</div>
</div>
</body>
</html>

und hier eine per ajax geladene tab-1.html:

HTML Code

<div class="liste" id="liste">
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
<div class="listitem"><a href="#">Test</a>
</div>
</div>

mit folgendem Ergebnis: Bild01

und eine andere per ajax geladene Datei tab-3.html:

HTML Code

<p>Ne nam eros accumsan qualisque, eum persius habemus propriae id. Cu mutat ludus disputando usu, vim te laudem iriure luptatum. Amet mucius ne sed, an magna explicari eum. </p>
<p>Te fabellas pericula incorrupte cum, qui odio elit menandri ex, et sea sonet takimata. Idque atqui convenire quo et, vel justo civibus explicari no. No vim dicit melius conceptam, delenit corpora erroribus qui eu.</p> 
<p>In delenit lobortis cotidieque eum, usu ea tollit audiam. Amet mucius ne sed, an magna explicari eum. Quidam eligendi gloriatur ius ea. </p>
<p>No vim dicit melius conceptam, delenit corpora erroribus qui eu. Ne minimum sensibus laboramus pri, cetero iudicabit prodesset in mei. In delenit lobortis cotidieque eum, usu ea tollit audiam.</p>  
<p>Ullum alienum accusata an nam, ea per stet altera scaevola, nostro appareat comprehensam eam ea. No pri malis ocurreret deseruisse, in usu eros homero euismod, vituperatoribus nonummy per ex. In delenit lobortis cotidieque eum, usu ea tollit audiam.</p>

mit diesem Ergebnis: Bild02

da stimmt der Rahmen.

n0x-f0x

Trainee

Posts: 50

Thursday, January 20th 2011, 9:03am

website will ein pw haben... wegen bilder

versuch doch mal <p><div>bhgfgjn</div><div>nfdhf</div></p>
also alle divs in EINEM p drin...

kingluui

Intermediate

Posts: 81

Thursday, January 20th 2011, 3:46pm

Danke für Deine Hilfe, leider hatte ich das schon getestet und jetzt in verschieden Varianten nochmal.

Ich habe die PW Sperre auf der Website weggenommen.

Nun, ich weiss, man sollte meinen, ja klar die class mytabs-container weiss ja auch garnicht wie groß sie werden soll bevor der Content nicht geladen ist, aber mit dem Textinhalt klappts ja auch. Ich möchte den Entwicklern des jquery nix böses, aber es könnte auch ein Bug im Framework sein.

Also wenn niemand spontan ne Lösung weiss, weil sie oder er das auch schonmal hatte, dann werde ich wohl ne andere Designlösung wählen, schade.

Dann werde ich den Thread morgen als erledigt markieren müssen.

n0x-f0x

Trainee

Posts: 50

Thursday, January 20th 2011, 7:31pm

was mit <p><div><p></p><div><div><p></p><div><div><p></p><div></p> oder das ohne das äußerste p

glaube es liegt daran, dass my-tabs eine positionierung hat, mach mal in die css für listeitem auch noch position relative rein,

wenn das alles nicht funzt gib mir mal einen link zu der datei und ich spiele mit firebug bis das geht!

check your inbox for ICQ number

This post has been edited 1 times, last edit by "n0x-f0x" (Jan 20th 2011, 7:37pm)

kingluui

Intermediate

Posts: 81

Thursday, January 20th 2011, 9:38pm

Ok, das mache ich ja auch, mit firebug Httpfox und hasste nicht gesehn debuggen, aber manchmal sieht man auch vor lauter Bäume den Wald nicht mehr.

Sehr nett von Dir, ich habe jetzt mal alle betroffenen Dateien in eine .rar gepackt und hier accoTabsCombi zum Download bereitgestellt.

Opfere aber nicht zu viel Zeit damit. . .