CSS - 在文本框內定位帶有文本的DIV元素

我正在修改現有的用作iPhone鎖屏的html/javascript包。我希望它看起來像這樣：CSS - 在文本框內定位帶有文本的DIV元素

alt text

我決定加入CSS和JavaScript的HTML，所以你可以測試一下馬上：

<html> 
<head> 

<script language="Javascript"> 
var now    = new Date (); 

function getClock () 
{ 
    var hours  = now.getHours (); 
    var minutes = now.getMinutes (); 
    minutes  = (minutes < 10 ? "0" : "") + minutes; 

    var daypart = (hours < 12) ? "AM" : "PM"; 
    hours   = (hours > 12) ? hours - 12 : hours; 
    hours   = (hours == 0) ? 12 : hours; 

    var clock  = hours + ":" + minutes + " " + daypart; 

    document.getElementById("clock").firstChild.nodeValue  = clock; 
} 

function getCalendar () 
{ 
    var days  = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") 
    var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December") 

    var date  = now.getDate() 
    var month  = now.getMonth() 
    var day  = now.getDay() 

    document.getElementById("date").firstChild.nodeValue = date; 
    document.getElementById("month").firstChild.nodeValue  = months[month].substring(0, 3); 
    document.getElementById("day").firstChild.nodeValue  = days[day]; 
} 

</script> 

<style type="text/css"> 
body { font-family: Calibri; color: #fff; background-color: #000; position: absolute; } 
#clock { width: 300px; position: absolute; top: 50%; margin: -.7em 0 0 20px; font-size: 53px; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;} 
#day { font-size: 0.9em; line-height: 35px; } 
#month { position: absolute; right: 0px; font-size: 1.91em; line-height: 99px; }  
#date { position: absolute; left: -125px; top: 0px; width: 102px; text-align: right; } 
</style> 
</head> 

<body onload="getClock(); setInterval('getClock()', 1000); getCalendar(); setInterval('getCalendar()', 1000)"> 

<div id="background"> 
<img src="http://dc463.4shared.com/img/32MahG4Y/s7/0.15818551454745688/Background.jpg" width="320" height="480"> 
</div> 

<div id="clock"> 
    <div id="day"> 
    </div> 
    <div id="month"> 
     <div id="date"> 
     </div> 
    </div> 
</div>  
</div> 

</body> 
</html>

截至目前，我有兩個未解決的問題：

與示例圖像一樣，我希望月份幾乎接觸屏幕的右邊緣，同時保持相同數量的左邊距。這隻能意味着一件事：調整字體的大小以使其適合。這可能必須在Javascript中完成。
我現在使用的文本邊框（使用text-shadow）相當難看，如果您將我的圖像與示例圖像進行對比，您會發現邊框會使所有區別變得更加明顯！有沒有辦法讓它們更加流暢？

我希望任何人都可以提出一些關於如何解決這些問題的想法。提前致謝！

來源

2011-12-10 Daan

而你的實際CSS是？ –

我不禁嘲笑你想要獲得的WP7外觀。 – Edwin

你呢？我喜歡它，我對舊的滑塊鎖屏感到無聊：P – Daan

首先，將div中的所有元素和相對位置放在一起。這將有助於保持其他內部股利的定位。

<body onload="getClock(); setInterval('getClock()', 1000)"> 
    <div id="clock"> 
     11:06 AM 
     <div id="date"> 
      Sunday 
     </div> 
     <div id="month"> 
      <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000)</script> 
      <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script> 
     </div> 
    </div> 
</body>

注意我已經刪除了#day格，並不需要它，我也已經封閉了＃時鐘DIV中的一切，讓所有的元素都基於＃時鐘位置定位。如果您需要將#day div備份到腳本中，只需將其添加到腳本的html中，而不要在CSS中對其進行設置。

的CSS（字體大小是根據你的鏈接標本圖像的猜測）.....

#clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; } 
#date { position: relative; text-align: left; margin: 0 0 0 40px; } 
#month { float: right; font-size: 80px; margin: 0 20px 0 0;}

如果有幫助，這裏的複製/粘貼HTML文件，這樣你就可以用它玩。注意我添加了body CSS和#myscreen div來模仿手機屏幕的大小。他們不需要在手機上實際部署。

<html> 
</head> 
    <style type="text/css"> 
     body { text-align: center; font-family: verdana; background: #fff; color: #fff;} 
     #myscreen { position: relative; width: 320px; background: #333; height: 480px; } 

     #clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; } 
     #date { position: relative; text-align: left; margin: 0 0 0 40px; } 
     #month { float: right; font-size: 80px; margin: 0 20px 0 0;} 
    </style> 
</head> 



<body onload="getClock(); setInterval('getClock()', 1000)"> 
    <div id="myscreen"> 
     <div id="clock"> 
      11:06 AM 
     <div id="date"> 
      Sunday 
     </div> 
     <div id="month"> 
      29 <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000)</script> 
      Aug <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script> 
     </div> 
     </div> 
    </div> 
</body> 
</html>

減小或增加#clock div的-.05em邊距會將整個元素塊向上或向下移動。

來源

2011-12-10 18:14:50 Scott

非常感謝您的解決方案！這幫助我進一步發展。然而，在玩弄它的過程中，我遇到了許多我以前沒有想到的情況。這迫使我修改先前的要求。所以我決定編輯我的第一篇文章。您還可以找到可以立即使用的完整代碼。我認爲這使測試更容易。再次感謝！ – Daan

CSS - 在文本框內定位帶有文本的DIV元素

回答

相關問題