Say you have an image with float:left; and a text that flows around the image.
The code is pretty simple:
<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>
Is there a way to display an outline, that wraps around the text but not around the image. A normal outline on the text gives you this:
But I want this:
using a display:inline; on the <p> displays an outline on each line, not 'blockwise' oun the text's visible boundaries.
CSS3 is legit, any hardcore CSS/JS is permitted...
You can try something like this. Shift the image up and to the left so that it obscures the regular border. Then give it it's own border to complete the illusion.
<article>
<img src="image.jpg" style="float:left">
<p>Lorem ipsum...</p>
</article>
article {
border: 1px blue dotted;
}
img {
background-color: white;
border-right: 1px blue dotted;
border-bottom: 1px blue dotted;
margin: -1px 0 0 -1px;
padding: 0 5px 10px 0;
}
Here's the fiddle: http://jsfiddle.net/KW45t/
Check this jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/
It is not fancy but makes the job
Related
I want to show text right side to image and I was successful to made it but when I add another div for border the text doesn't show up, it's like invisible but still taking its space I tried but I can't figure out the problem here you can see the live preview https://jsfiddle.net/Ldu91at2/ And here is the code before adding a main div for border:-
<div style="display:inline-block; min-width:6.2cm; height:8.8cm; align: center;vertical-align: middle;" >
<img src="https://www.asurascans.com/wp-content/uploads/2020/10/56953.jpg" style="height:100%;">
</div>
<div style="display:inline-block;vertical-align: top;">
<span id="title">advertishement</span>
</div>
This is the css style you are using for the .cont div
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
color: #fff;
}
The
color: #fff;
rule makes your text white thus invisible against a white background. Consider removing it or using a different color. The code below will work.
.cont{
width:fit-content;
border: 1px solid #eee;
padding: 10px;
}
how can I override the style "color: red" either with javascript or CSS? I want to make it "2px" instead of "1px" border.
<div style="border: 1px solid #ccccc !important">
Lorem...
</div>
I can NOT add a class, id to the "div". that is not a solution here. I have to override the code above somehow.
Solution
Used jquery already loaded on the site.
Ran:
$( document ).ready(function() { $('table[style*=border]').css('border-width',"4px"); });
https://jsfiddle.net/78oxmgLj/10/
With your actual code you cannot do it with CSS (As #T.J. Crowder commented, there is no CSS rule that can beat inline with !important) but here is a JS solution:
document.querySelector('.box').style.borderWidth="2px";
document.querySelector('.box').style.borderColor="red";
//or
//document.querySelector('.box').style.border="2px solid red";
<div class="box" style="border: 1px solid #cccccc!important">
Lorem...
</div>
UPDATE
If for some reason you cannot add class you can use attribute selector based on style (but I don't advice to use this as a generic solution)
document.querySelector('div[style*=border]').style.borderWidth="2px";
document.querySelector('div[style*=border]').style.borderColor="red";
<div style="border: 1px solid #cccccc!important">
Lorem...
</div>
While the accepted answer is true, there are ways depending on your usecase that you can do here with CSS alone. Even if you cannot override the specific value, you can use a different property to change the original state.
b {
filter: hue-rotate(250deg); /*blue*/
}
i {
display: inline-block;
transform: scale(0.4);
}
<b style="color: red !important">Stack</b>
<i style="font-size: 50px !important">Stack</i>
In your example, if you need to change 1px important inline border to 2px, you can use outline or box-shadow without blurring:
div:first-child {
box-shadow: 0 0 0 3px #ccc;
}
<div style="border: 1px solid #cccccc !important">
Lorem...
</div>
<br>
<div style="border: 4px solid #cccccc !important">
Lorem...
</div>
How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.
FIDDLE
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
Should be this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>
Not this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>
You should be able to click in the red box and type red.
<br><br>
<div class ="container" contenteditable="true">
<span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->
css
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
}
.container{
border: 1px dashed red;
color:red;
}
I changed a little bit of your code, maybe you can try this and I hope it helps you. :)
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
position:absolute;
top: 0;
left: 0;
}
.wrapper{
position:relative;
}
.item{
line-height:30px;
min-height:30px;
}
.container{
border: 1px dashed red;
color:red;
padding-left: 150px;
}
<div class="wrapper">
<div class ="container item" contenteditable="true"></div>
<div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>
Like this, by adding an invisible character to trick the browser http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami
I think this will require javascript. I figured it wouldn't hurt to ask though.
We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.
It would be easiest if I could place this div above the paragraph text, but I could insert it if I had to.
I made this crude image outlining what I'm trying to do.
Thanks!
a bit of a cheat but possible using a dummy spacer
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}
.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}
.dummy {float: right; height: 300px; width: 1px; background: #f00;}
HTML:
<div id="wrapper">
<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">
<p>all your paragraphs follow</p>
</div>
Working Example: HERE
and the spacer does need to be at least 1px wide, but it can be transparent
Have you tried something like this?
http://jsfiddle.net/8DczT/1/
This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.
Put a margin-top on your floated div, to push it down from the top, something like this:
<div> <!-- parent containing div -->
<div style="float: right; margin-top: 50px">floated div</div>
<div>paragraph 1</div>
<div>paragraph 2</div>
</div>
As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.