For a client I want to make a design with CSS, which looks like the facebook-image-container, like this: http://pho.to/bGEg79. Does anyone know how I can do this? The general idea is to make a box, centered on the page, with the left half of the box being a picture, and the right half containing the navigation and content. Is this possible with CSS(3)? If yes, how can I do that?
Thanks a lot in advance!
This would be the basic layout and you could customise the dimensions: http://dabblet.com/gist/2406917
Related
Is it possible to make an single image change based on where your mouse is positioned on the image?
If so, how I would I accomplish something like this?
Theres a concept of z-index which basically means that how the images are aligned in vertical space..You can stack all the imagesone above the other with only the topmost being visible..Then depending upon where the user is you can change the layering of the images on the fly.. But without any code its a bit difficult to know where are you stuck/what have you tried?
i am looking forward to make a welcome screen of my web app like the picture i shown..
here is a pic of example:
http://img600.imageshack.us/img600/4144/1j5h.png
The truth is i have tested many almost all the panels that GWT has to offer, and still i cannot make it.
For example:
The upper header, i made it with a DockLayoutPanel like this:
DockLayoutPanel Header = new DockLayoutPanel(unit.PCT);
header.setStyleName(¨fw¨);
header.setWidht("100%");
header.setHeight("35px");
header.addEast(ingresar,15);
header.addEast(pass,15);
header.addEast(user,15);
Using that panel, i can have all the 2 boxes and the button on the right corner of the screen, and with AUTO-WITDH.
*(even i cannot pad the red button)..
As you can check the horizontal Center Panel has a different style, i create it as Horizontal Panel, but when i do :
header.add(center_panel);
It is useless, the css from header will ofuscate the css from horizontal panel, also i cannot get the box right in the CENTER.
i have zero experience in GWT, i would like if someone can tell me the way, because i am using panels and i am not quite sure that i am using the right ones for this tasks, or the best ones.
THanks very much
Facundo
If you don't have much experience in GWT components try creating the UI with using GWT UI Binder. Its much more similar to creating a layout with html and css. Also you can use most of the html elements such as divs,spans etc.. GWT Uibinder
You can give styles on individual panels like,
for horizontal,
HorizontalPanel hp=new HorizontalPanel();
hp.setStyleName("");
I'm using bootstrap. Everything is pretty much set, but table.
When I'm seeing my website with smartphone, it shows with responsive design but table looks pretty messy.
All the contents stick out from the edge of table.
What would be the best way to handle this kind of thing?
Anyone has any idea???
Update:
you need to give it a min-width. This happens all the time. If you look in your browser and make it smaller you can see the same problem when you scroll to the right. The background does not the scrollarea unless it has a width.
Here's the JSFiddle (disregard the differences with picture below):
http://jsfiddle.net/stapiagutierrez/y2PhX/
I'm supposed to have something like this in the white background, but the images in the center and right column seem to expand outside of their domain.
Any suggestions on how to cleanly handle this situation? It needs to be nice and centered, needs to end up like the picture, I feel I'm close but can't quite get there. Thank you, learning quite a lot in this tag area in Stackoverflow.
Use pixel widths, not percentage.
Actually I think it is a bit design issue.
Question is, if you have programmatically generated tabs -let's say by using repeater control- at the top of your masterpage, how do you handle them after you have too many -so that they do not overlap the view-port of the browser?
I don't want to reinvent the wheel if there are already some patterns for such an issue.
Any recommendations?
Thanks
If your tabs are going to be dynamic you should probably move them to a vertical side bar as opposed to a horizontal tab, this would make it more scalable. To maintain a consistent look and feel its probably a good idea to have static main tabs at the top with dynamic associated vertical tabs. Not sure if this helps at all?
If you want to maintain a horizontal layout, you will need to reduce the nav to viewable items and have some sort of < and > at the left and right edges of the nav to enable the user to scroll to the prior or next viewable set.
Not sure if this is what you are looking for.