I am trying to insert text under an <li> tag. I made some curvy background. now my texts are going out of the border.
Link to Image
Now I want that text centered, and to make some gaps from the background from beginning and the end. I want a dynamic background so that it can set its width as the text size and give some more space at beginning and at end.
Can you please tell how to do this? Here is my HTML and CSS code:
.din{
display: inline;
border-radius: 15px 15px 15px 15px;
background-color:#7c7779;
text-align:center;
color: #f8d8a9;
width: 100px;
}
<ul class="date">
<li class="din">
মংলবার
</li>
</ul>
Add padding: 5px; to your css.
.din {
display: inline;
border-radius: 15px 15px 15px 15px;
background-color:#7c7779;
text-align:center;
color: #f8d8a9;
width: 100px;
padding: 5px;
}
Here is the JSFiddle demo
You can add padding to the li. This padding will always be consistent no matter how big the content is. See snippet.
Also, the li does not accept the width because it's marked as inline. If you set display to inline-block instead, the width will be acknowledged. Inline elements cannot have a set width.
It sounds like you want the content/background to be dynamic though so you probably don't want to be setting a width anyway though?
.date {
margin:0;
padding:0;
}
.din {
display:inline;
border-radius:15px;
padding:5px 10px;
background-color:#7c7779;
text-align:center;
color:#f8d8a9;
}
<ul class="date">
<li class="din">
মংলবার
</li>
</ul>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I have many varied cases where I would like a DIV containing an inline-block menu element - typically an anchor - to act as if vertically justifying the elements, when an element overflows on to multiple lines.
I will use one example case to explain what I would like to achieve:
See my codepen:
http://codepen.io/anon/pen/wBRpqJ?editors=110
Output:
What happens is that if the browser resizes to a smaller size, then the final inline-block Anchor element falls down onto a new line, see screenshot (at width ~725px):
Output:
That's fine, in itself, but what I would like it to do is to split the elements within the DIV equally, as it's on two lines, to then be equally dispersed over two lines and therefore be roughly justified, If you resize the codepen to approximately 500px wide you will see how I'd like it to look if the elements can not all stay on one line. So the image below would be would I would like to see if any line breaking occurs within the parent DIV element.
Output:
I realise that the term equally is an exact term for an inexact situation but to justify the elements in a block so that each row in the block has the same number of elements +/- 1 (for odd counts).
Is this something that can be done with CSS?
P.S> The contents of these elements are dynamic and varied and the situations any solution would be useful for would also be dynamic and varied so solutions specifically for this case will probably not help.
Edit:
Flexbox has been suggested as a solution, how would I use Flexbox to achieve the desired result?
Edit 2:
Criteria -- The elements in the menu are centre aligned and are each separate inline-blocks . Justifying them all it does is screw up the centre alignment and add extra spacer lines around the Anchor elements in the NAV container.
Edit 3:
I will put my code here, used on the codepen example:
CSS:
.mainbox {
width:90%;
max-width:1200px;
min-width:400px;
margin:0.4em auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid #006;
}
nav {
background-color: rgba(204,204,204,0.4);
padding:5px 5px 0px 5px;
text-align:center;
position: absolute;
/* bottom increased from zero to make example clearer on codepen */
bottom:1em;
margin:auto;
width:90%;
/* width adjusted from 100% for codepen layout */
}
nav a {
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
padding:2px 4px;
color: #000;
border: 1px solid #000;
line-height: 1.1em;
background-color: #DDDDDD;
margin:0 3px 3px 3px;
display:inline-block;
}
nav a:hover, nav a:focus {
background-color: #FFFFFF;
color:#000000;
text-decoration: none;
}
HTML:
<div class="mainbox">
<header>
<nav>
Availability
Tariff
Make A Booking
Access Statement
T&Cs
Contact
<a href="http://www.elsewhere.co.uk" title="Visit the website">
Parent Site</a>
</nav>
</header>
</div>
You have to use the :after pseudo element hack. Basically it works like you're justifying text. In order to get the last line to justify, you have to force a fake line using :after to get the browser to justify the last line. Just think about how justify works, it never justifies the last line.
.menu {
margin: 0;
padding: 0;
text-align: justify;
font-size: 0;
}
li {
display: inline-block;
font-size: 24px;
width: auto;
background-color: #ccc;
text-align: center;
padding: 0 10px;
border: 1px solid black;
margin:10px;
}
ul:after {
display: inline-block;
width: 100%;
content: '';
}
<ul class="menu">
<li>Item 12341231</li>
<li>Item 123462346</li>
<li>Item 234523</li>
<li>Item 34563457</li>
<li>Item 456756</li>
<li>Item 567856</li>
<li>Item 678969</li>
<li>Item 7453456</li>
<li>Item 8234523</li>
</ul>
One trick might be to use media queries:
#media (max-width: 725px) {
.parent-div {
width: 500px;
}
}
Not perfect, but setting these will wrap everything just the way you want it.
This workaround is also based on #media, but using a pseudo element to make line break.
#media screen and (max-width: 750px) {
nav span:nth-of-type(4)::after {
content: "";
display: table;
height: 10px;
}
}
Note: I added a <span> tag around each <a> in order to make it happen.
Demo: http://jsfiddle.net/s88381hb/1/
You can use CSS to do this but you can use javascript to enforce the CSS whichmight be more beneficial
I am new to HTML, I have created circle using border-radius and i have put some text in it. the Text is displaying on the lower part of the Box and its also appearing after the circle. I want to put the Text in the circle.
Kindly check this and guide me.
<ul>
<li>HOME</li>
<li id="skills" class="navText" >Work - Work Experience</li>
<li id="web" class="navText">Skills </li>
<li id="video1" class="navText">Web - Web Projects </li>
<li id="video2" class="navText">Video - Video Projects </li>
</ul>
Style
#navText
{
position:absolute;
top:-90px;
}
nav ul
{
list-style-type:none;
padding:0;
margin:20px 0px 0px 130px;
}
nav ul #skills
{
position:absolute;
line-height:-200px;
background-color:#EA7079;
display: inline-block;
border:6px solid;
border-color:white;
border-radius:110px;
padding: 91px 31px 31px ;
width:80;
height:25;
text-align:center;
#margin-left:35px;
}
Line-height equal to height of the div/li also works - FIDDLE
This works fine for short lines, for long lines, you'll have to use another technique as mentioned.
The top circle in the fiddle is a div in a div changed to inline-block
CSS
.centerofcircle1 {
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 100px;
font-size: 15px;
background-color: red;
color: white;
text-align: center;
}
This is one of the thing that css dosen't do very well. However there is a solution, here is a great article by Chris Coyier that helped me with this problem.
You could add the vertical-align property to your text class.
vertical-align: middle;
Also, if that doesn't work, try to manually place in the middle with margin-bottom or/and margin-top.
margin-bottom: 10px;
And your #navText is an id. Use div id="navText" instead of class="navText"
Sorry, I'm really new to HTML5 and CSS3 and my searches haven't turned up anything to what I'm sure is a really basic thing. What I'm trying to do is create a row of clickable images / links for my website. Much like how stack overflow has there questions, tags users links above.
So far my css looks like the following:
a#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url('img url') no-repeat bottom;
width: 50px;
height: 100px;
}
But this isn't doing what I'm after. It's only placing the image in the centre of the screen. Could someone please help me? Also, is there a best practise for doing something like this?
The margin:0 auto is what is putting it in the center of the screen. You will probably want to drop this, or put it on the container element rather than the individual boxes.
What you probably want for putting several boxes in a line is either float:left or display:inline-block. Either of these will work; they work differently, and there are things you need to know about both of them in order to get the layout working the way you want it, but I'll leave those extra details for you to do further research on.
It's worth noting that none of the code you quoted is specific to HTML5 or CSS3 -- it's all basic HTML/CSS syntax that has been around for a long time.
Since you didn't provide any markup, I'll use the stackoverflow example you cited:
<div class="nav mainnavs ">
<ul>
<li class="youarehere">Questions</li>
<li>Tags</li>
<li>Users</li>
<li>Badges</li>
<li>Unanswered</li>
</ul>
</div>
While you could use your own divs to do this markup, this is the most semantic and concise way of representing a navigation list.
To style this list the way you want, you only need to apply the following styles:
.nav ul {
list-style-type: none;
}
.nav li {
display: block;
float: left;
}
.nav a {
display: block;
padding: 6px 12px;
/* Any other styles to disable text decoration, etc. */
}
Then just position the .nav container where ever you want on the page.
If you're lazy like me, you can put a few <a> tags in a <header> or <nav>, and use display: inline-block.
http://jsbin.com/ivevey/3/edit
HTML
<header>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
</header>
CSS
header {
text-align: center;
}
header > a { /* assuming a <header> contains your <a> tags */
display: inline-block; /* make sure every image/link is treated like text, ltr */
width: 15px; /* width/height or padding. either works */
height: 15px;
background-color: red; /* This should work for a 15px x 15px image instead */
}
Just be careful of the space between the links. Those are whitespace characters. I generally use header {font-size: 0;} to clear that up.
Ideally, I'd have a structure where there's a <ul> in a <nav>, since it is a list of navigation links, after all.
Maybe something like this?
http://jsfiddle.net/MRayW/6/
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</nav>
a[id^='header_'] {
border: none;
background: url('xxx.jpg') no-repeat bottom;
width: 50px;
height: 50px;
text-align:center;
color:red;
list-style:none;
float:left;
margin:5px;
}
ul {
padding:0px;
margin:0px;
background-color:#EDEDED;
list-style:none;
background: none repeat scroll 0 0 red;
height: 60px;
margin: auto;
width: 420px;
}
nav {
margin:0 auto
width:500px;
}
I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?
The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.
I have set up a simple example of what you want. Check it on the fiddle here
The HTML:
<ul>
<li>Home</li>
</ul>
The CSS:
ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }
li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
Add this to your CSS:
a:hover.jump {
color: [Insert whatever];
position: relative;
bottom: 2px;
}
And then add a class to your link
<ul>
<li>My Link Text</li>
</ul>
You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples