I am setting up a Pop-up Window in a Wordpress 4.1 website located here:
http://ajourneyofepiphanies.com/dev/
You can see two options in the footer. The Get the Book link works correctly but the CSS is hardcoded inline and I can't change it for smaller screens by using a #media query.
Here the code I am using:
<div style="width: 48%; margin-right: 3.5%; float: left;">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>
<img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" />
</div>
<div style="width: 48%; margin-right: 0; float: left;">
<img class="alignnone size-full wp-image-70" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/amazon.png" alt="amazon" width="227" height="46" /><a class="buy-book-btn" title="Buy it on Amazon.com">Buy the book! ►</a>
<img class="alignnone size-full wp-image-72" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/button-itunes.png" alt="button-itunes" width="227" height="84" /><a class="buy-book-btn" title="Buy it on iTunens">Buy the book! ►</a>
<img class="alignnone size-full wp-image-71" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/bnlogo.png" alt="bnlogo" width="227" height="63" /><a class="buy-book-btn" title="Buy it on Barnes & Noble.com">Buy the book! ►</a>
<img class="alignnone size-full wp-image-69" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/lulu.png" alt="lulu" width="227" height="80" /><a class="buy-book-btn" title="Buy it on Lulu.com">Buy the book! ►</a>
</div>
Basically I want to dynamically split the popup window in half by using CSS to apply a #media query to it but the CSS rules I set up don't seem to affect it.
You can see a live example in the "Download the First Chapter" link in the footer of the site.
Here is my HTML code using CSS classes:
<div class="one-half">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>
<img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" />
</div>
<div class="one-half last">
Form and Download link will go here but this needs to be the right hand column.
</div>
Here is the CSS code:
.one-half {width 48.5%; margin-right:3.5%; float:left;}
.last {margin:0 !important;}
#media all and (max-width: 400px) {
.one-half {width:100%;}
}
I have tried using plugins for responsive columns and more but nothing seems to affect the popup window.
Any suggestions? Does CSS not work in the popup window? I am using the Popup Maker plugin.
You could add an ID to the body element, then target that ID specifically ahead of the popu pop up in your CSS to apply to the contents of the popup. Then you would end up with something like this:
HTML
<body class="bunch of classes" id="body-wrap">
Other markup...
<div class="popmake" id="popmake"></div>
</body>
CSS
#body-wrap .popmake .one-half {
width 48.5%;
margin-right:3.5%;
float:left;
}
#body-wrap .popmake .last {
margin:0 !important;
}
#media all and (max-width: 400px) {
#body-wrap .popmake .one-half {
width:100%;
}
}
This was just a simple missing colon. I had
#body-wrap .popmake .one-half {
width 48.5%; }
and needed
#body-wrap .popmake .one-half {
width: 48.5%; }
Related
I want to make the grey images center aligned. Please guide me how can I do this.
Here is what I have tried:
<div id="responsivearea" style="margin-top: 50px;">
<div class="img-center">
<img style="clear:none;" class="size-thumbnail wp-image-2707" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/visa-logo2-150x150.jpg" alt="visa logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2705" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/nethope-logo1-150x150.jpg" alt="nethope logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2704" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/ILO-logo1-150x150.jpg" alt="ILO logo" width="150" height="150" />
</div>
</div>
Here is the site.
Simply use:
.img-center{text-align: center;}
As suggested already, magin auto... using your existing img-center class
.img-center{
margin:auto;
vertical-align:middle; /* If you mean vertically aligned */
}
text-align can work but is a little funny in cross browser support...
margin auto generally does the job and should work
otherwise just wrap them with center tags, while people may frown upon using center tags..THEY WORK CROSS BROWSER!! so they will NOT fail!
Otherwise, if you mean the footer images/logos on the site.. They are in a P tag without any class.. You can simply apply a text-align:center: to that p tag.
Set margin to auto. The browser will align the images to center for you
img {
margin: auto;
}
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
Ok, I want to display some text next to my pricetables. This text has a background that must be repeated across the entire page, thus outside the container. Atm, the text is behind it's background (thus not visible), and the background gets cutted at the edge of the container.
How can I edit this code so that I can see my text, and that the background overflows the edge of the container?
This is how it looks like right now:
preview http://piclair.com/data/1t2ri.jpg
My CSS:
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}
#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;}
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;}
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}
And my HTML:
<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
<div id="orderbuttons">
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernowlastcolumn.png" alt="" />
</div>
Why are you using positioning? That's a rhetorical question, you're not supposed to (use positioning). It's the jQuery of CSS, everyone uses it and it's the worst thing you can use.
If the child elements are floating than the parent needs to have overflow: auto; set. Also do not start relative URLs with a slash. You should get used to using the base element...
http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element
The main element with the repeating grey background-image should contain those vertical banners. You want text to the left of those banners? Then put text to the left of those banners.
You did not post enough to warrant a full working demo (reply with more info and I might be able to refine this for you) though this will get you moving and grooving in the right direction. Make sure you adjust the base element accordingly (it will be different for your local/live environments, use a scripting language like PHP to determine your domain (e.g. localhost or example.com) and then serve the correct value for the base element).
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>
</head>
<body>
<div class="overflow">
<div class="left">
<p>text here</p>
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20M.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
</div>
</body>
</html>
Save this as an .xhtml extension if you're not using scripting (e.g. PHP) (XHTML will not work in IE8 or lower but it's at 5% market share right now, at this stage of your understanding concentrate on competent browsers) and XHTML is great because it's strict the moment you encounter an error you'll know you need to fix it, unless you want to blow three days trying to figure out you're missing a quote on an attribute. Strict code means you'll get in to the groove of doing it right the first time once you're used to it and it'll save you immense amounts of time.
You could also probably stand to learn how to correctly utilize CSS level 1, not a joke, most people don't correctly use the float property and end up spamming tons of position properties all over the place turning a page in to suck.
http://www.jabcreations.com/web/css/nested-divisible-elements
Yeah, you'll eventually utilize position for certain main-level elements for sites with advanced layouts (hint: 99% of sites do NOT have advanced layouts) but without a good foundation everything laying on top of that will be even less sturdy to relay on.
Here is the code:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}
I'm guessing I need to add something to my CSS? I know a solution would be to put the images as separate divs like this:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>
But I have next/previous arrows in my gallery so I need the images to be in the same div otherwise the arrows won't work.
I think the reason they are both appearing in the same place is because they are sharing the same css class, just name them differently with different top/left coordinates.
Which method is best?
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<h1>slogan of company</h1>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<p>slogan of company</p>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<span>slogan of company</span>
</div>
<div id="header">
<div id="logo">
<img width="172" height="80" src="logo.jpg" alt="Clevex logo">
slogan of company
</div>
</div>
I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?
The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.
Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>
I guess not;
It's better to do it like this:
<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>
Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.
Do your CSS like this:
h1 {
background-image: url(logo.png);
width: 200px;
height: 80px;
cursor: pointer;
}
h1 span {
display: none;
}
This way it is both readable for the and user and a search engine.
No, something like the following would be better:
<div id="header">
<h1>Company</h1>
<h2>Slogan</h2>
</div>
h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top; width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }
The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.
In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead.
...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.