Building this site and noticed that under 1100px it breaks (footer and header). I know its because of the absolutely positioned elements that hang on the side of the pages but can't figure out how to make sure the header/footer are 100% of the browser width.
Since its a parallax site I will spare the nonsense of pasting all the extra markup in here and send you to the direct link
Any thoughts or ideas would be fantastic.
Related
I've created a static portfolio site for myself in GitHub Pages that is incredibly simple to keep maintenance easy. I have a 3-line title at the top of every page that acts as a navigation. However, I've somehow created a small (10 or so px) shift between the home page and all of the interior pages.
When I inspect the code in DevTools, I can see that the content for both pages is 600px wide with a 25px padding on either side of the content. The horizontal content margins are set to auto to center the main content block on each page, but on the interior pages, the margins are slightly different than the home page.
The home page - https://www.parkermyers.com
An interior page with a single img - https://www.parkermyers.com/about.html
An interior page with multiple img tags - https://parkermyers.com/nighttrain.html
Hopefully you can see that there is a shift in the margins when navigating from the home page to either of the two provided interior pages.
The furthest I've gotten in troubleshooting is that it's probably related to the img tag that is present on all interior pages but not the home page (could possibly be the surrounding figure tags as well). For example, on the /about page of the site, when I delete the lone img, the content margins shift a bit and realign with the home page.
So my best guess is that there's something to do with the width or size of the image that makes the content slightly larger and thus affects the margins, but I've messed around with the width to no success.
The comment that mentioned the scroll bar helped me troubleshoot more efficiently to find a solution for my problem! The issue was not directly the img tag, but the vertical space that the images took up meant that there was a scroll bar on the interior pages and not the home page.
After using that knowledge to dig further, I found that
body {
overflow-y: scroll
}
created a permanent space for the scrollbar whether it was being used or not. This solved my alignment issue! A small side effect is that the space for the scroll bar is not invisible when not being used, but it's a small price to pay for consistent alignment.
I found this question: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
But this doesn't solve my problem, because the stone age email clients don't support all of this wizardy.
What is a good way supported cross most (or better all) email clients that pushes the footer to the bottom of the screen if the content isn't long enough?
When I set a min-height on the content the footer will sometimes outside of the screen and above is just a lot of whitespace.
position isn't an option here because thats not really supported and I don't want the footer to overlap my content.
Currently my footer has no fixed height.
As far as I'm aware, you can't. Website techniques require a calculation of the screen height, completed by the CSS method you're using and then distributing that dimension to the main content to allow the footer to sit perfectly at the bottom.
These techniques won't work in all email clients for all of the different screen sizes.
If your content is too short to reach the bottom of a phone screen, that's a bigger concern. I don't understand a full template build for a short message.
And setting a height on your content or padding the sections out enough so your footer is a little lower shouldn't be an issue in this day and age.
The fold is so over hyped.
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
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 have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.