أكواد صناديق كتابية وصور

Admin عدد المساهمات : 177 تاريخ التسجيل : 05/09/2010

Basic HTML Scroll Box


<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] scrollbox</a></p>

------------------------------------------------------------

Background Color


<div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Codes</a></p>
-----------------------------------------------------------------------------------
Text Color


<div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Codes</a></p></p>

-----------------------------------------------------------------------------------------
Thick Border


<div style="height:80px;width:180px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Tutorials</a></p>

--------------------------------------------------------------------------------------
Basic Horizontal Scroll Box


<div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.
</p>
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] scroll</a></p>
------------------------------------------------------------------------------------------------
Foreground Picture

<div style="height:221px;width:330px;overflow:scroll;">
<img src="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<img src="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Codes</a></p>

------------------------------------------------------------------------------------------------
Hyperlink the Image


<div style="height:221px;width:330px;overflow:scroll;">
<a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" target="_blank"><img src="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br />
<a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" target="_blank"><img src="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a>
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Codes</a></p>

--------------------------------------------------------------------------------------------------
Background Pictures


<div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('https://2img.net/h/i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Code</a></p>

-------------------------------------------------------------------------------------------------

Basic Vertical Scroll Box


<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
<p style="height:250%;">
By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.
</p>
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] scroll</a></p>

-------------------------------------------------------------------------------------
Vertical Scrolling Webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<html xmlns="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<head>
<title>Vertical Scroll Bar Example</title>
</head>
<body style="height:4000px;">
<h1>Vertical Scrolling</h1>
<p>If your monitor is less than 4000 pixels high, your browser's vertical scroll bar should now be displayed...</p>
<p><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Scroll</a></p>
</body>
</html>

---------------------------------------------------------------------------------------------------

Hide textarea Scrollbars


<textarea rows="10" cols="20" style="overflow:hidden;">
Enter as much text as you can... until you'd expect a vertical scrollbar to appear. Go on!
</textarea>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Scrollbars</a></p>

----------------------------------------------------------------------------------------------------
Browser Scrollbars - Hide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<html xmlns="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<head>
<style type="text/css">
html {
overflow:hidden;
}
</style>
<title>Hide Scrollbar Example</title>
</head>
<body>
<h1>Hide Scrollbar Example</h1>
<div style="height:400px;width:400px;background-color:silver;padding:3px;">
<p>This 'div' is 400 pixels high and 400 pixels high. Try resizing your browser so that it is less than 400 pixels. You will notice that no scrollbars appear. This is because we've applied <a href="/css/properties/css_overflow.cfm"><code>overflow:hidden</code></a> to the <a href="/html/tags/html_body_tag.cfm"><code>body</code></a> tag.</p>
<p>If we were to remove <code>overflow:hidden</code>, scrollbars would automatically appear once the content became too large.</p>
</div>
<p><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Scrollbar Code</a></p>
</body>
</html>

---------------------------------------------------------------------------------------------------
Browser Scrollbars - Auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<html xmlns="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]">
<head>
<style type="text/css">
html {
overflow:auto;
}
</style>
<title>Auto Scrollbar Example</title>
</head>
<body>
<h1>Auto Scrollbar Example</h1>
<div style="height:400px;width:400px;background-color:silver;padding:3px;">
<p>This 'div' is 400 pixels high and 400 pixels high. If your browser is maximized to larger than 400x400, no scrollbars should be appearing. Try resizing your browser so that it is less than 400 pixels. Scrollbars should appear - they will only appear when they're needed. This is because we've applied <a href="/css/properties/css_overflow.cfm"><code>overflow:auto</code></a> to the <a href="/html/tags/html_html_tag.cfm"><code>html</code></a> tag.</p>
</div>
<p><a href="[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Scrollbar Code</a></p>
</body>
</html>

------------------------------------------------------------------------------------------------------

» أكواد كتابية
» أكواد مشكلة
» أكواد رائعة vb
» أكواد مشكلة 2
» أكواد php رائعة