I have a 1024x768 background image that I want to place a table over so the cells of the table align with a "grid" in the background image.
This would be sort of easy with judicious use of margins and padding, etc.
The problem is I would like the background image (or floating image) to auto-scale/size and hold it's aspect ratio. (This is easy, too).
However, I can't figure out how to get the table to properly and always align itself to the image, even when the size of the window (and thus the image changes).
What I really want to do is to just sort of say "make this entire layout (including the table) 1024x768 - but then scale the complete rendered page up-or-down to suit the window size.
Seems kind of simple - but can't figure it out...
Related
My friend has a blogspot blog. On my computer, everything looks good but the three columns she uses become smaller on hers like this:
That's mine.
And that's hers.
On the left there's an image as background and the other two is the main section where the posts are and a sidebar on the right side.
And I found these text in the middle of the code:
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit. This results in a
margin-width's worth of pixels being cropped. If the user is not using
shrink to fit then we expand the header.
I'm not very great in these things so I have no idea what should I do. Any guesses?
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
I'm going to try to explain what I want to do with screenshots.
This is how my website looks right now, screen size 1920x1080:
https://gyazo.com/95cc6f61a449f67fb00232a7619a58d7
This is how I want my website to look:
gyazo.com/c5cf33080a04f0d3d9b5b0252f013ba3
BUT! I don't want the logo to resize itself, I want it to remain the the relative position of the shape it's on after it got resized.
Practically, I want the shape to remain the same size regardless of resolution, how do I do this?
I tried editing the CSS and using the 100%/auto trick but it's not what I want to do.
http://www.templatemonster.com/demo/58241.html is what I'm trying to replicate in my example. (THIS IS ALL FOR LEARNING PURPOSES)
Try zooming in or out on that page and you'll see the shape is keeping it's form regardless of zoom level.
To keep the logo from resizing you need to set fixed width and height with a pixel value. Ex: 150px. That should keep it from resizing itself.
Keep in mind that to replicate that example, you need to involve the original logo with a responsive element.
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
I am trying to learn some html. I have a simple layout where I am trying to draw some boxes, but one of the boxes is being partially being drawn off screen at the bottom. I thought the browser was automatically suppose to figure out the height.
I am able to fix by adding some at the bottom to make the height of the page bigger.
The messed up layout is here:
http://letschat.info/test/index.php
The fixed layout is here:
http://letschat.info/test/index2.php