Images de fond autour de Contenu flexible?

J'essaie d'obtenir des images d'arrière-plan autour d'un div de contenu. Chose est, le contenu div devrait avoir une largeur flexible (pas de problème). Les images d'arrière-plan doivent toujours être à gauche et à droite attachées à la div de contenu. MAIS: la barre de défilement horizontale ne doit être déclenchée que lorsque l'utilisateur réduit la fenêtre à la largeur du contenu div.Images de fond autour de Contenu flexible?

Image: Structure

je suis venu avec quelque chose comme ceci:

<div> 
    <div class="header">/div> 
<div class="wrapper"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="content">Content</div> 
</div> 
    <div class="footer">/div> 
</div> 



.wrapper{ 
margin:auto; 
width:950px; 
position:relative; 
} 

.left { 
background:transparent url(../images/left.png) no-repeat scroll 0 0; 
position:absolute; 
top:0; 
left:-120px; 
width:120px; 
height:500px; 
} 

.right { 
background:transparent url(../images/right.png) no-repeat scroll 0 0; 
position:absolute; 
top:0; 
right:-120px; 
width:120px; 
height:500px; 
}

Les barres de défilement apparaissent lorsque la fenêtre touche le droit absolu div. J'ai besoin qu'ils soient deux divs (gauche/droite) parce que le contenu div devrait être flexible et ne pas cacher l'arrière-plan quand il s'étend à beaucoup.

Quelqu'un a eu une technique pour cela?

Source

2010-01-27 Mike

Vous souhaitez que la barre de défilement ignore la présence des éléments positionnés de manière absolue et ne réagisse qu'aux dimensions div du contenu? –

C'est juste. Je l'ai déjà résolu avec ilhan negis réponse. mais peut-être avez-vous une approche différente ...? – Mike

vous avez une div.

Ajoutez ce style pour ce div (ou donnez un nom de classe/id pour câbler la décélération css). Le point principal est min-width ... Gardez la même chose avec la largeur de votre conteneur.

ajoutant également body,html{margin:0;padding:0;} sera plus agréable.

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

cela fonctionnera bien sauf ex. Par exemple, vous pouvez appliquer de la magie js. Supposons que vous utilisez la bibliothèque jquery et que vous ayez donné le nom d'identifiant "shell" à votre conteneur racine div. Essayez ensuite ce script uniquement pour ie6. (créer une exclusion ou quelque chose comme ça):

$(document).ready(function(){ 
$('#shell').each(function(){ 
    var that = this; 
    var contentWidth = 950; 
    check(); 
    $(window).resize(check); 
    function check() { 
    var winWidth = Math.ceil($('body').width()); 
    if(winWidth <= contentWidth) { 
    $(that).css({'width':contentWidth}); 
    } else { 
    $(that).css({'width':'100%'}); 
    } 
    } 
}); 
});

Ce script fera 100% de la largeur du "shell". (Si la largeur du navigateur est supérieure à 950px), sinon, il verrouillera la largeur du shell avec 950px et cela activera la barre de défilement.

Source

2010-01-28 13:03:04 eringen

C'est ça. Je viens de supprimer l'attribut height. N'a pas su min-width et débordement déclencher la barre de défilement comme ça. Merci! – Mike

j'ai fait quelque chose de similaire pour un site Web, la solution que je suis venu avec était la suivante:

J'ai créé une image avec le contenu à gauche et à droite sur l'arrière-plan et l'espace du contenu dans le milieu pour être juste un couleur solide, même si l'image est de 1400 x 539 il pèse 12 Ko, donc c'est plutôt bien.

<html> 
    <body> 
    <div id="wrapper"></div> 
    </body> 
</html> 


body { 
    background: #fff url(left-and-right.jpg) no-repeat center top; 
    text-align: center; 
} 

#wrapper { 
    margin: auto; 
    text-align: left; 
    width: 960px; 
}

Source

2010-01-28 11:14:00 guzart

merci, mais ce n'est pas mon problème. l'utilisation d'une seule image d'arrière-plan ne permet pas une largeur flexible ET le fait que l'arrière-plan soit toujours le même. Le plus vous avez le moins de fond que vous verrez, non? C'est ce que je veux résoudre avec deux images d'arrière-plan, toujours attachées à gauche et à droite du contenu. – Mike

d'oh! J'ai oublié la largeur flexible. Je ne vois pas cela se produire sans l'utilisation de Javascript. – guzart

Images de fond autour de Contenu flexible?

Répondre

Questions connexes