I'm trying to replicate the footer of this website as part of a school project.
So far, I've figured out that my divs should be structured like this:
<div class="wrapper">
<div class="top-side">...</div>
<div class="content">...</div>
<div class="footer">
<div class="footer-col">
<h4>Column header</h4>
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
</div>
</div>
</div>
And the css I've used is:
.wrapper .footer {
bottom:0;
width:100%;
margin: 5px;
color: #FFFFFF;
background-color: black;
}
.footer .footer-col {
display: block;
float: left;
margin: 0 20px 0 0;
width: 20%;
}
.footer .footer-col ul {
list-style: none;
display: inline;
overflow: hidden;
}
.wrapper .footer .clear {
clear: both;
}
This is my entire code so far. I can't figure out what more should be added to my css for this to work as it was desired meaning, left alignment of every element in each column and bold headers for each column. (I've solved this part with <h4>)
Any tips?
If you want to replicate the same footer of the website you've said, I think a good way to do it is to replicate a similar HTML structure as well.
In that case, inspect the code with the browser inspector and you will se it's 5 groups of heading h4 + ul lists.
Here's a hint to do it in a JSFiddle I've made.
CSS
.container {overflow: hidden; background: #000; color: #fff; }
.footer-tab { float: left; width: 20%; font-family: Arial; }
ul { padding-left: 0; }
ul li { list-style: none; margin: 10px 0; font-size: 12px; }
ul li a { font-weight: bold; }
I didn't make all the code but you can see, I think, a better structure to achieve it.
Related
<aside class="-menu">
<ul class="-menu-ul">
<li><div class="-menu-items">Phones</div><div class="-menu-count">15</div></li>
</ul>
</aside>
DEMO
I would like to set the background color of a li element on hover with the structure above.
I am using this style to tidy things up, remove list markers and set the background color on hover
.-menu{
box-sizing: border-box;
width: 20%;
background-color: aliceblue;
display: inline-block;
padding: 30px;
}
.-menu-items{
float: left;
}
.-menu-count{
float: right;
}
ul.-menu-ul{
list-style:none;
}
ul.-menu-ul li{
clear: both;
line-height: 30px;
padding: 0 10px;
}
.-menu-ul li:hover{
background-color: #cdd4c4;
}
Unfortunately, it doesn't work. Any idea why?
The height of the li is 0 because it's children are floated, so you need to clear the float for the hover to appear.
.scenes-menu {
box-sizing: border-box;
width: 20%;
background-color: aliceblue;
display: inline-block;
padding: 30px;
}
.scenes-menu-items {
float: left;
}
.scenes-menu-count {
float: right;
}
ul.scenes-menu-ul {
list-style: none;
}
ul.scenes-menu-ul li {
clear: both;
line-height: 30px;
padding: 0 10px;
overflow: hidden;
}
.scenes-menu-ul li:hover {
background-color: #cdd4c4;
}
<aside class="scenes-menu">
<ul class="scenes-menu-ul">
<li>
<div class="scenes-menu-items">Phones</div>
<div class="scenes-menu-count">15</div>
</li>
</ul>
</aside>
When you float the divs they're removed from the document flow and the <li> collapses and acts like it has no content, which is where you applied your hover rule. The easy way to restore the hover behavior is to add overflow: auto to your <li> rule.
codepen example
I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
float: left;
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav li{
float: right;
display: inline-block;
color: #ffffff;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2
<p>Today's Try It Recipe!<p>
</div>
</div>
display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.
.header {
background-color: #00001a;
padding: 0 1em;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
.header h1 {
color: #ffffff;
font-size: 15px;
}
.nav li {
color: #ffffff;
display: inline-block;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.
header {
background-color: #00001a;
padding: 0px 10px;
box-sizing: border-box;
}
h1 {
color: white;
margin: 5px 0;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
color: white;
margin-left: 20px;
}
<header>
<div class="left">
<h1>
EaTogether
</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</div>
<div class="clear"></div>
</header>
Note: I've changed "Togeter" to "Together", assuming it was a typo.
I am not sure if you want this thing but I just gave a try,
For this, set float:right to ul element and not on li elements.
Since you want to align h1 and li content set line-height to 0.5 for ul element
please check this fiddle: https://jsfiddle.net/hz0104mp/
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</div>
</div>
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav ul{
float:right;
line-height:0.5;
}
.nav li{
display: inline-block;
color: #ffffff;
}
I like the flexbox method mentioned by #Michael Coker but here's a solution using floats as the OP attempted to do.
You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.
On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.
The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li.
I rectified this by floating the ul instead of individual li and setting those to display: inline;. Floating the li to the left would also work.
header {
padding: 0 0.5rem;
height: 40px;
color: #ffffff;
background-color: #00001a;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header h1 {
margin: 0;
font-size: 15px;
display: inline-block;
}
header h1,
.nav li {
line-height: 40px;
}
.nav {
float: right;
}
.nav li {
padding: 0 0 0 0.25rem;
display: inline;
}
<header>
<h1>Eat Together</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</header>
<main>
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</main>
Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty").
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.
How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.
<div class="header">
<b>How ya doin?</b>
<ul class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
</div>
THe CSS:
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
This is what I get:
I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.
You'll need a div to clear it afterwards to fix the layout though.
Something like:
.header b {
width:50%;
float:left;
}
.header ul {
width:50%;
float:right;
}
then underneath
<div style="clear:both"></div>
to avoid messing things up.
Try
ul {
display:inline;
/* ... */
}
something like:
.header b{display:block; width: 100px; float:left}
.menu {width:150px; float:left}
Good luck
what about using absolute / relative positions?
this is really a simple and nice solution for header text, easy to add another elements as well
.header{
position: relative;
}
.header > b{
position: absolute;
left: 10px;
top: 5px;
}
.header > ul{
position: absolute;
top: 5px;
right: 10px;
}
<div class="header">
<!-- float to left -->
<b style="float: left;">How ya doin?</b>
<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
<!-- clearing float -->
<br style="clear:both;" />
</div>
I changed your CSS to this and it seemed to do the trick (additions noted):
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.
Easiest should be to set display: inline; on the ul element.
Another is to set float: left; on both the <b> and the <ul>, and give them both a width.
If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.