You can view the page I'm working on here: http://stats.escalatehosting.com/whois.php
The problem I'm having is that I just can't figure out what CSS needs to be changed to center the page numbers located at the top and bottom of the page. I've tried changing everything I can think of but it always ends up off-center when you start clicking to pages with larger numbers...
I'm not really sure what needs to be changed, if anyone has any suggestions, that would be greatly appreciated.
As you commented, center is not a valid value for float property, either you can use left, right or none which is default.
On creative2tables line 167 change your CSS as provided below..
#ct1_pager_container, #ct2_pager_container {
margin-bottom: 15px;
clear: right; /* Not sure if required */
width: 300px;
}
And in the same stylesheet on line 174 change the below as
#ct1_pager, #ct2_pager {
clear: both;
list-style: none;
}
I've changed the above properties to center your pagination, please do check if you are using these id's for any other element as well.
You need to update below Class.
#ct1_pager_container, #ct2_pager_container{
width:100%;
}
#ct1_pager, #ct2_pager{
float:none;
text-align:center;
}
Update only given element. don't update whole CSS. keep everything else as it is.
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.
I'm relatively new to Drupal and so-so with CSS and am trying to float the image on a particular content type to the left of the content rather than having it center on the page on a row by itself. The purpose of the page is to have a list of items (like a catalog) and have an image to the left with the various descriptive fields to the right.
Using what I've found online I was able to get this on my CSS which almost works but after the first line being properly located to the right of the image the next line appears below the image. I would like all of them to be to the right, next to the image.
Because Drupal is generating the code I don't have the ability to easily change the HTML (though with work this is theoretically possible) but changes in the CSS are simple
.field-item img {
/* Shift "thumbail" images to the left */
/* new code to shift image to the left */
float: left;
padding-right: 10px;
/* -- old code to center image
margin-left: auto;
margin-right: auto;
*/
}
My theme is derived from danland. The page itself can be seen at http://blog.creatingorigami.com/content/eric%E2%80%99s-lotus
Any leads would be greatly appreciated!
Why change html code? This is crap. You can full styling html for use css styles.
I dont know if I understand right. This problem is clearfix hack, your page contains clearfixs.
Fastest solution.Change css property clear from both on value inherit.In system css called system.base.css. Path something as ..(root)/modules/system/.etc
After will be all contains on right side.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: inherit; /*changed property!*/
visibility: hidden;
}
Comfortable, but not clean solution is violent rewrite property
to the root css style.
.clearfix:after {
clear: inherit !important;
}
After a bit of work I have successfully moved the "Sort By" option on the product listing page of my website from its original position up next to the limiter (for the amount of products shown on each page) without breaking it. However, I cannot seem to figure out how to change it's current alignment.
I've got it displaying inline with the limiter, but I would like to move it over to the right so it is directly next to the limiter (rather than being directly in the center as it is now).
You can see it's current position on the product listing page here: http://soundcherry.com/index.php/sound-effects.html
How do I achieve moving the "Sort By" option to the right? I feel like it's something incredibly obvious and I'm simply missing it due to my lack of experience.
Any help will be greatly appreciated. Thanks!
EDIT
This is the part of the styles.css page that I believe I need to change. What do I alter exactly? Every time I think I have it figured out, it doesn't produce the results I expect.
/* Sorter */
.sorter { font-size:11px; padding:1px 8px; }
.sorter .view-mode { float:left; margin:0; }
.sorter .sort-by { float: right; }
.sorter .sort-by label { vertical-align:middle; }
.sorter .sort-by select { padding:0 ; margin: 1px; vertical-align:middle; }
.sorter .link-feed {}
You can do it in simple way
As i change from firebug to add 2 small property to your sort-by class you can add like below with inline style or in you css if you want to get same features in all pages
just add below css
float: right;
margin-left: 15px;
EDIT
.pager .sort-by { float: right; margin-left: 15px;}
let me know if i can help you further.
I'm writing a chat and i would like to have the incoming messages on the right and the outgoing on the left. Every message has a user picture, name, messages, time.
My problem is that I can't manage to have the text NOT to flow under the picture.
http://jsfiddle.net/4MVd2/2/
My other questions would be then, how to get the picture on the right to be right from the text without changing the order in the HTML and how to get the username aligned with the top of the picture.
Thank you!
.messagetext{
display:inline-block;
}
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
That should get you going. Now you just need to tweak that image, I wasn't sure if you wanted it at the top or bottom, and what not.
http://jsfiddle.net/4MVd2/10/
EDIT: Addressed your image positioning, I didn't see that the first time I read through. This should be what you want.
sorry I entirely missed the question float: right on the css for the image should fix it. http://jsfiddle.net/4MVd2/8/
1) You might want to convert your images to block level elements and give them a high enough bottom border to prevent text from sneaking bellow the images (either way you have a fixed message row height).
.message img {
height: 40px;
width: 40px;
display: block;
}
.incomingMessage img {
float:right;
margin: 0 0 3em 0.8em;
}
.outgoingMessage img {
float:left;
margin: 0 0.8em 3em 0;
}
2) Add a wrapper container around that block of code and float it instead of the image and the message content.
I agree with Chris Sobolewski and learned how to use inline-block from him.One way I used to use is use a class named`clearfix'.
First float your image like this:
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}
Then add a class clearfix like this :<div class="message incomingMessage clearfix">
And here is clearfix:
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?
Thanks
So i've got a posible answer for you.
First you have to add this css-styles to the a tag of the pictures:
display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;
It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P
I hope i could help!
In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.
For the anchor element having the photos use the float like this. This would take care.
float:left;
your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.
a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
Firstly I would recommend validating your html.
Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.
Thirdly, I would use a css class on the list, and style it like this:
ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}