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.
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 6 years ago.
Improve this question
This is just a basic question, in what events do you use a jumbotron? Do you always need to include a jumbotron when writing in the Bootstrap Framework? Examples of when to use the jumbotron is appreciated.
No, jumbotron is just a component, like a big banner usually on the top of your home page. Think of it like a big hoarding a visitor would see when they visit your site. When you are using bootstrap, I think the components that you might need 99% of the times is the grid. Rest depends on your website's requirements.
The grid is useful for making a row/column style layout of your webpage that's responsive (flows depending on the size of the device).
In the page below, you can get rid of the grey box (Jumbotron heading container) if you don't need it.
Jumbotron is simply a styled element. Bootstrap has some default properties applied to that element, making it a very good 'eye catcher'.
You don't need to include it, but you can if you like it. I'd use it to display the main business concepts, to display commercial items or discounts.
A nice example of use-cases is to look at commercial websites. here you can see how they used a slideshow for promotion, inside a jumbotron-like element for the eye catcher.
Using it is simply a matter of personal preference.
Jumbotron is one of Bootstrap helpers utility when developing sites. It is not necessary to have it in your project, it all depends how your design is structured. Basically with this component you can optionally increase the size of headings and add a lot of margin for landing page content. Another definition from w3 would say that jumbotron indicates a big box for calling extra attention to some special content or information. With this said it is place where you want to point out something, maybe some title, company quote of some nice graphics.
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
Basically I am working on some practices since last week to start learning html and css, and I wanted to create a table of sorts to display items with the option to see more info and take/buy it. I was thinking in adding some background icons or image hence the strange looking table.
My question is. Can something like that be styled or would a normal table be better? To illustrate my point I did a mockup of sorts.
Oh! And as not to make another question just for that, can a dropdown list be made to have checkboxs without using jQuery? I'm afraid that is completely out of my reach with my current knowledge.
http://i59.tinypic.com/25z47dh.png
Thanks a lot in advance
Best Wishes
You have a few options:
You may use display: table and assign table 'rows' and 'columns' on div tags.
Or
You may use float: left which will line everything like a table and be more responsive.
Or
You may use display: inline-block which will behave a lot like the floats except you get a little bit more control on box height.
There is no correct answer here but my preference is with inline-block since browser support tends to be superior than floats while keeping everything responsive.
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.
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 9 years ago.
Improve this question
I am developing a Wordpress website where I needed the logo to overlap the banner image below.
Through the help of a colleague as well as Stack Overflow users I now have two solutions that allow for my layout to render as intended.
The image in the banner is rendered as a background image. Because this is a Wordpress site I will have to use inline css for this. Link.
The nav and the banner below are positioned absolutely. Link.
Problems with solution #1:
I realized that if the image is rendered as a background image it will be less SEO friendly and of course less user-friendly for screen readers, etc. as it won't have alt or title tags.
Problems with solution #2:
I find that absolute positioning just doesn't feel as reliable cross-browser (this could be all in my mind). This method also required some extra markup and css classes which I didn't like having to do.
Which way do you think is better? For what reasons?
I don't think there is a definitive answer to your question.
But bear in mind that if you want to print your page, the background image will not be rendered, but the absolute image will.
in my opinion: you should ask yourself if this image is part of the content in your web site, or just a nice visual style.
if its part of the content: use absolute positioning techniques, otherwise: use background.
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
There is a regular psd file only with the background.
I have Photoshop CS 5.1, ran into a problem: I do not know how to cut out the background or the background to be two main background was such a stretch greens here at 100%, while the other (which is at the center of the white glow) was like in the center of the future site. I was just trying not to cut. Either cut out the curve, or the background is not inserted.
In short it is necessary that the central part of the site was a white shadow:)
Sorry for bad english
First of all, I think that it's not a good idea to use a software who is designed for digital photograph post-production, when you are trying to illustrate something. I strongly recommend Illustrator or Inkscape instead of photoshop wich I think is great for other purposes.
This article could be useful to achive the gradien to transparent effect in illustrator.
http://creativetechs.com/tipsblog/transparent-gradients-in-illustrator/
Are you trying to do something like what I sketched out in this fiddle?:
http://jsfiddle.net/2vvz3/
If not, let me know where's the diference and mayebe I could help you out with this problem.
You may not need to cut out the background. Instead use the entire image as a large background for your site. Here is an article that explains how to use a large background. Hope this helps.
http://webdesignerwall.com/tutorials/how-to-css-large-background