I have created a list view in JQuery mobile with 2 grids. And I need to set background color to only 1 grid (block-a) but doing so, the padding of the list view is being displayed as white. I need to set color for the padding also. I need the first half to have one colour and second half to have different colour.
Thanks in advance.
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="none">
<li data-role="list-didvider" >
<a href="#">
<div class="ui-grid-a" data-theme="none">
<div class="ui-block-a">Distance</div>
<div class="ui-block-b">Places</div>
</div>
</a>
</li>
</ul>
</div>
</div>
You need to customize css in jQuery.
Like for example
.ui-grid-a .ui-block-a { customization goes here }
.ui-grid-a .ui-block-b { customization goes here }
I have set up a sample jsFiddle, it will get you started.
http://jsfiddle.net/Akki619/z3BQ2/
The fiddle may not provide the exact solution you are looking for but you can always play along for desired results.
In your case: You need to customize data-theme a/c to your need.
It might be a tricky to get the desired result as you want.
Your padding is already colorized so far, but the margin isn't.
You need to remove the margin and set a padding:
ul li {
padding-left: 10px;
margin-left: 0px;
}
Then your background color will be set with the space before your items content.
Related
I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply
Coding a header to a website which will look like this:
Having problems creating the 5px indent under the "People" link, which is intended to indicate the active/current page. I know how to "fake" this effect by using background images/colors, etc -- but the content underneath is going to be different on each page (sometimes a solid color, sometimes the background pattern shown in the example, sometimes a photo). So that indent needs to be transparent.
I'm assuming I'll use z-index to overlay this header over whatever content will be underneath. Just can't figure out how to get a transparent indent in only one section while also having the grey menu bar continue to be 100% browser width. Probably something simple that I've overlooked. Thanks.
Edit: working JSfiddle here: http://jsfiddle.net/brandonpeat/mVSBj/14/
<div id="menu">
<div id="ombre">
<div id="ombre1"></div>
<div id="ombre2"></div>
<div id="ombre3"></div>
<div id="ombre4"></div>
<div id="ombre5"></div>
</div>
<div class="container">
<img src="http://asheragency.com/websites/asher2014/asher_logo.png" alt="Asher" id="asherLogo"/>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
not very elegant but here's a fiddle: http://jsfiddle.net/vlrprbttst/cke6U/1/
there's no way you can produce a 5px "hole" in your background, my solution needs the li element to have a background (not the header or the ul) so that may not suit you
you basically have to play with height on :hover
li {list-style:none;float:left;height:50px;line-height:50px;width:16.66666666666667%;text-align:center;position:relative;background:grey}
li:hover {height:45px}
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
I'm using the 960 grid system for a site design and I'd like to be able to change the background color of particular columns. I've figured out how to change the background color of the entire container by doing something like
.container_12 {
background-color: #000000;
overflow: hidden; /* so that the margin is transparent */
}
However, what if I want to change the background color of, say, just columns 1-3? I'd like the color to go all the way to the bottom of the container.
Example. Let's say I have some html like:
<div class="container_12">
<div class="grid_4 alpha"> a </div>
<div class="grid_4"> b </div>
<div class="grid_4 omega"> c </div>
<div class="grid_1 alpha"> A </div>
<div class="grid_10"> B </div>
<div class="grid_1 omega"> C </div>
</div>
I want to style it so that columns 1-3 have a given background color. This would mean that the first three columns of the a div, the A div, and the first two columns of the B div would have this color. Basically I want to style columns, not grids. Is this possible?
I am not sure I understood it correctly and I'm not familiar with 960gs framework. I supposed the columns are resized based on percents, in which case I think my solution will work.
also, your container needs to have a fixed height so it will be colored top to bottom.
So the trick is:
in your container_12, put an empty
set its height to 100% and background to whathever
set it margin-right so that it equals exactly the opposite of its width
Have a look a this http://codepen.io/joe/pen/bwBky
You could do it like this:
.grid_4.alpha, .grid_1.alpha {
background-color: blue;
}
.grid_4, .grid_10 {
background-color: red;
}
.grid_4.omega, .grid_1.omega {
background-color: green;
}
Working Example: http://jsfiddle.net/fewds/tnMhc/
I think what's happening here is that your idea of the grid system isn't quite how they are intended to be used. And that's perfectly fine, as I only recently started using grid systems as well!
Grid systems are meant to provide structure for your content, not styles.
.grid_4, .grid_8, and .grid_12 are meant to be columns, not cells. If you want div a and div A to be in the first column, you would put them one after another in .grid_4 alpha.
And since grid systems aren't meant for styling, you should avoid styling the grid CSS and instead create your own styles.
So your HTML would end up looking like this:
<div class="container_12">
<div class="grid_4 alpha red-column">
<div>Content-a</div>
<div>Content-A</div>
</div>
<div class="grid_4 green-column">
<div>Content-b</div>
<div>Content-B</b>
</div>
<div class="grid_4 omega blue-column">
<div>Content-c</div>
<div>Content-C</div>
</div>
</div>
And then you'd add this to your CSS:
.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}
I'm creating a site where I've encountered a huge IE lag when hovering over the menus.
I'm using Cufon in combination and it seems like it's causing a huge lag when I apply height, width, margins or paddings to the li:hover element.
So, I need to figure out a smart way of doing this otherwise.
The site is here, http://w3box.com/mat
You can clearly see the menu I guess.
So, what I want is to push the entire menu downwards so it's like 3 or 4 pixels above the bottom of the height line. So it matches about the same vertical position as the logo font to the left.
Then, I want the hover effect to be larger in height. Hard to explain, but when hovering over a menu item, imagine a box where the text is positioned at the very bottom of the box. Like this;
http://img710.imageshack.us/img710/2791/menuheader.jpg
Now, you may notice the arrow looking thingy sticking at the bottom. I don't really need that, but if you have any idea on how to do it, I'd appreciate the help! ;)
I have not tried, but I think this may be an option.
You have everything with in one div, why dont you try to put div with in divs?
this is your current code for header.
<div id="header">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li>
<li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
You can try something like this, so you have more control over the different objects.
<div id="header" style="float:left;vertical-align:bottom">
<div id="imgChef">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
</div
<div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li> <li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
</div>
I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.
Omit the h4 in the menu since i think it is not needed. Than set display:block on <a> and use line-height and padding-left , padding-right to make the anchor expand the right size. Also notice that li:hover is not supported in IE6/7 without some tweaks. To position the menu on same level as logo just set a margin-top on ul element.
There're too many rules for me, too many useless rules.
Don't have the time to correct all and test it on FF/IE, but this works ofr example :
.menuwrapper li {
float:right;
list-style: none;
padding: 30px 23px 3px 23px;
position: relative;
top: 7px;
}
What about vertical-align?