Once again, lists are boggling my mind.
<div id="headbottom">
<ul id="headnavbutton">
<li id="button1" class="headnavbutton"></li>
<li id="button2" class="headnavbutton"></li>
</ul>
</div>
CSS:
#headbottom{position:relative;width:960px;height:29px;margin:auto;bottom:10px;}
#headnavbutton{float:right;height:100%;width:250px;padding:0;}
.headnavbutton{float:right;border: 1px solid #ccc;padding-top:0px;list-style:none;}
#button1 {width:100px;height:100%;background:url(../images/headnavbutton.gif);}
#button2 {width:100px;height:100%;background:url(../images/headnavbutton.gif);}
Looks quite sweet and simple, you may say. But the for some reason unbeknownst to me, the list is pushed down out of the parent div.
Here is a JSfiddle: it's not accurate but it's a good representation for what's going on.
http://jsfiddle.net/WXbbj/5/
Now define margin in your div headnavbutton as like this
#headnavbutton {
margin: 0;
}
Related
I read that one should not use tables as means of layout, but do all the styling with CSS, so I tried the most basic thing I can think of to mimic tables, by using CSS multi-column layout.
I have created a CodePen to illustrate the problem. As you can see, the content of the two columns starts at different heights, and I do not understand why.
.skill-explanation {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
column-count: 2;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒
</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis
</p>
</div>
</div>
I wanted to give an update on this post in case someone stumbles upon it.
1) The marked answer is an improvment over mine, but I still find it unintuitive, since it uses the default flex flow which puts the main axis on the horizontal.
The way this should be from a logical standpoint would be columns tho.
Therefore here is an updated solution, which is the most simple and intuitive (at least in my opinion):
.center-wrapper {
margin: 0 auto;
display:table;
}
.skill-explanation {
list-style: none;
}
.rating {
}
.skill {
}
.skill-item {
list-style: none;
}
<div class="center-wrapper" <ul class="skill-explanation">
<li class="skill-item">
<span class="rating">★☆☆☆ ‒</span>
<span class="skill">I can put it into context and am able to use it's basics</span>
</li>
<li class="skill-item">
<span class="rating">★★☆☆ ‒</span>
<span class="skill"></span>
intermediate knowledge, used several times
</li>
<li class="skill-item">
<span class="rating"> ★★★☆ ‒</span>
<span class="skill"></span>
good undestanding, used frequently
</li>
<li class="skill-item">
<span class="rating">★★★★ ‒</span>
<span class="skill"></span>
deep understanding, used on a daily basis
</li>
</ul>
</div>
You can add padding: 1px 0 to the two containers .align-left and .align-right. That way the default top and bottom margins of the p tags stay inside their containers, not causing any vertical offset due to collapsing margins like in your codepen.
https://codepen.io/anon/pen/YBxWbY
Your problem is that the margins are collapsing on the p elements, as they would if the divs were stacked vertically. See Johannes answer.
Howevwer, your concept is flawed. You probably want to actually associate the rating with the skill
ul.skill-explanation {
list-style: none;
padding-left: 0;
}
.skill-item {
display: flex;
}
.skill-item > div {
width:50%;
}
.rating {padding-right: 0.5em;
text-align:right;
}
<ul class="skill-explanation">
<li class="skill-item">
<div class="rating">★☆☆☆ ‒</div>
<div class="skill">I can put it into context and am able to use it's basics</div>
</li>
<li class="skill-item">
<div class="rating">★★☆☆ ‒</div>
<div class="skill">intermediate knowledge, used several times</div>
</li>
<li class="skill-item">
<div class="rating">★★★☆ ‒</div>
<div class="skill">good undestanding, used frequently</div>
</li>
<li class="skill-item">
<div class="rating"> ★★★★ ‒</div>
<div class="skill">deep understanding, used on a daily basis</div>
</li>
</ul>
EDIT
If you would like to use the code you already have. Remove the margin from the paragraph "p" tag that is set be the browser. then set the line height to your desired height.
ORIGINAL answer
You will want to use something like flexbox if you want to easily line you items up. You may also want to set the line height so that you can ensure your unicode icons and your text line up correctly
This will allow you to have full control over where the text and icons align. More info on flexbox at W3schools
p{
margin: 0;
line-height: 1.5em;
}
Flex Box example:
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5rem;
}
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5em;
}
<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis</p>
</div>
</div>
But you may be better off revisiting your HTML code as someone else suggested and making it into a list as this would be more semantically correct and easier to maintain
<ul>
<li>★☆☆☆ ‒ I can put it into context and am able to use it's basics</li>
<li>★★☆☆ ‒ intermediate knowledge, used several times</li>
<li>★★★☆ ‒ good undestanding, used frequently</li>
<li>★★★★ ‒ deep understanding, used on a daily basis</li>
</ul>
I want to create a user menu, that looks like this:
When I create such a menu with bootstrap, its full width and not aligned under the button.
So it looks like this:
So how could I create such a menu with bootstrap?
I can't believe what I'm going to write, but you can't assume people knows your source code, you have to share what have you done. When you share the code, the community will be please to help. You can read this is real important: How do I ask a good question?. Don't think I'm a guy who thinks he know it all, you should check my reputation, at the beginning I asked a lot of similar questions to what are you asking.
Regarding your question. This article can be a lot of help. I'm sharing a small demo on how it looks.Demo: http://jsbin.com/figak/1 the design and everything is ugly, but it has what you want.
This is basically what I added. A form to the navbar-right.
I hope this helps you.
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
</ul>
Bootstrap is not enough for such case. Although it's really awesome framework, it won't do everything for you. My advice would be to read about javascript and client's side DOM manipulation.
In your case, I'd create special container with the form in it. Add then bootstrap's class hide to it so it won't appear at start and bind some action (click or hover) to icon which should trigger the menu show up.
I suggest to use jQuery
I work with Foundation, never with Bootstrap, but if all else fails you can make it absolute positioned:
.menu { position: absolute; top: 40px; left: 40px; width: 300px; }
...or you can keep it relative positioned (assuming that's what it is):
.menu { position: relative; width: 300px; margin-left: 40px; }
Change .menu to whatever the actual class is and you're good to go, you may have to override some functions. If the bootstrap class is still being applied you can add !important to the end of your class like so width: 300px !important; and it will work. Just keep in mind that should be last resort.
You can 'inspect element' in any new browser to see the code being used by bootstrap and then override those classes in your css file.
You can use media queries to keep the width at 100% on small screens but make it 300px on screens larger than 400px like so:
#media only screen and (min-width: 400px) {
.menu { position: relative; width: 300px; margin-left: 40px; }
}
Hope this helped!
Hello I have created two divs, one is floated to the left (button), and has 120px width, and another one is for textarea, textarea should be margin-left: 20px and take rest of the width. How much ever I try, I am not able to achieve this. Guys, do you know the solution?
<div id="button" style="float: left; width: 120px; height: 80px;">
<input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
<textarea id="message"></textarea>
</div>
(For IE8 use #ID named DIVs instead of nth-child)
DEMO
|-------- 120 --------| 20 |------ available space ----------------------------------------------------------->
<div id="formArea">
<div>
<input type="button" value="something" />
</div>
<div>
<textarea></textarea>
</div>
</div>
#formArea{
display:table;
width:100%;
}
#formArea>div{
display:table-cell;
vertical-align: top;
}
#formArea>div:nth-child(1){
width:120px;
}
#formArea>div:nth-child(2){
padding-left:20px; /* instead of margin */
}
#formArea textarea{
border:0;
width:100%;
}
And remember, ID must be unique-per-page.
Try this:
CSS
.left{
float:left;
width:120px;
}
.right{
overflow:hidden;
margin-left:20px;
}
#message{
width:100%;
}
HTML
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
fiddle
Let's give this one a try... Below is the code you have given us but with a few enhancements:
<div id="container">
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
</div>
And the following is the CSS I have attached:
.left {
width: 120px;
float:left;
}
.right {
float:right;
}
#message{
width:400px;
}
#container {
display:inline-block;
}
Now, what I have done is set all of your current divs into one main div, which can hold everything together. I implemented a display:inline-block to help keep everything on one line along with maintaining the text area to be on the right and the button on he left with the cushion you have asked for in-between. To get a better idea of what this does, I have recreated an already done JsFiddle, which can accurately depict what I am describing.
A few things to note, remember that "textarea" can have the values of "rows" and "cols" which will determine how many rows and columns the text area will be, so you really do not need to have width in this aspect, especially if you need more rows vs columns.
Another thing, if you want to learn a bit more conceptually about some CSS tricks, the Almanac is one of the better tools out there to help you understand "why this does that".
Last, I encourage you to play with everybody's JsFiddle to get a better understanding of exactly what you want to see in your own code, every answer that has been presented has their own unique JsFiddle.
If this does not work or you have questions, comment below and we can figure something else out :)
Good luck with your future HTML/CSS coding adventures :)
So I was designing some stuff for a Tumblr theme, and I came across a very annoying problem. I was coding the Reblog and Like buttons, and the Reblog button works fine, but for some reason the Like button gives itself like an extra 5px of padding on the bottom. It is not really a serious problem, but it's really annoying to me because I cannot find a way to get rid of it. I tried changing height, max height, positioning and all, and nothing got rid of the extra space at the bottom. It may be some stupid mistake on my part, or maybe It's just supposed to be like that, and I'm not realizing it because it's too late, but any help would be nice.
Here is my test blog too in which I have the theme set up. If you look at the source, or mouseover the Like button you can see.
http://mchickenposts.tumblr.com/
Edit: I could just extend the length of thee li, and add the cursor property so the bottom 5px isn't left out. But I wanted to know How i can get rid of it totally.
Here is my Html Code for the Posts, and the Css too.
.post_reblog_like{
list-style-type:none;
padding:0px;
margin:0px;
display:inline-block;
float:right;
}
.post_reblog_like li{
display:inline-block;
opacity:.7;
}
.post_reblog_like li:hover{
opacity:1;
}
{block:Text}
<div class="post_wrapper">
<div class="post_text">
<div class="post_text_body">
{block:Title}
<a class="PostTitle" href="{Permalink}">{Title}</a>
{/block:Title}
{block:NoteCount}
<a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
<div class="PostBody">{Body}</div>
</div>
<div class="post_date">
{block:Date}
<a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} # {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
<ul onmouseover="changeClass();" class="post_reblog_like">
<li title="Reblog">{ReblogButton color="white" size="20"}</li>
<li title="Like">{LikeButton color="white" size="20"}</li>
</ul>
</div>
</div>
</div>
{/block:Text}
I believe the issue is related to line-height (currently there is none defined).
.like_button {
line-height: 0px;
}
Change the .like_button to a display: block and then float: left. Elements with display: inline and inline-block always add some space at the bottom for letters like 'y' or 'g'. Hope it helps someone!
I'm building a tree using lists in lists the ordinary way.
Now, what I would like to do is to have an extra label
that is absolute (horizontally) to the start of the outermost tree.
The effect I'm trying to achieve is the below, where the farLeft are labels
on each li (see similar html below):
I can easily do this, but my css will be unclean, to say the least, something
along the lines of:
/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}
A usage could be like the below, but with more nesting levels:
<ol class="topLevel">
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
<ol>
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
</ol>
</ol>
The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.
Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.
It might be the time to mention I'm a total css newbie, so I might easily have
missed somethnig completely obvious.
Here its fiddle link
http://jsfiddle.net/5YKFa/6/
css
ol.topLevel{
padding-left: 100px;
}
li{
padding-left: 20px;
}
.left {
position: absolute; left:0px;
}
html
<ol class="topLevel">
<label>Top Level</label>
<li>
<label class="left">Label</label>
<label>1</label>
<ol>
<li>
<label class="left">Label</label>
<label>1.1</label>
</li>
<li>
<label class="left">Label</label>
<label>1.2</label>
</li>
</ol>
</li>
</ol>
Is the 'farLeft class being used elsewhere on the page? If not, the easy solution would be:
.farLeft { position: absolute; left:0px; ...}
Absolute positioning should line up automatically with it's parent container at 0px. So if you wrap a relatively positioned div around it you should be able to adjust margins and whatnot to get the result you are looking for.
You don't need to specify where everything is in the dom structure, unless you only want it to apply there, and even then using an id on the tag would be a better solution. Good luck
You can probably just use a margin on each level of the nesting, so it will grow the deeper you go.