I ask for a small help with two layouts:
1- In the master page I want the put a logo next to an upper bar.
How can I create such positioning:
a logo aligned to left and close to its right the bar's div.
2- In on specific content page I want to create two divs which split the center equally
and beneath the a wide div.
here is my lame try for the top-bar
http://jsfiddle.net/vYgLL/
Will tabular layout be the easiest?
Related
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
I am new to using Skeleton CSS grids, so please excuse my ignorance!
My problem seems a simple one at first, but it's had me a bit stumped.
Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:
On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.
The default behaviour of Skeleton is to stack this sidebar on top of the main area.
Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?
Thanks,
Michael.
How would I achieve the below shown design using html and css?
The sidebar should be on top of all other items such as logo and menu and content. The menu should be behind wrap the sidebar. The content are is in 'L' shape. The content area should go up to sidebar and the come below the sidebar. The sidebar length is less than the total content area.
Here is a good rough draft to get you started.
(http://jsfiddle.net/tech0925/Sm8HB/)
Cheers!
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)