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?
Related
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...
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.
Basically I've created a site, with image floated to the right.
Like this:
Everything works nice and clean, only issue comes when it comes to resizing/zooming.
I have modelled my site according to the standards and I don't have any overlapping elements or anything of similar sort.
Basically I've just set my main content to margin: auto; max-width: 85%; to generate the page content displaying in middle inside a class, while everything else is displaying on 100% width.
Everything works as expected, even at tablet sizes eg.
Everything is nicely centered in the middle while the rest of the site stretches out to the edges.
Now, however, when I start exceeding the width limits of the site/picture, issues occur.
Basically,
since my content width is set to 85% the picture begins to squish itself into the left side of my website, in order to mainstain the centering of the right site
Illustration below:
So I'm asking, is there any good method to prevent this from happening?
I presume the solution will be using #media port and resizing the image, or?
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