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.
Related
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/
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 am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x
I'm creating a site where I've encountered a huge IE lag when hovering over the menus.
I'm using Cufon in combination and it seems like it's causing a huge lag when I apply height, width, margins or paddings to the li:hover element.
So, I need to figure out a smart way of doing this otherwise.
The site is here, http://w3box.com/mat
You can clearly see the menu I guess.
So, what I want is to push the entire menu downwards so it's like 3 or 4 pixels above the bottom of the height line. So it matches about the same vertical position as the logo font to the left.
Then, I want the hover effect to be larger in height. Hard to explain, but when hovering over a menu item, imagine a box where the text is positioned at the very bottom of the box. Like this;
http://img710.imageshack.us/img710/2791/menuheader.jpg
Now, you may notice the arrow looking thingy sticking at the bottom. I don't really need that, but if you have any idea on how to do it, I'd appreciate the help! ;)
I have not tried, but I think this may be an option.
You have everything with in one div, why dont you try to put div with in divs?
this is your current code for header.
<div id="header">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li>
<li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
You can try something like this, so you have more control over the different objects.
<div id="header" style="float:left;vertical-align:bottom">
<div id="imgChef">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
</div
<div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li> <li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
</div>
I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.
Omit the h4 in the menu since i think it is not needed. Than set display:block on <a> and use line-height and padding-left , padding-right to make the anchor expand the right size. Also notice that li:hover is not supported in IE6/7 without some tweaks. To position the menu on same level as logo just set a margin-top on ul element.
There're too many rules for me, too many useless rules.
Don't have the time to correct all and test it on FF/IE, but this works ofr example :
.menuwrapper li {
float:right;
list-style: none;
padding: 30px 23px 3px 23px;
position: relative;
top: 7px;
}
What about vertical-align?