I have bootstrap navbar and i want the links in the top of the list item
<li>
<a class="menuLinks" href="http://news.bootswatch.com">Blog</a>
</li>
CSS:
.menuLinks {
vertical-align:top;
}
I tried this too:
.menuLinks {
position:absolute;
top:0;
}
and it didn't work too.
How can I do that?
Try to add this properties:
display:table-cell;
height:40px;
vertical-align: top;
Need more information to know what you want to do. If its positioning the element, you can change that in your css with margins etc. Or if you want it above other elements then you need to move the html code above those elements. If you display more of the code it might make it easier to help you.
Related
Im trying to create a menu where all links have a background associated with it, and displayed in an inline format. I want the widths of these elements all to be the same, but I have having a hard time trying to figure out how to do this, as the width seems to be based on the text length, padding does not seem to help with this issue as the text length varies. Any help would be greatly appreciated. Example JSFiddle:Here
Example:
HTML
<div id="menuLink">Fuzz</div>
<div id="menuLink">FuzzBuzz</div>
CSS:
#menuLink{
background:#cccccc;
display:inline;
width:200px;
height:50px;
}
inline elements are not affected by width statements.
Just make them inline-block.
.menuLink{
background:#ff0000;
display:inline-block;
width:200px;
height:50px;
}
<div class="menuLink">Fuzz</div>
<div class="menuLink">FuzzBuzz</div>
JSfiddle Demo
Note: You can't re-use IDs on the same page so I converted those to a class.
You may achieve the same thing by changing your html structure to the most adopted practice of using ul li for navigations.
<ul>
<li>Fuzz</li>
<li>FuzzBuzz</li>
</ul>
Same styling is still valid:
ul li{
display:inline-block;
width: 200px;
background-color:red;
height:50px;}
I was wondering how I could make the whole list item clickable and not just the words. In my list I am only able to click on the words. How could I turn the whole list area into a link? I have the list made with a link inside of it but I want you to be able to click anywhere inside the list area to get redirected. Thank you.
And I am new to this website so I am sorry if I am asking this wrong.
You need to make the anchor tag a block element and let it control the height of the list item
here is a sample:
HTML:
<ul>
<li>
click me!
</li>
</ul>
CSS:
ul {
width:200px;
padding:0px;
margin:0px;
list-style:none;
}
li {
width:100%;
background:green;
position: relative;
}
li a {
display:block;
height:50px;
}
jsfiddle:
http://jsfiddle.net/24ELw/
You could just insert buttons inside the list items and style them borderless and without a background color -> jsFiddle
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left
i'm trying to achieve the following (for building a form):
Name: [ ] *
my markup is:
<label>Name:</label>
<input type=text name=name>
<span class=validate></span>
my css is:
label
{
display:block;
width:50px;
float:left;
}
input
{
float:left;
}
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
}
the problem: the validate-span is positioned to the very left border instead of right to the textbox. what is wrong?
thanks
You are using display: block on your span, so it will automatically go to a new line. You can change it to inline-block or float it as well.
You need to also add float: left to your span.validate.
See: http://jsfiddle.net/8jDjq/
But, that won't look right if you add another set of the elements underneath: http://jsfiddle.net/8jDjq/2/
To fix that, you need to add clear: both to label: http://jsfiddle.net/8jDjq/3/
You need to float:left the validate span (or reconsider those display:blocks, but I guess they're there for a good reason).
Give the span a float:left too.
span.validate
{
display:block;
background-image:url(img/required.png);
width:16px;
height:16px;
float:left;
}
U need float:left; for your span
jsFiddle
I am trying to format a quote so that it appears a certain way within a post.
Here is the CSS:
.inner_quote {
background:RGBA(255,250,205,.4);
margin-left:50px;
width:200px;
position:absolute;
}
The problem is that because I am doing position:absolute; there is no space allocated for the quote between the before text and the after text.
How can I get the quote to appear the way it currently does, but not have this layout problem?
You have two options here:
Remove position: absolute and change the <span> tag to a <div> tag
Remove the position: absolute and add the property display: block within the .inner_quote css tag
Enjoy.
set is as block element and position it relative.
.inner_quote {
background:RGBA(255,250,205,.4);
margin-left:50px;
width:200px;
position:relative;
display: block;
}
but you should also use <blockquote> to be semantic.