I want to recreate this side menu behavior:
I have HTML structure currently:
<body>
<header>
<nav>
<ul></ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
I want all visible area scale down once side menu is called, including footer if it's visible at the moment. I was thinking of wrapping main and footer in div and scaling it like in this mock-up:
But is it not against good HTML structure principles? And what tag will be best for it?
Code needs to be working in all modern browsers.
There are a couple of thoughts you can consider.
Only insert the wrapping div when sidebar is called to appear - Your probability going to use javascript to open the side menu. Your HTML structure will only be effected when opening the sidebar. When the animation/state closes you can remove the wrapping div.
Scale the two elements and place them together - You don't need to make the main and footer as one element, try to scale them down and place them near each other and make it look like one element. I'm aware that this going to need some back and forward correction. But this means you don't need to wrap the elements at all.
Make a screenshot of the page after page load - This is a more technical solution. There are libraries that can screenshots of your current viewport and make it an image. You can screenshot and place them inside the navigation element. I do think this is not the best solution, but still worth a mention. See: http://html2canvas.hertzen.com/
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
creating a html page like these is a bad style ?
<html>
<head>
<!--some script goes here-->
</head>
<body>
<div id ="body" style="width:1000px">
<!-- now all stuff is done here-->
</div>
</body>
</html>
I was just wrapping all the tags of the body into wrapper #body. Because when I minimize my browser window, The page is getting up side down and my page also involves stuff like float:left and float:right and some times tables. Even though I dont use float properties or tables, the words are getting rearranged when I minimized my browser window
When i starting use <div style="width:1000px"> the elements were still at their same position even though I minimized the browser window. So I was using the div tag right from the start of body to end of it to wrap up all body elements into one. I was using just for width size
I wonder is this a bad style of designing? if it is then how do i stop web page from rearranging when i minimize browser window or when monitor size is too small to handle.
If you really want your page to be 1000px wide whatever the browser, it's OK. If you intend your page to degrade/resize/rearrange gracefully on smaller devices (phones, tablets, etc...) then it's obviously not. Simple as that.
However, designing a page to degarde gracefully requires work from the ground up : layout, stretching, menus disappearing, etc... it's not just a matter of everything working automagically.
Last point, instead of your own wrapper, I would suggest you go with a CSS grid or another (eg http://960.gs/), then first use a single row and a full width div. Then, as dev goes by, you might find yourself using more and more the grid to layout page elements, because it's simple, elegant and visually appealing. And the more your page will rely on the grid, the more it will be resizable.
I'd suggest looking at http://www.digital-web.com/extras/positioning_101/css_positioning_example.php as it covers most of the basics for positioning html elements.
From a semantic point of view I would not reuse words such as 'body' in an element id as it's unnecessarily confusing especially when writing CSS or JavaScript relating to it. Most English speakers tend to call the main page div 'container' or similar to differentiate, but if English isn't your first language then use whatever makes it easier for you to understand.
I'm looking to produce the effect that is on this page: http://jonrohan.me/guide/css/creating-triangles-in-css/ - but with just CSS, no JavaScript (this would be trivial with JavaScript).
The effect I'm talking about is as follows:
Initially you see both the page header and the article title.
when you scroll the page header disappears.
The article title becomes fixed to the top of the page, so you always see it as you scroll.
The best I've managed to achieve so far is this:
http://jsfiddle.net/nottrobin/2FSvx/
But I don't like the duplication of the <nav> inherent in my solution.
Does anyone have any clever CSS/3 techniques they can think of to make it so that when you scroll down and the <header> disappears, the <nav> would naturally ride up to the top of the page?
Your example has some issues, if I scroll the webpage down or up sometimes the two navs overlap and the content is displayed twice and overlapping.
As far as I know, there is no such technique to obtain the same effect using only CSS, JS is required.
You can position elements using CSS only in a static way (normal page flow), fixed way (relative to browser window), or absolute/relative (relative to the nearest parent with a position set to relative).
You cannot "listen" to a scroll event like you would do with JavaScript, hence you cannot position an element relative to the amount of scrolling, nor change its position value in real time, because you will need JavaScript even for this.
CSS is a presentational markup language, properties you assign to elements using CSS rules cannot be changed on an event-basis.
You could do something like you did, but that means more markup language, more CSS and more maintenance difficulties.
You should use JS to optimize the user's experience, if a user has JS disabled, he/she will see the normal page behavior, otherwise the nav element will remain still, like all other websites do.
I am building a website but I started with a template and gutted it, changed a lot and got rid of the entire center section and now I have to start over with the body but whenever I try to insert the navigation menu, which is a javascript code that is inserted from another program I used to build it. Well, every time I try to insert the menu on the left side of the page, it falls outside the alignment of the header and footer, so instead of it being straight aligned with the header and footer on the left side, it is on the outside of where it should be. I'm absolutely retarded when it comes to this stuff so if someone could tell me the trick here and for building the content of the body. Just simple stuff like what html code and tags to use for making the boxes that you can insert things into, not image placeholders but boxes to input content like navigation menu or anything really?
HELP PLEASE.
here is the site.
Retairacket.thexdt.com
I also get an invalid URL error.
By the sounds of your problem though, you should be able to fix it relatively quickly and easily. I assume from the sounds of it that your header and footer are a fixed width and that there is likely a fixed width block within the body that is forcing the body to be wider when you add in the (most likely) fixed width nav as well. If that's the case, then you will just need to change the way you are controlling the widths to suit the new nav bar. So reduce the width of one block to accomodate the width of the new one, make sense?
Remember, I haven't actually seen what the problem is, so I'm just guessing from your question here based on the most likely sceanario.
I would also recommend learning the basics first. Designing a website isn't as everyone makes it out to be. As an extreme beginner without using WYSIWYG editors, coding HTML can be very complex. There aren't just "tags to use for making the boxes that you can insert things into."
Yes, there are <p> and <div> tags that will do what you want, but you need to understand what each tag does and when to use it.
I recommend the following sites:
w3schools
HTML Goodies
Webmonkey
Search Google for "HTML basics"
That URL isn't valid, apparently.
I also can't see your page, but I can see http://www.thexdt.com. Is the design similar to that page?
That page uses tables for the general structure. Is there is a large image or something bigger that the width of the external container?