I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
Here is the offending website: http://giorgostzampanakis.pythonanywhere.com/ratings/ .
Try resizing the browser window until it's about 500 pixels wide and note how the table on the left ends up bigger than its containing div (you can check that with firebug or a similar tool), even though the table's width is set to 78%.
Is the 'width' css property treated specially when it comes to tables? I haven't been able to find any documentation stating that.
The reason that table is bigger than the parent container is because the content makes it so! If the content was made up of one character strings (eg. 1 1 1 1 1) it would probably all wrap nicely!
If you're going for a responsive table there are a lot of solutions like hiding columns or other stylistic things. I'd recommend Googling for solutions, but here are a couple decent links to get you started!
Responsive Table Round Up
Responsive Data Tables
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
My code for creating the data table looks like this:
myDataTable = new YAHOO.widget.ScrollingDataTable(
"containerDiv",
myColumnDefs,
myDataSource,
{height:"100px",width:"100%"}
);
That code produces a table that looks something like this:
(Screen shot not available anymore from external site)
http://drop.io/download/public/gfipf7axm6ydjsvuaiaf/296829ffb3ad115ecf1d9e13a607eaf2e2dc2788/Asset/37984293/v3/large_thumbnail
Notice how it creates an outer box stretching 100% just like I want it to, but the table itself does not stretch all the way 100%, instead it is only large enough to fit the contents of the table.
Please note that the outer box that stretches 100% is created by YUI when you run the above code, I didn't create that myself.
What I really need is just vertical scrolling and no horizontal scrolling. But YUI does not let you specify one or the other, you get both.
Is there a way to make the table stretch 100%? I didn't find anything about this issue in the YUI documentation, unless I have overlooked it.
Thanks for reading!
When you use a ScrollingDataTable and specify a width, the columns are not auto-sized. This makes sense when you think about it - the table must handle cases where there are too many columns to fit in the view, so it doesn't attempt to fit them.
Since it looks like you don't need horizontal scrolling, remove the width config attribute. To get the table to your desired width, you can try:
Specifying the width in css on the container div, rather than in the table config
Specifying column widths so they add up to the total width that you want.
Given a HTML table with some data that may be either narrower or wider than the browser window,
In the former case I know how to make it expand to fill the full width.
In the latter case, how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
If by "truncating some columns" you mean truncating their contents, you can always make all TDs overflow: hidden, with a fixed height.
If, on the other hand, you want to get rid of columns altogether, then you´ll need a JavaScript solution that detects which columns fall outside the view and sweep them out.
Well, your question is difficult to answer. The easiest way I think for doing that is using Yahoo User Interface Library, it has a component (among many others) called DataTable in which you can programmatically add or remove columns. Here's an example that may help you.
PS: Check the other components, YUI uses just javascript and some of them are really cool.
to expand the table to the full browser widht just do this:
<table width="100%">
...how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?
I suggest setting the table width to n% and also set width for the td's in percentages which when summed together will give the width of the table.
That however will cause the words to wrap within the td's.