I've made an Image of what I want to archieve.
The logo resizes on different screen resolutions and the actual navigation container is just as long as the <li>'s.
The bottom border needs to reach to the lower left edge of the logo.
The logo itself has a shadow below, so the border cant be full width.
What I've got so far is that the nav itself has a border which then only reaches to the last <li>
This is a quick mockup:
http://jsfiddle.net/2x6hddv8/
Here's most of it -- they just called my flight!
http://jsfiddle.net/8k45z7nL/
I'd avoid the skew for maximum browser compatibility.
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
I have a tricky CSS situation which I can't seem to solve.
I'd like the top portion of the body background to be one color (white), and then fill with another color (blue) from a certain position downward (below a footer in my case), and ensure that this color always fills (bleeds) to the bottom edge of of the browser window, regardless of window size.
I tried using a small blue bitmap, specifying the starting position via background-position, then applying background-repeat: repeat-y, but it fills in both directions.
I also thought of creating a long div but this affects the canvas size -- browser adds scroll bars, mobile will render the entire size -- no good.
Any ideas? (I'm not looking for a sticky footer) Thanks!
You should just add the background property in your footer instead.
Then you add some huge padding-bottom and add a negative margin-bottom of the same amount.
Just make sure you have an outter div with overflow: hidden;
FIDDLE
I have some problems with a project and am on a thight deadline.
The problem:
For a webproject the header consists of a full-width background slider and a menu containing the logo and menu items see: (http://d.pr/i/ln6N)
The problem I have is the way it is divided, the red part acts as a slider. The logo has some space between the menu bar.
How would I go about the transparant space arround this logo?
What I have now is a 100% width div containing the list items and logo on top of it.
I can't figure out how to get the white space on the left and right of the logo while the menu bar is 100% width.
I hope the image (above) clarifies some as I just don't know how to handle this one.
Thanks in Advance,
- V
I got it fixed, dirty tho..
In the image the gray area is one big image with the center cut out so i can place the logo en menu in it so there is some transparant space left.
At the top of this webpage, there are two elements in the main content area (white background): an image and a logo box.
The logo box is floated right and the image has a right-margin which is sufficiently large to accomodate the logo box and a little padding. However, if you make your browser window sufficiently narrow, the logo box slides underneath the image. What I would like to happen is that the horizontal space between the two decreases to a minimum of 6 pixels, and if the browser window is made any narrower, horizontal scrollbars appear.
Is there any way that I can achieve this without resorting to a completely 'frozen' layout, i.e. setting a fixed width on the main content area?
Thanks,
Don
The css min-width property does what you want. Doesn't work in IE 6, though. For that some JavaScript can help out if it's really necessary.
Set the white DIV's min-width to the size of the image + the border.