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.
Related
Please guys help me ... The sidebar will be allways active so i need to center the content on the webpage such as the highlighted text. The problem is that it's centered with width of the whole page counting the sidebar. can i divide the the widths somehow? the sidebar is made in bootstrap it's made with cols so i dont know the exact width.
You can post your code, but the general idea would be for you to place a div next to sidenav (to the right), you can do that by setting the margin-left to the width of the sidenav and center the text in that div
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.
I'm trying to create a bootstrap nav bar with three areas. Left, Middle, and Right.
Left side will have a user avatar portrait bar, middle will be a search bar, and right will be some buttons.
I'm having trouble centering the search bar. Any ideas on how to implement this? I would post my attempt, but it's become so cluttered its quite unreadable now.
After a few edits and help from those below. I have done this.
http://www.bootply.com/azFiegnAoO
But now there is a small problem, the width of the navbar set at 100% is wider than the page and extends a page a bit to the right.
set the width of the left and right part of the navbar to be equal and add margin: 0 auto to the css of the navbar
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">
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.