I need a horizontal nav bar with five pre-made images that will serve as links. The images are the same height but not exactly the same width, so I would need to be able to fine tune the horizontal position of each one and spacing between them, I don't want them just lumped together left or right or center.
This is what I have in mind:
http://i.imgur.com/3ZzKQhJ.jpg
How would I go about making this in CSS? I searched and as far as I understand it it's a pretty hard order for a beginner. Multiple horizontal divs? Display:table?
<html>
<head>
</head>
<style type="text/css">
#images ul li{
display: inline;
}
#i1{
background-color:red;
margin:20px;
padding:10;
}
#i2{
background-color:red;
margin:20px;
padding:10;
}
#i3{
background-color:red;
margin:20px;
padding:50;
}
</style>
<body>
<div id="images">
<ul>
<li id="i1"> image1</li>
<li id="i2">image2</li>
<li id="i3">image3</li>
</ul>
</div>
</body>
</html>
This is what i made u can use image instead of text and can set width and height
Use this html:
<nav>
<ul>
<li> <img src="img/one.png" alt="" class="image"></li>
<li> <img src="img/two.png" alt="" class="image"></li>
<li> <img src="img/three.png" alt="" class="image"></li>
<li> <img src="img/four.png" alt="" class="image"></li>
<li> <img src="img/five.png" alt="" class="image"></li>
Then put put this into CSS:
nav ul{list-style: none;}
You will get rid of the bullet points.
Related
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
I have this site. As you can see, the menu bar is below the social networks buttons. Since the container div of social network buttons is set as display: inline-block and the navbar is set as display: inline, I expected both elements were in the same line like here, but no.. why?
<header class="tab-content cabecera">
<a class="logo pull-left" href="/">
<img src="images/logo1.png" width="250px" alt="ziiweb"/>
</a>
<div class="social">
<div class="fb-like" data-href="http://www.facebook.com/!!!" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<g:plusone align="middle"></g:plusone>
</div>
<nav style="display: inline">
<ul class="nav nav-pills">
<li class="active">Inicio</li>
<li>Qué ofrecemos</li>
<li>Trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
.social is set to display: block;
If you want both your <nav> and .social elements to appear next to one another, set them both to display: inline-block.
Or you may use float:left; to make whole nav element to be in same line.
Make a div and keep both .social and nav in it. Use display: inline-block; in that
Also use float: left; in .social
<div class="outer" style="display: inline-block; width: 700px;">
<div class="social" style="float: left;">...</div>
<nav>...</nav>
</div>
Other way is what André Dion answered.
I .social is set to display: inline-block; then set nav to display: inline-block; too.
Both elements nav and should have "vertical-align:top;", in default is vertical centred.
I am trying to get a link next to my menu using CSS, since I haven't got much experience with CSS I can't get it to work. Currently the link is at the bottom left of the menu. The code for the Menu and link is this:
<div id="content">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="kwicks.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<ul class="kwicks">
<li id="kwick1">Home</li>
<li id="kwick2">Klanten</li>
<li id="kwick3">Nieuwsbrieven</li>
<li id="kwick4">Subscriptions</li>
</ul>
<A href='logout.php'>Logout</A>
</div>
This will show like this:
What I would like to get is this:
I have tried to put it in a div and align that like this:
<div class="right">
<A href='logout.php'>Logout</A>
</div>
The CSS:
.right {
text-align: right;
float: right;
}
But this will only place the link at the bottom right of the menu.
This is probably an easy thing to do for alot of you but I just can't get it to work. If anyone could show me how to get it right it would be great!
As you've not provided any styles, I've made one from scratch, doesn't look like yours obviously but you can apply the same logic there, Float your menu to left, this will make some space empty on the right and your div will shift up, and will reside besides the floated menu, just in case if you've your menu centered on the page, I've provided a wrapper, you don't need that if your menu is not centered.
Demo
<div class="holder">
<ul>
<li>Home</li>
<li>Menu</li>
</ul>
<div>Logout</div>
</div>
.holder {
width: 150px;
margin: auto;
}
ul {
float: left;
}
ul li {
display: inline-block;
margin-right: 5px;
}
Note: I am floating menu towards left, so don't forget to clear your
floats
use display:inline instead.
Logout
I think there's not an unique solution. I would put the <ul> and the <a> together inside a <div> and set style to the <ul> to be displayed inline:
<ul class="kwicks" style="display: inline;">
That's because the default behaviour of the <ul> tags is to be displayed in blocks, so they don't allow to display anything aside of them unless you change this behaviour.
If you move the DIV before the UL it should float right correctly
try this
<ul class="kwicks">
<li id="kwick1">Home</li>
<li id="kwick2">Klanten</li>
<li id="kwick3">Nieuwsbrieven</li>
<li id="kwick4">Subscriptions</li>
<li class="right"><A href='logout.php'>Logout</A></li>
</ul>
Here is my css rule together with the markup:
<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.
How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this
what I wanted to see is that the black div takes up all the available height in the page
Yes it can be done. Check out this example JSFiddle.
Basically I changed your HTML to this:
<div id="navbar">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an id.
The CSS is as follows:
html, body { height: 100%; }
#navbar {
/* this was moved from being an inline style in the div: */
width:220px; margin-left: 200px;font-size:16px;
height: 100%;
}
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)
I need to create a list in an html page and have it centered using CSS.
Here's an image of sorta what i want:
the little block list should be in the center, with all of the solid bullets and there text left aligned, but the block itself should still be in the center . i have my list created and the indents i want, and the entire list is left aligned.
basically i want the list in the dead center of the page, with the bullets all left aligned correctly with each other and the two circle bullets indented a bit.
how can i do this!?
I'm trying a div using margin-left/right set to auto but having no luck.
Have you tried margin:0 auto;
Usually this works to make stuff in center.
You could do something like this:
HTML
<div id="container">
<ul>
<li>One</li>
<li>Two</li>
<li>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li>Three</li>
</ul>
</div>
CSS
#container{
width:45%;
border:1px solid red;
padding:1em;
margin:0 auto;
}
Example: http://jsfiddle.net/7rrzZ/1/
Of course, you don't want the border and you will need to play with the bullets, but you get the idea.
This way it's centred exactly:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { text-align: center; }
div { display: inline-block; }
li { text-align: left; }
</style>
</head>
<body>
<div>
<ul>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
For me it worked by adding padding-left in CSS to the div element that contains the list. I used percentages (in my case 44%). You can adjust the percentages depending on the length of the text. Nothing more was needed for me to center the list.