Can you please point me in the right direction?
What I need is pretty much what these two random pages have:
vmware
chmprocessor
I need a layout with a header + footer and a left menu.
I am building this in asp.net and in the left sidebar I will have a treeview control.
Maybe use Master page and load user control in the content area or something similar.
I have googled, like: 2 column css layout etc, but it looks like it wont work.
I tried this one: Netrostar
and some other but I cant enter jsfiddler urls for som reason.
The left menu has problem. If I enter a long text, it will show up in the content area.
So the left sidebar must somehow have a dynamic width.
Since the left sidebar can have need for beeing very wide (if we are looking deep in the treeview hierarchy)
it is pretty convenient to use frames as they do in the two examples above.
But that was not recommended even 10 years ago, I guess.
Im no good at css, so I probably need a working example.
How would you have solved this?
Thank you
Related
I developed a CSS-based layout for a web application that has been locked down and awaiting back-end integration. The primary element on the page is a timer/clock.
As originally intended, the timer is just a timer and is very simple. It looks like this:
Now, the boss has asked me to make a pretty significant change to my design. They want 3 tabs to hang off the bottom of the clock. They did not want this before, so I didn't build any show/hide logic and I didn't build tabs under the clock either. I am also slightly concerned because the tabs are at the bottom of the clock - that seems like a point of curiosity but I am guessing it is not huge problem either. Clicking on any of the tabs needs to cause the tab that was just clicked on to have focus, and it would cover the black rounded rectangle and display information about the tab the user clicked on. It would cover the clock. I would describe their request as reasonable, but I wish I'd had this requirement when I was coding. I think it sounds like a relative of a show/hide toggle. This is how they want the tabs to look, and where they want the tabs to go:
The part I am getting stuck on is how to slipstream something like this into what I've already created for the clock. Effectively they need me to make that component much more interactive, as the tabs have quite a bit of functionality within them. There are 3 tabs that I envision needing, but the mockup only shows 2, and that's ok.
I've included a few images in this post and I hope it helps. I've spent nearly a week smashing my head against this and I am stuck. To sum it up, I need to introduce (or shoehorn) a show/hide component as part of a late-hour change.
I am decent with CSS/JS/Web dev, but this is my Achilles heel. By "this" I mean taking a part of the UI that I already created and making it behave totally differently. In this case a pretty simple timer needs to change and has to have tabs at the bottom of the clock that would cover the clock itself when clicked. I hope I was clear enough in this question.
You have a very simple way to resolve this, using JQuery (you can use Javascript on it's own, but this will make it easier for you, less writing).
The give an ID to the DIV where you have the HTML for the clock, move the entire HTML content into a declaration like this:
$("#myDivId").html("put all the HTML content here, don't worry with the size of it");
you just need to change the HTML based on what you want to display. For easier implementation you can create a variable for each different content options, like this:
var myFirstHtmlBlock = "<p>blah blah blah</p>";
var mySecondHtmlBlock = "<span>Anything else...</span>";
and then change the content using those variables:
$("#myDivId").html(mySecondHtmlBlock);
Just let me know if this sorted out your issue.
I have a Drupal 7 / Views question...
I have a site with some data reports displaying in various graphs/ gauges etc. I also have a "Data" page that shows all of the data used so the user can look through it and/or even download it. My problem stems from the views table overflows past the screen on the right with data. This in itself is not a big issue, but I was wondering if there was a way to contain the view inside a fixed size box/container that is scrollable. Much like a text box.
Again, not that it would help the functionality but sure would make it look nice and clean.
Thank you in advance.
I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)
Is it even possible to have 2 different displays of the same secondary navigation on a menu?
For instance my client wants to have a horizontal main nav...with a horizontal secondary nav and ALSO a drop down secondary nav - both with the same nav links.
I ask, because they want a tertiary nav that appears horizontally OVER the horizontal sub nav. If that happens though, the user will NOT have a way to get back to the horizontal secondary nav to choose a different link unless they have a different way of getting to it. Hence the dropdown secondary nav.
I know... crazy. If I could get a definitive answer that there is NOT an easy way to get 2 secondary navs to appear at the same time, then I go back to my client with that answer.
I hope my explanation wasn't too confusing.
Rather than start with code, I would start with building a mockup.
I have found as a entrepreneur and a developer, mockups are mandatory. This is especially true of my own projects. I think I know what the UI will look like. However, once the mockup is done by the UI designer, sometimes I discover I didn't really like the result.
I now tell my UI designer to mockup what he thinks I am describing before we build live code. If we have a disagreement, I ask him to show me rather than tell me.
About half the time, the mockup demonstrates that the UI designer misunderstood what I was asking for.
Do a mockup. Get clarification. Then worry about the code.
i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code