I need your help, I'm developing a responsive site, and contact page, the form may appear in two or one column.
This should happen in a mobile:
And this on a computer:
Any idea how to build this table? I've tried using just css, however the HTML of each td is this:
<tr>
<td colspan="2" class="single">Telefone</td>
</tr>
<tr>
<td colspan="2" class="single"><input class="input-left" type="text" id="telefone" name="telefone" maxlength="13" autocomplete="off" title="Digite um número de telefone para contato"></td>
</tr>
Any idea?
There are many options that you can consider. The easiest solution, probably, is to have two floating tables of equal width. On wide screens they will float next to each other. On narrow screens they will show one on top of the other.
When you populate these tables, you can add an equal number of rows to them.
Live demo
You can achieve auto text format depending on page size by using column-width property in css.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada, ante a accumsan pretium, lorem magna hendrerit turpis, eu tempor neque dui non est. Quisque suscipit accumsan rutrum. Praesent in nisi nec felis tincidunt interdum. Cras scelerisque justo eget lectus pulvinar feugiat. Aliquam nec volutpat risus. Vivamus dapibus augue felis. Sed quis posuere dui. Donec ultricies nisl eget erat convallis faucibus at sodales metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
CSS
div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
}
PS: If you insist to use tables. Just put the text inside the <td> in a div and apply my above method.
use a plugin like this-responsive tables.
if you want to make custom responsive table you can use media-queries to do it.
i wrote a custom responsive table for a solution check this-table.
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 have been reading many articles and posts and its been widely told to use display as inline-block instead of float
So i thought to give it a try.
But i am unable to replicate the exact output of float while using inline-block
I hope someone can help me regarding it
On secondary note , if someone can point few Scenarios ( if it exists ) where using float is still beneficial to be used today instead of inline block or flexbox , that would be quite helpful to remember for future reference
<h1>float Vs inline-block</h1>
<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>
<p><img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
img {
float: left;
width: 170px;
height: 170px;
}
/*img {
display: inline-block;
width: 170px;
height: 170px;
}*/ please fix this part to make it work exactly
like float
Edit - Now it seems to me that display: inline-block can only align divs in single row but cant act exactly like float. Ie it can't wrap text around images like float can...
So many countless comparisons on internet between inline block and float made to believe we can exactly replicate float effect using inline-block ( as in like inline block is total replacement for float )
First thing first, your HTML isn't properly formated. For a better semantic, don't insert an image inside a p tag, as the last one should only contain text.
If you want and image and a caption use img and figcaption.
Also, if you want text to be side to side with the image, you should be using flex, that will easly put both elements side by side.
Here is a quick demo:
figure {
display: flex;
}
img {
width: 170px;
height: 170px;
}
<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</figcaption>
</figure>
Since I know there is no alternate for what you wanted with inline-block display property. This is not the exact thing you looking forward to but you can achieve such a thing with this approach provided in here.
As you know there are advantages of using inline-block over float and you can check these tho same question to more information about it:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Advantages of using display:inline-block vs float:left in CSS
But to implementing image and text side by side you can use flexbox as well and you can check this answer or answer that #PedroFigueiredo provided for more information.
The float and inline-block working different :
on float : element is removed from the normal flow of the page and places on the left or right side of its container but still remaining a part of the flow, this allow replicating
on inline-block : element dose not removed from the normal flow so theoretical can't replicating other elements around like float
think on inline-block as inline element added to it the control of [width - height - margin ..ect]
e.g if you have
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
the easiest way is to display list items side by side is by using inline-block rather than floating them
so in your example:
if you give inline-block to the image
image and the text are in the same flow = [paragraph]
if you floated the image
the image will leave the paragraph flow to the container flow
to give paragraph the ability to replicate around
I've currently got two tables, one for past and one for upcoming events, as seen in this picture.
As you can see, the widths of the columns in the first table isn't aligned with those in the second (since the event name of the second is longer than the first). I was wondering if it was possible to align them while still dynamically adjusting column width, or if the only solution is to set the column width beforehand.
you can control the width of column by setting css max-width ,hope this will help you to control the overflow even if your content have dynamic length.I added an example with max-width below.
p{
max-width: 150px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
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%;}
I am trying to create a page as shown in picture. Now only tables are allowed and no css. I am having difficulty in understanding how to achieve as it is in original image. Any help please?
This is what I have written
<html>
<head>
<title>HTML</title>
</head>
<body>
<table height="350" width="773" background="bg.jpg" >
<tr><td><h1 align="right">Welcome to Full Moom Site</h1></td></tr>
<tr><td><h3 align="center">Music Company Full Moon</h3></td></tr>
<tr><td><p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate, odio ut auctor porta, quam urna convallis leo, ac ultricies felis mi eget mi. Pellentesque consequat nisl et metus tempor sodales. Quisque ultrices metus consectetur sem placerat eget molestie ipsum gravida. Duis scelerisque augue sed sem venenatis id congue mauris vehicula. </p></td></tr>
</table>
</body>
</html>
You won't get me to do the work for you :-) , but I'll offer up this advice. You'll need to slice up your background image into four parts, use colspan and rowspan on your <td> and <tr> tags, and border="0" on the <table> tag to get it to work. Here's an example, including a possible grid for your table layout. You'll need to move your navigation down a little bit; otherwise, you'll need a fifth slice for the left end of the blue arc.