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>
Related
How do I float a navigation list in the header to the left without creating a gap to the left of the list? Please tell me what I have to change or add in order to effect no gap? On my screen, the gap is noticeable, about 1cm wide, and on the right navigation menu/list, there is no gap. Please tell me how to make my left menu float like my right menu.
<!DOCTYPE html>
<html>
<head>
<style>
header {text-align:center;}
nav#right_menu > ul > li{display: block;float:right;position:relative; width:25px;}
nav#left_menu > ul > li{display: block;float:left;position:relative; width:25px;padding: 0px;margin:0px; border:0px; text-align:left;}
</style>
</head>
<body>
<header>
<nav id="left_menu">
<ul id="left_menu">
<li>Hi1</li>
<li>Hi</li>
</ul>
</nav>
<nav id="right_menu">
<ul>
<li>Hi1</li>
<li>Hi</li>
</ul>
</nav>
<img id="logo" src="logo.png" alt="logo" />
</header>
</body>
</html>
markt answered this question, with ul {padding:0;}, and the code I added to fix this problem is: nav#left_menu > ul {padding:0;}
edit: If I had this gap problem on both sides when floating, I would have used markt's exact code; however, I only had the issue with the left menu, hence I used my code, even though markt's code works too.
It is padding on the ul
try adding:
ul { padding: 0; }
to your css
I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.
The CSS for my background color is as follows:
body{
background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}
I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.
My navigation HTML is as follows:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
My CSS, of course, styles this header.php.
This is my website.
Thanks in advance!
Change the CSS to this:
nav {
background-color: #fff;
margin: 0px -12.5%;
}
Gives the following result:
If you're not happy with this solution, you are going to need to modify the HTML.
Put an id on the nav tag and style the menu over css.
Html:
<nav id='nav'>
// menu
</nav>
Css:
#nav {
background-color: 'white';
}
I'm pretty sure you just need to set the nav background as white..
in your css:
nav { background-color:#fff; }
Extending the full width:
can also be done with HTML resdesign
HTML
<body>
<nav>
<!-- nav code -->
</nav>
<div id="container">
<!-- all of the rest of your code -->
</div>
</body>
CSS
body { }
nav { background-color:#fff; }
#container {
background-color:#D0D0D0;
margin:0px 10%;
}
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}
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.
Hopefully you can see what the problem is, I want the links to go side by side not on top of each other?
Can you please see what the problem is on JS Fiddle: http://jsfiddle.net/pky7X/
Thank you for any help
At first, you forgot the <ul></ul>
<style>
ul {
list-style-type: none;
}
li {
float: left;
border: 1px solid #ff9900;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
</ul>
First: You're missing <ul> around your <li> tags (don't think that's valid in HTML5; it wasn't before).
Second: Why even using list items and then removing the list-style and adding float?
Just use <span> or the <a> directly...
HomeAbout
... and then use CSS to set their padding, style, dividers, etc.
Remove the <br /> and place <li> tags inside a <ul> like so:
<ul>
<li>Home</li>
<li>About</li>
</ul>
Remove margin: -35px 220px; from CSS and remove the <br /> from HTML.