Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
I know this is quite a simple question but I am a beginner. I am looking for a tutorial which can teach me how to code a design such as this one: http://dsp.io/. Can anybody recommend me one?
I want to know how to make it take up the entire browser's window, regardless of what size the screen on which you view the website is.
Thank you very much in advance.
This is called Fluid Design.
If you are a beginner, try to use Bootstrap.
Check this reference link
http://bootply.com/60257
Fluid grid system will change as Mobile template if you zoom the browser, and expands automatically if you zoom out filling the entire screen.
Bootstrap 3 is released. Check out that!
Hope this helps, comment if any doubt.
Here you'll have a tutorial on how to make a responsive website: http://www.netmagazine.com/tutorials/build-basic-responsive-site-css
Basically, you'll have to wrap everything within the <body> </body> tags into a #wrapper, like this:
<div id="wrapper">
and set the width to 100% in your css file, like this
#wrapper {width:100%}
The website you've mentioned doesn't have "full width and height", otherwise it wouldn't be scrollable; this is just 100% width.
If you want full width and height, though, you just have to create a wrapper div and set those properties to 100%:
#wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
Then remove undesired margins and paddings from the page:
html, body
{
margin: 0px;
padding: 0px;
}
This is very basic stuff, you should really study and search more before asking questions. Here's a good start.
Here is a great book on Responsive Design by Ethan Marcotte. You can read it to understand how to make a resposive site.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Am making changes on a home page. i have background images and links to the image as buttons.
However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:
this is my finished page as you can see the 7 images on the middle of the screen.
however if you open this in Firefox it comes out all messy :/
what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?
This is my js fiddle with the code: http://jsfiddle.net/uJhvk/
e.g
<div id="testimage">
<div id="a1">Awards</div>
</div>
any help will be grateful.
http://jsfiddle.net/ahallicks/uJhvk/1/
I've added floats to #testimage2-6 and margins to the last two to space them out
float: left;clear: both;
on #testimage2 to make it sit on a new line
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm using primefaces 3.5. I want my Facelets Header to be Static like Facebook Header.So my content can be scrolled with a fixed header.
Nothing specific to Primefaces or either JSF here. It should simply be a matter of applying the correct css style.
For example:
<style>.header{position: fixed; top: 0;}</style>
<div class="header"></div>
See also:
MDN CSS position reference
I had Same problem in Past. Assign your position to fixed position:fixed and make sure that your z-index value of header is lower than the z-index value of content in css.so that your content will not scroll over the header.
Example:
.header{ position:fixed; z-index:1;}
.content{ position:absolute; z-index:2;}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've got a problem with long tag words (like Best Practices below).
I'd really appreciate if someone could go to the URL http://www.siliconvalley-codecamp.com/ and make specific recommendation for the correct CSS change that would get the words like "Best-Practices" to clip when it goes over the edge rather than just flood over the edge into the screen. Sadly, I'm not very good at css and general instructions will not do me much good since I'm not and don't have a css guy to help me.
It will be good for you karma and we will appreciate it very much.
If I add word-wrap:break-word to the .TagCloud element, the words effectively wrap to the next line. You don't need a fixed width, just adding the word wrap property should effectively work.
Another alternative would be FitText. It is a jQuery plugin that condenses the font size to always fit in the allotted space.
It works for me on Chrome ! Do you still have the problem?
By the way you should give a fixed width to your div TagCloud and maybe use this
http://www.impressivewebs.com/css-white-space/
or this
div.TagCloud {
width: 250px;
word-wrap: break-word;
}
Why not just add overflow: hidden to the box? If you just want it to clip.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}