This is the image I want to make the : Journal Timeline and Gallery Text on the middle please help me guys... how to make it center align
#pages ul{
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
list-style-type: none;
border:5px solid;
border-radius:15px;
width: 700px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
border-color: white;
}
#pages ul li {
display: inline-block;
margin-left: 45px;
}
#pages ul li a{
text-decoration: none;
color: white;
}
.home_icon{
padding-top: 3.5px;
}
thats the code for CSS
<div id="pages">
<ul>
<li><img class = "home_icon" src="img/home_icon.png"></li>
<li>JOURNAL</li>
<li>TIMELINE</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
Please I need the explanation and codes :) thank you
Use vertical-align:middle; in your <li>'s CSS:
#pages ul li {
display: inline-block;
margin-left: 45px;
vertical-align:middle;
}
JSFiddle Example
Related
I am trying to build a website, and in my footer section I am facing an issue that, I can't properly position my tag below the social media icons, and also cannot position the li elements "terms of use","content guidelines","report error" in a horizontal style.also i cannot remove the underline on the li after removing the text decor,and cannot remove the bullets from the li elements..pls help
footer
{
width: 100%;
background-color: #2d2d2d;
padding: 80px 0px;
}
footer h2 {
font-size: 16px;
color: #a1a1a1;
text-transform: uppercase;
margin-top: -20px;
margin-bottom: 25px;
margin-left: 20px;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
position:sticky;
margin-bottom: 20px;
}
* {
padding: 0px;
margin: 0px;
}
.ft-quick-links
{
float:left;
width:400px;
}
.ft-quick-links ul li{
float:left;
margin-right:6px;
margin-bottom:20px;
margin-left: 5px;
list-style: none;
padding-right: 5px;
}
.ft-quick-links li a{
padding: 8px 15px;
font-size: 13px;
color: #959595;
background:#202020 ;
text-decoration: none;
margin-bottom: 30px;
}
.ft-quick-links li a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left ul li{
float:left;
margin-right:40px;
}
.ft-btm-left ul li a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
text-decoration:none;
}
.footer-btm-wrapp .wrapper{
padding:20px 0px;
}
.ft-social ul li{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.footer-btm-wrapp .wrapper{
padding:8px 0px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
margin-bottom: 10px;
padding: 60px 20px 10px;
float:right;
text-align:right;
list-style: none;
}
.wrapper{
width:1100px;
margin:0px auto;
position:relative;
}
.ft-lines{
font-size: 12px;
color: #5f5f5f;
list-style: none;
margin-bottom: 10px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet"type="text/css" href="foot1.css">
<footer>
<div class="wrapper">
<div class="ft-quick-links">
<h2>Quick Links</h2>
<ul class="clearfix">
<li>About</li>
<li>Media</li>
<li>Feedback</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-social">
<ul class="clearfix">
<li><img src="images/yt.png"/></li>
<li><img src="images/ig.png"/></li>
<li><img src="images/twit.png" /></li>
<li><img src="images/fb.png" /></li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-lines">
<ul class="clearfix">
<li>Terms of Use</li>
<li>Content Guidelines</li>
<li>Report error </li>
</ul>
<div class="copy-rights"><p> © 2017 Rodeo labs. All rights reserved</p>
</div>
</div>
</div>
</footer>
</body>
</html>
I hope this code will be useful to you
footer
{width: 100%;background-color: #2d2d2d;/* padding: 54px 0px; */display: flex;height: 6vmin;}
footer h2 {
font-size: 14px;
color: #a1a1a1;
text-transform: uppercase;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
/* position:sticky; */
}
.ft-quick-links
{
display: flex;
align-items: center;
}
.ft-quick-links a{
padding: 5px;
font-size: 13px;
color: #959595;
background:#202020;
text-decoration: none;
/* margin-bottom: 30px; */
}
.ft-quick-links a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left a:hover{
text-decoration:none;
}
.ft-social i{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
text-align:right;
list-style: none;
}
.ft-lines{
/* font-size: 12px; */
color: #5f5f5f;
/* list-style: none; */
/* margin-bottom: 10px; */
text-decoration: none;
}
<footer>
<div class="ft-quick-links">
<h2>Quick Links</h2>
About
Media
Feedback
Privacy policy
</div>
<div class="ft-quick-links">
<img src="images/yt.png">
<img src="images/ig.png">
<img src="images/twit.png">
<img src="images/fb.png">
</div>
<div class="ft-quick-links">
Terms of Use
Content Guidelines
Report error <!--
-->
</div>
<p> © 2017 Rodeo labs. All rights reserved</p>
</footer>
Try adding the top 2 div.wrapper inside a div and style it. According to what you have done in styling, the third div.wrapper is inserted inside the top to in the DOM.
As well add bottom div.wrapper (which contains the divs for the three links and the copyrights) in a different context and do the stylings respectively.
If you're doing this for practice that's fine.
This code that you have written needs more improvement. In production code, this is not the recommended way of writing the code. Please follow some guidelines. Googling 'HTML and CSS best practices guidelines' will help you.
PS - Didn't edit your code since it needs a re-engineering.
.ft-lines{
font-size: 12px;
margin-top: 25px; /*positioning li elements "terms of use","content guidelines","report error"*/
}
.ft-lines li {
list-style: none; /*remove bullets*/
display: inline; /*display in horizontal line li elements*/
margin: 0 10px 0 10px; /*add spaces between links*/
}
.ft-lines a {
text-decoration: none; /*removes underline on links*/
color: #959595;
}
.ft-lines a:hover {
text-decoration: underline; /*adds underline on links*/
}
jus remove your .ft-lines and add mine
hope this helped.
Try following in your css. I have added some comments.
.ft-lines ul li{
list-style: none;
display: inline-block; # This will display li side by side
padding-right: 10px; # add for have a bit of space
}
.ft-lines ul li a {
text-decoration: none;
}
.ft-lines {
clear: both; # to clear the floating elements
float: right;
}
You are not using any framework like bootstrap or foundation. So, first of all, make a proper design of footer layout.
For example -
<ul class="demo">
<li>demo1</li>
<li>demo2</li>
<li>demo3</li>
</ul>
To remove bullet from li use -
ul.demo li
{
list-style-type:none;
}
To remove text-decoration from a use -
.demo li a
{
text-decoration:none;
}
I'm trying to make a simple responsive navigation but i can't seem to eliminate the spaces inbetween the links. Any help would greatly be appreciated.
This is my code:
css:
.nav{
width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
line-height:50px;
}
.nav li{
display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{
}
.nav a{
text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
color:#c00;background:#999999;
}
html:
<div class="nav"><!-- nav -->
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/nav-->
With CodeRomeos answer, most of the spacing/padding was removed but there was still some spacing between the links. From your request to eliminate the spacing between the links then the below solution will completely remove spacing (although it would look better IMO with at least some padding between links).
.nav {
width: 100%;
text-align: centre;
margin: 0;
max-width: 1010px;
}
.nav ul {
line-height: 16px;
}
.nav li {
display: inline;
list-style-type: none;
border-right: #333333 1px solid;
margin: 0;
padding: 0;
float: left;
}
.nav a {
text-decoration: none;
color: #000;
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.nav a:hover {
color: #c00;
background: #999999;
}
<div class="nav">
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
I just switched your css a bit from display: inline to float: left for the li tags. Hope it helps, though float may not be the best approach here.
.nav li {
display: inline;
}
to
.nav li {
float: left;
}
http://codepen.io/anon/pen/OyVLOK
As in your css there is padding defined 10px.
.nav a{
text-decoration:none; padding:10px 5px; color:#000; font-family: sans-serif;
}
set it to
.nav a{text-decoration:none; padding:10px 2px; color:#000; font-family: sans-serif;}
Hope this help you.!
i cant get this navigation bar to center. Please help.
Here is my html:
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Latest News</li>
<li>Results & Events</li>
<li>Fundraising</li>
<li>Gallery</li>
</ul>
</div>
Here is my css:
#nav {
margin:0px auto; }
ul {
display: inline-block;
list-style-type:none;
margin:0 auto;
padding:0;
position: absolute; }
li {
display:inline;
float: left;
margin-right: 1px; }
li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: Century Gothic, Candara, Tahoma, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none; }
li:hover a {
background: #659d32; }
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px; }
li:hover ul a:hover {
background: #659d32;
color: #fff; }
li ul {
display: none; }
li ul li {
display: block;
float: none; }
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px; }
ul li a:hover + .hidden, .hidden:hover {
display: block; }
.show-menu {
font-family: Century Gothic, Candara, Tahoma, sans-serif;
text-decoration: none;
color: #fff;
background: #659d32;
text-align: center;
padding: 10px 0;
display: none; }
input[type=checkbox]{
display: none; }
input[type=checkbox]:checked ~ #menu{
display: block; }
#media screen and (max-width : 760px){
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
}
}
I tried adding a div around the whole thing and setting margin to auto but that hasnt worked. Im not sure what to do.
Firstly you're targeting #nav while it's .nav according to your html.
Then you need to set a width to your nav parent in order to have a centered position.
Working example
.nav {
margin:0px auto;
width:705px;
}
Edit: Since your list items and links aren't responsive, it doesn't make sense to add a percentage to the parent nav.
You can use something like this to have a responsive centered navigation:
.nav {
margin:0px auto;
width:90%;
}
ul {
list-style-type:none;
padding:0;
}
li {
float: left;
width:18%;
}
li a {
width:100%;
}
I think the reason why your auto margins didn't work is because you need to define a width on your wrapper. Also make sure that you are using the right selector # for id and . for class. Here's how id go about centering the navigation.
jsFiddle
<div class="wrapper">
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Latest News</li>
<li>Results & Events</li>
<li>Fundraising</li>
<li>Gallery</li>
</ul>
</div>
</div>
add this to your css:
.wrapper {
width:80%;
margin-left:auto;
margin-right:auto;
}
You almost had it, use:
.nav {
display: block;
margin: 0 auto;
width: 100%;
max-width: 960px;
}
You will simply need to adjust your max-width to move the navbar into the center (depending the width of your page container).
See Example
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
It seemingly attempts to centre, but in actuality is a few pixels off. It's really annoying.
Picture: http://i.imgur.com/X4jhf.png
My code:
HTML:
<body>
<div class="menu-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<div class="greeting"></div>
</body>
CSS:
.menu-bar {
font-family: 'Lucida Grande';
}
.menu-bar ul {
text-align: center;
list-style-type: none;
}
.menu-bar li {
display: inline;
}
.greeting {
background: url('../media/pic.jpg');
border: 1px solid black;
margin-top: 75px;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 375px;
}
Very frustrating. >_<
Margin and Padding both needs to be set to 0 unless you are using a css reset to avoid browser inconsistencies.
.menu-bar ul {
text-align: center;
list-style-type: none;
margin:0;
padding:0;
}
DEMO.
UL has a default left margin which you haven't dealt with. Just add margin: 0;