I am trying to make a whole area clickable as a link rather than just its text. Why are my attempts at doing this (position:absolute; width:90%) causing half of the purple area to just disappear?
<h2 id="block-50a924-1451-4d" class="wp-block-gutenbee-heading block-50a924-1451-4d has-text-color has-background-color" style="color:#ffffff;background-color:#cf2f74">
<a href="https://blog.samueljgodwin.co.uk/category/code/" style="content:'';position:absolute;width:90%; outline: 4px solid red; overflow: hidden">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Code
</mark>
</a>
</h2>
<style>.wp-block-gutenbee-heading.block-50a924-1451-4d { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
I have left a red outline to show the clickable area in question, and the area as it appears using the above code.
What I want it to look like is something more like this...
...and the whole area be clickable.
Here is an example of the desired look, with only the text clickable.
<h2 id="block-409604-bc85-4c" class="wp-block-gutenbee-heading block-409604-bc85-4c has-text-color has-background-color" style="color:#ffffff;background-color:#3b8dd6">
<a href="https://blog.samueljgodwin.co.uk/category/lifestyle/">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Lifestyle
</mark>
</a>
</h2>
<style>.wp-block-gutenbee-heading.block-409604-bc85-4c { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
My attempt at expanded this area seems to be chopping the containing block away.
Just replace h2 tag with a!
<a href="https://blog.samueljgodwin.co.uk/category/lifestyle/">
<h2 id="block-409604-bc85-4c" class="wp-block-gutenbee-heading block-409604-bc85-4c has-text-color has-background-color" style="color:#ffffff;background-color:#3b8dd6">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Lifestyle
</mark>
</h2>
</a>
<style>.wp-block-gutenbee-heading.block-409604-bc85-4c { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
Related
I have two other boxes with the same code and the text stays inside but in the last box the text stays outside, if anybody could help.
HTML:
<div class="third">
<div class="brooo">
<img src="brooo.png" height="200" width="200" style="border: 1px solid black; margin-top: 20px; margin-left: 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
</div>
<div class="thirdd">
<p>BUSINESSES</p><br>
<p>Buy mega companies or small business such as gas stations, clothing stores, bars and more... <br><br>
Employment rankings from 1 man jobs(taxi/gas station) to multi-level "businesses" that require CEO, VP(lieutenants), and standard employees. <br><br>
Do you have what it takes to run a company that supplies the city with common commodities?</p>
</div>
CSS:
.third {
margin-top: 30px;
background-color: #2F3030;
border: 1px solid grey;
height: 250px;
}
.thirdd {
color:rgb(255, 255, 255);
}
Your third div have this property: height: 250px.
It's much small to contain all it's children.
remove this property and the parent div will expand to contain it's children.
It seems the text is super long and not being told to be contained within the div.
You can try adding this CSS to the thirdd div
word-wrap: break-word;
or perhaps try this to that same div if the above not working
overflow: auto;
I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.
Due to the web host I am having to use inline css to style the site.
(trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)
Normally I would use bootstrap to achieve this but as noted that is not an option.
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
What I'm getting:
What I want:
All you need to do is apply float: left to image
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
1. Apply a maximum width to sibling element:
Apply a maximum width to the sibling element (#texts) of #image, e.g:
<div id="texts" style="float:right; max-width: 80%;">
Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.
As it is now, it contains enough text/content to occupy the whole horizontal width.
2. Declare the display type of first nested element or float left
Declare the first nested element (#image) as either an inline-block, e.g:
<div id="image" style="margin-left: 10px;display: inline-block;">
Or float it left, e.g:
<div id="image" style="margin-left: 10px;float: left;">
Note: this float may need to be cleared on the containing parent element.
As it is now, this element (div) is a block element by default, block elements will occupy the full available width of a containing element.
Code Snippet Demonstration:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; display: inline-block;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right; max-width: 80%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting
to read here other than some typo's.</p>
</div>
You can remove float: right from the #texts div and add float: left to the #image div:
<div style="display:inline-block; color:black; border:3px solid #ffd800; margin-bottom:25px; border-radius:10px; background-color: #FFF1AD; box-shadow:13px 15px 6px #2b2626; border-top:30px solid #ffd800;">
<h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold">
This is a title
</h1>
<div id="image" style="margin-left:10px; float:left">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1>
<div style="display: flex;">
<div id="image" style="margin-left: 10px;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.</p>
</div>
<div>
</div>
With this you need to add another div around the image and text content and set it to display: flex;
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="">
<p>
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;float:left;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;width:90%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
I'm having a problem with an image within my table row. For some reason, the background color will not extend and fill the table row in when I have a picture floating to the left.
p.more {
color: rgb(255, 255, 255);
font-family: Arial;
font-size: 18px;
line-height: 140%;
margin: 0px;
text-align: center;
background-color: #cccccc;
}
img.more {
float: left !important;
margin: 0px 15px 15px 0px;
width: 330px;
}
span.more {
line-height: 100%;
text-align: center;
font-size: 18px;
}
span.moreweelove {
color: rgb(255, 255, 255);
}
<table>
<tr>
<td>
<p class="more">
<a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/">
<img class="more" src="http://www.weespring.com/media/weelove_littlehipsqueeks.jpg">
</a>
<br>
<span class="more"><span class="moreweelove"><strong>Modern, Comfy, and Fun Staples</strong></span></span>
</p>
<p class="readmore">
<strong class="subheading">BIG LOVE FOR JUNE & JANUARY</strong>
<br>
<br>
<a href="http://blog.weespring.com/weelove-littlehipsqueaks-knotted-headbands/">
<img src="http://www.weespring.com/media/read-more.png">
</a>
<br>
<br>
</p>
</td>
</tr>
</table>
If want to fullfill an entire row with a background-color, youu should apply a css style to the corresponding < tr > tag.
Since you applied the background color the <p>, only the <p> itself will get colored. If the last line doesn't take up the full width of the container, e.g.
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxx
then only the parts with the x will get the background treatment. But if you apply the color to the containing <td>, which surrounds the paragraph, like so:
+------------------------+
|xxxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxx |
+------------------------+
Then that final partial line will ALSO be colored, because the entire box of the <td> is colored, not just where the text is.
It's because you're giving style to "p.more" not to the table.
Try giving the background color to the table.
I'm looking for a way to set the pressable area for a close icon. so if the icon is 19X19, the area to press will be 39X39.
The div is the container of the clost botton, and i want to change it.
I don't want to set a fixed height, because it strach somtimes, in the other hand, there is no height at all to father, and his father...
<div class="ui-pnotify-closer" style="cursor: pointer; visibility: visible;">
<span class="glyphicon glyphicon-remove" title="Close"></span>
</div>
So I thought to do something like that:
.ui-pnotify-closer{
margin: -10px -10px -10px 10px ;
padding: 10px 10px 10px 10px;
height: 40px;
}
But this is very not elegant.
Any other ideas?
I think you are looking something like below.
HTML
<div class="test">
<span><img src="test.gif" width="19" height="19" border="0" /></span>
</div>
CSS
.test
{
background-color:#ff00ff;
padding:10px;
cursor:pointer;
display:inline;
}
Fiddle Demo
This is how my site should look like under normal circumstances:
In certain pages, I need to fit the same element in a much narrower space. Here's how bad it looks:
I added white-space:nowrap to the anchor in an attempt to fix this, but it's still not perfect:
How do I prevent the anchor from getting chopped in half when it wraps around?
HTML
<div id="marquee" style="display: none">
<div id="vlcUpgradePrompt" style="display: none">
<span>Upgrade to Veetle TV to watch this channel in <b>HD</b>.</span>
<a
href="javascript:void(0)"
onclick="VEETLE.bootstrap.vlcUpgradePrompt(); return false;"
class="button buttonDark">
<img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
Free upgrade
</a>
</div>
<div id="flashDowngradeUnavailable" style="display: none">
<img
src="<?=base_url()?>images/spacer.gif"
class="spriteCommon iconError" />
<span>Sorry, the low quality version of this channel is not available.</span>
</div>
<div id="flashNotInstalled" style="display: none">
<img
src="<?=base_url()?>images/spacer.gif"
class="spriteCommon iconError" />
<span>You need Flash Player to view the low quality version.</span>
<a
href="http://get.adobe.com/flashplayer/"
class="button buttonDark">
<img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
Download Flash
</a>
</div>
</div>
CSS
#marquee {
}
#marquee div {
-moz-border-radius-bottomleft: 0.4em;
-webkit-border-bottom-left-radius: 0.4em;
-moz-border-radius-bottomright: 0.4em;
-webkit-border-bottom-right-radius: 0.4em;
border: 1px solid;
border-color: #e5e5b8 #ccc #666 #ccc;
background: #ffffcc;
background: -moz-linear-gradient(
top,
#ffffcc,
#ebebbc
);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ffffcc),
color-stop(1, #ebebbc)
);
padding: 1em;
line-height: 2em;
-moz-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
}
#marquee div img {
margin-top: -0.2em;
}
#marquee div img.iconError {
margin-right: 1em;
}
#marquee div span {
font-size: 1.2em;
padding: 0 1em 0 0;
}
#marquee div a {
font-size: 1.2em;
}
#marquee div a img {
margin-right: 0.4em;
}
It looks like display:inline-block; works. http://jsfiddle.net/yUxN2/
EDIT:
Since it seems there are a few oddities in older browsers, heres a guide to making it work everywhere: http://www.aaronrussell.co.uk/blog/cross-browser-support-for-inline-block/
You could remove any white space (including the line break) from in between the image and the label text. It might not wrap then; use margin-right to add distance to the label.
JSFiddle demonstration based on #Adrian's (thanks!)