I have an ordered list that I am trying to mark up the HTML can be seen below:
<ol class="main tags">
<li class="main">Gump...</li>
<li>We ar...</li>
<li>We a...</li>
</ol>
The CSS looks like this:
ol.tags {
list-style: decimal none outside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 16px 0px 0px 60px;
}
And the result looks like this:
http://gumpshen.com/images/temp/Gumpshen_OL.png
I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?
Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list
I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.
You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.
It looks like you will want to add your own counter to your list.
you can use the
background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li
One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.
Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.
Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.
Sorted it here is what I done:
First I added a span tag around the content:
<ol class="main tags">
<li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
<li><span>We are web design & development studio who are passionate about what we do.</span></li>
<li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>
The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:
ol.tags {
list-style: decimal none inside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 26px 0px 0px 20px;
}
ol.tags li span {
margin: -24px 0px 0px 50px;
display: block;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 months ago.
This post was edited and submitted for review 2 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
The links in my nav bar have a :hover effect where the font size is increased and a box shadow is added. Everything works fine except that, when the curser leaves the nav link, the other nav elements do a little hop (they move up a bit for just a moment, then back down to their original position). I'm not sure why this is happening or how to fix it. Any suggestions would be greatly appreciated. Thanks!
Edit: To reproduce this issue, follow the link to the site, use the dropdown field near the top left of the page to select the "Rounded and fun (Google style)" option, hover over the nav links in the top right then move your mouse off of the link. You should see the other links move up briefly, then move back down
I had the same problem on this site with the default stylesheet that had the links styled differently but had a somewhat similar :hover effect (increased font size and add a bottom border). I was able to fix that issue by decreasing the bottom padding a bit on :hover, but I tried that for this issue and it did not work.
I'm using plain HTML 5 and CSS 3.
I've attached the HTML, and all CSS related to the nav/header elements as well as a link to the webpage itself. My page has multiple stylesheets that the user can switch between using the dropdown field. My issue is related to the "rounded" style
This is my first "full" website that I've made (I'm currently going through a course on Codecademy) and it is also my portfolio site. So any suggestions on general improvements to the site/best practices are also welcome.
Site Link
https://jackf514.github.io/portfolio-site/
nav {
display: inline-block;
width: 50%;
padding-right: 5%;
flex-shrink: 2;
}
nav ul {
display: flex;
list-style: none;
float: right;
}
nav li {
padding: 0.5rem;
transition: font-size 0.1s;
}
nav a {
text-decoration: none;
color: hsla(210, 40%, 45%, 1);
font-size: 1.375rem;
transition: font-size 0.1s, color 0.5s, box-shadow 0.25s;
}
nav li:hover {
border-bottom: 2px solid hsla(210, 40%, 20%, 1);
padding-bottom: 6px;
font-size: 1.425rem;
}
nav li:active {
color: hsla(210, 40%, 35%, 1);
font-size: 1.4rem;
border-bottom-width: 1px;
}
nav a {
margin-left: 10px;
}
nav li {
padding: 8px 12px;
border: 1px solid hsla(210, 40%, 20%, 1) !important;
}
nav a,
nav li {
border-radius: 25px;
}
nav li:hover {
box-shadow: 0px 2px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
padding-bottom: 6px;
}
/*nav a:hover li {
padding: 6px 12px 5px 12px;
border-width: 0px;
}
nav a:hover {
box-shadow: 0px 3px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
}*/
<header>
<div id='title'>
<a href="#top">
<h1>Jack Ferguson</h1>
</a>
</div>
<nav>
<ul>
<a href="#about">
<li>About Me</li>
</a>
<a href="#projects">
<li>My Projects</li>
</a>
<a href="#contact">
<li>Contact Me</li>
</a>
</ul>
</nav>
</header>
There are multiple ways to fix this.
The reason for horizontal expand on hover is because of font size increase. When your font size changes, size of your ul container also changes. Hence , causing weird effect on hover.
I would recommend using scale for such transition instead of font size. It makes more sense and is easier to debug.
As of setting border , you can also use text-underline.
nav li:hover {
/* border-bottom: 2px solid hsla(210, 40%, 20%, 1); */
/* padding-bottom: 6px; */
/* font-size: 1.425rem; */
scale: 1.1;
text-decoration: underline;
text-underline-offset: 8px;
}
On your site, you could replace flex on your UL with grid, like the following:
display: grid;
grid-template-columns: 127px 144px 139px;
That being said, I wouldn't recommend it, because then you'd have to change the px values every time you update your menu. It is an option if you don't mind doing that though.
The reason why the shifting is occuring is because when the font size increases, it also increases the size of the menu. So the spacings need to readjust to accomodate. With flex, the sizes are done automatically based on the content so it needs to adjust. With the grid approach, you're specifying how big you want each menu item to be, so no shifting occurs.
IMO you should just do an underline and forgo the font increase altogether.
Also, for proper syntax make sure your list structure is as follows (as of now you have the a and li mixed up).
<ul>
<li>
<a></a>
</li>
</ul>
I've downloaded the CSS and HTML files directly from your website you provided above.
What's important to understand is that because of the flex display type, when you perform the transition the elements themselves change size to accommodate the transitions
A helpful tool I like to use to debug when I have size issues via margin, border, padding, or element sizing on my pages is to apply a random color to the specified elements background via background-color. These will let you see in real time how your hover is changing the actual size of the element you are looking at and also how all your elements interact with each other on the page. (this affect can also be seen to a lesser extent via the developer tools in your browser)
Using the background trick we can see that on Hover your ul element is changing its height and because of this causing all the other elements in it to move as well such that they are centered.
ul{
height:50px;
}
adding this to your style sheet allows the enough head room for the div when it grows to not resize it all and removes the vertical hoping around of your list items on hover. They will still move sideways due to the above mentioned resizing. This could be removed if space is added between the li
Understanding how each layer is built on top of each other is super important for how your site will look and understanding how things are affected. If your like me putting in the debug colors on your elements backgrounds can be a super useful tool to understanding how they are arranged on your page
I want to create an unordered list with list items that have images and the bullets beside them. If I create a background image as the way to achieve this the image is appearing behind the text. If I set the image as a list-style-image, it's not lining up with the text and it's taking away the bullet that I want. Here is my code for the list-style image and I was going to attach an image, but I don't have enough points yet since I'm new to achieve this. Any help would be appreciated!
Thanks!
.ul1
{
margin-left: 25px;
list-style-image: url('Images/Air Icon copy.png');
}
<div>
<ul id="Ul1">
<li class="ul1">Clean air: Our emissions are 250 percent lower.</li>
</ul>
</div>
This is what I used for the same problem you had:
list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;
Instead of using an image that wouldn't align properly i decided to use it as a background and just don't repeat it. Play around with the padding and height untill it fits how you want!
Jsfiddle if you're interested
EDIT: Just read that you wanted to keep the bullet. Take away the list-style: none and you're good to go.
Here is the another way to show the image and as well bullets.
.ul1
{
left:12px;
/* list-style-type:none;*/
}
li{position:relative;}
li.ul1:before {
content: "";
content: url(http://lorempixel.com/20/20/);
margin:10px 0;
}
Check the DEMO.
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I have a division that has a background image but it needs to be a varible size. I'm using three images. One of the top, one for the bottom and a repeating one for the middle.
I've only got one div to work with and given the middle background image to that and then used the before and after pesudo classes to place the other images. The image from the main division shows up behind these two since they are semi transparent. Is there a way round this in css or a better method to do it?
HHTML:
<div class="faq">
<strong>Q. Who was the greatest business man?</strong><br />
<p><strong>A. </strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
<strong>Q. How should my employees let off steam?</strong><br />
<p><strong>A. </strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
CSS - style
.faq{
background: transparent url(../images/image_middle.png) repeat-y center;
color: #ffffff;
display: block;
}
.faq:before {
background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}
CSS - layout
.faq:before {
padding-top: 20px;
display: block;
content: "\A";
}
.faq:after {
padding-top: 14px;
display: block;
content: "\A";
}
.faq{
margin: 20px 0 5px !important;
padding: 0 20px 0 15px !important;
}
The best way to do this is by using multiple backgrounds - see https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds. in this way, you can specify the 3 different images and their positions as styles for the element. List the top image first.
If your browser support requirements won't work with CSS multiple backgrounds, you can get the same result by styling other elements - such as a h1 or p:last inside your div. This approach is more complicated, since you have to be very careful about the position of elements inside that div.
Note that a background or image will always show through transparent areas of an image above it. If you don't want this, you must put something opaque into that cover-up image - such as the background color that you're trying to fade to.
For more detailed help, please post a self contained example of the code you're working with.
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}