This is very strange. Here's the code:
nav {
position:relative;
}
ul.navul {
padding:0;
margin:0;
background-color:rgba(12,11,11,0.9);
}
.navul li {
list-style-type:none;
display:inline-block;
border-left:1px solid white;
}
.navul li:first-child {
border-left:none;
}
.navul a {
display:inline-block;
padding:10px;
margin:0px;
text-decoration:none;
color:#fff;
border:1px solid blue;
}
Here is a snapshot of what I see:
Little Blocks Of Link
As I decrease the padding in 'a' tag, the size of the blocks go smaller and vice versa. I have already made list-style-type as "none". I have tried making padding:0 and margin:0 on 'li' tag but it doesn't seem to work. I really don't have a clue of what's going on.
Can anyone help?
Try this. I've removed the blue border and instead added the white border around the anchor a tags rather than the li tags
nav {
position:relative;
}
ul.navul {
padding:0;
margin:0;
background-color:rgba(12,11,11,0.9);
}
.navul li {
list-style-type:none;
display:inline-block;
}
.navul a:first-child {
border-left:none;
}
.navul a {
display:inline-block;
padding:10px;
margin:0px;
text-decoration:none;
color:#fff;
border-left:1px solid white;
}
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
i'm trying to create an horizontal menu on my site.
The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.
I've created the html
<div class="prima">
<ul class="prima_lista">
<li>primo</li>
</ul>
</div>
<div class="seconda">
<ul class="seconda_lista">
<li>secondo</li>
</ul>
</div>
and then i've created the CSS that will organize everything
.prima{
position:absolute;
top:400px;
width:50%;
left:-70px;
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px;
border:1px solid green;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}
ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}
ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?
No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/
--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.
I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/
Here is the html:
<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li>primo</li>
</ul>
</div>
</div>
And the css
#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px;
border:1px solid red;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}
ul.prima_lista li {
display:inline-block;
/* border-top:1px solid #dededc; */
/* padding-top:16px;
padding-right:40px; */
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
.seconda_lista{
width:50%;
right:-70px;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}
ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
Hope this helps! Littleswany
How can I get a list to flow to the side?
The best example ive seen of what I mean is on TruTower's VoIP Page. I'm trying to update my site from old html to new css but cant find the right code.
Prefer OL style (numbers) but UL is okay too.
You may want to look at this jsfiddle for an example to get you started.
http://jsfiddle.net/ashrobbins/SKzwU/
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
Updating Andrew's answer to suit your needs exactly:
Screenshot:
HTML:
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ol>
CSS:
ol {
margin:0;
padding:0;
position:absolute;
right:0px;
left:0px;
background: #eee;
}
li {
float:left;
padding-left:5px;
list-style-position: inside;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:inline-block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
li:hover{
color: #fff;
background-color:#666;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
FIDDLE
I am trying to modify/update a webmail script where i want to have two hyperlinks inside a li tag without the second link wrapping to the next line. I also want to have the whole <li> to be clickable, similar to what yahoo mail has.
I have searched on here and googled but can't find anything that works.
this is what isnt working:
<div class="vertical">
<ul>
<li>Folders</li>
<li>Inbox</li>
<li>Drafts</li>
<li>Sent</li><br/>
<li>Trash [empty]</li>
</ul>
</div>
This is the code i have so far including the css that i cant get it to work.
http://jsfiddle.net/z4gQC/33/
Thanks in advance for any help.
See working example here: http://jsfiddle.net/pratik136/z4gQC/26/
Change your CSS to:
div.vertical
{
width:100%;
height:80px;
}
div.vertical ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.vertical li
{
float:left;
width:200px;
background-color:#f3f3f3;
}
div.vertical a
{
display: inline-block;
width:50px;
}
div.vertical a:link,div.vertical a:visited
{
font-weight:bold;
color:#666666;
text-align:left;
padding:8px;
text-decoration:none;
}
div.vertical li:hover,div.vertical a:active
{
background-color:#d4d4d4;
}
span
{
display: table-cell;
vertical-align: middle;
}
Edit:
OP requested the [empty] one to be right aligned.
Fiddle: http://jsfiddle.net/pratik136/z4gQC/35/
Add a class to [empty] as
[empty]
And add the following to your CSS:
div.vertical a.right:link, div.vertical a.right:visited{
text-align: right;
}
Make links floating:
div.vertical a {
float: left;
}
And make hover effect with li tag, not a tag:
div.vertical li {
background-color:#f3f3f3;
}
div.vertical li:hover {
background-color:#d4d4d4;
}
Demo: http://jsfiddle.net/z4gQC/31/
Try this change your css to this
check fiddle
div.vertical
{
width:100%;
height:80px;
}
div.vertical ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.vertical li
{
float:left;
width:200px;
background-color:#f3f3f3;
}
div.vertical a
{
display: inline-block;
width:50px;
float:right
}
div.vertical a:first-child{ float:left}
div.vertical a:link,div.vertical a:visited
{
font-weight:bold;
color:#666666;
text-align:left;
padding:8px;
text-decoration:none;
}
div.vertical li:hover,div.vertical a:active
{
background-color:#d4d4d4;
}
span
{
display: table-cell;
vertical-align: middle;
}
Simply correct your css to :
div.vertical a
{
display:inline-block;
}
instead of :
div.vertical a
{
display:block;
}
http://jsfiddle.net/z4gQC/18/
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish
Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.
Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.
float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}