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>
Related
I am trying to get my text to align. I have a <p> and my text goes all the way from the left of the webbrowser/screen till the right. But I want it to be away from the left and right ends of the screen. I know of the alignment code "center, right, left, etc.". I need it to be left aligned, but not right next to the screen, like if the whole <p> was indented on both sides.
You would want to either put it within a containing div, or apply padding to the <p> tag. It would look like this:
.container {
width: 80%;
margin: 0 auto;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
</div>
OR
<p style="padding:0 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
You can simply add some padding, margin-left/margin-right, or another solution like that.
Try adding;
text-align: left;
margin-left: 5%;
to your CSS.
You can change the margin-left value to be an amount of pixels (e.g. 50px;) or leave it as percentage of it's parent element.
You said you wanted the text left aligned but not have it touch the left side of the page. Here is a JSFiddle of that:
https://jsfiddle.net/zfvhgr0x/
you can do this simply by keeping the width attribute as is and just including the following into your CSS:
padding: 0 5px;
This will add a space of 5 pixels to the left of your text, and the right of your text. This means that if your text would reach the end of the screen, it would stop 5 pixels before the end.
You can set each indent individually, as explained below:
padding: 5px(top) 7px(right) 2px(bottom) 10px(left)
When putting this in code, you do not want the brackets. These are just there for demonstration purposes to explain what each of the numbers will target.
Hope that helps!
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'm trying to make responsive design. When screen is small comments should be below "Slikica"(Cyan DIV). But when I'm on the desktop version I want comments (Gray divs) to be warped around image.
Cyan div has fixed width, and float left.
Gray divs has unknown length (max 200chars), and they should be right to Cyan div. They are also floated left.
If I set them width, 300px for example everything will work fine.
Look at image below, worth thousand of words.
<div id="content">
<div id="slikica">Slikica</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
<div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
<div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
<div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
<br class="clrfix" />
</div>
jsFiddle link
Just remove the float: left; on the comment DIVs. When floating each comment left to previous one, they won't fit into the viewport.
http://jsfiddle.net/feeela/Xtuc9/1/
Try adding the following CSS to the comments' div element:
display:inline;
If you remove float: left; from your gray divs and add a left margin equal to (or larger) than the cyan div width they will occupy the space to the right. If there are more gray divs they will however not wrap around the cyan div because of the margin. I don't know if this behavior is wanted. Otherwise you could just skip both the margin and the floating and have them wrap around the cyan div.
The problem is that your divs will expand to reach at maximum the width of their container (in that case, the <div id="content">). When they reach a width too big to fit aside the blue, they get clip down. What you need is to put something that prevent them from reaching that width.
You have two option to do this.
Put a div with a width: 600px (or whatever fit in that space) and put every gray div in it. JSFiddle (You'll need to expand the result window to see that it work)
Put a max-width on every div (example: max-width: 600px)
I need to have a <textarea> take up all available space inside of a <td>
When a user clicks inside of the table cell, the <textarea> should appear with the exact dimensions of the cell (like an Excel spreadsheet).
I have tried setting the <textarea> width and height to 100%, but that doesn't work; the dimensions just get skewed and all the table cells jump a little bit as this cell get resized incorrectly both vertically and horizontally.
Is there a way to do this?
edit:
You can see how this fails here: http://jsfiddle.net/4QbMr/6/
(both cells should be the same size)
I do not know whether I understand your question but you have to explicitly configure talbe cells width. like this: http://jsfiddle.net/4QbMr/8/. Now it will take all the space vertically, in order to avoid this you have to wrap table in a div.
Here's code of the css:
textarea
{
width:100%;
height:100%;
}
table tr td{
width:100px;
}
html
<table border="1">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve
</td>
<td>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve</textarea>
</td>
</tr>
</table>
First, give the table cells position:relative
Next define textarea in the CSS as
textarea {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
jsfiddle: http://jsfiddle.net/xXXBP/
EDIT
new fiddle: http://jsfiddle.net/xXXBP/8/
Plays nice with FF and IE now. :D
$('td.makeTA').click(function() {
var $td = $(this);
var w = $td.width();
var h = $td.height();
$td.append($('<textarea />').css('width',w+'px').css('height',h+'px'));
}
You'll have to set the table, tr and td height to your size, and then the td size to "100/#ofrow"% (or a fixed width).
like in your updated jsfiddle
textarea
{
width:100%;
height:100%;
}
td {width:50%;/*for 2 columns*/}
table, tr, td{height:100%}
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.