I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
Related
I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.
Coding a header to a website which will look like this:
Having problems creating the 5px indent under the "People" link, which is intended to indicate the active/current page. I know how to "fake" this effect by using background images/colors, etc -- but the content underneath is going to be different on each page (sometimes a solid color, sometimes the background pattern shown in the example, sometimes a photo). So that indent needs to be transparent.
I'm assuming I'll use z-index to overlay this header over whatever content will be underneath. Just can't figure out how to get a transparent indent in only one section while also having the grey menu bar continue to be 100% browser width. Probably something simple that I've overlooked. Thanks.
Edit: working JSfiddle here: http://jsfiddle.net/brandonpeat/mVSBj/14/
<div id="menu">
<div id="ombre">
<div id="ombre1"></div>
<div id="ombre2"></div>
<div id="ombre3"></div>
<div id="ombre4"></div>
<div id="ombre5"></div>
</div>
<div class="container">
<img src="http://asheragency.com/websites/asher2014/asher_logo.png" alt="Asher" id="asherLogo"/>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
not very elegant but here's a fiddle: http://jsfiddle.net/vlrprbttst/cke6U/1/
there's no way you can produce a 5px "hole" in your background, my solution needs the li element to have a background (not the header or the ul) so that may not suit you
you basically have to play with height on :hover
li {list-style:none;float:left;height:50px;line-height:50px;width:16.66666666666667%;text-align:center;position:relative;background:grey}
li:hover {height:45px}
I'm in the process of making a website, but am having issues positioning the logo in the navigation bar.
I've created a test version of the website at http://www.fearless-music.net/test
The logo isn't appearing in the center of it's space. In smaller browser windows, it hides behind the "Home" area of the navigation bar.
Also, are there any suggestions on code improvements I could make to my navigation bar?
Thanks again!
If you indent your code it is easier to see what's going on. Try adding the image in it's own div and enclosing it in p tags then you will be able to center it with the appropriate css rule. Tip when setting up divs using css add a colour border or background which you can later remove just to help with sizing and positioning.
<div class="header">
<div class="logo">
<p><img src="images/logo.png" alt="fearless music" /></p>
</div>
<ul class="nav">
<li class"currentpage">Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Special Link</li>
</ul>
</div>
It is centered in its space. Your list items align in the middle. All the widts of the <li> tags combined are not the same as the total width of the <ul>
Use your element inspector so you can see the outlines well
You need to remove the right padding from the ul. You will see that we have a left padding of 40px.
header ul {
padding-right: 0;
}
try changing lines 31 to this - so you can see you logo, you could also add back in your margin to get in centred back in the li, but I would suggest taking the logo out of the ul so that you can have more control over it.
.nav img {
/* vertical-align: middle; */
padding: 2px 0px;
}
Good luck I hope this helps :)
I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:
----- Alpha - Beta - Gamma -----
This is what I have so far:
JSfiddle
Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).
JSfiddle
So what I need to do is basically fix the first version to work like the second version but without using a background.
I thought of doing something like:
<div class="content">
<div class="line"></div>
<div class="line-text">Some</div>
<div class="line-gap"></div>
<div class="line-text">Text</div>
<div class="line-gap"></div>
<div class="line-text">In a Line</div>
<div class="line"></div>
</div>
Where .line would be an auto width (to fill the left and right sides) and .line-gap would just be say 10px to show the line between the text.
EDIT/UPDATE
Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...
JSfiddle
If you don't want to use a background, you could do a little trick using the :before and :after properties.
Here's the example jsFiddle, you can change the content/properties to whatever you like and it does what you've asked.
Example below.
HTML:
<ul>
<li class="sub-menu-item" >Example</li>
<li class="sub-menu-item" >Example</li>
</ul>
CSS:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014 \2014"
}
li {
display:inline-block;
}
I have been working on a site lately. I am attempting to get a border that surrounds all my content and is at least as tall as the page is. My #Container is the div that should expand to fill the full page. I am attempting to use the min-height:100%; in my css, but for some reason it isn't expanding the border down the whole page. This is my website. The home page is a basic html setup.
<div id="Container">
<div id="header">
<div id="menu">
<ul id="navbar">
<li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
<li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
<li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
<li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
<li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
<li><a id="nav6" class="nav-text" href="#">Info</a></li>
<li><a id="nav7" class="nav-text" href="#">About</a></li>
<li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
</ul>
</div>
</div>
<div id="content">
<h3>Home Page</h3>
</div>
<div id="footer">
<div id="footertext">Copyright © UsedAtCollege.com</div>
</div>
</div>
My CSS is fairly simple too. I have a CSS reset, that I don't think is affecting it because I took it out and it still had the problem.
* {
margin: 0;
padding: 0;
}
#Container {
width:980px;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:rgb(154,154,154);
}
So that's the CSS control for the div wrapping my entire page in.
I just want to know if anyone knows why the min-height is not getting the border down all the way to the bottom of the screen?
Add this to your CSS
html, body {
height: 100%;
}
Something like Firebug or DOM-Inspector would come in handy in such cases. If you fire up Firebug, and see the content of your page in Firebug, you will notice that your body itself doesn't expand through the entire page, it expands only upto around half the page length, the same position where the bottom border is showing. This is because the body will expand only as per its content, the content being minimal here, the body expands only as much, and so does the min-height: 100%.
You can get around this by wrapping the entire page content inside an absolutely positioned wrapper div, setting its top and left values to 0px, and height and width to 100%. Then the border would expand upto the bottom of the page. Of course Firebug would still show the body expanding upto half page only, for absolutely placed elements don't contribute to the natural dimensions. For that, you will have to use relative positioning, and adjust margin-top to the requisite value in order to have the effect.