25
मैं किसी वेबसाइट के लिए कोड के ब्लॉक को स्टाइल करने की कोशिश कर रहा हूं। कंटेनर div दोनों लंबवत और क्षैतिज रूप से बहने के लिए सेट है। समस्या तब होती है जब यह क्षैतिज रूप से बहती है, ज़ेबरा-धारीदार पृष्ठभूमि-रंग को खींचा जाता है। मैंने इसे पृष्ठभूमि छवि के साथ भी कोशिश की लेकिन यह भी उसे कम करता है। ऐसा क्यों कर रहा है और मैं इसे कैसे ठीक करूं?सीएसएस "ओवरफ्लो" कल्स "पृष्ठभूमि-रंग"
धन्यवाद।
छवि: http://zero.robotrenegade.com/q3w/background-overflow.png
वेबपेज (आपके ब्राउज़र पैमाने पर समस्या को देखने के लिए नीचे चौड़ाई): http://zero.robotrenegade.com/q3w/code.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="created" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="" type="text/css" media="all" title="Default styles" />
<title></title>
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("pre code").html(function(index, html) {
return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
});
});
</script>
<style>
.codeblock {
max-height: 25em;
overflow: auto;
margin: 1em;
border: 1px solid #ccc;
font-size: 1em;
line-height: normal;
border-radius: 8px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.25);
}
.codeblock h1, .codeblock p {
font-size: 1em;
margin: 0;
padding: 0em 1em 0.5em 3.5em;
line-height: 2em;
background-color: #eee;
}
.codeblock pre {
margin: 0;
padding: 0;
font-face: 'lucida console',monaco,courier,'courier new',monospace;
}
.codeblock pre code {
counter-reset: line-numbering;
margin: 0;
padding: 0;
}
.codeblock pre code .line::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 0.5em;
width: 4.5em;
text-align: right;
color: #888;
border-right: 1px dotted #888;
display: inline-block;
background-color: #eee;
}
.codeblock pre code .line {
display: block;
margin: 0 0 -1.2em 0;
line-height: 1.5em;
}
.codeblock pre code .line:nth-child(odd) {
background: #f2f5f9;
}
/*.codeblock pre code .line:hover {
background: #4b95e5;
color: #fff;
}*/
</style>
</head>
<body>
<div class="codeblock"><!--<h1>Hello, this is an optional header.</h1>-->
<pre><code>void idAF::Restore(idRestoreGame *savefile) {
savefile->ReadObject(reinterpret_cast<idClass *&>(self));
savefile->ReadString(name);
savefile->ReadBool(hasBindConstraints);
savefile->ReadVec3(baseOrigin);
savefile->ReadMat3(baseAxis);
savefile->ReadInt(poseTime);
savefile->ReadInt(restStartTime);
savefile->ReadBool(isLoaded);
savefile->ReadBool(isActive);
animator = NULL;
modifiedAnim = 0;
if (self) {
SetAnimator(self->GetAnimator());
Load(self, name);
if (hasBindConstraints) {
AddBindConstraints();
}
}
savefile->ReadStaticObject(physicsObj);
if (self) {
if (isActive) {
// clear all animations
animator->ClearAllAnims(gameLocal.time, 0);
animator->ClearAllJoints();
// switch to articulated figure physics
self->RestorePhysics(&physicsObj);
physicsObj.EnableClip();
}
UpdateAnimation();
}
}</code></pre>
<!-- <p>This is an optional footer, goodbye!</p> -->
</div>
</body>
</html>
+1 दिलचस्प प्रश्न के लिए +1, उत्तर के लिए बहुत उत्सुक है .. – ptriek
यदि सब कुछ विफल हो जाता है, तो आप निश्चित रूप से .codeblock पर दोहराई गई पृष्ठभूमि छवि (सफेद/ग्रे) डाल सकते हैं - जो कि एक सुंदर ठोस होना चाहिए (हालांकि बहुत सेक्सी नहीं) कामकाज। – ptriek
'.codeblock' पर @ptriek पृष्ठभूमि छवि काम नहीं करेगी क्योंकि यह टेक्स्ट के साथ स्क्रॉल नहीं करेगा, जो ज़ेबरा स्ट्रिपिंग के बिंदु को हरा देती है। यदि कुछ भी हो, तो पृष्ठभूमि छवि को 'प्री' या 'कोड' पर लागू किया जाएगा, लेकिन फिर आप उसी पृष्ठभूमि को हल करने के मुद्दे के साथ समाप्त हो जाते हैं। – Obsidian