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">
Related
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.
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
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.
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?
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");
});