Div dans une div style css - utilisation de rembourrage pour le centre intérieur de la div à l'intérieur de l'extérieur?
Donc, j'ai 2 divs, 1 dans l'autre. #outer ultrapériphériques div et #cadre de la div w/#extérieure.
En ce qui concerne #externe, j'ai appliqué un fond d'écran qui est de reprendre la totalité du navigateur de l'espace.
cadre est où le texte sera transmis en texte auront de cesse de changer avec différentes longueurs de chaîne. Cependant, je ne veux #cadre d'occuper la partie centrale de #extérieure, afin que le texte n'a pas de fuite à l'extérieur (c'est parce que l'image de fond dans #extérieur a un tableau-comme la figure, - je veux qu'il regarde comme si le texte est écrit sur ce tableau, sans texte à l'extérieur de l'lignes).
Je suis censé utiliser le rembourrage de ce droit? Comme dans le jeu de la marge d'attribut sur le #cadre? Ou dois-je régler l'image de la largeur? Comment puis-je centre ce con?! Flotteur? Pad? Je suis perdu...
HTML:
<div id='outer'>
<div id='frame'>
</div>
</div>
CSS:
#outer {
height: 612px;
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
background-size: 100%;
}
#frame {
text-align: center;
height: 612px;
padding: 50px;
overflow: auto;
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 60px;
color: black;
}
Je me suis amusé avec un rembourrage et de la frontière et de la marge pour le passé des heures à essayer d'obtenir une emprise sur le modèle de boîte en général. Tout rapide pointeurs que n'importe qui peut m'aider à accomplir cette?
PS, Il peut être difficile à voir, parce que ce n'est probablement pas entièrement compatibles avec les paramètres de votre navigateur, mais vous pouvez aller à:
http://www.abveaspirations.com
pour voir ce que le code ci-dessus est actuellement cracher. Comme vous pouvez le voir, le surtout de longues chaînes de texte/de fuite à l'extérieur de la vitre. BTW, je suis en utilisant textualizer plugin, pas sûr que cela change quoi que ce soit...
OriginalL'auteur Seeeyonnn | 2014-01-06
Vous devez vous connecter pour publier un commentaire.
C'est un peu plus compliqué de la réponse qu'il pourrait l'être.. C'pouvez très bien être fait avec un rembourrage, mais j'ai l'impression que cette voie est la plus lisse et solide pour ce que vous faites, et il fonctionne aussi très bien pour un site responsive, afin de ne pas casser comme vous l'échelle de la taille de votre écran en haut et en bas.
Voici la démo de cette action de sorte que vous pouvez suivre avec ce que je dis, et de regarder le code complet dans le même temps:
http://jsfiddle.net/9FtFh/1/
Ok alors tout d'abord, juste pour configurer votre div extérieure, en gros, j'ai juste mis
position: relative;
sur elle, tout le reste est très bien. C'est juste parce que je suis réglage de l'image àposition: absolute;
et je veux qu'elle position relativement à cette div extérieure.Après, permet de regarder les modifications apportées à l'image...
Ces styles de servir le but d'étirer les limites de la div à certains points. Notez que ce n'est pas la hauteur ou la largeur de l'élément de cadre plus, ceux-ci doivent être prises. Fondamentalement, ces styles de dire que le haut de la div sera de 10% à partir du haut de la div extérieure. Le fond sera de 20% à partir du bas de la div extérieure.. et ainsi de suite. J'ai utilisé les pourcentages au lieu de pixels, comme ce sera assurez-vous que le positionnement s'adapte quelle que soit la largeur de l'écran.
Avis que j'ai mis une bordure en pointillé sur le châssis de sorte que vous pouvez voir où la zone est dimensionné et positionné à tout moment.
Je n'ai pas à vous soucier de centrage vertical du contenu du texte parce que je suis assez certain que votre plugin pour l'effet de texte poignées. Laissez-moi savoir si j'ai eu tort, sur ce compte, et je peux étendre sur ce point.
Maintenant, il y a un autre défi dans le fait que, une fois que l'écran est d'une certaine taille plus petite, l'image commence à avoir une hauteur plus petite que le contenant extérieur. Ce n'est probablement pas quelque chose que vous voulez, j'ai donc ajouté une requête de média:
Ce que ce n'est qu'il s'applique styles seulement après l'écran devient d'une certaine largeur. - Je choisir le max-width basée sur le point où l'image commence à se rétrécir passé les bords du récipient.
Comme pour les styles appliquée, c'est une petite astuce pour conserver les proportions d'un conteneur sur la reconstitution de la taille. J'ai mis le
height
à 0, puis re-créer de la hauteur à l'aidepadding-top
. Le nombre que j'ai utilisé (47.85%) est le rapport approximatif de la hauteur de l'image par rapport à la largeur. (L'image est d'environ 47.85% aussi haut que large.) Cela va maintenant commencer à l'échelle de l'ensemble du conteneur avec l'écran, en fonction de l'image. Parce que votre image est en position absolue, il va rester autour de la promenade, et de maintenir son pourcentage en fonction de la position.Une chose que je n'ai pas ce que vous pourriez être intéressé en est de fixer une autre requête de média une fois la largeur de l'image commence à devenir tellement large que le bas est coupée. À ce stade, vous pouvez définir l'image de fond pour être
0%
de sorte qu'il corresponde à celui. (vous pouvez aussi avoir besoin de mettre à jour périodiquement latop
bien, comme l'écran devient de plus en plus large. C'est seulement parce que vous avez un ensemble de la hauteur de coupe hors de l'image, rendant les pourcentages de pertinence.)Dans cet exemple, j'ai lié, essayez de re-dimensionnement bas du cadre largeur de grande et de petite taille, et de regarder comment les lignes en pointillé rester là où ils doivent être, et le contenu à l'intérieur de règle. Notez également comment le conteneur des séjours à la hauteur de l'appareil jusqu'à ce que l'image devient trop petit, et puis tout commence à l'échelle vers le bas.
Il n'y a qu'un flagrant problème que je peux voir à gauche, et c'est parce que tout votre texte contenu est en position absolue lettre par lettre, re-dimensionnement de l'écran sera la cause d'éléments pour se répandre, jusqu'à ce qu'une nouvelle diapositive arrive, et les lettres sont re-positionné en fonction de la nouvelle largeur. C'est juste quelque chose à garder à l'esprit d'aller de l'avant.
Un grand merci encore @Blake Mann. Je souhaite qu'il y avait un moyen que je pouvais double merci haha. Souhaite aussi qu'il y avait un moyen de message direct parce que je suis encore à essayer de comprendre quoi faire avec ma console en bas et peut-être besoin de l'aide et de vous apporter des réponses + en profondeur des explications/des tutoriels, qui est GÉNIAL.
OriginalL'auteur Blake Mann
Option 1 http://jsfiddle.net/bdbpY/
Et il fonctionne. Le seul problème est qu'il va changer la hauteur/largeur de votre image de quelque chose d'autre que vous voulez.
Option 2 http://jsfiddle.net/bdbpY/1/
Une autre option qui sera probablement travailler mieux, c'est ce
Cela fonctionne comme vous le souhaitez.
Si vous allez pour le réglage des largeurs au lieu d'un fixe px, vous pouvez que de tenter des trucs comme
Option 3 http://jsfiddle.net/qLNFz/
C'est probablement le meilleur choix , et la plus simple.
J'ai tout ce
OriginalL'auteur CRABOLO
HTML
CSS
Démo
OriginalL'auteur Amarnath Balasubramanian
J'ai utilisé
overflow:hidden;
pour le long texte pour accueillir dans le cadre. Donc, votre conseil d'administration sera comme ceci http://jsfiddle.net/3pNSx/70/OriginalL'auteur noob