टेक्स्ट एचटीएमएल सीएसएस

के साथ लाइन में छवियां अभी भी इन सभी के लिए माफी माँगती हैं। मैं एक वेबपृष्ठ बना रहा हूं और एक दूसरे के बगल में एक छवि और पाठ है, दो अलग-अलग div में। मैं उन्हें प्राप्त करने में कामयाब रहा हूं जहां मैं पृष्ठ पर चाहता हूं, लेकिन जब मैं पृष्ठ का आकार बदलता हूं तो पाठ का आकार बदलता है, हालांकि छवि नहीं होती है। मैं पाठ के निचले हिस्से को छवि के निचले हिस्से से हर समय लाइन करना चाहता हूं।टेक्स्ट एचटीएमएल सीएसएस

किसी भी मदद की सराहना की! यहाँ कोड है:

<head> 

    <title>Stefano Mocini</title> 
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'> 
    <link href='styles/style.css' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <div id="title"> 
     Stefano Mocini 
    </div> 

    <div id="decal"> 
     <div id="image"> 
      <img src="images/tree.png" alt="tree" width="600" height="900"> 
     </div>  
    </div> 

    <div id="about"> 
     <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p> 

     <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p> 

     <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the credits of the video.</p> 

     <p>Commercial use of my music: by the PRO license, or contact me</p> 
    </div> 

</body>

body { 
font-family: 'Milonga', cursive; 
} 

#title { 
font-size:72pt; 
text-align:center; 
} 


#decal { 
float:left; 
width:50%; 
float:left; 
height:80%; 
} 

#image { 
margin-top:60%; 
} 

#about { 
font-size:24pt; 
float:left; 
width:50%; 
padding-top:5%; 
height:80%; 
}

स्रोत

2013-06-06 k.s

आप एक ऑनलाइन डेमो प्रदान या [JSFIDDLE] में एक बना सकता – farjam

@farjam वह पहले से ही तैनात (http://jsfiddle.net/?) , बस खुद को बेवकूफ बनाओ –

कृपया img टैग चौड़ाई बनाने के = 100% जो भी आकार बदलने पर div decal और ऊंचाई के लिए पिक्सल जोड़ने के लिए फिट होगा

<div id="decal"> 
    <div id="image"> 
     <img src="images/tree.png" alt="tree" width="100%" height="900px"> 
    </div>  
</div>

स्रोत

2013-06-06 04:51:26

यहां जेएस फीड लिंक है http://jsfiddle.net/XV3JM/ –

user2458195 सही है। लेकिन width विशेषता का उपयोग करने के बजाय सीएसएस में चौड़ाई जोड़ें।

Check this

Full Screen

सीएसएस

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    width:45%; /* changed to get some space btween #decal and #about */ 
    float:left; 
    height:80%; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% /* 100% of its parent ie, #decal*/ 
} 

#about { 
    font-size:24pt; 
    float:right; /* right to get some space */ 
    width:50%; /* try changing back to left n see what happens */ 
    padding-top:5%; 
    height:80%; 
}

स्रोत

2013-06-06 05:05:17 Sourabh

धन्यवाद, जिसने छवि को अद्भुत पाठ के साथ ओवरलैप करना बंद कर दिया है, लेकिन छवि हमेशा इनलाइन नहीं रहती है जब मैं ब्राउज़र विंडो का आकार बदलता हूं तो पाठ के नीचे, क्या ऐसा कोई तरीका है जिससे मैं ऐसा कर सकता हूं? मैं सोच रहा हूं कि छवि के लिए पैडिंग-टॉप के साथ कुछ करना है या नहीं? –

@Sourabh करीब है। लेकिन float के बजाय display:inline-block का उपयोग करना बेहतर होगा और बोतलों को संरेखित करने के लिए vertical-align:bottom का उपयोग करें।

सीएसएस

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    font-size:24pt; /*Add this so that 1em is the same accross the divs*/ 
    padding-bottom:1em; /*Match the paragraph margin*/ 
    width:45%; 
    display:inline-block; 
    height:80%; 
    vertical-align:bottom; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% 
} 

#about { 
    font-size:24pt; 
    display:inline-block; 
    width:50%; 
    padding-top:5%; 
    height:80%; 
    vertical-align:bottom; 
}

उदाहरण: अपने कोड http://jsfiddle.net/ajdQa/

स्रोत

2013-06-06 06:13:08

अच्छा! 'इनलाइन-ब्लॉक' ने मेरे दिमाग को नहीं मारा। '+ 1' :) – Sourabh

@ सौरभ 'इनलाइन-ब्लॉक' अब फ्लोट के बजाए मेरा जाने-माने है। यदि कुछ और नहीं है तो इसका मतलब कोई स्पष्ट नहीं है –

टेक्स्ट एचटीएमएल सीएसएस

उत्तर

संबंधित मुद्दे