I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
Related
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I am trying to create a megamenu (see fiddle: http://jsfiddle.net/BKHNk/) but the issue I am running into is when I put links in the <div> that flies out from the menu. The dropdown under Menu 1 is what I want it to look like but as soon as I turn the text into links as seen in Menu 2 all the formatting goes haywire. I think the issue is that the links are inheriting attributes but I don't know the best way to prevent that from happening.
Basically, I want the width to be as minimally wide as necessary based on the content. The section text should be on one line. The subsection items should all be on their own line with each subsection text (but not the comma) as a link. Again, basically exactly like Menu 1 looks.
I also tried changing the subsection items into an unordered list but that got even more convoluted and I don't think that it's necessary to do so.
Can anyone help me figure out what is being inherited that is making all of the text in the second line wrap and how to prevent it from happening? Thanks!
HTML code below:
<ul id="menu">
<li> Menu 1
<div class="dropdown">
<div class="section">Section goes here</div>
<div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
<div class="rule"></div>
</div>
</li>
<li> Menu 2
<div class="dropdown">
<div class="section">Section goes here</div>
<div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
<div class="rule"></div>
</div>
</li>
</ul>
CSS below:
#menu {
font-family: sans-serif;
list-style:none;
height: 32px;
width: 200px;
background: #888;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 5px;
margin:5px;
}
#menu li a {
color: black;
display:block;
text-decoration:none;
}
#menu li:hover a {
color:#ccc;
}
.dropdown {
margin:4px auto;
float:left;
position:absolute;
left:-999px;
text-align:left;
padding:10px;
background:#aaa;
width: auto;
white-space:nowrap;
}
#menu li:hover .dropdown {
left:0px;
top:auto;
}
.rule {
height: 2px;
width: 100%;
background-color: red;
}
.section {
font-weight:bold;
}
.subsection {
font-size: 75%;
}
This line is causing your problems:
#menu li a {
color: black;
display:block;
text-decoration:none;
}
This makes any and all links that are child of a list item display as block, which causes the vertical stacking that you're seeing.
Change that selector to #menu li > a and you're good to go. View it on JSFiddle. What this does is only apply the styling to links that are direct children of list items.
So I've got an example of what is the header on my Tumblr Page.
I don't know why I'm having so much trouble doing this, but I can't figure it out.
I've got a <ul> floating-left navbar, whose parent container has a width of 50%. I need these items to be centered below the main text, but because they float left, this is hard to accomplish.
<nav id="mainNav">
<ul>
<li>Ask</li>
<li>Archive</li>
<li>Random</li>
<li>RSS</li>
<li>Search</li>
<li>Twitter</li>
</ul>
</nav>
CSS:
header #mainNav {
width:auto;
margin:auto;
}
header #mainNav ul {
height:30px;
width:auto;
}
header #mainNav ul li {
list-style-type:none;
float:left;
margin:2;
background-color:#1BA300;
border:2px solid black;
}
header #mainNav ul li:hover {
background-color:black;
}
header #mainNav ul li a {
color:#00FF00;
display:block;
padding:5px;
}
I need these items to center under the main text, but nothing i've tried works. What am I doing wrong? How can I accomplish this?
to center a block element you need margin:0 auto but to achieve this you need to set a fixed with for the block element. So for your header #mainNav add {width:372px}` and will be ok.
Demo: http://jsfiddle.net/qTPec/2/
Another solution is to add display:inline-block for header #mainNav
Demo: http://jsfiddle.net/qTPec/3/
try display: inline-block instead of the float. That way you can center it.
http://jsfiddle.net/qTPec/1/
I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called "store" has a list of content that becomes visible via this jquery hover effect.
I can't get the "store" button to align with the rest of them. Two days now I'm trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I'm at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.
Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:
http://www.ideagasms.net/ideagasms-with-dropdown-menu.html
When viewing source, you'll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. :)
This code should work:
I've added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.
Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.
You might also have to create some new styles and add them to the elements again. As I've probably messed a few bits up. I'd suggest adding proper classes and id's so you don't run into styling problems in the future.
<div id="nav">
<ul>
<li>
<a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
<ul class="file_menu">
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>Insert</li>
<li>Modify</li>
<li>Control</li>
<li>Debug</li>
<li>Window</li>
<li>Help</li>
</ul>
</li>
<li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a> </li>
<li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
<li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
<li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
<li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
<li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
<li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
<li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>
<style type="text/css">
#buttonnav {
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9;
}
#nav {
margin: auto;
width: 740px;
background: orange;
}
ul {
margin: auto;
}
ul li {
display: inline;
float: left;
}
.menu_class {
border:1px solid #1c1c1c;
}
ul.file_menu {
cursor:pointer;
display:none;
width:260px;
border: 1px solid #1c1c1c;
margin:0;
padding:0;
list-style:none;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
That menu looks atrocious and to be honest, doesn't allow for much flexibility as you noticed.
If I were you I would rebuild it in t way where a proper html structure is used with a (nested) li structure so you could just whip in that extra item and the submenu...
This is the ugly fix
#buttonnav {
display: inline-block;
/* remove the float & widht */
}
.hoverli ul.file-menu {
position:absolute;
}
This is a case where you should probably go back to the basics and re-learn how to make a proper menu. If this is in some content management system then override the classes & templates to make it so you can easily add things...
Stuff I am missing for the sub menu also is position: absolute; (and you probably want the sub-menus parent to be relative).
You need to fix two things to properly present the button and have the sub-menu functioning:
See this working Fiddle Example!
1)
Set the css for the button like:
#buttonnav {
display: inline-block;
height: 25px;
position: relative;
z-index: 9;
}
Note: display:inline-block; gets in and float, margin and width gets out.
2)
Adjust the css for the sub-menu to allow it to appear without breaking the layout:
CSS
.hoverli {
position: relative;
z-index: 1;
}
.hoverli ul {
position:absolute;
}