Please look at my jsFiddle: http://jsfiddle.net/AnNyf
I am trying to get those icons to fit right under that block of text there on the right. I've tried a lot of methods but I just can't get it to work. I'm just a bit rusty on things so I need a refresher.
Thanks in advance!
add right:300px to your li css class
header#header .inner .networks li {
float: right;
list-style: none;
margin-top:122px;
position: relative;
right:300px; //recommend you play around with the value
}
http://jsfiddle.net/AnNyf/2/
Related
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
working on a pretty simple page, with a navbar and a few links. everything was working, appearing correctly, i then made a change to the html and the navbar links moved left whereas before they were centered. im sure i didnt change any of the css and ive scanned over it manytimes over the last day. i wa going to start rom scratch but heard about stackoverflow and thought id try my luck.
heres the page
http://coleio.com/html/poc.html
thanks :)
Add text-align:center and width:100% to the style for the ul:
ul {
display: inline-block;
margin: 0 auto;
list-style-type: none;
text-decoration: none;
text-align: center;
width: 100%;
}
Add .nav {text-align: center;} to the CSS
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
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.