I'm having a very hard time trying to figure out how to align my bottom border for my text to the bottom border of my header. Can anybody tell me how to do this? It'd be greatly appreciated. I've tried numerous things.
http://jsfiddle.net/Zevoxa/YeJc6/
HTML
<div id="header">
<img id="logo" src="/img/logo.png"/>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
top:0px;
width:100%;
padding-top:20px;
padding-bottom:0px;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
text-align:center;
}
img#logo {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
padding-right:20px;
font-size:20px;
}
#nav ul li a {
color:#FAFAFA;
text-decoration:none;
border-bottom:#FAFAFA solid 2px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
You can set the margin-bottom to 0px for the ul
#header ul {
margin-bottom:0px;
}
http://jsfiddle.net/YeJc6/6/
maybe set #nav to the bottom of #header simply with:
#nav
{
position:absolute;
bottom:0px;
height:20px; //whatever height/size of text is needed
}
This tells it to align #nav, which is in #header, to go to the bottom of #header.
In your case you just need to remove the bottom margin on your ul.
#nav ul {
margin-bottom: 0;
}
Related
Hi i don't know how to center div in footer or float it right or left because my footer falls apart.
Here is my code:
<div id="footer"><div id="tab_brand"><ul>
<li><img src="footer_slike/dell_footer.png"/></li>
</ul>
<ul>
<li><img src="footer_slike/acer_footer.png"/></li>
</ul></div>
</div>
css code
#footer{
background-color:grey;
width:100%;
height:auto;
margin:0;
padding:0;
left:0;
clear:both;
opacity:0.8;
}
#tab_brand{
height:100%;
left: 20px;
border:1px solid white;
}
#tab_brand ul li img{
padding:5px;
}
#tab_brand ul{
display: inline-table;
list-style: none;
height:auto;
width:auto;
}
thanks
If you want to center #tab_brand you need to set a width to it and add "margin: 0 auto" to center it.
Here is an example:
http://jsfiddle.net/ok7Lyp2n/
Does anyone know how to vertical center a-href elements in list-items while keeping them responsive and the whole list element clickable?
I've tried various things: vertical-align, display:table/table-cell etcetera, googled a lot and searched stack overflow, but none of the solutions seem to work (or I'm just implementing them wrong) or cover all the issues (center, clickable, responsive). The list item's height is reacting to the height of the browser, because of the display div (which is going to display a photo and I don't want to lose details because of the two menu items that cover it).
JSFiddle: http://jsfiddle.net/K6V58/1/
HTML:
<div id="wrapper">
<nav id="menu">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</nav>
<article id="display">boe</article>
<nav id="gallery">
<ul>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
<li><img src="images/gallery/klein/square.jpg" class="imageList"></li>
</ul>
</nav>
</div>
CSS:
/*---------------------------- MAIN MENU ----------------------------*/
#wrapper{
height:100%;
width:100%;
margin:0;
padding:0;
}
nav#menu, nav#menu ul, nav#menu ul li{
margin:0;
padding:0;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:10pt;
color:grey;
background-color:#000000;
}
nav#menu{
position:absolute;
top:0;
width:100%;
height:5%;
text-align:right;
}
nav#menu ul{
padding: 0 10px;
height:100%;
}
nav#menu ul li{
height:100%;
display: inline-block;
margin: 0 10px;
list-style: none;
}
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: block;
}
/*---------------------------- IMAGE MENU ----------------------------*/
nav#gallery, nav#gallery ul, nav#gallery ul li, img.imageList{
margin:0;
padding:0;
background-color:#000000;
}
nav#gallery{
position:absolute;
bottom:0;
width:100%;
height:5%;
}
nav#gallery ul li{
display: inline-block;
list-style: none;
height:100%;
float:left;
}
.imageList{
height:100%;
vertical-align:top;
}
/*---------------------------- DISPLAY PHOTO ----------------------------*/
article#display{
position:absolute;
top:5%;
width:100%;
height:90%;
background-image:url(../images/gallery/groot/2.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
margin:0;
padding:0;
}
You can try this
I have added span inside a
HTML
<li><span>test 1</span></li>
<li><span>test 2</span></li>
And updated this CSS
nav#menu ul li a{
text-decoration:none;
color:grey;
height:100%;
display: table;
}
nav#menu ul li a span {
display: table-cell;
vertical-align: middle
}
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
I took a break after doing a little bit and everything is fine. I come back to see my header has a gap between the top of the page and itself. I don't know why, I must of not saved or something, but I can't figure out what's wrong...
http://jsfiddle.net/Zevoxa/tCxaU/
HTML
<div id="header">
<img id="logo" src="/img/logo.png">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Your issue is margin-top on the #logo.
One solution is to add that top 20px spacing as padding on the #header rather than a margin on the #logo.
http://jsfiddle.net/JRPwr/
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
padding-top:20px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Alternate solutions are mentioned in the following StackOverflow question:
Margin on child element moves parent element
In img#logo, use margin-top: 0px;
this is a html/css nav bar how can i center it in the center of my page i tryed putting center tags in the html and float:center; under the ul but it wont work ill post my html then my css
HTML
<body>
<ul>
<li> </li>
</ul>
</body>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
padding-left:200px;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
demo here
Add text-align: center to ul and replace float: left with display: inline-block
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}
The other parts of your css remains unchanged!
So if You add more li to your website they'll all be in the center next to each other.
<li> </li>
<li> </li>
To remove the whitespace:
<li> </li><li> </li>
Don't push enter between each line. :)
...or there's another solution is to add: margin-left:-4px:
li
{
display:inline-block;
margin-left: -4px;
}
You'll need to add:
margin: 0 auto;
to the css for the ul and a elements, and remove the float: left; from the li.
See this jsfiddle here
Since you give your a a width: 120px then why cannot give your ul the same property and using margin:
width: 120px;
margin: 0 auto;
Demo: http://jsfiddle.net/NYE3y/
Put the <ul> inside a <div> and center it using align="center"
like this:
<div align="center">
<ul>
<li>hhhh</li>
<li>hhhhh</li>
</ul>
</div>
Use an wrapper for UL and apply an width to wrapper
<div class="menu-wrap">
<ul>
<li>Menu A</li>
</ul>
</div>
CSS:
.menu-wrap {
margin:0 auto;
width:500px;
}
you can still use float for your li.
Remember to clear floats always.