So I have two things in a header, namely an image in a h1 and a nav. Here's a simplified version of the HTML:
<header>
<h1><img src="../img/logo.png"></a></h1>
<nav>
<ul>
<li>blahblah</li>
</ul>
</nav>
</header>
I want to make the h1 element go to the left and the nav go to the right. I simply gave the header a width and absolutely positioned both h1 and nav like so:
header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}
It works, but I find it somewhat inelegant. Is there any other nicer way to do it?
Yes, you should be able to just float them left and right without the positioning.
header {
height: 120px;
}
h1 {
float: left;
}
nav {
float: right;
}
usually you just float the elements in their respective corners, such as
header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }
overflow is used in order for header to retains a height around the elements, but it can be removed in some cases.
Float property of CSS allows you to float the element to right or left but if you are looking to indent the element then you may need to use
text-indent: 10px;
you may add this in a class and add this class to elements wherever you need the Indentation
Related
I'm very confuses about float.
.two should be on the right of .one
but .two just below .one
div {
width: 100px;
background: #FF9;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
into div css add display:inline-block;
div{
display: inline-block;
}
.theright {
float: left;
font-size: 20px;
}
add that in, if you want 2 divs to be next to eachother it is best to have them both float right.
additionally you could replace .theone with .theone,.theright
A div has display: block by default.
You probably want to set another display type to your divs.
div { width: 100px; background: #FF9; display: inline; }
.theone { float: left; font-size: 20px; }
See jsFiddle
I'll try and make a detailled and explained answer. A floating element floats from its initial position in the flow. Basically, the floating effect affects only elements declared after it on the HTML structure.
In your case, the right-floating element is declared after the non-floating one. So it is normal theright appears below theone and you don't see the floating effect.
To make an element float on the right of another, you must declare it before this another. Like this :
<div class="theright">two</div>
<div class="theone">one</div>
<style>
.theright {
float: right;
}
</style>
Note that for this to work, theright element needs to be larger than theone. Otherwise, theone will mask entirely theright pushing its content out of the box. It is so because a floating element gets out of the flow and hovers over the other elements, which contents "avoid" the floating blocks.
There are many other ways to obtain the same result with a different approch :
make theone float on the left instead (leaving theright as a basic block element)
make both elements inline-blocks and give them appropriate widths
for two elements only, it is not necessary, but if you need 3 or more elements side by side, you can make them all float on the left (or on the right declaring them in reverse order, depending on the final layout you want)
etc.
div {
width: 100px;
background: #FF9;
display: inline-block;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
By default div's have display value set to "block" which means they "begin from next line".
If you add display: inline-block property for all divs, then you can add float: left for any div to make it first.
I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
https://jsfiddle.net/87xzwj5t/
It's white-space that's doing you in.
Add this CSS:
.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }
and it'll fix your problem.
The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).
Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.
JSFiddle example
Remove the whitespace in html, i will work
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:
.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }
EDIT
What Josh said may be true. Why don't you just float them? Like this:
.span_1_of_2 {width:50%;float:left; }
.span_2_of_2 {width:50%;float:left; }
Then of course clear the float.
Just add float:left; to the first span
CSS
.span_1_of_2 {
width:50%;
display:inline-block;
float:left;
}
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.
DEMO HERE
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
This is my code for the two buttons:
HTML:
<div clas="buttons">
<a class="btn1" href="#">Ture</a>
<a class="btn2" href="#">False</a>
</div>
CSS:
.btn1 {
margin-bottom: 30px;
margin-left: 150px;
}
.btn2 {
margin-right: 150px;
}
However, "the margin-bottom:30px" attribute simply doesn't work. It failed to position the button vertically. Even more weirdly, the "margin-right: 150px;" attribute doesn't work for my btn2, and the two buttons are still adjoin to each other. BTW, my div is large enough to have the two buttons positioned seperately.
Margins should only be applied on block level elements. They will give unexpected results if you apply them on inlines, wich the <a> are by default: You could set padding in stead of margin. And indeed reverse them as #Mitz correctly suggested. The more correct way, but perhaps more difficult for beginners, would be to convert the <a> to block and float them left. Personally my css would look something like this:
.buttons {
padding: 30px 150px;
overflow: hidden; /* for clearfix */
}
.btn1, .btn2 {
display: block;
}
.btn1 {
float: left;
}
.btn2 {
float: right;
}
That is just how I interpret your code and think what you might want to achieve.
This is because naturally <a> is an inline element. You need to apply display: block; to it if you want to apply margins.
The two buttons will be one above the other afterwards. If you still want them to appear next to each other then you should float: left; them. And don't forget to apply some kind of .clearfix.
you should use margin-top and margin-left, instead of margin-bottom and margin-right...
you can use first button's height to push the other button down, like this
.btn1 { height:200px; }
and if you are using margins you should always define some height and width, like
.btn1 { height:20px; width:100px; }
.btn2 { height:20px; width:100px; padding-top:150px; }
update:
about the float comment-
float will get the two buttons sit side by side horizontally,
i think he wanted them aligned vertically
You can try float:left; for buttons.
I'm trying to put a live chat button on the right side of a menu without moving the menu at all.. if i put it inside of the menu then the menu will try and use it as an item and if i put it above it will move the menu down, if i put it below it will not align it correctly even if i use padding.
Can anyone tell me how to move around an element on a page freely without affecting other elements around it (i.e moving them)
CSS
/*===== header =====*/
#header .row-1 { height:110px; background:#0d0d0d; }
#header .row-1 .logo { position:relative; margin-right: 55px; padding:0px 0 0 0; float:left; }
#header .nav { float:right; }
#header .nav li { }
#header .nav li a { color:#727171; text-decoration:none; }
#header .nav li a:hover,
#header .nav li a.current { color:#fff; }
By Using position:absolute on specific element you can achieve it.
Example:
.chat{
position:absolute;
right: 0px;
z-index: 9999;
width: xyz;
height: xyz;
}
Hey now you can used to position as like this
your main menu div id give to position relative
and give to chat id position absolute as like this
css
.nav{
position:relative;
}
.chat{
position:absolute;
right:-20px;
z-index:999;
width:xxx;
height:xxx;
}
HTML
<div class="nav">
<div class="chat">
// your chat code here
</div>
</div>
Without knowing the exact code i think somebody like that would work:
Set the outer container to a relative position. Now you can insert a item with a absolute Button in it wich is over all other items without moving them.
You can increase the z-index of that element and that way it will be above the other layers in your page and it will be able to move freely over the other elements.
You could try putting it above the menu, and then using a negative margin on the menu.