I am looking for a way to set a print-devoted css that shows a fixed title on every page.
Unfortunately, I couldn't manage to print this title nicely on the 2nd page, since it always "walks on " the table, ignoring declared body padding / margin ... though I am quite sure the body is not suited here, I couldn't find any working way.
Any idea?
<h2 id="tableTitle">Fixed title</h2>
<button class="noPrint" onclick="myFunction()">Print this table</button>
<table>...content fitting at least 2 pages ...</table>
...
body{
margin-top:100px;
}
#tableTitle {
position: fixed;
top : 0;
}
Here's the fiddle
Related
I have been bashing my head against this for a while. I'm a fairly huge novice when it to this so thought it was time to ask for help.
Trying to select all imgs on a page that are set at their default value (unclear if this is auto or initial, because it seems auto is applied by default and the console only shows width with nothing else after) and apply a size to them.
I want this to exclude imgs that I have manually set the size of.
So far I have tried this for my CSS, but it doesn't seem to work.
img:not([width:initial]){
width: 400px;
}
HTML SECTION OF PAGE WITH IMAGE:
<div class="internal-embed image-embed is-loaded" tabindex="-1"
src="TeniaeColiHisto.png" alt="TeniaeColiHisto.png" width=""
height="" contenteditable="false"><img width="" src="app://local
/D%3A%5CSecondBrain%5CImages%5CTeniaeColiHisto.png?1642441174361"
alt="TeniaeColiHisto.png" height=""></div>
<img width=""
src="app://local/D%3A%5CSecondBrain%5CImages%5CTeniaeColiHisto.png?1642441174361"
alt="TeniaeColiHisto.png" height="">
Edit: Made some headway with:
img[width]
{
width: 400px;
}
It seems I would solve my issue if the following would work but for some reason it doesn't?
img[width]not:([width=""])
{
width: 400px;
}
EDIT SOLUTION:
Turns out the program i'm using doesn't actually automatically set the width of the images. It just inherits them from the source and the actual HTML includes no width or height tag.Thus, the solution was to specify all images that did not these attributes as such.
img:not([width])
{
width:400px;
}
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
Considering:
For elements that are absolutely positioned inside a relatively
positioned container.
If you want the element to fill the width of the container.
The element is also bottom-aligned.
Is it best for maximum browser compatibility to set a width in pixels for the element, or simply use left and right?
Any common bugs to watch out for with either method?
Clearly, using left: 0; and right: 0; would make the code more manageable in cases where the image's width or padding were to change, but are there any downsides where width: 300px would be favorable instead?
Historically we learnt to use width instead of left & right because IE6 didn't support
at the same time the two properties of the same axis
<div style="top:0;bottom:0;position:absolute;">modern browsers</div>
<div style="top:0;height:100%;position:absolute;">MSIE6</div>
<div style="left:0;right:0;position:absolute;">modern browsers</div>
<div style="left:0;width:100%;position:absolute;">MSIE6</div>
<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div>
<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div>
Also, this technique will not work on some elements (including on modern browsers, by spec )
<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it's not standard, so don't rely on this -->
<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe>
<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea>
<input type="text" style="position:absolute;left:0;right:0;">
<button ... ></button>
and possibly others... (some of these can't even be display:block)
But, analysing what happens in the normal static flow using the width:auto property
<div style="width:auto;padding:20px;margin:20px;background:lime;">a</div>
You will see it's very similar to...
<div style="width:auto;padding:20px;margin:20px;background:lime;
position:absolute;top:0;left:0;bottom:0;right:0;">b</div>
... same properties with the same values! This is really nice! Otherwise it will look like:
<div style="width:100%;height:100%;
position:absolute;top:0;left:0;">
<div style="padding:20px;margin:20px;
background:lime;">c</div>
</div>
Which is also different, because the inner div doesn't fill the y axis.
To fix this we will need css calc() or box-sizing and an unnecessary headache.
My answer is, left + right | top + bottom are really cool since they are closest to the static positioning's width:auto
and there is no reason to not use them. They are way easier to use compared to the alternative and they
provide much more functionality (for example, using margin-left, padding-left and left at the same time in
one single element).
left + right | top + bottom is considerably
better supported by browsers compared to the alternative width:100% + box-sizing | calc()
and it's also easier to use!
Of course if you don't need (as in your example) to grow the element also in the y axis,
width:100% using some nested element for the padding, it's the only solution to archive support also for MSIE6
So, depends by your needs. If you want to support MSIE6 (it's the only actual reason to do that) you should use with:100%, otherwise use left + right!
Hoping to be helpful.
Both methods are fine, but if you want your design to be responsive or mobile phone compatible - I would recommend using Left: and Bottom: if the container is not enclosed in <div>.
If it is enclosed in a <div> then doing it with width: 100% ormax-width: 200px is a way in my opinion that causes least display problems.
Avoid using fixed widths in CSS if you want your theme to be responsive.
Both of the solution is working in every browser without any problems. In these cases I like to add a width: 100%; left: 0; bottom: 0; for the element, but if you like left:0;right:0; bottom:0; more, than you can use that, too.
I haven't tested this on all browsers (and modes) but for the IE quirks mode (e.g. in an .HTA without !DOCTYPE defined), I have created a subroutine that corrects the WIDTH or HEIGHT on elements where the LEFT/RIGHT style or the TOP/BOTTOM style are set (not “auto”). To avoid going in to all kind of unit conversions, the routine temporary removes the LEFT (or TOP) style and sets the WIDTH (or HEIGHT) to 100% to determine the RIGHT (or BOTTOM) offset in pixels.
The script is written in VBScript, but it should be do difficult to translate the idea to JavaScript.
<html>
<head>
<script language="VBScript">
Option Explicit
Sub Justify(ByVal hElement)
Dim sStyleTop, iTop, iBottom, sStyleLeft, iLeft, iRight
With hElement
If .currentStyle.top <> "auto" And .currentStyle.height = "auto" And .currentStyle.bottom <> "auto" Then
iTop = .offsetTop
sStyleTop = .currentStyle.top
.style.top = "auto"
.style.height = "100%"
iBottom = -.offsetTop
.style.height = .offsetHeight - iTop - iBottom & "px"
.style.top = sStyleTop
End If
If .currentStyle.left <> "auto" And .currentStyle.width = "auto" And .currentStyle.right <> "auto" Then
iLeft = .offsetLeft
sStyleLeft = .currentStyle.left
.style.left = "auto"
.style.width = "100%"
iRight = -.offsetLeft
.style.width = .offsetWidth - iLeft - iRight & "px"
.style.left = sStyleLeft
End If
For Each hElement In .Children
Justify hElement
Next
End With
End Sub
Sub window_onload
Justify Document.body
End Sub
</script>
<style type="text/css">
body {
position:absolute;
width:100%;
height:100%;
}
#outer{
background:blue;
position:absolute;
top:10px;
right:20px;
bottom:30px;
left:40px;
}
#inner{
background:green;
position:absolute;
top:40px;
right:30px;
bottom:20px;
left:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
The command to justify all elements in a document is:
Justify Document.body
I am invoking this from the onload event as it concerns a fixed size .HTA in my case but I expect the routine also to work on the onsize event for sizable windows (or parent elements).
Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"