I am currently working in our system and I find it difficult to use overflow in my HTML.
Please take a look at my fiddle. and try to put
overflow:hidden;
in
#nav-holder{
background: #333333;
padding-left: 30px;
padding-right: 30px;
}
http://jsfiddle.net/mjanthrax/L7vgnzvt/
You will notice that, after including overflow:hidden in the css, the navigation menu(hover) doesn't display.
How can I fix that?
You will need display: inline-block and set the width to 100%
inline-block
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Change
#nav-holder{
background: #333333;
padding-left: 30px;
padding-right: 30px;
}
to
#nav-holder {
background: #333333;
padding-left: 30px;
padding-right: 30px;
width: 100%;
clear: both;
display: inline-block;
}
Jsfiddle demo
You then may want to add *{box-sizing: border-box} at the top pf you css
Full demo
Read more about box-sizing here
bonus
Related
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I am trying to place some buttons in my top bar where you can choose the display language. Those buttons should have full height in the top bar like the other buttons:
But for some reason I can't get those buttons to full height:
Here is a fiddle with my html and css setup: http://jsfiddle.net/gLgwm/1/
I tried using the following CSS which does not work:
#CtlLanguageSelection,
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
Also tried setting min-height and height to 100% and 35px, did not work.
The a is an inline element, so it takes much space as the text. Make it an inline-block
http://jsfiddle.net/gLgwm/4/
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
display: inline-block;
cursor:pointer;
}
Add this:
#CtlLanguageSelection a {
height: 100%;
display: inline-block;
}
If we set them to height: 100%; and give them display: inline-block it will work just fine.
DEMO HERE
Note: If you don't want that little gap between them (caused by inline-block) you can do this:
<a id="CtlChangeLanguageDE">de</a><a id="CtlChangeLanguageEN">en</a>
Just a little trick to sort it, there are many other ways so you can look them up if needed.
DEMO HERE
I don't use CSS that often so every time I use it I have to experiment again and figure things by trial and error.
What I'm trying to do is place icon_32 in the same line as: "I made this." The image is 32px high so I wanted to move it down a bit to center it with the line.
After experimenting a bit I found a solution that works on Safari and Chrome but doesn't work in Firefox.
Here's what I'm doing:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list .icon_32 {
display: inline-block;
position: absolute; /* This doesn't work in Firefox. */
cursor: pointer;
/* spacing */
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li> I made this. <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
Because one can't add a padding-top to inline elements, I made the icon's position absolute. The problem with just having it absolute is that I have to manually set the margin-left because the icon doesn't move to the left automatically with the text. By setting display to block on the <li> and display to inline-block on the icon, what I was trying to achieve worked (although I don't fully understand why). This however, doesn't work in Firefox (and I haven't even tested in IE yet).
Is there a proper way to achieve what I'm truing to do that works correctly on all browsers?
Update: How I ended up solving this by using the suggestions from the answers. Thanks a lot for the help!
I didn't want to use line-height because I wanted to preserve the original height of the li. I just got rid of the unnecessary position: absolute and added vertical-align: middle. After doing so, the image was still affecting the height of the li, so I just added an id to the affected li and overwrote the margin-bottom so the sum of its height + bottom margin would equal the sum from the li without the 32px image.
This is how it ended up being:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list #work_item_icon {
margin-bottom: 3px;
}
#work_list span.icon_32 {
display: inline-block;
cursor: pointer;
/* spacing */
vertical-align: middle;
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li id="work_item_icon">I made this. <span class="icon_32"></span></li>
<li id="work_item_writing">I write, sometimes.</li>
</ul>
There are many ways to do this:
You can use negative margins to even out the difference between the line height and image height. The height of one line of text appears to be 20px; so a margin-top: -6px and margin-bottom: -6px will make the 32px tall image act as if it were 20px:
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
demo
Alternately, you can set a line height equal to the height of the image and set vertical-align: middle for the image. You can adjust a few pixels using a negative margin-top:
ul, li
{
line-height: 32px;
}
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -4px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -4px;
}
demo
This also work in firefox also please give position:relative to your LI
or it's better to edit your HTML like this:
<ul id="work_list">
<li><span>I made this.<span> <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
CSS:
li span, icon_32{
display:inline-block;
}
Try adding this css rule to your li,
li {line-height: #px;}
play around with the line height to get what you want. Also if using line height affects the image add float: left; to it, or take it out of normal flow.
I think your solution will be line-height. You can set this on the li, and it will center the text vertically.
#work_list li {
line-height: 32px;
}
#work_list .icon_32 {
height: 32px;
width: 32px;
}
Give the element containing the icon div relative position and it will make the positioning of the icon relative to that container.
http://jsfiddle.net/9HeNy/
Make the icon_32 element position : relative and it's parent li element line-height : 32px. A demo is above.
Docs for line-height: https://developer.mozilla.org/en/CSS/line-height