I have some pictures I am using on my website. I am trying to reduce the http requests. In my header I have my logo floated left and then another picture with special offers etc floated to the right in the same div. My question how do I combine these together and still work out the amount of space I need between them as I am using a fluid layout.
Would you also advise combining the main background image with these logos etc and if yes how do i do this so it still looks correct in a a fluid layout
Related
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
I'm trying to make a social page which will show the social feeds that my company use.
I've managed to use padding to align the feeds the correct height and bottom padding
although, I can't seem to align them with spaces in-between them.
Am I maybe better off turning social feeds into an ID then creating individual classes for each of the feeds?
If anyone wants a link:
http://surfersyard.co.uk/dev/social.php
I would make the three columns (containers) in separate divs (you can use the same background image adding separate background-positions for the divs), so you can align the iframes to the center of containers
Ok so i am trying to create a 3 column layout with css and html on Expression web and when i view it in a browser my left panel div column overlaps my heading div column and my right panel div column overlaps the header also.Plus theirs a lot of white space between my main content column and my right panel column. Its no white space in between the layout when its minimized but it still overlaps.please help
I'm not sure what your specific problem is without seeing your code. I find the best way to learn CSS is by example. so, I'd suggest looking through these.
(I haven't looked to see if these are using the latest design standards)
http://layouts.ironmyers.com
Or my favorite layout.
http://alistapart.com/article/holygrail
I am working with a responsive web layout I've diagrammed in the image below below. Red areas are fixed on the screen, green areas are independently scrollable sections (blue = scrollbars).
I'm wondering - is there any way (without iframes) to take the main content section of this layout (the green area on the right) and treat it as if it was the viewport itself so that the contents and styles would work as if it were it's own independent full screen?
The reason I'm trying to do this is because I'd like it to be as easy as possible to just fit a 2nd website's content straight into this main content section without having to adjust all of the pages to now fit into the narrower section of the site.
The 2nd site was built using twitter bootstrap for the scaffolding, and since the containers are all created relative to someone's viewport size, they do not fit neatly into the slightly narrower content area (given the left sidebar) without having to adjust all of the scaffolding. I'd rather not have to adjust everything on many pages and therefore, I'm looking for a hack to see if I can just make it fit (crossing my fingers that something exists!)
In addition, the left sidebar is collapsible - so there would be a case where the main content section would take up the entire width of the viewport. Hence, I would want it to dynamically adjust.
It seems like I have 3 options:
Go through each page of the 2nd site and rework all of the scaffolding in each page to ensure they work with a slightly narrower section, essentially treating the left sidebar as the first span column, and then adjusting the entirety of the site to work within the remaining width. This option doesn't really work because if the sidebar is collapsed, then the main content area takes up the full-width and would now be narrower.
Use iFrames - I am NOT considering this due to all of the implications.
Somehow treat the main content area as its own viewport so that all of the scaffolding adjusts to whatever size it is, as if it were the viewport itself, or a full screen .
Is this possible somehow?
Is there perhaps an alternative solution that might be even better?
Thanks!
I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.
I want the images to butt up against each other with no gaps in between. The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns.
float:left
is ALMOST, what I want. Except when there are tall images in the page I get this gapped look:
How do I eliminate the gaps?
Not sure how graceful you need your CSS, but a good option none the less. You could use masonry.js to help that.
http://css-tricks.com/seamless-responsive-photo-grid/
If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images).
Alternatively, you can use jquery plugin like this one.