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;
}
Related
As you can see on the screenshot below, in my sidebar the right border of "KULTUR" is cutting off. Its always at the last element of the row.
I have tried to change margins and paddings but it's not working unfortunately.
Here is the URL to my website: http://holmsbuopplevelser.dahlsdata-test.com
It's in the right sidebar if you scroll down a bit.
Thanks in advance!
Try this:
.widget_categories li{
display: inline-block; //rather display:inline
}
I had checked your code and it is the only way you can manage tags with dynamic width and fix it!
find class ".widget_categories li" in your css and change display from "inline" to "inline-block".
.widget_categories li{
display: inline-block;
}
some of your li and buttons have this problem , add display:block to the buttons , and add display:inline-block to li , this will fix your issue, i checked your site
span.vc_gitem-post-category-name {
display:block;
}
.widget_categories li{
display: inline-block;
}
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/
I am new here. Excuse me being a noob. I am a HS student seeking some help.
I cannot seem to paste my code so here's the link for jsfidlle
http://jsfiddle.net/zeusthunder10/WSD9f/6/
<body bgcolor="#D1D1D1">
<div align="center">
You have the style
#navbar li { ... float: left; ... }
so all the li's, you know, float to the left.
You probably want:
#navbar li { ... display: inline-block; ... }
Here's your Fiddle with that swap. IS that what you wanted?
One way to center a block element like ul and without width is to use the trick display: table on the #navbar.
Also you need to add the missing </ul>
Jsfiddle fixed: http://jsfiddle.net/WSD9f/8/
It looks like you didn't close the ul tag. You will want to put a /ul at the end of your list.
Try putting "display:inline-block;" in your #navbar class
#navbar {
margin: 0;
padding: 0;
height: 1em;
display:inline-block;}
I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
Pretty basic question - I can't seem to vertically align an icon inside of a list.
My css looks likes this:
#top_content img {
float: left;
}
#top_content ul {
float: right;
}
#top_content li img {
vertical-align: sub;
}
#top_content li {
list-style-type: none;
display: inline;
}
#top_content li a {
text-decoration: none;
color: #7aa807;
}
My HTML looks like this:
<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><strong>(1 New)</strong></li>
</ul>
</div>
Any ideas? What am I doing wrong here?
Try adding line-height to it:
#top_content img {
float: left;
line-height:20px; /* adjust accordingly */
}
Expecting vertical-align to work properly :) In your case would it be possible to set mail_ico.png as a background image on the <a>? That's how I handle cases where the vertical position of an image is important in a design.
Don't float the image. It will no longer be inline behavior, that is what is causing your problem.
float: left is basicly canceling out the effect of vertical-align. vertical-align c ontrols the alignment of an in-line element to other in-line elements on the same text line. float: left makes the img a block element, on which vertical-align has no effect.