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.
Related
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/
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});
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?