how to put links in one line [CSS]
Tags: css3
Problem :
I have the following links :
<div class="links">
<a href="Default.aspx" class="kustomborder">Home</a>
<a href="#">About Me</a>
<a href="#">Contacts<span></span></a>
<a href="#">Contact Author</a>
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
Solution :
You've got display: block
assigned to your <a>
tags. That will put each one on their own line. Remove that, and they'll be on the same line.
CSS Howto..
The URI represeting the resource from the bundle can not be represented as a file. So the approach to create a file from the URI is not possible. What you...
element.addEventListener('transitionend', function(event) { alert("CSS Property completed: " + event.propertyName); }, false ); For now, the exact event name has not been standardized. Here's a quote from MDN: There is a...
If you did want to correct this though you could do the following: Make sure the image source is correct, if it's correct then you could declare the image in...
I believe you cant. Instead add it to a test div,find the width and then remove the div. $selector.append("<div id='test'></div>"); var widthVal= $selector.find("#test").width(); $("#test").remove(); selector is the element selector you...
What about using the following selector: input[id^='something_stuff_'][id$='_work'] It will get inputs with id starting with "something_stuff_" and finishing with "_work"....
Write float:left or display:inline-block in the div css because div is a block element that's why it comes below each other. So; that's why we use float & inline-block to...
You can do it like this: var elem = document.getElementById('ELEMENT_ID_HERE'); elem.style.textDecoration = 'none'; ...
Assign width for the class. .mess{ text-align: center; display: inline-block; margin: 0 auto; background: #212121; color: #FFFFFF; margin-bottom: 50px; max-width: 350px; position: absolute; top: 40px; left: 0px; right: 0px; z-index:...
Check out flexbox, this might be an option for you. This demo is pretty handy, you would choose space-around (if I understood your question correctly): http://codepen.io/chriscoyier/pen/FAbpm...
Because you're looking for a css solution, this is the way to go: img { height: 100vh; } It uses a unit that is based on the viewport's height vh....
These are the steps you can follow: Add an id to the <link /> tag. <link rel="stylesheet" href="style.css" media="bogus" id="myLink" /> Use the following JavaScript (either one of the lines):...
Javascript $("td").click(function () { if ($(this).hasClass('news')) { $(this).removeClass("news").addClass('part'); /* click 1: works*/ } else if ( $(this).hasClass('part')) { $(this).removeClass('part' ).addClass('easy'); /* click 2: doesn't*/ } else { $(this).removeClass('easy' ).addClass('news'); /*...
You can use positioning to move the red list item to the left, and text-align:center on the <ul> to center the blue list item: ul { background-color:yellow; width:100%; height:25px; margin:0px;...
Instead of using class ChartDiv why don't you use bootstrap class col-sm-6 and put all the contents inside a div in it.
It looks like your plugin is not installed at all. If you are sure that you installed the plugin in Visual Studio, double check how many other versions of VS...
Since you're giving your div a fixed width, just add on overflow:hidden; to it's style and the overflow from the table won't show. JSFiddle: http://jsfiddle.net/ginovva320/CFbKR/...
Just wanted to report how I solved this problem. I was able to come up with this line and have tested it extensively. $css_new = preg_replace('/(.*^'.$definition.'\s{.*?\s'.$property.':)[^;]*([^}]*)/ism','$1 '.$value.'$2',$css_temp); If you see...
CSS doesn't fade or animate background images without a javascript plugin. If you want an only CSS option, you need to wrap it in a div, and fade in/out the...
Create a css selector for each theme: .theme-time { font-family: "Times New Roman"; } .theme-courier { font-family: "courier"; } .theme-verdana { font-family: Verdana, sans-serif; } Then, to give the...
You should use setInterval() to repeat your code for seconds. Because you added background of element in style attribute, you can use HTMLElement.style to get name backgroud color. setInterval(function(){ $("div").each(function(){...
Add this lines to your css : #nav ul li.right:hover { border-radius: 14px; border-bottom-left-radius:0; border-top-left-radius:0; width:137px; } #nav ul li.left:hover { border-radius: 14px; border-bottom-right-radius:0; border-top-right-radius:0; } and change the li...
First and foremost, you should use the new CSS Flexible Box Module syntax (which is now referred to as "Flex" rather than "Box"). See the spec here: http://www.w3.org/TR/css3-flexbox/ Here is...
I don't know p5 too much, but what you want is achievable without CSS at all : First, replace your p5 canvas with a Vanilla one. In your draw, proceed...
here's an example https://jsfiddle.net/1dw55eu7/1/ just wrap your image inside a div and your button inside another div, so the button will be cascaded directly below the image then you can...
You'd set a cookie, and probably not even render the box in your PHP if it was found.
You can use <fieldset> for that. check Fiddle https://jsfiddle.net/sepyzund/ html: <fieldset class="reg-step first-step"> <legend class="step-number">1</legend> <img src="" alt="Register"> <h1>Register</h1> <div class="steps-separator"></div> <p>Lorem ipsum dolor...
You need a higher z-index for the hamb. Remember z-index works just for positioned elements, you need to change the default static position of the button. .overlay { position: fixed;...
If your divs have fixed sizes, you can use borders to make two triangles as described in How do CSS triangles work?: div{ display:inline-block; border-top:100px solid red; border-right:100px solid grey;...
Don't use div use a span insert: function(data){ return '<span >' + '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>' + '</span>'; } ...
Actually the font-size is the same for both the numbers and the alphabets but if you'd still like to reduce the font-size of the numbers, you can wrap your numbers...