Today I am wondering how to align text horizontally. us.mineplex.com The forums, shop, title, etc are aligned perfectly and horizontal. How do they do that? I tried to figure it out my self and need some help, Thanks.
CSS:
.header_container{
width: 100%;
height: 185px;
background-color: black;
}
.navtabscontainer{
background-color: #6ED16E;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border: solid;
border-color: blue;
position: relative;
top: 180px;
height: 75px;
text-align: center;
list-style: none;
}
.headerlogo{
background-image: url('logo.png');
}
.divider{
height: 49;
width: 3px;
background-color: white;
position: absolute;
left: 109px;
top: -16px;
}
.navtabs{
color: white;
text-decoration: none;
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center;
}
* {
margin: 0;
}
.textip{
border: solid;
border-color: blue;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: red;
font-size: 20px;
position: absolute;
right: 300px;
top: 100px;
}
HTML:
<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header_container">
<h3 class="textip">Server IP: Minetage.com</h3>
<div class="header_logo">
<div class="navtabscontainer">
<ul class="navtabs">
<li href="Games">Games</i>
<li class="divider"></li>
<li href="Games">Forums</i>
<li class="divider"></li>
<li href="Games">Home</i>
<li class="divider"></li>
<li href="Games">Leaderboards</i>
<li class="divider"></li>
<li href="Games">Contact</li>
</ul>
</body>
</html>
You can make your list appear inline like this:
.navtabs li {
display:inline;
}
This way you won't need the empty list items as dividers.
If you want to space them out, add left/right padding or margins to the anchor inside (which you'll need anyway if it's a menu).
<ul class="navtabs">
<li>Games</i>
<li>Stuff</i>
</ul>
then
ul.navtabs li a {
display:block;
padding: 0 2em;
}
Assigning display:inline; to the list item, then display:block; to the anchor within allows styling the link without needing 'display:inline-block', which causes issues with older versions of IE
Also, 'href' is an attribute for anchors <a>, not list items <li>. If you click a <li>; with a href attribute, it won't do anything.
You need to display the list inline. The following should work:
.navtabs li {
display:inline-block;
}
Your problem is that li are by default set to display: block;
This style makes the width as wide as its parent element.
To fix this, give all the li tags the style display: inline-block.
Example jsfiddle
Add this to your CSS
.navtabs li
{
float:left;
display:inline-block;
padding-left:5px;
}
Float:left this floats the li element to the left
display:inline-block; Click here to know about Display properties
Fiddle
Output:
Related
I have a problem.
I have a list with link in all item of the list.
And when I want to add a span inside anchor tag, i have a space and can't remove it..
<li class="elementMyAccount spaceTopBetweenElementMyAccount">
<a href=""
class="elementMyAccountText">
Text4
<div class="adressDescription" >(text4)</div>
</a>
</li>
I send you jsFiddle to show you css and html:
https://jsfiddle.net/5fwvsqnb/10
I had remove this space line with change on my css, but it worked only on google chrome ... but not Safari and IE ( don't try others )
I changed css by :
#my-account .elementMyAccountText{
font-size: 15px;
position: absolute;
margin-left : 5px;
line-height:60px;
width:240px;
display: flex;
align-items: center;
}
#my-account .adressDescription{
display:block;
position:absolute;
font-size: 11px;
text-decoration: none;
margin-left: 40px;
line-height:15px;
display: block;
}
But maybe it's not the solution because on IE I have a space between my span and my text above.
Thanks all if you will try to help me !
The issue is in your code, elementMyAccountText class have position: absolute;.
If you want to display TEXT in left align with the center of the box then You can use display: flex to the ul and li and align-items: center; to the li.
If you want full box clickable then
Remove height from elementMyAccount class and add below code
ul li a{
width: 100%;
display: block;
padding: 20px 0;
}
.listElementMyAccount {
margin-top: 50px;
}
.listElementMyAccount ul {
margin-left: -8px;
display: flex;
}
.elementMyAccount {
border-radius: 7px;
border: 1px solid black;
height: 60px;
width: 240px;
margin-left: 8px;
margin-top: 8px;
display: flex;
align-items: center;
}
/*.elementMyAccountText{
font-size: 15px;
position: absolute;
margin-left : 5px;
line-height:60px;
width:240px;
height:60px;
}*/
.elementMyAccountImg {
margin-left: 5px;
opacity: 0.75;
margin-right: 10px;
vertical-align: middle;
}
.adressDescription {
display: block;
position: absolute;
font-size: 11px;
text-decoration: none;
line-height: 15px;
display: block;
}
<div class="listElementMyAccount">
<ul>
<li class="elementMyAccount">
<a href="" class="elementMyAccountText">
TEXT1
</a>
</li>
<li class="elementMyAccount">
<a href="" class="elementMyAccountText">
TEXT2
</a>
</li>
<li class="elementMyAccount">
<a href="" class="elementMyAccountText">
TEXT3
</a>
</li>
<li class="elementMyAccount">
<a href="" class="elementMyAccountText">
TEXT4
<span class="adressDescription" >(text4)</span>
</a>
</li>
</ul>
</div>
I'm not specialist, but I guess, this is because render engine (i don't know to name that) cannot recognize your style e.g. -webkit-column-count. IE is not supporter, if is it, it will no longer soon. Forget about IE.
This is my html code below:-
.header {
background-color: #b6b4b4;
padding: 5px;
}
.logo {
border-radius: 30px;
float: left;
}
#social {
width: 50px;
border-radius: 100%;
float: right;
}
.navigatbar {
margin-top: -16px;
}
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
}
.topnav {
background: #ffffff;
}
a {
color: #2ad2c9;
}
.active {
background-color: #e8e8e8;
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
}
.droplinks a {
padding: 10px;
display: block;
}
.dropbutton:hover .droplinks {
display: block;
}
<body link="#008080" vlink="#66b2b2">
<div class="header">
<img src="images/logo.jpg" class="logo">
<img src="slike/yt.png" id="social">
<img src="slike/ig.png" id="social">
<img src="slike/fb.png" id="social">
</div>
<div class="navigatbar">
<ul class="topnav">
<li class="active" id="navigat">Početna</li>
<li class="dropbutton" id="navigat">Fitnes
<div class="droplinks">
Treninzi
Dijagnostika
</div>
</li>
<li id="navigat">Školica sporta</li>
<li id="navigat">Boks</li>
<li id="navigat">Personalni treninzi</li>
<li id="navigat">Ishrana i zdravlje</li>
<li class="dropbutton" id="navigat">Prevencija i rehabilitacija
<div class="droplinks">
Prevencija
Rehabilitacija
Kiropraktika
Kinezitejping
</div>
</li>
<li id="navigat">Kontakt</li>
</ul>
</div>
</body>
Now, here is the problem: my dropdown menus work, but both of them open on the left side of the navigation bar, under the first element. Where have I gone wrong?
I've tried to add some margin-left and it works, butthe problem is that it moves both of them for the same amount of pixels, and they're still opening on the same place. I could give different classes to them and add them a different margin-left, but I'm kind of sure that that is not the only possible solution.
Can anyone help me, please?
Change your CSS in 2 places:
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
position: relative; /* add this line */
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
left: 0; /* add this line */
z-index: 1; /* add this line */
}
Add this to your css
.dropbutton { position: relative; }
Absolutely positioned elements are positioned relative to their first ancestor that have a non-static position. position: static is the default for all elements, unless otherwise supplied.
That means in your case, the drop down menus are both positioned relative to the body of the document. What you want, is to position them relative to the button that triggers them. The above suggestion should take care of that.
Also, use left, top, right and bottom instead of margin to position your dropdowns.
I have a collapsible menu (using Bootstrap 3) that uses a unordered list with links (anchor tags) as the list items. I would like to be able to get a small "delete" button to appear on the same line as the anchor tag text, but it keeps wrapping. The intention is for the delete button to appear next to whatever the "active" link in the list is, which would be easy enough if I could get the layout/style correct. Here is a jsfiddle - look under "Header 2" to see what I mean: http://jsfiddle.net/jpatchak/2dvxL5dv/6/
I am using Bootstrap 3.3.5 and JQuery 2.1.3.
CSS:
ul.nav-list.my-tree
{
padding:0px 20px;
}
li.my-tree-item
{
padding:0px 0px;
margin: 0px 0px;
line-height: 5px;
cursor: pointer;
}
li.my-divider
{
height: 2px;
margin:9px 1px;
overflow:hidden;
background-color:#e5e5e5;
border-bottom: 1px solid #fff;
}
label.my-toggler.my-nav-header
{
cursor: pointer;
font-size: 15px;
}
.my-nav-header
{
font-size: 12px;
font-weight: bold;
line-height: 20px;
color:#999;
text-transform: uppercase;
}
li a
{
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
Markup:
<div class="well col-sm-4" style="height:1000px;">
<ul class="nav nav-list">
<li class="my-divider"></li>
<li>
<label class="my-nav-header my-toggler">Header 1</label>
<ul class="nav nav-list tree my-tree">
<li class="my-tree-item">First Item</li>
<li class="my-tree-item">Second Item With Really Long Text</li>
</ul>
</li>
<li class="my-divider"></li>
<li>
<label class="my-nav-header my-toggler">Header 2</label>
<ul class="nav nav-list tree my-tree">
<li class="my-tree-item">First Item</li>
<li class="my-tree-item">Second Item With Really Long Text<button class="btn btn-danger btn-xs">Delete</button></li><!--this is where I want the text (with ellipses) and the button on the same line...
</ul>
</li>
</ul>
</div>
Some JQuery for the animation:
$(document).ready(function(e){
$('ul.my-tree').css('display', 'none');
});
$('label.my-toggler').click(function () {
$(this).parent().children('ul.my-tree').toggle(300);
});
add the following rule to your css that loads after the bootstrap one:
.nav>li>a {
display: inline-block;
vertical-align: top;
width: calc(100% - 48px);
}
http://jsfiddle.net/2dvxL5dv/7/
Add to your .btn class the following if you want it to the right of the anchor:
.btn {
position: absolute;
right: -33px;
top: 0;
/* the rest of your styles here */
}
Otherwise change the "right" to a left and adjust if you want it on the other side.
I guess this is what you are looking for
http://jsfiddle.net/2dvxL5dv/8/
li.my-tree-item a {
display: inline-block;
}
li.my-tree-item .btn {
display: inline-block;
vertical-align: top;
}
Just added these codes.
May be you could change your css for this :
.btn-group-xs>.btn, .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
position: absolute;
right: -33px;//or left:0; if you want it on the other side
top: 0;
}
li.my-tree-item {
padding: 0px 0px;
margin: 0px 0px;
line-height: 5px;
cursor: pointer;
position: relative;
}
i have got a list which appears horizontal on my html.
but i would like the first 4 elements to appear in the middle of the screen with the same gap between them and then i want the last element in the list to be in the top right hand corner?
<ul id="navigationBarList">
<li>About</li>
<li>Bookings</li>
<li>Blog</li>
<li>Pricing</li>
<li>Sign In</li>
</ul>
everything I have tried has not worked so far. I assume it would be about giving an id or something to the individual items but that for some reason has zero effect
this is the css:
#navigationBarList{
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList li{
display: inline;
width: 100px;
margin-right: 20px;
}
It's not 'really' a menu item as such in this context. Use a different element outside of the menu which can then be positioned anyway you want.
#navigationBarList {
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
text-align: center;
}
#navigationBarList li {
display: inline-block;
width: 100px;
margin-right: 20px;
}
a {
text-decoration: none;
color: white;
}
nav {
position: relative;
}
#login {
position: absolute;
top: 0;
right: 0;
margin: 0.25em;
}
<nav>
<ul id="navigationBarList">
<li>About
</li>
<li>Bookings
</li>
<li>Blog
</li>
<li>Pricing
</li>
</ul>
<a id="login" href="#Sign In">Sign In</a>
</nav>
NOTE: - I should point out that you can still leave the #SignIn link as a list item if you so wish but, in that case, the parent ul should receive position:relative to achieve the same effect.
You could use a psuedo-selector for the last element
#navigationBarList li:last{ /* css */ }
Or give it an ID and style just that ID which will have more specificity
<li id="signin">Sign In</li>
#navigationBarList li#signin{ /* css */ }
You could do it like this. Using "margin: auto" to center align the text and adding an extra container.
I also assume you want the space between link text to be equal and not the whole width that each link spans.
#navigationBar{
display: block;
position:relative;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList{
display: block;
margin:auto;
width:600px;
}
#navigationBarList li{
display: inline;
margin-right: 20px;
margin-left:20px;
}
#navigationBarList li:last-child{
position:absolute;
right:20px;
}
<div id="navigationBar">
<ul id="navigationBarList">
<li>About</li>
<li>Bookings</li>
<li>Blog</li>
<li>Pricing</li>
<li>Sign In</li>
</ul>
</div>
This is my image-button for my website. http://puu.sh/cK7Sf/6309c39cdb.jpg When I re-size my browser it goes over here http://puu.sh/cK7VU/f17dafcc41.jpg
Here is my code
HTML
<div class="Nav">
<div id="buttons">
<div id="home_button"></div>
CSS
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}
Keep in mind i am new to css and html, please dont hate
You should not use absolute position for this. Change it to position: relative; or position: static; The absolute positioning is causing the button to shift by the coordinates (top: 196px; left: 502px;) from the edge of the browser window.
I suggest researching the float property as well, because it's very useful in positioning things so that they flow nicely, especially for navigation like this.
You really should try to use lists for navigation. Here I made a quick-hand example. Further, you could easily recreate your button with CSS. So no need to use background-image
.nav-container {
background: #CCC;
width: 80%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.nav {
padding: 10px;
}
.nav-item {
display: inline-block;
padding: 10px;
background: linear-gradient(#68B6E7,#3349D3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#68B6E7,endColorstr=#3349D3);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#68B6E7,endColorstr=#3349D3)";
font-family: Verdana, sans-serif;
border: 2px solid #000;
border-radius: 4px;
}
.nav-item a {
text-decoration: none;
color: #000;
}
<div class="nav-container">
<ul class="nav">
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
</ul>
</div>