I am currently working on designing my website, and I would like to be able to resize/zoom the webpage without messing up the flow of the elements of the website. I am aware that the correct use of % signs solves most of the flow problem, and it seems like it does with everything except text. If I have a simple menu like in the jsfiddle below. The width of the menu div lets say is %30. I would like the text in the menu container to scale to size without wrapping around or entering a new line, which I cant seem to avoid. The same problem remains in the paragraph below. Is there a way to achieve this?
<html>
<head>
<title>Scalable</title>
</head>
<body>
<div style="height:800px; border:1px solid green; width:900px; margin-left:auto; margin-right:auto; " >
<img src="http://files.prof-web-diego.webnode.pt/200000028-04da905d3d/Oxford_Silhouette_Web_Banner.jpg" style="width:50%; height:auto;"/>
<div style="float:right; width:30%; border:2px solid blue; font-size:11px;">
<a href="#">Home<a> |
<a href="#">Store<a> |
<a href="#">Contact<a> |
<a href="#">About<a> |
<a href="#">Pictures<a> |
<a href="#">Entertainment<a> |
</div>
<div style="border:1px solid #ddd; width:65%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula velit in lectus dapibus porta. Sed pulvinar ultrices ipsum vitae gravida. Vestibulum at metus dolor. Nunc pulvinar nisl nec libero sodales faucibus. Quisque tincidunt risus vitae risus tempor viverra. Vestibulum interdum eros in tellus blandit vulputate. Suspendisse eget ante purus, sit amet semper purus. Nam lacinia magna a mi euismod sit amet rhoncus dolor congue. Mauris pharetra laoreet accumsan. Ut quis velit ac nisl rutrum varius nec nec orci.
Vestibulum quis tellus neque, a scelerisque est. In varius ante eget purus fringilla in aliquet massa convallis. Vestibulum in scelerisque ligula. Nulla a neque nibh. Maecenas tristique, odio nec scelerisque tincidunt, sem orci tempus nulla, eu tincidunt dolor sapien ut lorem. Donec aliquet, eros nec blandit adipiscing, leo est malesuada nulla, vel adipiscing sem risus quis ante. Proin rutrum ultrices dolor, quis auctor sem feugiat sit amet. Morbi in tellus nisl, et iaculis turpis. Cras ligula velit, pharetra vitae imperdiet nec, commodo quis erat. Aenean iaculis nunc nec nunc dignissim aliquam. In venenatis, orci vitae pretium elementum, lorem lorem sagittis est, a consectetur est lacus accumsan elit. Vestibulum iaculis hendrerit elit, nec vulputate nunc ornare sit amet. Fusce nisi risus, auctor vitae pellentesque ut, pulvinar nec nisi. Aenean nec nunc augue, non imperdiet arcu. Integer interdum orci non diam tristique ut tristique risus adipiscing. Vestibulum tellus orci, lobortis vel sollicitudin vel, gravida sed dui.
Vestibulum eu dui ni
</p>
</div>
</div>
</body>
</html>
jsFiddle
http://jsfiddle.net/6UyYa/
Two approaches you can take:
Use the viewport meta tag to scale the page to the width of the
device (to the extent that browsers support that)
Responsive Design: Use a series of CSS media queries to adapt the content based on the size of the device.
Two versions of Responsive Design:
Change the layout of the page (number of columns and how the content flows on the page) based on the size of the device, and optionally scale some of the content. A good example of this is The Boston Globe.
Leave the layout unchanged and uniformly scale all of the content. #rlemon mentioned a good link for this. I learned it by reading Ethan Marcotte's ebook Responsive Web Design (unfortunately the ebook isn't free). This approach is relatively difficult and it limits your options.
In both versions of Responsive Design, changes to the content are triggered entirely by CSS media queries (rather than by JavaScript). And the HTML doesn't change. Only the styling of the HTML changes.
The first type of Responsive Design appears to be used much more widely than the second type.
For the second type of Responsive Design listed above, a series of media queries for different device sizes sets the base font-size for the body tag in %, and all size units for the content are specified in em or % instead of px (with absolutely no use of px for the content itself). All content is scaled based on whichever media query is used.
Additionally, in the second type of Responsive Design, there's little or no use of background images (at least, in my experience). img tags are used for almost all images, with a special trick for proportionally scaling the img tags via CSS. The following code proportionally scales an image to the full width of its parent container:
<img class="my-image" src="image.png"/> <!-- No width or height attribute -->
.my-image {max-width:100%; width:100%;}
Related
I am printing an HTML div with repeatable headers and footers. The repeatable headers and footers have been generated using an HTML table's thead and tfoot elements. Now, there is a requirement to generate page nos. after the footer on each page. I have done some searching on the net and found a few suggestions. But none of the suggestions gives the correct solution.
I have tried using the following CSS code to generate the nos.:
tfoot:after {
counter-increment: page;
content: counter(page);
}
But this code generates 1 as the page number for all pages on chrome. Also, only on the first page, is the page number gets printed after the footer. On other pages on chrome, page numbers are printed before the footer.
On firefox, the first page gets 2 as the page number, while other pages don't get any page nos.
Does anyone know of any way to generate the page nos. using CSS?
Bro it doesn't need CSS , please tell that the solution is working or not
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat diam, feugiat non quam quis, lobortis tincidunt sapien. Praesent neque tortor, sagittis nec tristique at, elementum non arcu. Phasellus tempor ac dui at egestas. Nam tellus eros, malesuada nec lectus non, condimentum ullamcorper sapien. Vestibulum vel fermentum nulla, at sollicitudin orci. Etiam rhoncus, sem pharetra auctor ultrices, turpis odio suscipit risus, at blandit metus turpis in eros. Vestibulum molestie, magna at porttitor dapibus, mi sapien maximus mi, non elementum risus purus eu velit. Aenean luctus metus porttitor consequat mattis. Ut vel nibh eget nisi sagittis porttitor. </h1>
<center>
<footer>
<h2> 1 </h2>
</footer>
</center>
By doing this the page no will automatically go into the footer just replace 1 to your page numbers. Thanks!
I am experimenting with CSS's shape-outside property using an image, but at least in Safari, the resulting shape is always based on the original image size and I don't see any way of actually scaling the image based on the box size, which would be necessary for a truly responsive design (not to mention making life easier for initial testing purposes).
For example, in this CSS snippet:
#shapetest {
float: left;
width: 100px;
height: 300px;
background: url('some-image.png');
shape-outside: url('some-image.png');
background-size: contain;
}
while the background is scaled to cover the div, the shape is still at the original size of some-image.png, which isn't unexpected. However, I'd really like to be able to scale the shape to fit within the box, without having to generate multiple renditions of the shape.
Am I missing some sort of scaling function for shape-outside? The resources I can find on this indicate that the scaling factor for a shape-outside image isn't actually specified just yet, making this somewhat less useful for designs where the object might scale based on a viewport-relative size, for example.
EDIT: In particular I want to be able to specify the height of the image (and have the width respond accordingly). The initial answer on this question worked well with a specified width, but the following attempt at reproducing this doesn't work, as the specified height of the div flows the text downward, and setting the div to float:left causes its own box to supercede the shape in the flow:
div.inset {
height: 1.5in;
}
div.inset img {
float: left;
width: auto;
height: 100%;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
Doing it with a specified width and computed height works fine, however:
div.inset {
width: 1.5in;
}
div.inset img {
float: left;
width: 100%;
height: auto;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
The specs say the following:
The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. [...]
The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.
So using the background-size property doesn't change anything to the element's content box size. Using the actual image element instead should make the computed shape respond to the current content box size of the image. You can now simply set a relative unit like % for the width of the image element to achieve responsiveness.
Here is a working example. You can change the width of the container and the width of the image as well as its shape should respond to the changing container width:
.shape {
float: left;
width: 100%;
shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}
.container {
width: 40%;
}
<div class="container">
<img class="shape" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png" />
</div>
This approach relies on a width-only div not having a height of its own, however. But this solution also works:
img.inset {
float: left;
width: auto;
height: 1.5in;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<img class="inset" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
I have a link which I want to show to visitors with vision, but hide from visitors using screen-reader ATs. (This is not ideal of course).
This is the reverse of the usual problem (with known solution) of hiding content from vision visitors (e.g. a "skip to content" link)
An example:
Clicking the "read more" link expands the text inline.
and conversely, clicking the "read less" link collapses it again.
This collapsed/expanding text functionality is only of benefit to visitors with vision, whose field of view would take in the extra text before they get to it (and in this example displaces the next FAQ, pushing it off screen).
A visitor with a screen-reader should instead be presented with the full text as they can choose to skip ahead to the next block, and they shouldn't encounter a spurious "read more" link which (a) doesn't link to a page, and (b) simply gives them what they were about to hear from their screen reader anyway.
How would this be done in HTML5?
Use aria-hidden this way for the content:
<p aria-hidden="true">Screen readers will not read this!</p>
You can try to put the link in a pseudo element. That's brings another issue: you can't click on a pseudo element because is not part of the DOM, but can fake it with pointer-events.
$("p").click(function () {
$("span").toggleClass('on');
});
span {display:none; color:red}
p {pointer-events:none}
p:after {content:"Read more"; color:blue; text-decoration:underline; display: block;pointer-events:all}
span.on {display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at erat orci. Praesent non pulvinar nisl, at ultrices lorem. Sed semper ultricies eros, eu aliquet ipsum vehicula nec. Nullam orci justo, dapibus eget elit ac, tincidunt mollis urna. Ut sed felis lobortis, blandit urna non, fermentum arcu. Suspendisse fermentum elit ante. Nulla tincidunt elit vel elementum eleifend. Fusce sed nisi vulputate, aliquam urna congue, egestas arcu.<span> Praesent dignissim, risus in elementum eleifend, velit elit accumsan diam, sit amet vestibulum purus urna quis dui. Proin ut venenatis orci, sit amet ullamcorper tellus. Morbi lorem purus, ornare non convallis nec, venenatis cursus urna. Maecenas cursus, leo vel tincidunt viverra, leo nibh placerat sem, ut molestie tellus ex et nulla. Vivamus eget magna libero.</span></p>
I use display:noneas an example, of course I assume you have your own method to hide the text but no for JAWS or other screen readers.
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I need to have a floated element after the content/text that's supposed to flow around it in my code for SEO reasons. Usually floats are done like so:
CSS:
#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}
HTML:
<div id="menu">This is a right float. The long text flows around it.</div>
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
But I need to have the HTML like this:
<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra.
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at,
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec,
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet,
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut,
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis
a nibh. Integer ipsum. Vestibulum lacus diam, varius in,
blandit non, viverra sit amet, sapien. Sed porta sollicitudin
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>
<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>
Basically, I need this HTML to look like the previous example (HTML and CSS). How can I do this?
The width of the floated element is constant, but the height can change. The content has to flow around it. The reason I need to have it this way is because the floated element is the menu, which doesn't contain any important text and is usually the same for many pages, so the content should be topmost in the code.
This recent question may be the same
Wrap text around right floated column where left column appears first in html
the solution involves floating a empty "spacer" div right , this spacer is first in source, it should have the width and height of the content to be in the right side - in the link a solution including a bit of jQuery to get the height - the position the actual menu over the top of the floated spacer
a JS fiddle example produced from that link : HERE
Simple you have add the following css
#content {
float: left;
width: 300px; /* put here the width you want */
}
demo: http://jsfiddle.net/qTDLr/1/
Edit: make sure that the sum of #content and #menu width is less than the container width.
You could just use a table. This 'sidebar before content' problem of CSS has been a huge step backwards in terms of accessibility.