As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
Okay so I am trying to get my website to fit all resolutions or screen sizes because I am currently working on a 17" 1920x1080 screen size and my website looks fine but when i try run it on a 10" or 15" screen etc the website screws up, the content goes everywhere (mainly drops down) So I was wondering how this can be fixed?
Thanks
First of all you should use percentage values (e.g. width:20%; instead of width:200px;) whenever you can, so you don't rely on absolute pixel resolutions (which often screw up your whole design/layout).
For all the other things and tuning you should take a look onto the css media query (e.g. w3schools):
#media screen and (min-width:1024px) {
/* ... */
}
It sounds like your web content isn't being positioned relative to a fixed width parent container, because if it was a scrollbar would load rather than your containers being pushed down. If you want to make the website layout respond to the screen size then you'll need to use a responsive layout.
Here's more info on getting started with responsive design/development:
http://www.w3schools.com/css/css_responsive_intro.asp
You can also look at using a framework which is really good for learning responsive grid lay outs (and much more). Bootstrap is one of the most popular mobile first responsive frameworks:
http://www.w3schools.com/bootstrap/default.asp
http://getbootstrap.com/
You could dive in learning few things:
Relative Lengths
Flexbox
Media Queries
I'm not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.
I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?
Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?
Thanks!
This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.
There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)
There is a ton of documentation on these sites you should focus on the grid sections:
http://foundation.zurb.com/docs/components/grid.html
Hope that helps.
There are websites using the responsive layout. Means you have orientations/everything fixed for the mobile screens, tablets as well as full size pc/laptop screens.
They make use of a grid system.
Common ones are
Twitter Bootstrap (Two different versions having different UI and
approaches are available at http://getbootstrap.com/2.3.2/ and
http://getbootstrap.com/) This one's my favourite as its too easy to
use
Zurb Foundation
Skeleton
html5 Boilerplate
Sprout Core
Less Framework
You may pick any one you like. They all provide a basic css and javascript to handle things out nicely, a wireframe of a complete website is provided and an extremely well documented manual is available on their websites. Its actually fun and makes work faster.
Cheers!
One useful and recommanded unit is the viewport percentage length that will adjust accordingly.
for example to get a div the size of the window and another div on top of the first one:
<div id='one-page'></div>
<div id='inside'></div>
#one-page{
width:100vw;
height:100vh;
background:red;
position:relative;
}
#inside{
width:10vw;
height:10vh;
background:black;
position:absolute;
top:10vh;
left:20vw;
}
http://jsfiddle.net/xv7Yf/
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting