Site internet différent selon la résolution
tonio35000
Messages postés
1
Statut
Membre
-
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
je me suis lancé une fois de plus dans la création d'un site internet vitrine http://fillesalavanille.free.fr , tous marchait bien mais je suis face a un probleme
selon le pc que j'utilise l'affichage est différent
je suppose que cela vien des resolutions qui doivent etre différente
Comment faire pour avoir toujours le meme affichage quelques soit la résolution??
je vous laisse mon html et mon code css
merci beaucoup , je pense que sa ne doit pas etre grand chose une histoire de px ou et % mais je ne sais pas par ou commencer???!!!.???
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
if ($this->params->get('ueberschrift') == false) {
$ueberschrift = $mainframe->getCfg('sitename');
} else {
$ueberschrift = $this->params->get('ueberschrift');
}
if ($this->params->get('copyright') == false) {
$copyright = date('Y')." ".$mainframe->getCfg('sitename');
} else {
$copyright = date('Y')." ". $this->params->get('copyright');
}
$ersetzmich = array("&", "und");
$ersetzmichmit = array("%26", "%26");
$ueberschrift = str_replace($ersetzmich, $ersetzmichmit, $ueberschrift);
$copyright = str_replace($ersetzmich, $ersetzmichmit, $copyright);
if ($this->params->get('eigener_farbstring') == false) {
list ($farbe3, $farbe1, $farbe2) = split(':', $this->params->get('farbe'));
} else {
list ($farbe3, $farbe1, $farbe2) = split(':', $this->params->get('eigener_farbstring'));
}
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<jdoc:include type="head" />
<!-- Vom System benötigte Stylesheets, um bspw. Fehlermeldungen richtig darzustellen -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<!-- Unser-Stylesheet -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<style type="text/css">
body { background:url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/body_background.png) repeat-x <?php echo $farbe1; ?> fixed; font-size:11px;
}
ul#mainlevel-nav li a { background-color:<?php echo $farbe2; ?>; color:#FFF;}
a#active_menu-nav { background-color:<?php echo $farbe3; ?> !important; }
#menubutton { background-color:<?php echo $farbe2; ?> !important; }
#rolloutmenu a, label {
color:<?php echo $farbe2; ?> !important;
}
.moduletable h3, .moduletable_menu h3 {
color:<?php echo $farbe1; ?> !important;
padding-bottom:5px;
border-bottom:3px double <?php echo $farbe1; ?>;
}
.moduletable, .moduletable_menu{
color:<?php echo $farbe1; ?> !important;
}
#flashflower {
background-color:<?php echo $farbe3; ?>;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body, #maincontent, #minibutton_container a, #dynmenu, #flaflo, #newsflash
{
behavior:url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/hm_iepngfix.htc);
}
</style>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/system/js/mootools.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function angroesseanpassen() {
var fensterbreite = window.getWidth();
var flashbreite = fensterbreite - 560 - 25;
var maxflashbreite = 390;
if (flashbreite > 390 ) { flashbreite = 390; }
if (flashbreite < 250 ) {
$$('#flaflo').setStyle('width', 250);
$$('#flaflo').setStyle('height', 250*1.5);
} else {
$$('#flaflo').setStyle('width', 390);
$$('#flaflo').setStyle('height', 390*1.5);
}
$$('#maincontent').setStyle('margin-left', flashbreite);
$$('#minibutton_container').setStyle('left', flashbreite + 560);
$$('#rolloutmenu').setStyle('left', flashbreite + 560 - 210);
$$('#flashflower').setStyle('width', flashbreite);
$$('#flaflo').setStyle('margin-left', -maxflashbreite + flashbreite);
}
window.addEvent('domready', function() {
var schrift = new Hash.Cookie('schrift', {duration: 3600});
var list = $$('#mainlevel-nav li a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:100, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'background-color': '<?php echo $farbe3; ?>',
'padding-top': 15,
'padding-right': 20,
'color': '#FFF',
'opacity': 1
});
});
element.addEvent('mouseleave', function(){
fx.start({
'background-color': '<?php echo $farbe2; ?>',
'color': '#FFF',
'padding-top': 5,
'padding-right': 7,
'opacity':1
});
});
});
// DYNAMISCHES MENÜ
var leftMenu = new Fx.Slide('rolloutmenu', {duration:1000, transition: Fx.Transitions.Elastic.easeInOut});
$('btn_menu').addEvent('click', function(e){
$$('#rolloutmenu').setStyle('top', '0');
e = new Event(e);
leftMenu.toggle();
e.stop();
});
leftMenu.hide();
$$('.createdate', '.modifydate', '.pagenavcounter','.sectiontableentry1').setStyle('opacity', '0.7');
$$('#latestnews ul li' , '#mostread ul li').setStyle('opacity', '0.8');
$$('#box').setStyle('font-size', schrift.get('groesse'));
$$('#flashflower').setStyle('height', window.getScrollHeight());
// SCHRIFTGRÖßE
var resize = new Fx.Styles('box', {duration: 500, transition: Fx.Transitions.linear});
$('groesse1').addEvent('click', function() {
resize.start({
'font-size': '11px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '11px');
});
$('groesse2').addEvent('click', function() {
resize.start({
'font-size': '13px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '13px');
});
$('groesse3').addEvent('click', function() {
resize.start({
'font-size': '17px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '17px');
});
// ENDE SCHRIFTGRÖßE
angroesseanpassen();
var list = $$('#rolloutmenu li');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 10
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('resize',function(e){
angroesseanpassen();
});
/* ]]> */
</script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body id="box">
<div id="alles">
<div id="flashflower">
<div id="flaflo">
<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width', '100%',
'height', '100%',
'scale', 'exactfit',
'align', 'right',
'src', '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/flower_2',
'quality', 'autolow',
'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie', '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/flower_2',
'wmode', 'transparent',
'FlashVars', 'ueberschrift=<?php echo $ueberschrift; ?>',
'align','top'); //end AC code
</script>
</div>
</div>
<div id="maincontent">
<div class="inside">
<div id="topmenue"> <jdoc:include type="modules" name="user3" style="xhtml"/> </div>
<div id="inhalt"> <jdoc:include type="message" /><jdoc:include type="component" /><span class="nisi"></span></div>
<div id="newsflash"><jdoc:include type="modules" name="top" style="xhtml"/></div>
<div>
<div id="latestnews"><jdoc:include type="modules" name="user1" style="xhtml"/></div>
<div id="mostread"><jdoc:include type="modules" name="user2" style="xhtml"/></div>
</div>
<div id="footer"> <jdoc:include type="modules" name="banner" style="xhtml"/> </div>
<div style="border-top:3px double #FFF; padding:10px 0px; margin-top:10px;">
<div style="border-bottom:1px dotted #fff;padding-bottom:5px; margin-bottom:5px;">© <?php echo $copyright; ?></div>
Kostenlose <a href="https://michael.engineer/" title="Joomla Templates" style="text-decoration:underline;">Joomla Templates</a> von funky-visions.de - powered by greatnet.de <a href="https://www.greatnet.de/" title="Günstige VServer" style="text-decoration:underline;">VServer</a>
</div>
</div>
</div>
<div id="rolloutmenu">
<jdoc:include type="modules" name="left" style="xhtml"/><jdoc:include type="modules" name="user4" style="xhtml"/>
<span class="nisi"><?php echo 'ANEMOAPR08 15'; ?></span>
</div>
</div>
<div id="minibutton_container">
<a id="btn_menu"><img src="/templates/anemone/images/buttons/menu.png" width="25" height="50"/></a>
<a id="btn_home" href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="Accueil" width="25" height="25"/></a>
<a href="http://tonio22950.free.fr/index.php?option=com_artforms&Itemid=59"><img src="/templates/anemone/images/buttons/mail.png" alt="Nous contacter" width="25" height="25"/></a>
<a id="groesse1" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="caractères petits" width="25" height="25"/></a>
<a id="groesse2" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="caractères moyens" width="25" height="25"/></a>
<a id="groesse3" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="grands caractères" width="25" height="25"/></a>
</div>
</body>
</html>
et la code css
@charset "UTF-8";
/* ***************************************************************************************************** */
/* Standard-Tag-Gestaltung */
/* ***************************************************************************************************** */
BODY{
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
padding:0;
margin:0;
color:#FFF;
font-size:11px;
line-height:150%;
height:100%;
}
p, div {
color: #FFF;
}
/***debut****differente taile du texte proposé */
H1{
font-size:24px;
}
H2{
font-size:18px;
}
H3{
font-size:15px;
}
/***fin****differente taile du texte proposé */
a:link, a:active, a:visited{
text-decoration:none;
color:#FFF;
}
a:hover{
text-decoration:none;
}
a img {
border:none;
}
h1,h2,h3,h4,h5,h6 {
margin:10px 0px;
padding:0;
}
h4 {
font-size:166px;
}
/* ***************************************************************************************************** */
/* TEMPLATE SPECIFIC CSS CODE */
#alles {
max-width:980px;
}
#flashflower {
position:fixed;
top:0;
left:0;
width:390px;
height:585px;
vertical-align:top;
z-index:1;
overflow:hidden;
}
#flaflo {
vertical-align:top;
background: url(../images/flower_bg.png) repeat-x left bottom;
width:390px;
height:585px;
float:right;
overflow:hidden;
}
#flaflo object {
}
#maincontent {
width:560px;
min-height:100%;
float:left;
margin-left:390px;
}
#newsflash {
background:url(../images/80pctp.png) repeat-x;
width:500px;
padding:10px;
margin-top:10px;
}
#newsflash h3 {
padding:0;
margin:0;
border-bottom:3px double #FFF;
padding-bottom:5px;
line-height:100%;
}
#newsflash *, #newsflash p {
color:#FFF !important;
}
#accueil {
padding:0;
margin:0;
border-bottom:3px double #FFF;
padding-bottom:5px;
line-height:100%;
}
#leercontainer {
width:390px;
}
#maincontent .inside {
padding:0px 20px 20px 20px;
}
.abstand-halter {
border:3px solid pink;
padding:5px;
margin:5px;
}
#topmenue {
height:40px;
}
#inhalt {
padding-top:20px;
clear:both;
}
#rolloutmenu {
width:180px;
padding:10px;
max-height:400px;
background:url(../images/80pctp.png);
float:right;
overflow:auto;
position:fixed;
top:-400px;
left:740px;
}
#form-login ul {
padding-left:20px;
}
/* BUTTONS */
#minibutton_container {
position:fixed;
top:0px;
left:950px;
}
#minibutton_container a {
display:block;
margin-bottom:5px;
}
#latestnews, #mostread {
padding-top:20px;
width:48%;
float:left;
padding-right:2%;
margin-bottom:20px;
}
#latestnews h3, #mostread h3 {
color:#FFF !important;
border-bottom:3px double #FFF !important;
background:url(../images/page_white.gif) left center no-repeat;
padding-left:20px;
padding-top:5px;
}
#latestnews ul, #mostread ul {
margin:0;
padding:0;
list-style:none;
}
#latestnews ul li , #mostread ul li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_white.gif) left top no-repeat;
border-bottom:1px dotted #FFF;
}
#footer {
clear:left;
}
#dd a {
text-decoration:underline !important;
}
#dd {
}
.nisi {
display:none;
}
/* ***************************************************************************************************** */
/* JOOMLA SPECIFIC CSS CODE */
.article_separator{
display:block;
}
.blog{
}
.readon{
border-left:2px solid #FFF;
border-bottom:1px dotted #FFF;
padding:3px 5px;
}
.breadcrumbs{
}
.button{
}
.clr{
clear:both;
}
/* Titre de composant */
.componentheading {
font-size:28px;
border-bottom:3px dotted #FFF;
padding-bottom:20px;
margin-bottom:10px;
line-height:100%;
}
/* Titre de contribution */
.contentheading {
font-size:32px;
font-family:"Times New Roman", Times, serif;
line-height:100%;
}
.contentpane{
}
.contentpaneopen{
}
.contenttoc{
float:right;
border-left:1px dotted #FFF;
border-bottom:1px dotted #FFF;
padding-left:5px;
padding-bottom:5px;
margin-left:5px;
margin-bottom:5px;
}
.contenttoc th {
border-bottom:3px double #FFF;
margin-bottom:3px;
}
.createdate, .modifydate{
background:url(../images/date_symbol.gif) no-repeat top left;
padding-left:20px;
}
.input {
}
.inputbox, input, button{
padding:2px;
font-size:1em;
}
.latestnews{
}
.mostread{
}
.message{
}
.modifydate{
}
#rolloutmenu .moduletable, #rolloutmenu .moduletable_menu{
margin-bottom:20px;
}
#rolloutmenu fieldset {
border:none;
padding:0;
margin:0;
color:#999;
margin-left:10px;
}
.moduletable h3, .moduletable_menu h3{
margin:0;
margin-bottom:10px;
}
.pagenavbar{
border-bottom:1px dotted #FFF;
border-top:1px dotted #FFF;
letter-spacing:2px;
}
.pagenavbar a {
font-weight:bold;
}
.pagenavcounter{
background:url(../images/page.gif) left no-repeat;
letter-spacing:2px;
padding:3px 8px;
border:1px solid #999;
padding-left:24px;
display:table-cell;
color:#FFF;
}
.pathway{
}
.search{
}
.searchintro{
}
.sections{
}
.sectiontableentry1{
background-color:#FFF;
color:#000;
}
.sectiontableentry1 a:link, .sectiontableentry1 a:active, .sectiontableentry1 a:visited, .sectiontableentry1 a:hover{
color:#000;
}
.sectiontableentry2 td, .sectiontableentry1 td{
padding:2px;
}
.sectiontablefooter{
}
.sectiontableheader{
}
.small{
}
.wrapper{
}
.category {
font-weight:bold;
font-size:1.2em;
text-decoration:underline !important;
}
/* menu sup */
ul#mainlevel-nav {
padding:0;
margin:0;
}
/* Point de menu d'un Menu sup */
ul#mainlevel-nav li {
display:inline;
margin-right:1px;
float:left;
}
ul#mainlevel-nav li a{
background:#FFF;
font-weight:bold;
display:block;
padding:5px 7px;
float:left;
}
a#active_menu-nav {
padding-top:15px !important;
color:#FFF !important;
}
/* Listes de menu */
ul.menu, #mainlevel {
margin:0;
padding:0;
list-style:none;
}
/* Point de menu de listes de menu */
ul.menu li, #mainlevel li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_2.gif) left top no-repeat;
border-bottom:1px dotted #999;
}
/* Sous-menu d'un Menü's */
ul.menu li ul, #mainlevel li ul {
margin:0;
padding:0;
list-style:none;
}
/* Point de menu d'un sous Menü's */
ul.menu li ul li, #mainlevel li ul li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_2.gif) left top no-repeat;
border-top:1px dotted #999;
border-bottom:none;
}
#current {
font-weight:bold;
}
#form-login {
margin-left:-10px;
}
/***debut****les boutons sur la droite*/
#btn_home, #groesse1, #groesse2, #groesse3 {
display:block;
}
#btn_home {
background:url(../images/buttons/home.png);
}
#groesse1 {
background:url(../images/buttons/font_size_1.png);
}
#groesse2 {
background:url(../images/buttons/font_size_2.png);
}
#groesse3 {
background:url(../images/buttons/font_size_3.png);
}
#maincontent {
background:url(../images/10pctp.png);
}
.tool-tip {
background:#333;
border:1px solid #111;
padding:5px;
}
.tool-title {
font-weight:bold;
color:#CCC;
}
.tool-text {
color:#FFF;
font-size:10px;
}
#modlgn_username, #modlgn_passwd {
width:155px;
}
merci pour votre aide je suis vraiment bloquer??!!!???
je sais que Gihef a deja resolu ce genre pb ....
mais je pense que chaque cas est spécifique
je me suis lancé une fois de plus dans la création d'un site internet vitrine http://fillesalavanille.free.fr , tous marchait bien mais je suis face a un probleme
selon le pc que j'utilise l'affichage est différent
je suppose que cela vien des resolutions qui doivent etre différente
Comment faire pour avoir toujours le meme affichage quelques soit la résolution??
je vous laisse mon html et mon code css
merci beaucoup , je pense que sa ne doit pas etre grand chose une histoire de px ou et % mais je ne sais pas par ou commencer???!!!.???
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
if ($this->params->get('ueberschrift') == false) {
$ueberschrift = $mainframe->getCfg('sitename');
} else {
$ueberschrift = $this->params->get('ueberschrift');
}
if ($this->params->get('copyright') == false) {
$copyright = date('Y')." ".$mainframe->getCfg('sitename');
} else {
$copyright = date('Y')." ". $this->params->get('copyright');
}
$ersetzmich = array("&", "und");
$ersetzmichmit = array("%26", "%26");
$ueberschrift = str_replace($ersetzmich, $ersetzmichmit, $ueberschrift);
$copyright = str_replace($ersetzmich, $ersetzmichmit, $copyright);
if ($this->params->get('eigener_farbstring') == false) {
list ($farbe3, $farbe1, $farbe2) = split(':', $this->params->get('farbe'));
} else {
list ($farbe3, $farbe1, $farbe2) = split(':', $this->params->get('eigener_farbstring'));
}
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<jdoc:include type="head" />
<!-- Vom System benötigte Stylesheets, um bspw. Fehlermeldungen richtig darzustellen -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<!-- Unser-Stylesheet -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<style type="text/css">
body { background:url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/body_background.png) repeat-x <?php echo $farbe1; ?> fixed; font-size:11px;
}
ul#mainlevel-nav li a { background-color:<?php echo $farbe2; ?>; color:#FFF;}
a#active_menu-nav { background-color:<?php echo $farbe3; ?> !important; }
#menubutton { background-color:<?php echo $farbe2; ?> !important; }
#rolloutmenu a, label {
color:<?php echo $farbe2; ?> !important;
}
.moduletable h3, .moduletable_menu h3 {
color:<?php echo $farbe1; ?> !important;
padding-bottom:5px;
border-bottom:3px double <?php echo $farbe1; ?>;
}
.moduletable, .moduletable_menu{
color:<?php echo $farbe1; ?> !important;
}
#flashflower {
background-color:<?php echo $farbe3; ?>;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body, #maincontent, #minibutton_container a, #dynmenu, #flaflo, #newsflash
{
behavior:url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/hm_iepngfix.htc);
}
</style>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/system/js/mootools.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function angroesseanpassen() {
var fensterbreite = window.getWidth();
var flashbreite = fensterbreite - 560 - 25;
var maxflashbreite = 390;
if (flashbreite > 390 ) { flashbreite = 390; }
if (flashbreite < 250 ) {
$$('#flaflo').setStyle('width', 250);
$$('#flaflo').setStyle('height', 250*1.5);
} else {
$$('#flaflo').setStyle('width', 390);
$$('#flaflo').setStyle('height', 390*1.5);
}
$$('#maincontent').setStyle('margin-left', flashbreite);
$$('#minibutton_container').setStyle('left', flashbreite + 560);
$$('#rolloutmenu').setStyle('left', flashbreite + 560 - 210);
$$('#flashflower').setStyle('width', flashbreite);
$$('#flaflo').setStyle('margin-left', -maxflashbreite + flashbreite);
}
window.addEvent('domready', function() {
var schrift = new Hash.Cookie('schrift', {duration: 3600});
var list = $$('#mainlevel-nav li a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:100, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'background-color': '<?php echo $farbe3; ?>',
'padding-top': 15,
'padding-right': 20,
'color': '#FFF',
'opacity': 1
});
});
element.addEvent('mouseleave', function(){
fx.start({
'background-color': '<?php echo $farbe2; ?>',
'color': '#FFF',
'padding-top': 5,
'padding-right': 7,
'opacity':1
});
});
});
// DYNAMISCHES MENÜ
var leftMenu = new Fx.Slide('rolloutmenu', {duration:1000, transition: Fx.Transitions.Elastic.easeInOut});
$('btn_menu').addEvent('click', function(e){
$$('#rolloutmenu').setStyle('top', '0');
e = new Event(e);
leftMenu.toggle();
e.stop();
});
leftMenu.hide();
$$('.createdate', '.modifydate', '.pagenavcounter','.sectiontableentry1').setStyle('opacity', '0.7');
$$('#latestnews ul li' , '#mostread ul li').setStyle('opacity', '0.8');
$$('#box').setStyle('font-size', schrift.get('groesse'));
$$('#flashflower').setStyle('height', window.getScrollHeight());
// SCHRIFTGRÖßE
var resize = new Fx.Styles('box', {duration: 500, transition: Fx.Transitions.linear});
$('groesse1').addEvent('click', function() {
resize.start({
'font-size': '11px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '11px');
});
$('groesse2').addEvent('click', function() {
resize.start({
'font-size': '13px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '13px');
});
$('groesse3').addEvent('click', function() {
resize.start({
'font-size': '17px'
}).chain(function(){
$$('#flashflower').setStyle('height', window.getScrollHeight());
});
schrift.set('groesse', '17px');
});
// ENDE SCHRIFTGRÖßE
angroesseanpassen();
var list = $$('#rolloutmenu li');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 10
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('resize',function(e){
angroesseanpassen();
});
/* ]]> */
</script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body id="box">
<div id="alles">
<div id="flashflower">
<div id="flaflo">
<script type="text/javascript">
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width', '100%',
'height', '100%',
'scale', 'exactfit',
'align', 'right',
'src', '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/flower_2',
'quality', 'autolow',
'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie', '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/flower_2',
'wmode', 'transparent',
'FlashVars', 'ueberschrift=<?php echo $ueberschrift; ?>',
'align','top'); //end AC code
</script>
</div>
</div>
<div id="maincontent">
<div class="inside">
<div id="topmenue"> <jdoc:include type="modules" name="user3" style="xhtml"/> </div>
<div id="inhalt"> <jdoc:include type="message" /><jdoc:include type="component" /><span class="nisi"></span></div>
<div id="newsflash"><jdoc:include type="modules" name="top" style="xhtml"/></div>
<div>
<div id="latestnews"><jdoc:include type="modules" name="user1" style="xhtml"/></div>
<div id="mostread"><jdoc:include type="modules" name="user2" style="xhtml"/></div>
</div>
<div id="footer"> <jdoc:include type="modules" name="banner" style="xhtml"/> </div>
<div style="border-top:3px double #FFF; padding:10px 0px; margin-top:10px;">
<div style="border-bottom:1px dotted #fff;padding-bottom:5px; margin-bottom:5px;">© <?php echo $copyright; ?></div>
Kostenlose <a href="https://michael.engineer/" title="Joomla Templates" style="text-decoration:underline;">Joomla Templates</a> von funky-visions.de - powered by greatnet.de <a href="https://www.greatnet.de/" title="Günstige VServer" style="text-decoration:underline;">VServer</a>
</div>
</div>
</div>
<div id="rolloutmenu">
<jdoc:include type="modules" name="left" style="xhtml"/><jdoc:include type="modules" name="user4" style="xhtml"/>
<span class="nisi"><?php echo 'ANEMOAPR08 15'; ?></span>
</div>
</div>
<div id="minibutton_container">
<a id="btn_menu"><img src="/templates/anemone/images/buttons/menu.png" width="25" height="50"/></a>
<a id="btn_home" href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="Accueil" width="25" height="25"/></a>
<a href="http://tonio22950.free.fr/index.php?option=com_artforms&Itemid=59"><img src="/templates/anemone/images/buttons/mail.png" alt="Nous contacter" width="25" height="25"/></a>
<a id="groesse1" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="caractères petits" width="25" height="25"/></a>
<a id="groesse2" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="caractères moyens" width="25" height="25"/></a>
<a id="groesse3" href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/1mal1.gif" alt="grands caractères" width="25" height="25"/></a>
</div>
</body>
</html>
et la code css
@charset "UTF-8";
/* ***************************************************************************************************** */
/* Standard-Tag-Gestaltung */
/* ***************************************************************************************************** */
BODY{
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
padding:0;
margin:0;
color:#FFF;
font-size:11px;
line-height:150%;
height:100%;
}
p, div {
color: #FFF;
}
/***debut****differente taile du texte proposé */
H1{
font-size:24px;
}
H2{
font-size:18px;
}
H3{
font-size:15px;
}
/***fin****differente taile du texte proposé */
a:link, a:active, a:visited{
text-decoration:none;
color:#FFF;
}
a:hover{
text-decoration:none;
}
a img {
border:none;
}
h1,h2,h3,h4,h5,h6 {
margin:10px 0px;
padding:0;
}
h4 {
font-size:166px;
}
/* ***************************************************************************************************** */
/* TEMPLATE SPECIFIC CSS CODE */
#alles {
max-width:980px;
}
#flashflower {
position:fixed;
top:0;
left:0;
width:390px;
height:585px;
vertical-align:top;
z-index:1;
overflow:hidden;
}
#flaflo {
vertical-align:top;
background: url(../images/flower_bg.png) repeat-x left bottom;
width:390px;
height:585px;
float:right;
overflow:hidden;
}
#flaflo object {
}
#maincontent {
width:560px;
min-height:100%;
float:left;
margin-left:390px;
}
#newsflash {
background:url(../images/80pctp.png) repeat-x;
width:500px;
padding:10px;
margin-top:10px;
}
#newsflash h3 {
padding:0;
margin:0;
border-bottom:3px double #FFF;
padding-bottom:5px;
line-height:100%;
}
#newsflash *, #newsflash p {
color:#FFF !important;
}
#accueil {
padding:0;
margin:0;
border-bottom:3px double #FFF;
padding-bottom:5px;
line-height:100%;
}
#leercontainer {
width:390px;
}
#maincontent .inside {
padding:0px 20px 20px 20px;
}
.abstand-halter {
border:3px solid pink;
padding:5px;
margin:5px;
}
#topmenue {
height:40px;
}
#inhalt {
padding-top:20px;
clear:both;
}
#rolloutmenu {
width:180px;
padding:10px;
max-height:400px;
background:url(../images/80pctp.png);
float:right;
overflow:auto;
position:fixed;
top:-400px;
left:740px;
}
#form-login ul {
padding-left:20px;
}
/* BUTTONS */
#minibutton_container {
position:fixed;
top:0px;
left:950px;
}
#minibutton_container a {
display:block;
margin-bottom:5px;
}
#latestnews, #mostread {
padding-top:20px;
width:48%;
float:left;
padding-right:2%;
margin-bottom:20px;
}
#latestnews h3, #mostread h3 {
color:#FFF !important;
border-bottom:3px double #FFF !important;
background:url(../images/page_white.gif) left center no-repeat;
padding-left:20px;
padding-top:5px;
}
#latestnews ul, #mostread ul {
margin:0;
padding:0;
list-style:none;
}
#latestnews ul li , #mostread ul li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_white.gif) left top no-repeat;
border-bottom:1px dotted #FFF;
}
#footer {
clear:left;
}
#dd a {
text-decoration:underline !important;
}
#dd {
}
.nisi {
display:none;
}
/* ***************************************************************************************************** */
/* JOOMLA SPECIFIC CSS CODE */
.article_separator{
display:block;
}
.blog{
}
.readon{
border-left:2px solid #FFF;
border-bottom:1px dotted #FFF;
padding:3px 5px;
}
.breadcrumbs{
}
.button{
}
.clr{
clear:both;
}
/* Titre de composant */
.componentheading {
font-size:28px;
border-bottom:3px dotted #FFF;
padding-bottom:20px;
margin-bottom:10px;
line-height:100%;
}
/* Titre de contribution */
.contentheading {
font-size:32px;
font-family:"Times New Roman", Times, serif;
line-height:100%;
}
.contentpane{
}
.contentpaneopen{
}
.contenttoc{
float:right;
border-left:1px dotted #FFF;
border-bottom:1px dotted #FFF;
padding-left:5px;
padding-bottom:5px;
margin-left:5px;
margin-bottom:5px;
}
.contenttoc th {
border-bottom:3px double #FFF;
margin-bottom:3px;
}
.createdate, .modifydate{
background:url(../images/date_symbol.gif) no-repeat top left;
padding-left:20px;
}
.input {
}
.inputbox, input, button{
padding:2px;
font-size:1em;
}
.latestnews{
}
.mostread{
}
.message{
}
.modifydate{
}
#rolloutmenu .moduletable, #rolloutmenu .moduletable_menu{
margin-bottom:20px;
}
#rolloutmenu fieldset {
border:none;
padding:0;
margin:0;
color:#999;
margin-left:10px;
}
.moduletable h3, .moduletable_menu h3{
margin:0;
margin-bottom:10px;
}
.pagenavbar{
border-bottom:1px dotted #FFF;
border-top:1px dotted #FFF;
letter-spacing:2px;
}
.pagenavbar a {
font-weight:bold;
}
.pagenavcounter{
background:url(../images/page.gif) left no-repeat;
letter-spacing:2px;
padding:3px 8px;
border:1px solid #999;
padding-left:24px;
display:table-cell;
color:#FFF;
}
.pathway{
}
.search{
}
.searchintro{
}
.sections{
}
.sectiontableentry1{
background-color:#FFF;
color:#000;
}
.sectiontableentry1 a:link, .sectiontableentry1 a:active, .sectiontableentry1 a:visited, .sectiontableentry1 a:hover{
color:#000;
}
.sectiontableentry2 td, .sectiontableentry1 td{
padding:2px;
}
.sectiontablefooter{
}
.sectiontableheader{
}
.small{
}
.wrapper{
}
.category {
font-weight:bold;
font-size:1.2em;
text-decoration:underline !important;
}
/* menu sup */
ul#mainlevel-nav {
padding:0;
margin:0;
}
/* Point de menu d'un Menu sup */
ul#mainlevel-nav li {
display:inline;
margin-right:1px;
float:left;
}
ul#mainlevel-nav li a{
background:#FFF;
font-weight:bold;
display:block;
padding:5px 7px;
float:left;
}
a#active_menu-nav {
padding-top:15px !important;
color:#FFF !important;
}
/* Listes de menu */
ul.menu, #mainlevel {
margin:0;
padding:0;
list-style:none;
}
/* Point de menu de listes de menu */
ul.menu li, #mainlevel li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_2.gif) left top no-repeat;
border-bottom:1px dotted #999;
}
/* Sous-menu d'un Menü's */
ul.menu li ul, #mainlevel li ul {
margin:0;
padding:0;
list-style:none;
}
/* Point de menu d'un sous Menü's */
ul.menu li ul li, #mainlevel li ul li {
padding:3px;
padding-left:20px;
background:url(../images/readmore_2.gif) left top no-repeat;
border-top:1px dotted #999;
border-bottom:none;
}
#current {
font-weight:bold;
}
#form-login {
margin-left:-10px;
}
/***debut****les boutons sur la droite*/
#btn_home, #groesse1, #groesse2, #groesse3 {
display:block;
}
#btn_home {
background:url(../images/buttons/home.png);
}
#groesse1 {
background:url(../images/buttons/font_size_1.png);
}
#groesse2 {
background:url(../images/buttons/font_size_2.png);
}
#groesse3 {
background:url(../images/buttons/font_size_3.png);
}
#maincontent {
background:url(../images/10pctp.png);
}
.tool-tip {
background:#333;
border:1px solid #111;
padding:5px;
}
.tool-title {
font-weight:bold;
color:#CCC;
}
.tool-text {
color:#FFF;
font-size:10px;
}
#modlgn_username, #modlgn_passwd {
width:155px;
}
merci pour votre aide je suis vraiment bloquer??!!!???
je sais que Gihef a deja resolu ce genre pb ....
mais je pense que chaque cas est spécifique
A voir également:
- Site internet différent selon la résolution
- Site de telechargement - Accueil - Outils
- Site x - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site comme coco - Accueil - Réseaux sociaux
14 réponses
salut,
selon le pc que j'utilise l'affichage est différent
quelles sont les différences d'affichages, avec quels navigateurs, sur quels OS ?
Comment faire pour avoir toujours le meme affichage quelques soit la résolution??
ça dépend.
tu trouveras déjà quelques conseils dans la FAQ.
je vous laisse mon html et mon code css
c'était pas la peine, on l'a directement sur le site !
-;o)
une histoire de px ou et % mais je ne sais pas par ou commencer???!!!.???
y a des chances que ce soit ça, dis nous d'abord quels sont les soucis !
selon le pc que j'utilise l'affichage est différent
quelles sont les différences d'affichages, avec quels navigateurs, sur quels OS ?
Comment faire pour avoir toujours le meme affichage quelques soit la résolution??
ça dépend.
tu trouveras déjà quelques conseils dans la FAQ.
je vous laisse mon html et mon code css
c'était pas la peine, on l'a directement sur le site !
-;o)
une histoire de px ou et % mais je ne sais pas par ou commencer???!!!.???
y a des chances que ce soit ça, dis nous d'abord quels sont les soucis !
l'affichage est différent dans le sens ou tous les modules sont disposés tous décalés, la séparation en 3 parties est pas exactement la même, la navigation en est totalement différente, les boutons a droite sont tout en bas...
Voila mon principale soucis
pour le voir il suffit à mon sens de changer la résolution de son PC
j'ai pas essayer mais sa doit marcher??!!
merci d'avance...
Voila mon principale soucis
pour le voir il suffit à mon sens de changer la résolution de son PC
j'ai pas essayer mais sa doit marcher??!!
merci d'avance...
alors la je suis très surpris j'ai bo changer ma résolution et le pb ne s'affiche pas???!!!
A la base je fait mon site sur un PC portable , où il fonctionne trés bien, quand je vais à la fac ou même sur le PC de mon frère le site est différent je pensais avoir trouver la base du pb mais pas du tout ????
je ne sais pas comment faire???
A la base je fait mon site sur un PC portable , où il fonctionne trés bien, quand je vais à la fac ou même sur le PC de mon frère le site est différent je pensais avoir trouver la base du pb mais pas du tout ????
je ne sais pas comment faire???
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jai essayer toutes ces resolutions :
- 800X600
- 1024X768
- 1280X600
- 1280X720
- 1280X768
- 1280X800
pour ce qui est des navigateurs cela ne change rien j'ai IE et ff
OS?? je fait le site sous joomla avec window XP
merci encore de ce pencher sur mon pb
- 800X600
- 1024X768
- 1280X600
- 1280X720
- 1280X768
- 1280X800
pour ce qui est des navigateurs cela ne change rien j'ai IE et ff
OS?? je fait le site sous joomla avec window XP
merci encore de ce pencher sur mon pb
...
mais si il y a un pb
puisque lorsque je vais voir mon site sur un autre ordi l'affichage est différent?????
tout est chamboulé rien est à sa place...
mais si il y a un pb
puisque lorsque je vais voir mon site sur un autre ordi l'affichage est différent?????
tout est chamboulé rien est à sa place...
ok je v essayer de faire un un imprime ecran sur lautre PC des demain normalement!!!
je vous l'enverrais!!!!
je vous l'enverrais!!!!
après avoir allumé un autre ordi, je crois que j'ai trouvé…
ce serait pas juste des IE 6 qui posent problème, par hasard ?
ce serait pas juste des IE 6 qui posent problème, par hasard ?
ou peu etre l'inverse !!!
ceux qui ont pas IE6 sa marche pas ??
en effet dans joomla jai 2 css :
- IE6only.css
- templates.css
cela explique cela??? du coup qu faire??
ceux qui ont pas IE6 sa marche pas ??
en effet dans joomla jai 2 css :
- IE6only.css
- templates.css
cela explique cela??? du coup qu faire??
cela explique cela?
IE n'est pas très fort pour appliquer les règles CSS.
IE7 est bien mieux mais IE est catastrophique !
je ne sais même pas comment je n'y ai pas pensé avant, on en voit passer à longueur de temps sur le forum…
(mais comme j'ai pas IE…)
c'est pour ça que Joomla le traite à part.
ce n'est pas forcément la meilleure méthode (qui serait plutôt de faire du tout terrain) mais dans ce cas tu n'as guère le choix…
tu peux regarder du côté du haslayout, mais c'est pas forcément évident pour un débutant.
plus simplement, tu peux faire la chasse aux règles où tu définis à la fois largeur et marge droite et/ou gauche et remplacer {margin} par {padding}.
IE n'est pas très fort pour appliquer les règles CSS.
IE7 est bien mieux mais IE est catastrophique !
je ne sais même pas comment je n'y ai pas pensé avant, on en voit passer à longueur de temps sur le forum…
(mais comme j'ai pas IE…)
c'est pour ça que Joomla le traite à part.
ce n'est pas forcément la meilleure méthode (qui serait plutôt de faire du tout terrain) mais dans ce cas tu n'as guère le choix…
tu peux regarder du côté du haslayout, mais c'est pas forcément évident pour un débutant.
plus simplement, tu peux faire la chasse aux règles où tu définis à la fois largeur et marge droite et/ou gauche et remplacer {margin} par {padding}.
ok merci a mon avis aussi c'est un meilleur diagnostic
je vais faire la chasse au régle !!!
j'ai tout de même quelques notion html et css java mis sa reste restrain
en gro ya quelques ecritures qui ne sont pas lu par IE et qu'il faut changer et celle-ci sont lu par ff...
je dois modifier les 2 textes css???
je vais faire la chasse au régle !!!
j'ai tout de même quelques notion html et css java mis sa reste restrain
en gro ya quelques ecritures qui ne sont pas lu par IE et qu'il faut changer et celle-ci sont lu par ff...
je dois modifier les 2 textes css???
en gro ya quelques ecritures qui ne sont pas lu par IE et qu'il faut changer et celle-ci sont lu par ff...
il y a des règles standards définies pour tout le monde mais que chaque navigateur applique, n'applique pas (je crois qu'opéra est le seul à appliquer entièrement CSS 2) ou applique mal (comme le calcul de la taille des boites par IE).
à côté de ça IE et Mozzila définissent chacun des règles qui ne fonctionnent que pour eux…
je dois modifier les 2 textes css???
commence par celle de IE, si ça ne suffit pas tente avec l'autre…
il y a des règles standards définies pour tout le monde mais que chaque navigateur applique, n'applique pas (je crois qu'opéra est le seul à appliquer entièrement CSS 2) ou applique mal (comme le calcul de la taille des boites par IE).
à côté de ça IE et Mozzila définissent chacun des règles qui ne fonctionnent que pour eux…
je dois modifier les 2 textes css???
commence par celle de IE, si ça ne suffit pas tente avec l'autre…
