can someone help me with my problem , i want to make a li take 100% Width of a Div
right now it looks like this
i want it to take 100% of the width of blue panel when i hover to it , can someone help me with this problem?
the Blue Panel css
.sideservice{
width : 20%;
height : 100%;
background-color: rgba(72,61,180,0.8);
position: absolute;
top : 0%;
right : 0%;
padding :5px;
}
the li css
.sidemenu li{
list-style: none;
padding: 10px 10px;
margin: auto;
color: white;
width : 100%;
display:inline-block;
position: relative;
}
the ul css
#service_categories{
width: 100%;
position: absolute;
}
thanks!
List elements always come with some padding. Make sure to remove that and your LI element will get its 100% width.
ul{
padding:0;
}
http://jsfiddle.net/10b7crok/
Related
I took a pricing table HTML/CSS/JS that I found and decided to try and bend it to fit my desires for a given page. Unfortunately I've hit a bit of a wall. The following fiddle is a bare-bones example of the HTML and CSS for the table at the moment:
https://jsfiddle.net/jv89hopf/1/
In order to make the columns evenly space out across the width of the page regardless of the number of columns I used display:table, table-layout:fixed, and display:table-cell. This works perfectly and as I add or remove columns the table adjusts as necessary to fill the space
Now the problem is when one column is taller than the others. I would like all columns to stretch to match the height of the tallest one.
When looking in the Chrome inspector I can see that the table-cell has filled the height entirely:
Now all I need is for the child of this table-cell to fill the height (in the Fiddle provided above, this would be .price-wrapper - and it needs to fill .price-list li)
I have tried both:
height: 100%
position: absolute; top:0; bottom:0; left:0; right:0;
The former does nothing for some reason, and the latter collapses .price-list down to 0 pixels tall (since the only children with height are absolutely positioned and therefore removed from the flow)
If I can get .price-wrapper to be properly 100% of the height of .price-list li then I can use display:table and display:table-row to push the "Buy now" button to the bottom and get the desired appearance:
One solution is give 100% height to .price-list, .price-list > li and .price-wrapper will make child height fit to content.
.price-list {
display: table;
height: 100%; //Here
list-style: outside none none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
.price-list > li {
display: table-cell;
padding: 0 10px;
height:100%; //Here
}
.price-wrapper {
background-color: #fff;
height: 100%; //Here
list-style: outside none none;
margin: 0;
padding: 0;
}
Working Fiddle
some css changes
body {
background-color: #999;
}
.monthly.is-visible {
height: 100%;
margin-bottom: 18px;
position: relative;
}
.is-visible footer {
background-color: #99c;
bottom: 0;
height: 30px;
position: absolute;
width: 100%;
}
.price-list {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.price-list > li {
display: table-cell;
padding: 0 10px;
height:100%;
}
.price-wrapper {
background-color: #fff;
list-style: none;
height:100%;
margin: 0;
padding: 0;
}
.is-visible footer {
width: 100%;
height: 30px;
background-color: #99c;
}
/* For demonstration purposes */
.is-hidden {
display: none;
}
https://jsfiddle.net/jv89hopf/3/
I have a solution using jQuery. It works like this. When the page loads, it looks for each list and determines the largest among all lists. Then it takes that height and stretches others accordingly. The code looks like;
var height = 0;
$("main").each(function( index ) {
if(height<$(this).height()){
height = $(this).height()
}
});
$("main").height(height);
Here is a demo
In my main horizontal navigation, I have a container called #main-nav, and buttons in the form of anchor tags within. The anchor tag size won't match up with the #main-nav container, and I can't figure out why.
oh, also, the dropdown menus sit higher on the baseline of the menu than they should a few pixels, I'm not sure if this is related.
I currently have the highlight color and dropdowns the same as the menu bar to disguise the problem, but this isn't optimal. (A code inspector clearly shows the problem)
My site is http://www.darkmatter-designs.com/
Any help would be greatly appreciated, I've run out of ideas.
Use max-width and margin 0 auto to center your ul in nav
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS Centering:
If you just want the anchors to be "centered":
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
To fixe the dropdown you can add padding-top to #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
and since you are using position absolute to ul ul make sure you add position:relative to the parent element like this:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}
#main #home_banner {
position: relative;
}
#main ul li {
position: relative;
display: inline-block;
overflow: hidden;
}
#container {
width: 950px;
background-color: red;
padding: 0;
margin: 0 auto;
}
#container #main {
margin: 0;
padding: 0;
width: 100%;
height: 950px;
background-color: blue;
border-bottom: #adde64 solid 1px;
}
they both have relative positioning and aren't positioned anywhere except the default, and they're both inside main(except the list is created -after- the image in the html).
However the list doesn't appear all the way to the left, instead it appears outwards quite a bit
Theres two things that I can think of the first is ul's have padding by default so
ul
{
padding:0px;
}
The second is that display:inline-block adds a small white-space between objects so to get raid of that:
ul
{
font-size:0px;
padding:0px;
}
Based on the picture you posted, I'm assuming you're referring to the indented images at the bottom. If you aren't using CSS resets you'll need to set the margins for the ul and li elements. You may also need to adjust the padding of the div that the ul is in.
By default, any ul has a margin and a padding value. Set the ul to {margin:0; padding:0;} and it will be top left aligned
IF you want the list all the way to the left, look into padding-start attributes. I think this is what you are asking.
Try setting your lists with the following css:
-moz-padding-start: 0px;
-webkit-padding-start: 0px;
-o-padding-start: 0px;
padding-start: 0px;
padding-left:-0px'
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).
I'm trying to create a fixed-position footer at the bottom of my page. but there's an issue with spacing below the image and the bottom of the viewpoint that is unwanted:
Base Image:
The Issue:
The padding below the image is unwanted.
HTML:
<div id="containerBarKonge">
<ul>
<li><img src="./kongelogo.png" /></li>
</ul>
</div>
CSS:
#containerBarKonge {
position: fixed;
bottom: 0px;
width: 100%;
z-index:9999;
padding: 0px;
margin: 0px;
}
#containerBarKonge > ul {
position: relative;
list-style-type: none;
padding: 0px;
padding-left: 2px;
margin: 0px 20px;
min-width: 1053px;
background-color: #900;
}
#containerBarKonge > ul * {
padding: 0px;
margin: 0px;
}
Try setting the vertical align to bottom on the image:
#containerBarKonge img { vertical-align: bottom; }
The issue comes from the image having a default property of "display: inline;" - which is the equivalent to saying "have this image run along like text."
Images should rarely be employed as inline containers. Instead, an image should be defined as either display: block or inline-block. This gives you much precise control over your iamges versus - just align this to the top or bottom. What if you want the image 1px from the bottom? With vertical-align you can not.
So the solution is to do the following:
#containerBarKonge > ul li {
display: block;
height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
display: inline-block;
/* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
margin: 2px 0 0 0;
}
there you go. You have PRECISe control of the positioning of the image while it retains its ability to run along like text.