I have two rows for my table. The top row contains some text and the bottom row contains a button. I would always like the button to stay at the bottom of the page and the top row to show scroll bars if the text is more than the space available (say if the browser window is resized).
I have been able to keep the button at the bottom using the following code but when I resize the browser it starts to overlap with the text on top. I have also not been able to get a scroll bar on the top row.
<!DOCTYPE html>
<html>
<head>
<style>
.bottomRow {
position: fixed;
bottom: 0
}
</style>
</head>
<body>
<table>
<tr>
<td> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </td>
</tr>
<tr>
<td class="bottomRow"> <button>OK</button> </td>
</tr>
</table>
</body>
</html>
Can someone please let me know how to solve these issues? If there is a better way to achieve the same effects without using table I am fine with that as well.
Thanks,
There is no such thing as a scroll bar for a table cell. You would need to trick the scroll bar into displaying by having a fixed height div inside the cell with overflow-y set to scroll. Then all of your content goes inside the div.
<tr>
<td> <div style='height:200px;overflow-y:scroll;'> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </div> </td>
</tr>
I am not sure why you are having problems keeping your button at the bottom? Can you elaborate on this a little more? What is happening to your button?
Related
can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
I have this basic XHTML file, with a table that displays images in the first column (images size is roughly 64x64 pix) and some text in the second column.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<link href="../Styles/style.css" rel="stylesheet"/>
</head>
<body>
<table>
<tbody>
<tr>
<td><img src="../Images/A.png"/></td>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate. Duis euismod, metus sed hendrerit blandit, sem tortor laoreet lorem, non feugiat quam nunc condimentum erat. Vestibulum sit amet laoreet est, vel sollicitudin urna. Aliquam erat volutpat. Pellentesque sodales tincidunt turpis eget sollicitudin. Nunc et tincidunt ligula, at tristique orci. Praesent ut congue mauris. Praesent non metus ut libero sagittis hendrerit et ac dui. Donec eget ultricies risus, quis euismod massa.</p></td>
</tr>
<tr>
<td><img src="../Images/D.png"/></td>
<td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet. Mauris orci nunc, sodales ut metus sit amet, pretium posuere velit. Mauris elementum, dolor ut laoreet faucibus, neque purus fringilla urna, vel tristique lacus odio sit amet purus. Suspendisse eget ultricies libero. Sed a semper augue. Morbi ac ligula ut nibh ornare eleifend nec ut nisl. Quisque ut rhoncus odio. </p></td>
</tr>
</tbody>
</table>
</body>
</html>
Opening the file in a browser, images in the first column are displayed full size. If I shrink the window, or force tablet/smartphone view in the browser, images are still displayed full size.
I added the file to an epub. Opening it with an ebook reader (Calibre default one) I see everything like in the browser (i.e. full size images).
I've uploaded the epub on my erader device (an old Kobo Touch). Here images are shrinked to a very small size.
Why is this happening?
Could it be an ereader problem? Likely. Any HTML/css trick to force full size?
I've tried to add this to the css file
table img {
height: 100%! important;
}
Still no luck, the images are shrinked.
I'm sure this is baby stuff for many, but I'm afraid I just can't get it right. The more I tweak, the further away I get with the results. No need to describe the consequences of my efforts. Instead here is the desired effect as the viewport shrinks:
The lower image is NOT what I'm actually producing; it's what I'd like to happen. Instead I've got the elements doing everything but this, the most annoying being the text wrapping under the images.
If someone can point me toward the most efficient code for this, including media queries, I'm grateful.
I trust you're using #media queries in your CSS, so I'll assume this unless told otherwise.
One way you could look at it is this:
Set the display property to inline-block of the Items 2 & 3.
Then, set the width of items 2 & 3 to 50% when the viewport is at more than 600px (desktop/tablet) wide. This will make them sit side-by-side.
Note: you might need to use box-sizing: border-box; for this to work properly; depending if you're using borders or not.
Then, on your media query for less than 600px (for mobile), set Items 2 & 3's widths to 100% to fill the width of the screen.
This will make them cascade neatly underneath one another.
Furthermore, I would recommend looking at using Bootstrap as this makes responsive website coding a doddle.
Hope this helps!
I think that the eassier solution here is using media queries. I give you a bit of background, just in case you don't know what they are.
When you create a stylesheet, the styles created are applied to the elements you target using selectors, like class, ids, etc.
Media queriesallow you to set conditions to that CSS rules, for example, you can create rules depending on the screen size.
See this fiddle to check how it works.
.short {
width: 50%;
float: left
}
#media screen and (max-width: 500px) {
.short {
width: 100%;
float:none;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
The CSS is easy. The first thing is the class short, which applies always to the elements. Then you find the media query which says that the CSS rules that encloses are applied only when the width is under 500px.
I had a project on responsive webpage and I'm a new learner so it's all basics:
https://github.com/nirupaboricha/Responsive_Webpage
Let me know if it's helpful.
CSS code:
h4 {
display: inline;
font-weight: bolder;
font-size: 100%;
margin: 0;
}
HTML test code:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
</body>
</html>
Expected output:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
What I'm actually getting:
Let's try to make a header be inline with the next paragraph.
This is a header.
A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
And now we have some more text.
I'm almost positive the issue is the fact that I'm starting a new paragraph right after the header. The problem is, the HTML code I'm applying styles to is not my own - it's generated by another tool which I don't have source code for, so I can't just, say, eliminate the paragraph, or add styling to the paragraph directly. Can the above be done with exactly the given HTML code and only using CSS?
Edit: The proposed solution of using h4; h4 + p does work - provided there are at least two paragraphs following the <h4> tag. The following HTML code will cause undesired results:
<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /?</title>test</title></head>
<body>
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<h4>This is another header...</h4>
<p>And now we have some more text.</p>
</body>
</html>
Results:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem. This is another header... And now we have some more text.
Expected result:
Let's try to make a header be inline with the next paragraph.
This is a header. A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.
This is another header... And now we have some more text.
I'd modify #Nit's code by adding a pseudo-element before your h4:
h4,
h4 + p {
display: inline;
}
h4:before {
content: "";
display: block;
clear: left;
margin-top: 1em;
}
Sounds like you simply want to make the header and the paragraph following right next to it inline?
h4,
h4 + p {
display: inline;
}
<p>Let's try to make a header be inline with the next paragraph.</p>
<h4>This is a header.</h4>
<p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus
placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
I have a large text. I've made 3 columns with the following CSS:
.columns {
-webkit-column-count: 3;
text-align: justify;
}
It has to work in Safari. This works just fine. But now I would like to place an image to the top of the second column.
How can I have this result?
Edit: This was my start of doing the thing, but I would like to say that the important thing is to have the result in any way, so I can drop this css in case it can be solved without this.
Edit 2: I've solved it with the jquery colonizer plugin. I had to add 3-5 lines of code to the plugin. I need this for the iPad, where I have arrange the text and image like I mentioned before. I think this is the simplest method to have this job done.
In case you need the solution, feel free to e-mail me.
#flynfish, please post it as an answer, so I can accept it.
I'm not sure that this is possible. The browser determines where to break the content and there's no way via CSS to insert something at those points. The closest thing I've been able to come up with uses the column-break-before: property (-webkit-column-break-before, -moz-column-break-before, column-break-before).
For example:
CSS:
div#multicolumnElement {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.special {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
HTML:
<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem!
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa.
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula.
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi.
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien
orci at nunc. </p>
</div>
This produces four columns of text with an image at the top of the second column, however depending on the amount of text and the space available, it's possible that this may not always turn out as you want.
I'd have linked to a jsFiddle example but it seems to be down ATM.