मैं कैसे जब ब्लॉक तत्वों

मैं अपने पन्ने पर एक हैडर div के भीतर निम्नलिखित लेआउट का उत्पादन करना चाहते हैं के साथ एक div में सीएसएस का उपयोग कर सही पर पाठ संरेखित करते हैं, सीएसएस केवलमैं कैसे जब ब्लॉक तत्वों

 
+-----------+ 
+   + 
+ Image + Title text       Some text aligned on the right 
+   + 
+-----------+

मैं मुसीबत संरेखित हो रहा है का उपयोग करते हुए दाईं ओर पाठ। यह सही और शीर्षक पाठ के नीचे एक लाइन के लिए तुरंत संरेखित रखता है, इस

 
+-----------+ 
+   + 
+ Image + Title text       
+   +   Some text aligned on the right 
+-----------+

की तरह यह मेरे वर्तमान मार्कअप है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html> 
    <head> 
     <style type="text/css"> 
     #header, #footer { padding: 0.3em 0; border-bottom: 1px solid; } 
     #header img { display: inline;} 
     #header h1 { display: inline; margin: 0px; padding: 0px; 
         vertical-align: 50%; position: left;} 
     #login-status { margin: 0px; padding: 0px; 
         display: inline;text-align: right; position: right;} 
     </style> 

     <title>Models</title>    
     </head> 
     <body> 
     <div id="header"> 
      <img alt="Logo" height="110" width="276" 
      src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
      <h1>Models</h1> 
      <p id="login-status">You are currently logged in as steve</p> 
     </div> <!-- end of header --> 
     </body> 
    </html>

मैं इनलाइन स्टाइल की उम्मीद थी h1 तत्व के बाद एक लाइन ब्रेक का कारण नहीं है, लेकिन यह मामला नहीं है। क्या कोई सुझाव दे सकता है कि मैं क्या गलत कर रहा हूं?

स्रोत

2009-03-28 Steve Weet

#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; } 
    #header img { float: left;} 
    #header h1 { float: left; margin: 0px; padding: 0px; } 
    #login-status { margin: 0px; padding: 0px; float: right; }

तत्वों के चारों ओर अतिरिक्त divs या फ़्लोटिंग के दौरान एक समाशोधन div की आवश्यकता नहीं है। मैं उपर्युक्त तकनीक का उपयोग नियमित रूप से करने के लिए करता हूं जो आप करने की कोशिश कर रहे हैं। छिपा हुआ सैलाब; हेडर फ़्लोट को साफ़ करता है, लेकिन यदि कोई चौड़ाई निर्दिष्ट नहीं है तो आपको ज़ूम की आवश्यकता होगी: 1; आईई 6 के लिए। ज़ूम मान्य नहीं है, लेकिन यह बेकार ढंग से काम करता है, और यदि आवश्यकता हो तो आप इसे केवल i6 केवल सीएसएस फ़ाइल में जोड़ सकते हैं।

स्रोत

2009-03-28 13:59:30

धन्यवाद जस्टिन, यह पूरी तरह से काम करता है। मैं दाहिने ओर से पूर्ण posistioning का उपयोग कर एक और समाधान पर पहुंचा था, लेकिन मेरे लिए काम करता है। –

यह जस्टिन का एक अच्छा सुरुचिपूर्ण समाधान है ... और यह स्टीव की कम मार्क अप का उपयोग करने की इच्छा को प्रमाणित करता है। मुझें यह पसंद है!!! –

अद्भुत। मुझे नहीं पता था 'ओवरफ्लो: छुपा' तत्वों को उस फ्लोट में विस्तारित करेगा जो इसमें शामिल है। क्या 'फ्लोट: बाएं' वास्तव में 'img' और' h1' पर आवश्यक है? ऐसा लगता है कि यह नहीं है। –

"फ़्लोट: दाएं;" का प्रयोग करें

स्रोत

2009-03-28 12:28:04 Albert

मुझे लगता है कि कोशिश की थी, लेकिन यह तो div के बाहर है और यह बाद बना देता है। –

img float: left; title text float: left; some text float: right;

स्रोत

2009-03-28 12:34:42

आप सबसे अधिक संभावना इस तरह कुछ करने के लिए ...

<head> 
    <style type="text/css"> 
     #header, #footer 
     { 
      padding: 0.3em 0; 
      border-bottom: 1px solid; 
     } 
     #login-status 
     { 
      margin: 0px; 
      padding: 0px; 
      line-height: 110px; 
      vertical-align: middle; 
     } 
    </style> 
    <title>Models</title> 
</head> 
<body> 
    <div id="header"> 
     <div style="float: left"> 
      <img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px; 
       height: 110px" /> 
     </div> 
     <div style="float: left; margin: 0px 8px 0px 8px; 
      line-height: 110px; vertical-align: middle;"> 
      <h1>Models</h1> 
     </div> 
     <div id="login-status" style="float: right;"> 
      You are currently logged in as steve 
     </div> 
     <div style="clear: both"> 
     </div> 
    </div> 
    <!-- end of header --> 
</body>

"साफ" कहीं के लिए अपने अस्थायी स्पष्ट करने की जरूरत हो जाएगा, लेकिन यह एक और div करने के लिए लागू किया जा सकता होगा टैग जो हेडर में शामिल होने के बजाय आपके शीर्षलेख का पालन करेगा।

नोट ... मैंने छवि के दाईं ओर स्थित पाठ क्षेत्रों को लंबवत रूप से गठबंधन करने के लिए इसे थोड़ा सा बदल दिया है। आप स्टाइल को सीएसएस आधारित होने के लिए बदल सकते हैं, लेकिन यह जो आप खोज रहे थे उसे प्राप्त करना चाहिए।

स्रोत

2009-03-28 12:37:23

+1 धन्यवाद। यह निश्चित रूप से काम करेगा। अगर मैं इससे बच सकता हूं तो मैं अतिरिक्त मार्कअप से बचने की कोशिश कर रहा हूं। –

धन्यवाद स्टीव, खुशी है कि मेरे सुझाव मदद की ... अपनी परियोजना के साथ शुभकामनाएं !!! –

मैंने ज़ूम और गैर-आकार की फ्लोट्स का उपयोग कर सीएसएस के रूप में थोड़ा और अधिक विफलता के साथ खेला। मुझे लॉगिन स्थिति को लंबवत केंद्रित दिखाया नहीं गया था।

अंतिम समाधान है कि मैं पर आ चुके हैं (ब्रायन से ज्यादा cribbing के साथ) इस प्रकार है: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <style type="text/css"> 
     #header, 
     #footer  { padding: 0.3em 0; border-bottom: 1px solid; 
         height: 110px; } 
     #header img { margin: 0px; padding: 0px; display: inline; } 
     #header h1 { line-height: 110px; vertical-align: middle; 
         display: inline; position: absolute; left: 300px; 
         margin: 0px; } 
     #login_status { font-size: 14px; margin: 0px; position: absolute; 
         top: 100px; right: 10px; display: inline; 
         text-align: right; } 
    </style> 
    <title>Models</title>  
    </head> 
    <body> 
    <div id="header"> 
     <img alt="Logo" height="110" 
     src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
     <h1>Models</h1> 
     <span id="login_status">You are currently logged in as stevew</span>  
    </div> <!-- end of header --> 
    </body> 
</html>

स्रोत

2009-03-28 19:14:47

मैं कैसे जब ब्लॉक तत्वों

उत्तर

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