I have 6 buttons which I would like to place underneath each other with spaces in between them but it seems to not be working.
this is my view:
<div id="btnline1">
Create an Order
</div>
<div id="btnline2">
Mangage Orders
</div>
<div id="btnline3">
Manage Drivers
</div>
<div id="btnline4">
Manage Equipments
</div>
<div id="btnline5">
Manage Customers
</div>
<div id="btnline6">
Reports
</div>
and this is my css:
#btnline1,
#btnline2
#btnline3,
#btnline4,
#btnline5,
#btnline6
{
float: right;
margin-bottom: 10px;
}
here is an image of what it looks like:
You're missing a comma after #btnline2:
#btnline1,
#btnline2
#btnline3,
Fix that, and add clear: both to the styles to force them to separate lines:
#btnline1,
#btnline2,
#btnline3,
#btnline4,
#btnline5,
#btnline6
{
float: right;
margin-bottom: 10px;
clear: both; //add this
}
Fiddle
Related
I have a dynamic page that displays multiple pages and has a class that starts with 'paged-' and the number of that page. I want to remove a div with SASS when it's on the page 2 and beyond like this:
.paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
.removeonpagetwoandso{
display: none;
}
}
But I don't want to write from paged-2 to paged-100 since I don't know how many pages it will have in the future.
This doesn't work:
div[class^='paged'], div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
EDIT: Added HTML Structure
Page 1:
<body class="home">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
Page 2 and so:
<body class="home paged-2">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
SASS compile
div[class^='paged'],
div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
to
div[class^=paged] .removeonpagetwoandso,
div[class*=paged-] .removeonpagetwoandso {
display: none;
}
In your case
div[class^='paged-'] {
.removeonpagetwoandso {
display: none;
}
}
is enough. It is compiled to
div[class^=paged-] .removeonpagetwoandso {
display: none;
}
which means
child element having removeonpagetwoandso class of elements whose class starts with paged-. I think you have problem with your html structure. You HTML must look like as follows:
<div class="paged-1">
<div class="removeonpagetwoandso">
paged-1
</div>
</div>
<div class="paged-2">
<div class="removeonpagetwoandso">
paged-2
</div>
</div>
<div class="paged-3">
<div class="removeonpagetwoandso">
paged-3
</div>
</div>
<div class="paged-4">
<div class="removeonpagetwoandso">
paged-4
</div>
</div>
<div class="paged-5">
<div class="removeonpagetwoandso">
paged-5
</div>
</div>
<div class="paged-100">
<div class="removeonpagetwoandso">
paged-100
</div>
</div>
pls try this css
<style>
div[class^="paged-"]{
.removeonpagetwoandso{
display: none;
}
}
</style>
Okay, so I'm building a layout in bootstrap + Rails.
If I upload a larger picture the footer does not clash with the text box with the content information but with the picture I am using there are issues.
what can I do to use the elements(pictures) I like and ensure that the footer never collides with the textbox?
the view looks like this
`<h1>Contact#index</h1>
<p>Find me in app/views/contact/index.html.erb</p>
<div class="container">
<div class="content-overlap">
<h2>Contact Us</h2>
<p> For investment information call: <br>
+phonenumberhere237 or +phonenumberhere8 <br> <br>
For legal contact:+phonenumberhere0 <br>
For partnership: phonenumberhere7142 <br>
</p>
</div>
<div class="image-overlap">
<img src="assets\administration.jpg" >
</div>
</div>`
Using bootstrap and rails 5.1.4 (but it turns out the code comes from a codepen not bootstrap so ignore that forked code is here https://codepen.io/Anthematics/pen/RMwZJG)
The footer itself renders as a partial in my layouts folder - this issue persists in a few places but this has the least elements and once solved here I am sure I can solve elsewhere.
in HTML my footer looks like this <p class = "footie"> Victoria University 2018 </p>
in css
.footie {
&:before {
display: block;
content: " ";
clear: both;
}
}
.footie {
background: black;
color: wheat;
}
Using clearfix where needed ? https://v4-alpha.getbootstrap.com/utilities/clearfix/
Or your could try :
footer {
&:before {
display: block;
content: " ";
clear: both;
}
}
Taking your code :
<div class="container">
<div class="content-overlap">...</div>
<div class="image-overlap">...</div>
</div>
<div style='display: block; clear: both;'></div>
I'm currently programming a view, that contains two list elements that can move information between each other. Here's a picture of how it currently looks:
I supposedly have in the page a lot of space to the right of the table "CodigoAGrupador" for the table "Catalogos" to fit in, and it used to do so, but when I added the scrollbars, suddenly, they can only be together vertically, never horizontally.
Here's the CSS code:
#products {
float: left;
width: 500px;
}
#cart {
width: 400px;
right: 0px;
top: 0px;
float: right;
max-height: 600px;
overflow-y:auto;
margin: 2px,2px,2px,2px;
overflow-x: auto;
}
#ListaCodigos{
max-height:600px;
width:500px;
overflow-y:auto;
margin: 2px,2px,2px,2px;
overflow-x: auto;
}
And here's the code that I use for the html view (it contains logic that I use to dynamically create the lists, that part shouldn't be the issue)
<div id="content">
<div id="ListaCodigos">
<h2 class="ui-widget-header">CodigoAgrupador</h2>
<div id="products">
<div id="catalog">
#foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
{
if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
{
<h3>#c.CodigoAgrupador - #c.NombreCuenta</h3>
<div>
<div class="subcatalog">
#foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
{
if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
{
<h4>#c2.CodigoAgrupador - #c2.NombreCuenta</h4>
<div>
<div class="SpecificCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
<div class="GeneralCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
</div>
</div>
<div id="cart">
<h2 class="ui-widget-header">Catalogos</h2>
<div class="ui-widget-content">
#foreach (LedgerChartOfAccounts c in Model.Catalogos)
{
if (c.CodigoAgrupador == null)
{
<ul>
<li class="draggable">#c.GLAccountNumber - #c.GLAccountName </li>
</ul>
}
}
</div>
</div>
<div>
<footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
</div>
</div>
It probably is a very simple issue, but I couldn't find any specific answer to my problem and I already have struggled for quite a while. Any help is welcome.
You can just float:left the menu and ListaCodigos to get it to pull up. Make sure that content is wide enough to hold them both on one line however.
However, then after menu div you will want to add a <div style="clear:both"></div>
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.
Here's my HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
Standard answer: you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
Secret answer: CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...
And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br /> for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div id="tab1">
<h2>Hello</h2>
<p>Hello hello hello.</p>
<p>Goodbye goodbye, goodbye</p>
</div>
<div id="tab2" style="display:none;">
<h2>Hello2</h2>
<p>Hello2 hello2 hello2.</p>
<p>Goodbye2 goodbye2, goodbye2</p>
</div>
</div>
<div class="content">This should really appear on a new line.</div>
Didn't touch your CSS.
For Javascript, I recommend using jQuery. It really simplifies things.
All you need are these lines of code:
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .pane div. Then, use the link's href to find the proper tab div and show it.
fiddle: http://jsfiddle.net/uFALn/18/
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Thanks benesch. It helped me too.
One can also add return false to prevent that jerky jump to the anchor. For instance:
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});