I have created a page which contains 15% space for header and 10% for nav bar and remaining space for iframe. In iframe the displaying of main content will be done.
So coming to my problem how to acquire responsiveness of the website, when i zoom in all the contents just come out of its allocated container. Can anyone help me to solve this
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'm in the process of developing a website which uses the layout of having the navigation iframe on the left, and the content iframe in the middle. Given that some of the pages which will display in the content iframe have significantly less text than others, I don't want to just have some arbitrarily large height value for my content iframe as that will result in unnecessarily large amounts of whitespace for most pages.
Ideally, I should be able to scroll on the content iframe while leaving the rest of the webpage in place, and I should be able to scroll only as far as there is content on the currently loaded page in the content iframe (maybe plus 25 pixels or so just for some nice padding).
Currently, the code for the content iframe is as follows:
<iframe name="content" src="content.html" style="height:2500px; width:1500px; border:none; position:absolute; top:215px; left:205px; scrolling:yes; overflow-y:scroll;" title="Content Pane"></iframe>
I want to avoid JavaScript if at all possible. I've went on probably a dozen different websites now to no avail, but this seems like it should be a simple problem to solve.
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class
I'm pretty sure the question has been asked and answered, I don't know HTML and CSS well enough to know where or how to search. Any help would be appreciated.
I have a community application built in Silverlight: http://www.scalerailsonline.com/default.aspx
Having finally decided to give Microsoft the chuck I'm rewriting it from scratch. 90% of is pretty easy. I'm struggling with the HTML and CSS to accomplish the chat portion of the app.
I've marked up a screen shot to show what I'm trying to do.
The main goal is to create a scrollable container that expands and contracts to fit the available space.
First I want to have the web page expand or contract to fit in the browser window.
Second Right column expands horizontally to fit the content and the bottom area expands vertically to fit the chat entry controls.
Once the page is fit to the browser and the space is committed to the right and bottom, i want the container to fit. If the content in the container is too much (99% of the time it will be), then vertical scroll bar will display.
I have tried all kinds of combination of width/height: 100%. But that just seems to make the areas big enough to fit the content, not constrain to a 100% of the browser.
I can set the div to "Height: 200%; Overflow: Scroll" to get the scroll bars. But I just don't seem to be able to get the div to expand only to the available space.
First I want to have the web page expand or contract to fit in the browser window.
This can be achieved by setting the margin left and right to auto. Try this -
.center {
margin: 0 auto;
padding: 0;
float: none;
}
The answer is: There really isnt a good answer. Resorting to java script resize event to set the hight of the box based on screen room - heights of screen elements.