I have an unordered list within a body and the body tag is aligned to the center, the text for the ul list goes to the middle but the gif image stays to the left side of the page. How do I fix this?
http://www.student.nvcc.edu/home/kosindi/test/ul.html
That is a link to my website which has an example of my problem.
Please explain your logic, thank you.
as per your HTML code you gave in link just few change will do.
in css
body {
padding-left: 45%; // add this css
text-align: left; // change this css
}
You have two variants, choose one:
1.Use this CSS and it will work:
li { list-style-position: inside; }
2.If you want the basket balls to appear one under another then use this CSS:
body { text-align: left; }
ul { width: 200px; margin: 0 auto; }
Related
I have some text with images aligned left or right, wrapped by text. Their alignment is hardcoded in the .html file like this: <img style="float:left" ... />. When the image is aligned left, I want to have some space to the rigth (margin: 0 1rem 0 0). And vice versa, if the image is on the right, I want to have some space to the left (margin: 0 0 0 1rem). See the scheme below. I need to do this by styles in styles.css file, something like:
figure[style="float: left;"] {
margin-right: 2rem;
}
figure[style="float: right;"] {
margin-left: 2rem;
}
Please anyone help me with it!
The problem with the selector you write is that it should be identical to the way it's written in HTML (same letter cases, same white spaces ... etc).
So according to the HTML you wrote, you should modify it to the following
figure[style="float:left"] {
margin-right: 2rem;
}
figure[style="float:right"] {
margin-left: 2rem;
}
Or you can use something like the following
figure[style*="float:left"] {
margin-right: 2rem;
}
figure[style*="float:right"] {
margin-left: 2rem;
}
The asterisk means that the style contain float:left or float:right and apply the required style.
There is something that comes to my mind but I never tested it's working fine, I tested it.
figure[style*="float"][style*="left"] {
margin-right: 2rem;
}
figure[style*="float"][style*="right"] {
margin-left: 2rem;
}
This should test that the selector contain both combination (float, right or left). Didn't test it though.
You can do attribute-based selectors, I never tried doing it with styles, but it's a bad idea. Even if it works, it assumes that no other style is applied on your tag. It is highly unreliable. Tried
<!DOCTYPE html>
<html>
<head>
<style>
a[style="color:red;"] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
w3schools.com
disney.com
wikipedia.org
</body>
</html>
and it appears to be working (the yellow background is successfully applied) in FireFox. However, this is a very bad idea, it would be much wiser to create these CSS classes:
.fl {
float: left;
}
.fr {
float: right;
}
Refactor your hard-coded styles to use these classes instead and use class-based selectors afterwards. So, the thing you want to achieve is achievable, but not recommendable.
It's a tiny issue you may didn't notice which is semicolon because in css file you should write the exact css selector as it appears in html attribute, see below for example:
p[style="color: red;"] {
background-color: yellow;
}
p[style="color: red"] {
background-color: green;
}
<p style="color: red;">This will be yellow bg!</p>
<p style="color: red">This will be green bg!</p>
BUT as #Lajos Arpad mention in his answer, it's a bad idea to style your css depending on html attributes.
This is my first answer.
If for some reason padding like this doesn't work:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
else I would add styling to the paragraph itself and not just the image.
You could also use different classes for different images:
figure1[style="float: left;"] {
margin-right: 2rem;
}
figure2[style="float: right;"] {
margin-left: 2rem;
}
I hope I am right here, I need your help with my upcoming online shop. I would like to center the main categorie menu on the top but I am missing the right CSS order.
This is what it looks right right now and there are 2 ways I want to test the looking.
First I want is a centered menu where "home" and "Kollektionen" have the same distance to the left or right.
And secondly I want to try out what it looks like when every li-element 'pushes' the next element to the right so that it's centered at the last one.
You know what I mean? 2 different ways of centering my menu and I don't find the right command....
I hope you can help me.
Thanks in advance.
PS: sorry for my bad english, it's not my native language.
EDIT: I cannot post code I'm afraid as it's not mine. But maybe this is enough: the basic template is made of this http://www.shopwaredemo.de/
2nd EDIT: after trying Asko's, Mike's and Tom's answer and both works I ask myself why? What is the difference between display:flex and display:inline-box and between text-align and justify-content set to center???
Perhaps use display: inline-block? E.g the following:
.menu {
text-align: center;
}
.menu li {
float: none; /* assuming the template has set this to 'left' */
display: inline-block;
margin-left: 20px; /* tweak this for the space inbetween items */
margin-right: 20px; /* and this, too */
}
Note that I didn't look at the code, so the div .menu is an example.
You can try to make the <ul> display: inline-block and apply text-align: center on parent.
JSFiddle Demo: http://jsfiddle.net/Q2hSv/1/
Without seeing some code, maybe this will help.
.topmenu {
width: 80%;
margin: auto;
}
.menuitems {
float: left;
width: // Here you take the number of items divided by 100%
// remember to take borders and margins into account
Dependent on your browser scope you could use display:flex;
HTML:
<nav>
<ul>
<li>Home</li>
<li>Neuheiten</li>
<li>Orschmuck</li>
<li>Ringe</li>
<li>Halsketten</li>
<li>Armbander</li>
<li>Kollecktion</li>
</ul>
</nav>
CSS:
nav {
background: #000;
margin: 0 auto;
width: 70%;
}
ul {
display: flex;
justify-content: center;
}
li {
list-style: none;
}
Example http://codepen.io/tom-maton/pen/AFpnJ
back to work and managed to achieve my goal:
Thanks again for every answer, I used and played a lot with your snippets and and I ended up using this (click click!):
#mainNavigation {
margin: 0 auto;
width: 98%;
}
#mainNavigation ul {
display: flex;
justify-content: center;
}
#mainNavigation li {
list-style: none;
width: 15%;
text-align: center; /* to center the li-elements itself */
}
which works perfectly! Still figuring out what excatly justify-center and display:flex do but I want you to know that you helped a lot.
CHEERS!
PS: how come my thread got a negative rating? it says -1 to me!? Did I do anything wrong?
I want to build a list of itens. Each item should be in one line, like several paragraphs.
Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.
Take a look at code:
http://jsfiddle.net/Yz8Cq/
You need to remove float: left;
#ListaDeEmpresas .arrow {
height: 50px;
width: 20px;
background: url("/Content/SetaBrancoh40.png") no-repeat center center;
background-color: #A9462F;
}
http://jsfiddle.net/spacebeers/Yz8Cq/5/
Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/
Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:
#ListaDeEmpresas div.empresa {
clear: left;
}
This will make sure each label/span set appears below the previous one.
Get rid of the float: left; in #ListaDeEmpresas .arrow
The float: left; is making them do that.
I have been building a site and can't figure out how to center the navigation links. The site is in HTML using a CSS sheet.
I have tried to center them using
margin: 0 auto;
Any suggestions would be great!
The site address is http://tinyurl.com/7x7nzz3
If you would like me to paste all the code into here then please request that however I didn't feel it necessary as the code is openly available from view source
try applying the following css rule to div#header
text-align: center;
First, in your CSS you have this:
#menu li {
float: left;
}
DELETE THIS!
Second, try with this:
#menu
{
text-align: center;
}
It will only center any text in #menu and you can also add this if it doesn't work:
#menu ul, #menu ul li
{
text-align: center;
}
If it doesn't work, I don't know why!
add
display: block;
width: 600px
margin: 0px auto needs an fixed width and a block element !
This works using firebug:
#menu ul {
line-height: normal;
list-style: none;
margin: 0 auto;
padding: 0;
width: 600px;
}
CSS is used when one has to print text in a specified format like color,positioning,font etc..
repeatedly after certain intervals.For example say you have 2 type of fonts font1,font2.
Now you want to print the text as follows,
font1
font2
hyperlink(navigation link)
font1
table
font2
Here we have used CSS for two type of fonts that we use repeatedly but not continously and writting the logic for same color,position,font type etc.. each time is a tiresome process hen ce CSS comes into picture lo make our job easy.In this case as, it is alreay writtrn in HTML and navigation links have nothing to do with CSS hence a simple <center> CLICK ME</center> in HTML code would do the required change. <center> tag here indicates that this should be printed in the center and if dont close the tag </center> properly after the use then all the remaining contents on the page would also be centered by dafault.
i have some problems with styling an UL as navigation bar (sorry for this question, but iam a developer, not designer..)
The Problem occours in Safari on Mac (FF is working fine) See first picture (FF)
Css:
.multiPoint {
list-style-image:url(../images/punkte.jpg); }
.directionRight{
direction:rtl;
padding-right:3em;
margin-right:0.5em;
}
#navigation {
text-align: left;
}
HTML:
<div id="navigation" class="span-6 directionRight">
<ul>
<li class="multiPoint">Sie</li>
</ul>
</div>
If the bullet image is directional (like in the example above), the rtl approach may have the unintended side-effect that the image is mirrored in some browsers, resulting in an arrow pointing from right to left instead of left to right.
A background image does not show this behavior in IE9 and it maintains the correct orientation.
list-style: none;
background: url(images/bullet.gif) no-repeat center right;
padding-right: 10px;
Try updating your multiPoint class style as follows:
.multiPoint {
list-style-image:url(../images/punkte.jpg);
list-style-position: inside;
}
That will tell the browser to position your bullet images inside the list instead of outside.