I have a footer that has 3 elements within it as follows:
<div class="footer">
<div class ="jumperMenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class ="logo">
<img src="#"/>
</div>
<div class ="navJumpMenu">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
The footer div needs to have a max width of 1600px,i need the JumperMenu to stick to the left of the footer, logo to be in the centre and navJumpMenu to stick to the right, right and left elements need 10px padding..
All is fine with floats - The issue I have is that I need all the elements to also move within their positions on smaller screens - so say the screen was only 1200px i need the 3 elements to stick to their respective layout positions but adjust to fit within the screen size.
Does anyone have any idea at how to accomplish this with pure CSS - so I dont have to resort to a jquery positioning?
Cheers
http://jsfiddle.net/calder12/KjG8v/1/
.footer{max-width:1600px; margin:0 auto;text-align:center;}
.jumperMenu{float:left;}
.navJumpMenu{float:right;}
.logo{margin:0 auto;}
You'd probably want to set a minimum width on the footer container too to make sure the 3 elements don't actually run over each other, but I think that's what you want isn't it?
Is this what you are looking for?
#footer {
display: inline-block;
max-width: 1600px;
min-width: <your min width>;
text-align: center;
}
#footer>* {display: inline-block;text-align: left;}
#footer #navJumpMenu{float:right;}
#footer #jumperMenu{float:left;}
Hope that helps.
Related
I am trying to create a footer for a website and need there to be two sets of links on either side. I have it all in a div and the links for the left and right sides are in uls and their own divs that have ids.
This is my HTML:
<div class="bb">
<div class="fl">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</div>
<div class="fr">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</div>
</div>
And here is the CSS I have going along with it:
.bb {position: fixed;bottom: 0;list-style: none;margin: 0;padding: 0;text-align: right;}
.fl {display: inline-block;float: left;}
.fr {display: inline-block;float: right;}
.fl li {display: inline;}
.fr li {display: inline;}
Why is the footer for the right side not floating all the way to the right side of the page?
Thanks for any help
To my understanding, the problem is your whole footer bb does not have a width. Just adding width:100% to bb will solve this.
The fr actually floats, however, inside the footer bb.
I put a jsfiddle at https://jsfiddle.net/Lw93vtgr/ showing this.
Further, you may not want to assign float with inline-block, the result display would be block anyway.
So i think you forgot set the width of class .bb
In your code, <div class=".bb"> have a width equal to your content.
You can try to set .bb class with width 100% or equal to your page width
You must remove the position: fixed; from the bb class, or else specify the width of it.
Try adding width: 100% to the class .bb.
This is my website
Does anyone know how to put the nav bar right next to the white box where my content will go? I just want it exactly vertically aligned with the white box, but make it sit just to the left of it. Thanks
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><span class="text">HOME</span></li>
<li><span class="text">HTML & CSS</span></li>
<li><span class="text">USABILITY</span></li>
<li><span class="text">ACCESSIBILITY</span></li>
<li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
</a>
</li>
</ul>
</div>
</nav>
CSS
nav {
margin: auto;
}
EDIT: I misunderstood the question, here is the new answer:
http://codepen.io/Vall3y/pen/gbpRoG
I have put the nav and content again under the same container, but the container is now relatively positioned, and the nav is absolutely positioned at top: 0, left: 0. You can control the distance of the nav from the content by adjusting the container width, or with the left attribute of the nav. I have applied a dashed border around the container to demonstrate what is happening, but in your site it doesn't need a border of course.
Orig:
If you could include the rest of the code I could give you a better example, but here is the layout you want:
http://codepen.io/anon/pen/EajXgq
The key here is that the nav and content are adjacent in markup (elements comes right after another. I used float left to make them on the same vertical line but there are other techniques)
The nav is floated left, so that it doesnt take any flow space and allows the content to horizontally align at the center, using a fixed width and an auto margin.
They both are contained in a container to allow margin from the logo if necessary
Also see that there is a clearfix element, for clearfix. Google it to find out what it does but basically it allows the container to stretch over the floated elements so it doesn't mess up the layout
<div class="purple-logo"></div>
<div class="container">
<div class="nav"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>
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 have two divs. They can both contain variable sized content.
One needs to float left, the other needs to float right. Or rather, one needs to hug the left side of the parent and the other the right (in-case someone has a non-floating solution). But when they overlap (i.e when the browser is shrunk to a size that makes the floated left div come into contact with the floated right) I want them to clear, or stack one-on-top-of-the-other as if they were both floating left without enough space to fission.
Is this even possible?
Some HTML:
<div id="header">
<div id="header-title">
<h1>
Title (variable length)
</h1>
</div>
<div id="header-menu">
<h2>
Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7 (variable length)
</h2>
</div>
</div>
Some CSS:
#header{
overflow:auto;
}
#header-title{
float:left;
}
#header-menu{
float:right;
}
It's worth mentioning that the desired behaviour is somewhat in the realms of responsive web-design, but I want it to behave this way without the #media query. The viewport meta tag will be used eventually, but for the moment I just want it responding correctly in a desktop setting.
Good luck...
Is this what you meant?
http://jsfiddle.net/K8fnc/3/
#header{
overflow:auto;
}
#header-title{
float: left;
}
If you take away float: right on the second div, it will work.