Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hello I am building a webpage that consists of tables, its been successfully built, but the only problem is that when my page is uploaded, the way it looks varies on different screens, so i am trying to have a fixed size using css, so that my page looks unique on all screens, this is what I have tried
style="height: 100%;", for my tables and body tag
But it makes my page not to scroll, but the content and images are looking terribly stretched. can anyone suggest what I can do to have a well looking webpage that would come out uniquely on all webpages
Read on how to use the <div> tag in combination with CSS. Much easier to design your homepage using the <div> tag rather than <table>. Also it will help you when you need to make layout changes for your homepage in the future.
Give elements a fixed width rather than percentage to avoid stretching.
More ideally, look into learning media queries.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am using Materialize CSS to create a homepage. I usually use one container to hold everything. This time, I used different containers to hold different elements, for instance, one for the navigation bar, one for the carousel, and so on. There are no containers within containers.
Is this good to do? What is the best practice with containers?
Some times using multiple containers is ok and even required. For example think of page with multiple full width element, which contains different background color and centered content. These full width elements could be <section>s and centered content could be containers.
You have to think is your solution logical. If you can figure reason for your element to have it's own container, then it is ok to use. If you provide link to your work, i could give my opinion.
As clear answer to your question, i think it is good to use multiple containers if page structure requires. Container is just one element among the others.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am not good with HTML. But yes I can understand it well.
I faced a scenario where there was a HTML page with header,footer and many page elements on it.When the page was displayed in browser all the elements would go haywire on resizing the browser window.
The solution that was finally given was putting elements in <div> tag and then hit-and-trial with margin-top attribute for a dozen of elements on the page.I found it clumsy way of solving this issue.
How can the positioning of HTML page elements be handled in such scenarios in a graceful manner?What can be a good approach while WEB page design so that it looks as it is supposed to irrespective of the size of browser?
I think you must check out responsive web design. Head over to the links below and you can get what you want:
http://www.labnol.org/internet/responsive-web-design-faq/21361/
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
i am starting to learn client web programing using phonegap and jquery mobile and while reading some toturials i searched for a way to add a pic to the back of a list but didnt find one.
also while adding a pic to the top of a page i got a problem in the page scaling, what i did was adding a img html tag with the align center... and it is working but when viewing on the smart phone the picture does not scale to screen size...is there a simple way to make it do so?
i am sorry if my questions may be trivial but i just started and i am doing a class project...
thanks!
moshe bn
That's what the CSS background property is for.
ul {
background: url(images/image.jpg) 0 0 no-repeat;
}
for images I would recommend against scaling them because there are so many different screen sizes. You probably don't want your image to end up looking pixelated and weird.
Have you used #media queries before? This is a good article and you might find that it is better to have a few different sized versions of your image that you can show depending on the amount of space your user's device screen allows.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I essentially want to be able to scale the entire site (images, elements, the whole sha-bang) to what ever browser size window the user is using. Anyone have success doing this and would be willing to share how?
I'm using HTML 5 by the way.
You need to start thinking about sizing your elements using percentages instead of pixels.
Take a look at this simple example and it may help you on your way. Good luck.
http://jsfiddle.net/hACbn/1/
Take a look at using responsive layouts:
Here's a half decent framework to get you started
http://gridpak.com/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I have just started practicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.
Like the one here :
http://i.stack.imgur.com/rx0dl.jpg
Thanks alot
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
http://i.imgur.com/glZJ5.jpg
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
Well, start with the basics:
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.