The problem is at the footer of my website. I was trying to make it look like the footer of the main template but I'm missing something which I can't understand. Please guide.
What I want it to look like:
please help to move the lists to a little back as shown in first picture.
Many Tanks..
You should have applied CSS Reset
You're missing padding:0 to ul in the footer
This will help!
You are missing padding: 0px on the ul's in the footer. Apply it there and you get it done :-)
Try:
.three.columns ul {
padding-left: 0px;
}
Related
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.
Go to this link to get the code
http://jsfiddle.net/o3rh4oeb/
Go to this link for actual design I want.
http://www.bbc.com/news/
See here my problem is the white spaces,between the boxes.How to get rid of it,I tried both margin and padding 0px but never worked for top one not the below one :(
help me please...
The ul in the #topicmenu section has a margin-top applied by the browser. You just need to remove it:
#topicmenu ul {
margin-top: 0;
}
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).
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.