Jump to content

It's Live: CyberStream!


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites
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 . Edited by sansana
Link to post
Share on other sites

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%?

Edited by Fmdpa
Link to post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

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 .
Edited by thescientist
Link to post
Share on other sites

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.

Edited by Fmdpa
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
  • 2 weeks later...
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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...