I think I might be having a problem, not sure if it is a problem because I have been looking at it for sooooo long, I don't even know if its centered or not.
http://jamessuske.com/thornwood/gallery.php
What I am trying to do is center the entire gallery, to me it looks like its a bit to the right. If anyone can help me figure this out, that would be great. Thanks in advanced.
CSS CODE
.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}
.gallery{
width:912px;
margin-top:6px;
}
.gallery ul{
list-style-type:none;
text-align:center;
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
It looks like you just need to remove the left padding on the element in your .gallery:
.gallery ul { padding-left: 0px; }
Depending on what web browser you're using, there is usually a default padding on lists.
Update: Oh, I see what you are trying to fix now, the stuff inside the container:
All you need is
.gallery ul {
padding: 0;
}
Original:
One thing you may want to do is pick up a tool like XScope: http://iconfactory.com/software/xscope. It's an application that has tools for designing (rulers, guides, browser size frames, etc.). The ruler could help you with this because it measures pixels on your screen. You can quickly measure how many pixels are on each side of your layout.
Also here is something similar but a little less elegant: http://www.arulerforwindows.com/
It's not centered. (There are now three people claiming that it's centered, but I have no idea what they are looking at...)
You are using a list for the images, and it has a padding on the left side by default.
You are using padding in the links to get a space between them, but you are only padding on the left and top sides, so that will also add extra space on the left.
Set the left padding to zero in the list:
.gallery ul{
list-style-type:none;
text-align:center;
padding-left: 0;
}
Make the left and right padding in the links more even:
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 2px 0 3px;
}
You are right it is not centered.
I think, but am not sure, that it may be a padding issue, you set the padding left but not equally right on a couple elements in the container.
all left padding to 0px (or use equal padding left and right
like this - padding: 5px 5px;
or each image can have 0 padding and equal margin: 5px 5px;
Related
This is a live example only.
We are migrating a website with some unique tables to Wordpress. On one of them the TD's are not aligning properly and ignoring any height rules we put on them, css or otherwise. All we've done is migrate the table over in it's original form, where it is displayed properly, but are getting weird bugs. Spent the last 4 hours trying to solve this one issue. Take a look at the second table at the following links:
Proper working table
Broken table
The heights of the above pieces should be precisely 7px, but instead are 16px when there is no padding or margin.
Anyone have any ideas?
CSS
/** Flow chart page **/
#padi_flowchart {
width:580px !Important;
margin:0;
padding:0;
color:#FFFFFF;
background-image:url("/ocean-legends/wp-content/themes/Ocean%20Legends/Assets/img/padi_flowchart_background.jpg");
background-postion:top left;
background-repeat:no-repeat;
}
#padi_flowchart * {
margin: 0;
padding: 0;
}
#padi_flowchart a {
color:#FFFFFF;
}
#padi_flowchart .fixwidth {
height: 7px;
}
#padi_flowchart .fixwidth br {
display: none;
}
#padi_flowchart .fixwidth img {
width: 100% !Important;
}
To fix the 1st table. It's the browser default margin and padding values on the ul list cause that. This should fix it.
.course_box ul {
padding: 0 0 0 16px; /* or your value */
margin: 0;
}
To fix the 2nd table two ways I can think of:
Add line-height: 0; to the td. That should fix all, but be careful with the text if there is any inside.
make the top img vertical-align: bottom; and bottom img to vertical-align: top; in the table cells.
I am creating a floating menu with a couple of links, I applied a css to rotate vertically (-90deg)
but the height is more than desired, how can I decrease it? and I want to remove the spaces between each link too please.
example
-webkit-transform: rotate(-90deg);
margin-top:0px;
font-size: 14px;
width:96px;
padding: 0 0 0 0;
height: 98%;
You would want to use media queries to achieve this. You can find a quick example below. Simply set the desired resolution that you want the change to happen at and define the classes and styles you want to be affected.
Additional Resources
Here's an awesome link on media queries to get you started:
http://css-tricks.com/css-media-queries/
If you're interested in learning more about responsive this book won't disappoint. Super quick read and it'll answer all of your questions on responsive:
http://www.abookapart.com/products/responsive-web-design
JSFiddle & Sample Code
http://jsfiddle.net/ZV6N5/2/
CSS
#media all and (max-width : 800px) {
#menu > a{
width: 50px;
font-size:100%;
}
}
you need to set explicite width and height to <a> , wrap text inside another container that you rotate and translate back down.
To get rid of space in betwwen inline-block element, you can set font-size:0; at #menu, since you set font-size: <a> , font-size will reduce your white-space within HTML code to nothing visible.
DEMO
#menu > a {
overflow:visible;
margin-top:0px;
font-size: 14px;
width:40px;
padding: 0 0 0 0;
text-decoration: none;
text-align: center;
vertical-align: middle;
display: inline-block;
font-family: Tahoma, Geneva, sans-serif;
}
#menu>a>span, #menu>a {
height:60px;
line-height:60px;
min-width:60px;
}
#menu>a>span {
float:left;
padding:0 5px;
margin-right:-5em;/* remove this if you do not want see span overflow; */
box-shadow:inset 0 0 0 1px black;
transform: rotate(-90deg) translatex(-60px);
transform-origin: top left;
background: rgba(153, 153, 153, .8);
color: rgba(255, 255, 255, 1);
}
and links are formed like this <span>Item</span>.
Well, when you rotate your items, your "height" is actually your width declaration.
Unfortunately, from the way you've architected your heights/widths using percentages, you cannot really achieve what you want, as there is now way to tell a child element to be a certain percent of it's parent's height, which is what you're aiming for (a's width should be 100% of the #menu's height).
If you want, there's still some things you could do:
If you're calculating your measurements within a range and you know only a little bit will ever overhang, you can give #menu {overflow:hidden;} to hide the children's excess. This is more of a simple hack, than a real fix.
You can hardcode the height of menu, and give that same height to the width of your children. (If you additionally want padding, you can subtract hardcoded values, or change our box-sizing to a border-box depending on your accessibility reqs).
To better facilitate #2, you could use rem to hardcode your widths/heights as a different responsive practice as opposed to percentages
Really, all you need to do is ensure that the widths of your children are the same as the height of your menu, however you want to tackle that is up to you, but fluid percentages aren't going to work well.
negative margins and hard-coding the heights solved the problem!
#menu
{height:100px;}
#menu > a {
-webkit-transform: rotate(-90deg);
font-size: 100%;
padding: 0 0 0 0;
height: 40px;
position:relative;
margin-left:-30px;
margin-right:-30px;
bottom:-30px;}
fiddle
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I have been searching over the internet for the past few hours looking for a solution to this problem and have been unable to find anything, although a few similiar issues, none appear to be the same as this.
I have a list, which contains 2 span elements. I wish the first span element to float to the left, and the second to float to the right.
In all browsers besides IE 7, which makes has the the right element appearing on the next line.
like so :
LEFT
LEFT RIGHT
LEFT RIGHT
RIGHT - (this is not meant to be in a code block, unsure how to remove it)
(there is more then 3 elements, but that is a general example - the page with the issue is located at : http://www.blisshair.com.au/testing/)
I am unsure of which modifications to make to correct this.
If anyone is able to help me out I would be much appreciative.
Regards.
Try Add this to your CSS this might help you
#basic_info ul {
padding:0px;
margin:0px;
list-style-position:inside;
list-style-image:url(tick.png);
width:100%;
position: relative;
font-size:0.8em;
float: left;
}
#basic_info li {
border-top:0.1em solid #DFDFDF;
background:#F7FEF3;
position: relative;
width:100%;
float: left;
}
try adding clear:right to the li element like
#basic_info li {
border-top: 0.1em solid #DFDFDF;
background: #F7FEF3;
clear: right;
}
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;
}