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"
Related
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>
i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
I have following structure: JSFiddle Demo
HTML & CSS Code is as following:
HTML:
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
CSS
ul{
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
When I resize the browser the <li> tag widget structure is working fine (Not breaking) but the text inside the widget are breaking like:
My question is How can I make the text inside the widget adjustable so that It will not break.
Is there any way to fix this using only CSS ?
Provide
min-width:20%;
instead of
width:20%;
It should work..
Fiddle: http://jsfiddle.net/ZZa8j/2/
If you want it to expand accordingly, you can simply remove the explicit height and set a min-height like this.
If you want to clip the text and indicate the user that text is clipped, you can use the text-oveflow property like this.
.test{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
/*other styles*/
}
If you actually want the content to expand as much as possible and scoll if not, you could use Paulie_D's table-cell approach like he mentioned in comments.
Your images are blocked by my proxy so I'm not sure if it's the answer that you need, but you can avoid break between 2 words with the css property white-space.
white-space:nowrap;
see fiddle : http://jsfiddle.net/ZZa8j/4/
add min-width:450px; to the <ul>.
check my Fiddle Demo
CSS
ul{
min-width:450px;
width: 100%;
}
.test{
height:20px;
width:20%;
border: 1px solid black;
border-radius: 3px;
display: inline-block;
float: left;
margin-left: 5px;
text-align: center;
}
HTML
<ul>
<li class="test"> Hello </li>
<li class="test"> Welcome </li>
<li class="test"> Test Process </li>
<li class="test"> Text Message </li>
</ul>
Result
Code Demo
Try :
overflow: hidden;
min-width:100px;
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;
}
These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite.
I'm playing with this very simple sprite image:
I've got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it.
For my CSS, I have the following:
#menu {
left:10px;
top:50px;
height:300px;
width: 147px;
position:fixed;
}
.sprite {
background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
height:50px;
padding-left: 50px;
width:147px;
z-index:1;
}
.sprite a {
background-position: 0px 0px;
color:Red;
vertical-align: middle;
}
.sprite a:hover {
background-position: 0px -50px;
color:Yellow;
}
With that, my HTML is simple and small:
<html>
<body>
<ul id="menu">
<li class="sprite">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I can't seem to get my active link image (at position 0) or my hover link image (at position 50) to show.
Also, I'd like to find a way to make the entire rectangular region (50 x 147) the hyperlink.
Could someone help me, please?
Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?
CSS:
#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }
And HTML:
<html>
<body>
<ul id="menu">
<li class="sprite current">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I updated your fiddle: http://jsfiddle.net/PZh9F/12/
As you ha set the background of the ul (as it should) you also need to change the backgorund position of this same ul on hover, so not for the a as you did. Change the text color however should be done with a:hover I hope this points you in the right direction.
You're applying background to <li> tags and background-position to <a> tags instead of applying both to the same set of tags.
you defined the background for li.sprite not the hyperlink . that's why when a:hover happens there is no background to go -50px down .
.sprite a {
background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
background-position: 0px -100px;
color:Red;
vertical-align: middle;
display:block;
width:147px;
height:50px;
}
.sprite a:hover {
background-position: 0px -50px;
}
just a few issues:
The anchor tags weren't closed, so that may have caused some issues.
Any time you want something to behave like a link, it should use an anchor tag; I noticed the first li tag was just text. Technically, you can still achieve the same effect, but I'm guessing you're attempting to link to something.
When you're using html text for links within a button that is using a background image, I recommend putting the text into a span which makes it easier to format. When you add padding to an anchor tag without using the span, you can get extra padding on the opposite end in some browsers even with a set width. Just a little trick I learned over the years.
When using sprites, make sure you add height, width and display:block properties to the "a" selector. This will ensure that the entire link is clickable.
It looks like some of your hovers are jumping, it might be an issue with your sprite. It's crucial that your measurements are accurate. If it's even 1px off it can produce an undesired flicker effect.
The complete code is here:
http://jsfiddle.net/PZh9F/65/
Hope that helps!
background-positions by y-axis should have negative values of -50px and -100px.