I have a fairly simplistic website that I have setup for a phone, tablet, and desktop. Using media queries to format the CSS accordingly. Challenge is the site is PHP based, dynamic, and doesn't use the full width of the screen. Page has two tables, side by side, left justified, each 500px in width. So my desktop for instance is 1388px wide. Centering the title makes it off center from the middle of the two tables. So I added:
.centering {width:1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
to the paragraph tag for the title on the top of the page. OK great, I just hard coded the placement. Have a .centering for each media query with various widths as the table widths vary per device. So it works, have one for desktop, one for the iPad landscape, one for iPad portrait (portrait tables adjust one on top, one underneath), various iPhone versions and some general ones. On the iPad landscape and desktop there is one problem.
I mentioned it was PHP and dynamic. A user can pass along in the PHP URL, that they do not want to see the second table. (ex. http://www.myurl.com/test.php?showsecond=0). Well that's great, however now I have one table of 500 pixels, and a title centered based on a width of 1020px. But the width is now only 500px. I tried loading various styles dynamically based on what was set, but for some reason when I load a style from file, as opposed to being in the physical page, it had some weirdness. Like extra space between two lines of text. Anyway, is there any suggestions how to deal with this title? Is there an element like a div or something I can place around the entire page, that will determine the current page width (based on content), and the title centered will automatically fit into it correctly without having to hard code width information for it? Especially with the dynamic changing width of a page even in the same orientation on the same device?
Here's some addition imagery as I guess I'm being told I write to much. On the desktop I have a webpagge with two pictures:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED TWO TABLES WITH A LOT OF WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
When the PHP is set thru the URL to not display the second table I get:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED SINGLE TABLES WITH A LOT MORE WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
As you would have seen, the title doesn't recenter based on the smaller content and the page doesn't use the full screen with so don't want it to center by "page width".
Here is my media query to do the initial center
<code><pre>
#media only screen and (min-width : 1224px)
{
th { font-size: 1.6em; font-family:Sans-serif; }
td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
h1 { font-size: 1.75em; line-height: 1.5em; }
h2 { font-size: 1.25em; }
table { width: 500px; align: left; }
.centering {width:1020px; padding-top:5px;
border:0; margin-top:2px; text-align: center;
font-size: 1.6em; font-family: Sans-serif;
font-weight:bold;}
}
</code></pre>
And my PHP to output the title:
echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";
ThoughTs?
Thanks.
Set the style as:
<h1 style="text-align: center;">You title</h1>
If you think that browser fails to center your text then check your tables to be centered, if not check you glasses ;)
Related
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
When using Chrome on PC and refreshing our page, sometimes the two paragraph text area where it says "Small Business Finance Team doesn’t stop advocating for its clients..." will ignore its parent div's 580px width rule and display behind the form on the right.
I'm not sure if this is because of the mobile responsive design or the div placement, but it's very strange due to Firebug displaying 580px whether the text is inside or outside the 580px width. The width value is never crossed out to indicate that the rule isn't being used.
Adding different !important rules, paddings, margins and commenting out the mobile area doesn't seem to fix the issue.
Website: http://smallbusinessfinanceteam.com/gold
Example image: http://i.imgur.com/VDNHmG5.png
Try removing the width: 580px property and just keeping the max-width: 580px property on the .left class.
.left {
max-width: 580px;
float: left;
padding-right: 30px;
overflow: auto;
}
I can't find the answer to this question but it must have been done before.
I have four lines of small images forming "keys" in a sort of kyboard layout (see link):
http://bestmarketingnames.com/Tbanneredit_v53.php
In order to improve SEO the client would like me to use css to create buttons rather than the images that are being used presently.
The client likes the fact that the buttons (or keys) line up perfectly with the vertical margin on the left side and right side of the container. For this reason I assume the css/php/mysql must either store width information for the keys or an appropriate percentage must be used that will cause the buttons resize approriately to fill cause the images to exactly fill the container div. Also, if possible, the client would prefer that the keys somewhat match the total width of the words in them.
I am generating the dynamic parts of the page with php/mysql, and am using a single mysql table with 5 columns.
Is there an easy way to use css to create the buttons? I would prefer to not have to store the css button image widths in the database, but if I have to I can.
Thanks in advance
Tom
Check working DEMO http://jsfiddle.net/yeyene/UfVhD/3/
Calculation
button counts in each row = ( number of your buttons/4 )
then,
each button width = ( your content width/button counts in each row) - ( button counts in each row * left right margin 2px )
CSS
ul#myButtons {
background:#d6d6d6;
padding:5px;
float:left;
width:920px;}
ul#myButtons li {
list-style:none;
float:left;
width:100px;
margin:1px; /*Try deleting this float float:left; */
}
ul#myButtons li a {
display:block;
background:#aaa;
color:#444;
padding:2px 6px;
font:normal 12px Arial;
text-decoration:none;
text-align:center;
margin-bottom:1px;
}
ul#myButtons li a:hover {
background:#f0f0f0;
}
HTML
<ul id="myButtons">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<!-- links go on -->
</ul>
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
I am looking for something that would allow me to render an uploaded image with a 3D perspective and a wrap effect like here.
This will be in the form of a cropping preview using a jQuery library such as jCrop
Currently I was able to achieve the 3D perspective using Reflex.js but looking for a more subtle solution with the wrapping effect as well.
Any help will be appreciated :)
Thanks in advance!
Your requirement of IE9 support basically mandates a canvas approach if you want to keep it client-side. You could of course do the rendering server-side and AJAX load the rendered image back in which will work in every browser.
If you decide that you can dump IE versions less than 10 (or at least just show them the normal photo without the transform then you can do the wrap-around effect with a combination of CSS 3D Transforms and CSS2 clip. Something like:
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
To break that down, we’ve loaded the user’s image and dropped it into the page, along with a div with the same image set as a background. That div is set to be a thin width and a height that’s almost as tall as the main image. We can use the background-size property to foce the background image to fit the div even if it’s taller.
We then absolutely position those two so that they’re next to each-other. The CSS2 clip property lets us clip off the left 20px of the image so that at this point the div and img look like one image together.
Finally, we set a perspective and transform-origin for each block and rotate them away from each-other around the Y axis. Because of the clipping we have to fudge the .edge block to be slightly smaller than originally (with a 200px tall image I had to drop it to 196px to look good) but that works pretty nicely for me.
Obviously you’d need to fill in the vendor prefixes (-moz-, -ms-, -o-, -webkit) and I’ll leave the shadow as an exercise for the reader (a simple background on the container would probably do).