ShadowMage Posted February 8, 2011 Share Posted February 8, 2011 I had it positioned at the center before, and certain people (gyohdon) were getting part of it cut off. Does your screen look a lot different than this?Nope that's what it looks like for me. But my monitor is 1920x1080 and when I run the browser maximized (or even 3/4 of my screen) the background looks really out of place because it sticks to the left side of the screen while the content stays in the center, meaning the content is no longer in front of the background. It makes the background look less like a background.I'm not certain that the background is the issue that Gyohdon is having. To me it sounds more like the content is too big for his monitor. Link to comment Share on other sites More sharing options...
trinistorm Posted February 8, 2011 Share Posted February 8, 2011 When I zoom out the content goes to the left. Before did you have your head and container divs wrapped in another div? Link to comment Share on other sites More sharing options...
Fmdpa Posted February 9, 2011 Author Share Posted February 9, 2011 Before, I had the background aligned in the center. Then I tried to align it to the left again. Now it is back in the center, and I faded the image out on the edges so it looks less harsh at low magnifications. How does it look for you? Link to comment Share on other sites More sharing options...
Gyohdon Posted February 9, 2011 Share Posted February 9, 2011 This is what it has looked like since the start. Link to comment Share on other sites More sharing options...
trinistorm Posted February 9, 2011 Share Posted February 9, 2011 Before, I had the background aligned in the center. Then I tried to align it to the left again. Now it is back in the center, and I faded the image out on the edges so it looks less harsh at low magnifications. How does it look for you?This is what it looks like on my 1440 * 768 ff and opera . Link to comment Share on other sites More sharing options...
Fmdpa Posted February 9, 2011 Author Share Posted February 9, 2011 Thanks for the screenshots. I'm stumped on what to do with the diverse range of screen sizes. Gyohdon, it does look like you have a small screen for more than the background. The whole page is partially hidden. Does it look good if you zoom out to 90%? Link to comment Share on other sites More sharing options...
Gyohdon Posted February 11, 2011 Share Posted February 11, 2011 Thanks for the screenshots. I'm stumped on what to do with the diverse range of screen sizes. Gyohdon, it does look like you have a small screen for more than the background. The whole page is partially hidden. Does it look good if you zoom out to 90%?Held down the ctrl button and scrolled won once. Fits perfectly.But isn't it supposed to look like that without me having to zoom out? Link to comment Share on other sites More sharing options...
Fmdpa Posted February 11, 2011 Author Share Posted February 11, 2011 The only other thing I could do is make the background 1000px wide. But it would appear much too small on screens such as ShadowMage's (1920) or Sansana's (1440). Any thoughts are welcome. Link to comment Share on other sites More sharing options...
thescientist Posted February 12, 2011 Share Posted February 12, 2011 I'll just second again my suggestion. Make the background to be the width of the content, or at 960 - 1000px, whatever your situation is. With this container in the body, add a div before it and a div after it, and these can be your "wings." Create some sort of fade out for your background image so that it can fade out to a hex color, and make this color the background of your wings. This way, you're background will belend into the "wing" div's. With a container in the center, the two wing div's on the side will expand or contract as needed and they will handle the edges on large monitors, allowing for a graceful fade down of the background as wide as needed.the screenshot in this post illustrates the effect nicely. This is what it looks like on my 1440 * 768 ff and opera . Link to comment Share on other sites More sharing options...
Fmdpa Posted February 12, 2011 Author Share Posted February 12, 2011 I'm sorry, I didn't see your suggestion before. That's a great idea! I'll give it a try. Link to comment Share on other sites More sharing options...
Fmdpa Posted February 12, 2011 Author Share Posted February 12, 2011 I had a question: on the homepage, how can I get the "recent posts" and "recent photos" to display inline? I think that would be a much wiser use of space. However, I've tried everything I can think of and it still isn't working. Link to comment Share on other sites More sharing options...
boen_robot Posted February 12, 2011 Share Posted February 12, 2011 You mean on the same line? Float the outer divs (the ones containing the section title and content). But make sure you make the inner content divs 100% wide, and give the outer ones the actual current width. Link to comment Share on other sites More sharing options...
Fmdpa Posted February 12, 2011 Author Share Posted February 12, 2011 Thanks! I had to play around with the width to get it to work just right. I am just getting into the mode of using floats to position content. Until now, I've been using CSS "top" and "left" properties way too much. Since these two elements are floated, how can I prevent the foot element from overlapping (without adding a bunch of <br/> elements, like I did)? Link to comment Share on other sites More sharing options...
boen_robot Posted February 12, 2011 Share Posted February 12, 2011 You can wrap all floated elements with another div. Place an overflow:hidden; on that div, and you're set - floated elements will be within the div, and all following the wrapper div's end will be below. Alternatively, there's the clear property you could apply after the last (in this case second) floated element, but if I remember correctly, there were some cross browser complications with that particular approach. Link to comment Share on other sites More sharing options...
Fmdpa Posted February 13, 2011 Author Share Posted February 13, 2011 So that's how people get divitis! Link to comment Share on other sites More sharing options...
cousineaug Posted February 28, 2011 Share Posted February 28, 2011 I'm excited to announce that my project is finally online...no, it isn't officially launched yet, but I want you guys to be the first ones to test it. The address is cyberstream dot us. I am intentionally not linking to it because I don't want robots to find it yet. Thanks!I read once that doing white text on black background is difficult to do well.....and well you did. Congratulations.Very nice pictures and layout. Background works nicely regardless of browser width.Now that I am no longer a newbie, I feel qualified to make these observations:I can see why the nav bar is fixed width, but with all I have read here I wonder why the rest of the page does not resize with browser....and I could not figure pout the purpose of the cyberstream logo link since it is the same as home....guess it does not hurt to have 2 home links.SUBSCRIBE was not totally obvious to me, maybe add RSS or FEED, maybe even think about that orange logo, then I am sure what it is. Ooops second look i see a b/w RSS logo on the top right, would it be awful to repeat a smaller version next to subscribe?I read a few of the critiques and I see you have done much work..I only found a small handful of validation errors.I wonder if you got all the footer issues resolved.Guy Link to comment Share on other sites More sharing options...
Fmdpa Posted March 1, 2011 Author Share Posted March 1, 2011 Thanks for your critique, Guy!I'll make the "Subscribe" link clearer. I guess some people might think it is email, so I can see how the RSS icon would make it less confusing.I put the CyberStream logo on the navbar to balance the composition. Since visual people like clicking on the logo, I just pointed it to the home page. Yeah, it does seem a little redundant, but preventing any minor frustrations from users is my goal. The issues involving the foot were actually caused by preceding elements on the home page. It is fixed now. I'm not sure if I understand what you mean about the page resizing with the browser. Could you please expound? Link to comment Share on other sites More sharing options...
cousineaug Posted March 1, 2011 Share Posted March 1, 2011 I'm not sure if I understand what you mean about the page resizing with the browser. Could you please expound?resizing browser is one of my pet peeves....see what I said to Eduard about his site and options for resizing.You have a black and white textured image in background and it appears to be centered on the background- hence it moves as I resize the browser---that is good.Everything else is fixed width and the outer container seems around 950px (too lazy to check the CSS).so my question is what happens to your content when my browser is less than 950 window?**the first thing I lose is the search button at the top...no big deal**but when I get to 860 or so I have to scroll left-right to read the text on the home page.****this can be difficult on ABOUT page that has much text.**your image gallery pictures seem to have maximum width of 700px****so on the thumbnail view why not use the same width to accommodate narrower browsers****or use min-width (not very well supported yet)oh that brings up another small point. consider moving the NEXT PICTURE clicker above the picture. On a landscape image it is not a big deal. When portrait, I may have to scroll down to find the NEXT PICTURE button. see "/landscape/star-trails-over-the-alaska-range#photoholder"for example....Guy Link to comment Share on other sites More sharing options...
Fmdpa Posted March 2, 2011 Author Share Posted March 2, 2011 Ok, I think I see what you mean. When I resize this forum page, the text contracts. But it scrolls on my website, instead. Hmm. I don't know how I'd do that. I could make the container div 70% wide, but I don't want it to fill 70% of the screen. That's probably the only option to prevent the text from overflowing the screen in the X direction, though. I'll weigh my options. Link to comment Share on other sites More sharing options...
cousineaug Posted March 2, 2011 Share Posted March 2, 2011 Ok, I think I see what you mean. When I resize this forum page, the text contracts. But it scrolls on my website, instead. Hmm. I don't know how I'd do that. I could make the container div 70% wide, but I don't want it to fill 70% of the screen. That's probably the only option to prevent the text from overflowing the screen in the X direction, though. I'll weigh my options.have a look at the about pageok so you gave the body a width of 1131 and the container a width of 840...and some marginsin my opinion the only element that needs a width is the menu, let everything else float to 100% width, that is by not specifying a width. You want borders left and right so keep the left-right margins of 83 on the main container for about me.as a test here is my suggestiongive the body a class of 'test' on the about page and remove the width.then try playing with other elements, assigning different classes so you don't mess up the rest of the project. Remove the width on #container with something like body.test #container {width:auto} that will probably make your NAV wrap so put it in a box and assign it a suitable width.try to get it so that when I resize the browser, only the menu bar drifts off ot the right and the main content keeps its 80 some margins left and right. See what this looks like on my website . In my case the margins are really borders and they do have content but the principle is the same.Guy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.