I just started learning HTML and CSS from one guy tutorials and I have a problem. I want that my navigation and heading would be at one line, but when I type display: inline; it doesn't do anything.
Here's the photo:
My HTML and CSS: http://pastebin.com/uZunJFr7
Any help?
You are setting rules for nav ul instead of nav, which is the sibling of h1 in your code, and is the one that needs to line up with it. Also, use inline-block instead of inline.
Working fiddle: http://jsfiddle.net/fzhg4cof/
do this:
header h1 {
margin: 0;
float: left;
}
heres a fiddle --> https://jsfiddle.net/dnqxLwkp/
Related
This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.
Looking for a CSS solution with the following:
Icon must float to the right of the link.
CANNOT put the icon inside the anchor tag, they must remain at same level.
<a></a><i></i>
jsfiddle
If anyone can solve this, it'd be greatly appreciated.
Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.
If you can't do that, then you should wrap the icon inside the a.
You can try add:
display: inline-block;
to your a inside the li tag.
nav>li>a {
position: relative;
display: inline-block;
padding: 10px 15px;
}
(Edit: I'm new to coding, so my apologies for stupid mistakes)
I can't find any errors in my coding, but my images are positioned slightly off-centre, to the right :( The images have been entered using a list format, but I'll just copy one image and then the relevant CSS:
<nav>
<ul>
<li>
<img src="Images/mountains.jpg" alt="Mountains">
</li>
</ul>
</nav>
(Updated) CSS:
li {
text-align: center;
margin: 0 0 40px;
}
I cant find what's wrong :(
Is it possible that my table is out of line? (Reference image in comments)
My ul element had some default padding, so I removed all padding in my universal selector.
It's always best practice to use reset css or normalize and then style your elements as per your need.
As stated in the commemt position: center; is not valid css.
To align to the center, give your li elements a text-align a center like:
li {
text-align: center;
}
Figured it out!
My ul element had some default padding, so I removed all padding in my universal selector.
I am trying to learn basic HTML and CSS. This is the code I have currently:
http://jsfiddle.net/spadez/vvDJ9/3/
There are two issues with the code:
Currently not only is there a large gap between the list items
The list in the header doesn't have the top padding correctly applied. It should sit in the middle of the header.
Here is the relevant bit of the code:
header a { padding: 15px 20px; background-color: #16AD8F; }
This is because your lis are inline-blocks. You can, of course, redo the code and fix that using floats, for example... or get rid of the whitespace by joining lis together (</li><li>..., see here: http://jsfiddle.net/vvDJ9/6/), etc...
But there's a nice little hack to get rid of the space: set font-size: 0; to their parent ul element: http://jsfiddle.net/vvDJ9/5/
#header ul {font-size: 0;}
And to get the top padding correctly, just set your anchors to display: block;: http://jsfiddle.net/vvDJ9/9/
#header a {display: block;}
All I want to do is put a header that has the page title and has a link to sign in that's inline with the title. This seems very simple but nothing I do is working. Here is what my code looks like:
HTML
<h1>Title</h1>Sign in
CSS
.signIn {
float: right;
display: inline;
}
The float: right works but it isn't inline with the title like I want it to be. Thanks.
Replace h1 with the a in the markup
Sign in<h1>Title</h1>
when leaving CSS as it is.
Just place the a with the .sign-in class before the h1, as for tags with float:right; or classes with float:right; declarations should be declared first.
Here is the WORKING SOLUTION
The HTML Change
Sign in<h1>Title</h1>
tr y giving float:left; to h1 tag
I think this is what you need
h1{display: inline;}
.signIn {
display: block;
float: right;
}
At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can't solve by myself.
I am customizing the media queries, but when it comes to the links inside the navbar I am stuck.
I want .brand to be centered and the navigation links should be centered below - a new line for each link. I managed to center .brand using this CSS code in the appropriate media query:
.brand {
display: block;
width: 100%;
text-align: center;
}
Now for the links. This is the code:
.navbar li a {
display: block;
}
The selector seems right because when I assign a background color, it shows up. But using display: block; does not result in a new row for each link. Using width: 100%; also does not result in the desired form.
My guess is that it has something to do with the li each link is wrapped in.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Thomas Glaser</a>
<ul class="nav">
<li>Arbeiten</li>
<li>Thomas</li>
<li>Kontakt</li>
</ul>
</div><!-- /.navbar-inner -->
</div>
I tried to fiddle around with the CSS, but using a trial & error method in combination with such large CSS files is not really recommended I guess, that's why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?
It's actually pretty straightforward, all you need are the following css rules:
.navbar .nav {
width: 100%;
}
.navbar .nav > li {
float: none;
text-align: center;
}
So you were right, it's the li that needs to be styled, not the anchor :)