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
Related
so i have to code a responsive layout that is very very similar to this solar system picture i'm linking.
Basically i'm using as page background an image of just the sun and the planets' orbits and now i have to place all the planets as SVGs right on top of their own orbit's line, like in the picture.
Positioning the planets using position: absolute is easy but when i shrink the page everything becomes messy, of course.
The background image is already responsive but how can i make it so the planets as well stay in place even after i shrink/expand the page?
Found a way: i used a grid that covers the entire page and put the SVGs of the planets in each grid's box. I'm using tailwind and helped myself with this website btw https://www.tailwind-tools.com/grid
My web page is simply consisted of 3 sections:
1:section 1, on the left, it is responsible for displaying messages, it is a small area and is "aligned" to the left of the screen.
2:section 2, on the right, it is another area and is "aligned" to the right of the screen.
3:section 3, on the middle, it is the "main" area of the page and it is consisted of quite a few number of elements that "fixed" with the screen by many div tag. I really think I over use the div here.
I have already made the section 3 look organized by manually fixed (define absolute position and pixel) those div. But it only look good in my computer with one screen size. I want to make it responsive to other devices by using mediaQuery. But since I got so many div it will be a pain to specifies the position for each. Can I wrapp the whole section 3 with another div wrapper and then just change this wrapper position? I tried but I failed.
Or is there another efficient way? I am open for bootstrap but I can not find any framework similar to my design. And My design is really simple so get it done without a template would be the best.
Section 3 looks like this:
https://jsfiddle.net/9jpdw4f7/
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
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.)
Check the rounded corners of the main tabs in this site Those are background images with width of 440px, and still it adjusts to the containing element without loosing the rounded edges.
Looks like the list item and anchor both have the same background image, just at different offsets.
The image is set as the background for each of those elements. The anchor is set to show the left most portion of the image while the list item is set the right most portion with right padding just wide enough for the image to peek through. The technique is known as Sliding Doors. Here are the links collected from the other answers:
A List Apart's Sliding Doors Part 1
A List Apart's Sliding Doors Part 2
A CSS2 tutorial
A CSS3 tutorial
Thanks Mariuz and Darko Z.
they are using a technique known as "Sliding doors". You can read more about it at A List Apart:
Sliding Doors Part 1
Sliding Doors Part 2
There are several tutorials on rounded corners on the net.
Using CSS2 you can try the following:
CSS2 Tutorial
If you want to use CSS3:
CSS3 Tutorial
A simple google search for rounded corners will give you many helpful tutorials.
It may be only peripherally relevant, but we should be careful not to leave it to the browser to resize large images to a more practical size.
Why fill a page with large images if they're only going to be scaled down by the browser?