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.)
Related
I am having a bit Problem with my 3 buttons that I am using for my site. I somehow managed to show all my three buttons in a single line (As you can see in the snippet) but I am not able to make them responsive. Means, when the screen size reduces (i.e. to 380dpi), I want my 1 out 3 buttons to shift to the bottom and the rest 2 buttons to remain on top but in center. As you can see in the attached picture.
I am not good in coding, that's why I request you, people, to help me.
Set 'flex-wrap: wrap' to the element with a class testing.
I'm creating a very specific website design that I hope will turn out like this: http://prntscr.com/298r2m Problem is, coding isn't one of my strong points.
What I've got so far is this: http://prntscr.com/29i0ed and as you can see, the content background is under the Navigation menu and below image. I was wondering how to change that so that it ONLY starts at the point where the posts begin like in the picture above?
Also, does anyone know how to add a top and bottom border to the content background, instead of it looking like it's been cut off? I use blogger.
Cheers!
If I did, you just have two elements to the image and the body of your blog and being elements with different colors, I hope it helped you
I have a secondary navigation at the top right corner of a site design. It is an awkward shape - 3 rectangles rotated - and all 3 need to be clickable.
It is a Twitter Bootstrap responsive site.
What is the best way to make them link? An image map seems too dated - chopping up 3 clickable images is awkward due to the angles involved. 3 Div's on top maybe? How can the DIV's keep correctly aligned with their targets whilst remaining responsive and working with Bootstrap?
UPDATE
The click areas need to stay in the top right over the image the whole time at every responsive width - including the mobile size.
You need to use css-transform to achieve what you are looking for.
Read the below for more details.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.