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
Related
I am trying to make the top of my website. I need more spacing in between the logo and the name in the border. My CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.list {
border-style: ridge;
border-color: green;
border-width: 25px;
}
I want more of a space between the image and the name, now it is about a centimeter or two apart.
Use 'margin' properties to create space around elements, outside of any defined borders. There are properties for setting the margin for each side of an element (margin-top, margin-right, margin-bottom, and margin-left).
Sample Code
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 100px;
}
If you want to generate space around an element's content or inside of any defined borders, use 'padding'.
Sample Code
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
Refer the below link for more details.
https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
You can always use margin-right and apply that to your logo. Remember, however, to not have it mess up your layout on smaller screens.
use
margin : 0 15px; (for side margin) or,
margin : 15px 0: ( for top and bottom margin)
but if you want the space between border and content use padding instead.
This question already has answers here:
Border-radius and padding not playing nice
(5 answers)
Closed 7 years ago.
I run my website on Tumblr. I just added the CSS Border-Radius property and set it to 20px for all images with a specific ID. However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are.
The CSS code looks like this:
#articleimage {
float:left;
padding-right: 10px;
padding-bottom: 1px;
width: 400px;
border-radius:20px;
}
I've determined that the issue is caused by the padding to the right, but I require that CSS property. How can I stop this conflict?
View screenshot: http://i.stack.imgur.com/es0aa.png
try changing your padding for margin:
#articleimage {
float:left;
margin-right: 10px;
margin-bottom: 1px;
width: 400px;
border-radius:20px;
}
The problem may be due to the use of an <img> tag. The corners may be not fully rounded at the right because the image is prone to be distorted with width and the border-radius (i.e. the image may not fill the entire <img> element, therefore it seems that right border-radius is being "less rounded").
Margins or paddings do not affect, as you can see in the example below:
.cnt {
background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
display: block;
float: left;
width: 400px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#articleimage {
padding-right: 10px;
padding-bottom: 1px;
}
#articleimage2 {
margin-right: 10px;
margin-bottom: 1px;
}
#articleimage3 {
padding-right: 10px;
padding-bottom: 1px;
width: 100px;
}
#articleimageAsBG {
height: 192px;
background: url('http://i.stack.imgur.com/es0aa.png') no-repeat center black;
background-size: 98%;
}
<div class="cnt">
<img id="articleimage" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage2" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage3" src="http://i.stack.imgur.com/es0aa.png" />
<div id="articleimageAsBG">
</div>
</div>
You notice:
#articleimage is using padding and the right border-radius are slightly smaller.
#articleimage2 is using margin and the right border-radius are equally smaller.
#articleimage3 has reduced width (tiny image) so you can notice the difference.
The alternative, and solution I am suggesting to you, is to use another element (like a div) where you set that image to the background like the last one in the example (scroll down to see #articleimageAsBG), you just need to adjust its background-size property.
I also suggest that you add:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
For better browser compatibility. And maybe consider using display: inline-block instead of float. Hope it helps!
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
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!
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.