Fixed sidebar and floating content! Need help......looks cool though!

Twisted Tree Media

Twisted Tree Media

Member
Hey guys,
I need a bit of help with my photography website!
I'm trying to incorporate RWD in with my online photography portfolio. I'm going to attatch a very crude design that I've scanned in, I need a little help seperating the fixed sidebar (left) from the floating content which is responsive. they just keep overlapping at the moment.
The sidebar is set to fixed, but fixes at absolute too, but the content still over laps. Anyone got any CSS knowledge they think will help? The content is inside a wrapper, the sidear is just based in the body, no wrapper.
Anything else you'll need to knwo to help let me know!
img001.jpg
 
I can't work out what you mean. If the sidebar is to the side, how come the content ends up overlapping it? Have you defined a width and max width for the sidebar?
 
Yeah defined width and max-width of 360px, but it just sticks to the left side like the sidebar, and ignore's the margin: auto; i put in place on the left and right side
 
NAILED IT! Turns out it helps if your'e not a complete spanner and rushing into it :D
I had the #wrapper acidentaly inside the .sidebar class, but now I've done it and just figuring out hte measurements before i start putting content in!
http://customerlogin.twistedtreemedia.com/
It's going to be anywhere near ready for tablets and phones etc. for ages!
 
Glad you got it sorted mate. It doesn't appear to be working on that link though?
 
Hey guys,
In response to my first draft of the site ( the crudley drawn picture ), I've done some more work with my responsive design site. I've just finished putting some rough touches to what people have about the menu and sidebar covering everything in smaller res screens and just been testing it with my Iphone to get an idea of sizes.
www.tomadamsphotography.co.uk
Anyone else got points and critique they wanna throw towards this? I'm contemplating putting up some of the CSS coding as well at the end.
This is the last bit of rough calculations and design before i start getting content and galleries up there, so rip the s**t into it so i get it right first time with everything up :p.
 
to put it bluntly... that side menu is not going to work on a phone.
Also you might want to check the title font size, 'photography' is outside of the side panel on my display :)
 
Also, as far as the term responsive is concerned, I believe it's more than just content boxes that re-size. I think you'll need to make it change layout in order to best fit the current resolution it's being viewed with in order to call it responsive.
Levi is right, that side bar won't work on a phone, so you'll have to make it responsively adapt on resolutions smaller than XxY by removing it and placing it at the top or something.
 
Had a chance to grab screenshots from 2 of my android devices in protrait mode (the most common way of holding these types of devices), nexus 7 (800x1280) and my phone (480x800)
2 images per device, one showing how it loads on my screen without any adjustment, the other showing it zoomed out. Nexus 7 is using chrome (didn't bother with firefox) and my phone is using the android 'browser' (the one before chrome)
ok.... I can't add attachments... it says "You have exceeded your allotted disk space for attachments"... Squiddy/Tony, you might need to get that fixed...

excuse the vol control on one of the nexus 7 images...

First 2 are nexus 7, last 2 are from my phone. If I get a chance I'll try it on my touchpad (1024x768) later
As to the responsiveness... don't get disheartened, it's not the easiest thing to get to grips with but it's worth it in the end... coming from someone who is going through the same 'revamp' of their site lol
 
Guys thankyou so much!
Yeah the sidebar when it gets onto smaller screens I want at the top like a normal menu, I dont think the measurements were set properly but with Levi putting up his Re I can fix that properly, the side bar was going to be mainly for large screens to get only the content flowing!

The font and sizes have been a bit irratic lately, thats something I've got to get nailed soon!
Thanks god its only a test site for the moment!
I've got a day to myself tomorrow so i think this will be my first port of call in the morning!
Does everything else seem to work ok for you guys then? The font/color and size not too off putting?
 
as you can see with one of the images, the sidebar goes white at some resolutions... as to colours, white on grey works but I'm not sure on your choice of font, it's not nice to read for long periods. Size of body text on my 1680x1050 seems a little small relative to the size of your site and the y from photography sticks outside (about half of the letter) of the left bar.
none of the side links are linking to their box (assuming they're meant to be anchored) and stick all that css in a css file and link to it, tidies up the html on the page and is easier if you ever add additional pages
oh and a great tool for checking responsive sites - firefox add on called firesizer, you can set dimensions rather than dragging your window etc
 
There we go, the attachments glitch should be sorted. Limit upped.
 
You must log in or register to reply here.
Back
Top