oh dear, I’m lost again. I’m trying to add an image to my subscribe box but can’t figure how to set a height to the box. Can only see how to define p height at w3schools.
I need for that subscribe box at top of page (.awbox)
(1) to be 180px high, same as image .subimgtop
(2) to have no border on left side
(3) border to begin where image ends, kinda how it looks now at the top but that’s accidental because the image is overlapping the border
(4) and in mobile, for the image & h3 to be at the top and the 2 subscribe fields below them. Almost the way it works now if I test it in iphone 4 portrait. But I need to intentionally tell the css that .awsub must drop below .subimgtop+.awhdr.
I hope the @media’s will all carry on working okay, with that new image!
Hey @valarcher assuming I’ve understood correctly, to answer your initial question, you can simply give the awdiv div a height. Because of the padding and border you have, you will want height: 151px.
thank you! That works for 886px & up, but at 553 the submit falls outside awbox, and at 810px it all works okay again – .boxrgt (postit) falls below .boxlft as per css – then at 553px submit falls outside awbox again, and in iphone 4 portrait both inputs and submit fall outside box.
(1) how do I get contents of .awbox to obey vertical-align:middle, for desktop screen? so it lines up in the middle next to image.
(2) how do I get .awsub to obey margin:0 auto, for desktop screen? so yellow submit button is center of screen.
(3) when they enter text into .input box, how can I tell the css it should be black? not color:#999.
(3) please is someone able to fix the @media for me?
(3) OR is there another way to add an image so it works in @media? e.g. could I use a column layout to have an image and opt-in box next to each other, and change the padding/margin values so there’s no space between them? If so, please can someone give me the css for that? I can’t figure how to keep hdr next to image for iphone portrait AND keep the inputs & submit inside .boxlft.
(4) Ideally is there a way to tell @media to make image smaller & smaller? so everything stays inside .boxlft all the time.
Please don’t give up, try this changes in the relevant html and css.
I (re)moved some html elements and the “awsub” class name in order to make better use of the table-cell displays:
<div class="boxsub">
<div class="boxlft">
<div class="awbox">
<div class="subimgtop"></div>
<div class="awhdr">
<h3><span class="red3">—YOU know Top 12 Tips</span> but does your family? Give them this <span class="red3">colorful</span> ebook</h3>
<form method="post" class="awsub aw" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="listname" value="rawhealing">
<input type="hidden" name="redirect" value="http://greensmoothie.com/misc/thanksub.php">
<input type="hidden" name="meta_redirect_onlist" value="http://greensmoothie.com/misc/thankhave.php">
<input type="hidden" name="meta_required" value="email">
<input type="text" name="name" class="input1" value="First Name" onfocus=" if (this.value == 'First Name') { this.value = ''; }" onblur="if (this.value == '') { this.value='First Name';} ">
<input type="text" name="email" class="input2" value="Email" onfocus=" if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value='Email';} ">
<input type="submit" name="submit" class="submit" value="Send Our Free Top 12 Tips">
</form>
</div>
</div>
</div>
<div class="boxrgt postit">
<h3><a href="http://greensmoothie.com/eat/teeth.php" target="_blank">Heal Your Teeth + Gums</a></h3>
<p>* Do you get painful toothache?</p>
<p>* Or bleeding gums?</p>
<p class="red2">>> Read how I healed my teeth</p>
<p class="foot"><a href="http://greensmoothie.com/eat/teeth.php" target="_blank">Stop Tooth Decay Today</a></p>
</div>
</div>
In the CSS I changed some rules according to the new html and (re)moved and added some rules (I forgot to mark them). Hoping it will work as you intended:
wow @Erik_J I’m gob-smacked. I’m totally blown away that you stepped in and solved such a complicated problem. I’m SO GRATEFUL to you. Thank you!
I see why Sensei PaulOB said I must add “and Sitepoint Forums” when I put just “helped by Paul O’Brien” in the footer of every page! So it reads “helped by Paul O’Brien and Sitepoint Forums.”
I spent all yesterday on it - hours 'n hours 'n hours. I’m so totally blown away the way you got the image to change shape as the screen size changes. By accident of the image design, the words “Top 12 Tips” in the image always display! Even in iphone 4 portrait which cuts short all the other words.
It looks so beautiful the way you did it! It’s PERFECT
Just one question: you’ve got ' - is it ok for me to change this to " (quote) or ’ (apostrophe)?
I wish I’d headed this “how to have image in subscribe box” because I’m sure it’s a big problem for many. The major list providers - aweber, Thrive Leads, etc - don’t have that option of image & subscribe box side-by-side. They told me to use css.
Yes, there are different ways to do that. But I do not recommend the target attribute, it.s non standard nowadays and will only annoy your experienced visitors and confuse all others.
Please try this to make it a link while keeping it as a background image:
I would place the link in the “subimgtop” div and give it a descibing title of the reason to follow it.
<div class="subimgtop"><a href="http://greensmoothie.com/subscribe" title="Get your Free Plans and Free Raw Food Classes today!"></a></div>
The css changes for the link in “subimgtop” div:
.subimgtop,
.awhdr {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
.subimgtop {
width: 148px;
height: 100%; /* just to make sure the link can see the table-cell-height */
}
.subimgtop a {
display: block;
width: 100%;
height: 100%;
background: #486f80 url('imgpg/coverhalf.jpg') top center no-repeat; /* color to fill the height */
}
.subimgtop a:hover {
outline: 1px solid blue;
outline-offset: -1px;
}
Hope this solves the link issue.
.subimgtop a:link, .subimgtop a:active, .subimgtop a:visited, .subimgtop a:hover {background:url('imgpg/coverhalf.jpg') top center no-repeat; width:148px;}
But it turns into a blank square (same green bgcolor as page) when I hover over it.
It seems you replaced the “subimgtop” div with the link and gave the class to the link, so the css selector became wrong.
Thank you! This works perfectly, I’m very grateful
I know, but problem is wordpress still uses it and css hasn’t given us any other option - for the times when I don’t want reader to get lost on my site.
Just one problem-- when testing on iphone, the blue outline stays after clicking the image, both when I’m still on the link page and when I’ve x’d out of it.
but did not work. Or maybe it doesn’t work because my iphone never obeys me when I tell it to clear cookies & history.
Meantime, I just deleted it in hover since that blue outline looks funny after clicking the link. I know that if I didn’t use target, that might solve the problem! But I use it so often throughout my site…
