Sunamena Posted January 13, 2016 Share Posted January 13, 2016 Hello!I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution.I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300pxResult: It jumped UNDER the content that should be on the left of it.URL: http://www.nimblefeather.com/index.phpProblem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's.I tried: min-width.Result: No visible change.URL: http://www.nimblefeather.com/comics.php Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable?URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.phpQuestion: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?)Thanks in advance =D Link to comment Share on other sites More sharing options...
davej Posted January 13, 2016 Share Posted January 13, 2016 You might look at... http://www.w3schools.com/cssref/pr_text_white-space.asp For other issues you probably need to use media queries with a min and max on each... http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted January 14, 2016 Share Posted January 14, 2016 (edited) Let's start with this CSS rule : div#container {background-color:rgb(106,183,239); color:rgb(0,0,0); float:left; border:1px solid black; padding:0%; margin:0% 10% 1% 8%; width:83%; border-radius:25px; width is 83% plus right margin 10% and left margin 8%. That is 101%. Not only is it already too wide, it has no slack and when you specify in percentages, you can run into problems is there is no slack because the percentage has to be converted to pixels which cannot be fractional so when the browser rounds up you get broken lay out. What is even more curios is floating an element the is full width of its parent. There is no reason or effect to floating it except add excess coding. As for a float going below other content, the is the expected behavior when the available width is not enough to do the float. Content outside of its box is also normal when the box is nor big enough to hold it, and the dimensions are using a flexible unit of measure. I think you problem is that you are trying to do layout with CSS. That is what HTML is for. do a base layout without any CSS. It may not look pretty, but doing HTML only will force you to think about the relationship between elements, and that is what you need to understand so you can decide what is important for understanding the site at different resolution. Once you have layout then do the CSS for presentation. Use only what is essential. If you cannot explain the reason a property must be used or cannot explain the reason for the specific value, then you need to stop and think. If you can't explain it; then you don't need it. If you needed it you would see why as soon as you removed it and something broke. Once you have the basic layout styled you need to learn about media queries and how to use them to adjust the presentation cross-resolution and cross-device. Edited January 14, 2016 by COBOLdinosaur Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2016 Share Posted January 15, 2016 101% + 2px for border. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now