I am making a personal page using bootstrap and want to use a blockquote element, however on just the left hand side I get a white line that will not go away even when I wrap the element in multiple divs and try to overwrite whatever border or margin issue that is preventing it from having the same background color. Could someone help me figure out what to do?
HTML
<div class="top-info">
<div class="row">
<div class="col-md-4"><img src="http://www.psdgraphics.com/file/male-silhouette.jpg" width="300" height="250" ></div>
<div class="col-md-8">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida velit sit amet dolor iaculis, nec semper felis dictum. Vestibulum commodo magna sed enim elementum, in euismod purus molestie. Nulla et nisl sit amet ipsum eleifend facilisis et a nisi. Cras lectus arcu, efficitur ac dictum vel, porttitor lobortis purus. Phasellus tincidunt velit eget ipsum aliquam, non egestas tellus consequat. Curabitur ullamcorper, massa et consequat mollis, metus neque rhoncus felis, eget condimentum lacus elit ac lacus. Pellentesque volutpat euismod neque, nec semper nisl interdum ac. </p>
</blockquote>
</div>
</div>
</div>
CSS:
.top-info{
background-color:#848484;
margin:0;
padding:0;
}
blockquote{
background-color:#848484;
padding:none;
margin:none;
}
Bootstrap uses border-left property to set this "white line" on the left. So all you need to do is to reset it with your custom CSS styles, for example like this:
blockquote {
border-left: 0;
}
Bootstrap by default use border-left in the blockquote element. Setting to none will remove the border.
CSS
blockquote {
border-left: none;
}
Related
This question already has answers here:
What is a clearfix?
(10 answers)
Closed 1 year ago.
I wanted to have some text and an image to be displayed in way that the text is at the left and after it follows an image. Like in blogs. So first I made a <div> tag as an container for the text and image. Then I used a <p> tag to enter text and image. I set the float property of the image float:right.
Now i got the the text and image in blog like form just the way I wanted.
But i also wanted to add borders to the whole content. So that it looks like the text and image are in a box.
But the border are not able to cover the image's height and width.
<html>
<head>
<title>Float</title>
</head>
<style>
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
You need to add display: flex; to the div:
<html>
<head>
<title>Float</title>
</head>
<style>
div {
display: flex;
border: 5px solid blue;
}
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
I have an image, that I want to be aligned to one side of a div. I also have paragraphs that need to go alongside this image. However, they do not have enough text content to reach all the way down the height of the image. The content beneath the paragraphs I have needs to be below the image.
Using float:left for the image does not work, since the container div for the image with the desired alongside paragraphs does not respond to the height of floated elements.
Using position:relative; left:0px for the image also does not work. With this, I have tinkered with the display of the paragraphs, but they always go beneath the image instead of beside.
h3 {text-align:center}
img {position:relative;left:0px}
p {display:inline-block;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
</body>
Here is the Fiddle.
EDIT
After reviewing these answers, I found a more elegant solution:
h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}
This takes the idea of clear fix and makes it more readily-applicable.
Remove inline-block (so they default to block) from your p tags and then put your float:left; back in to your img tags. Also add float:left; and clear:left to the div tag so they always flow under one another.
https://jsfiddle.net/bowp6aea/3/
div {float:left;clear:left;}
h3 {text-align:center}
img {float:left;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
<p>
Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui.
</p>
</div>
<div>
<h3>Another Header</h3>
<p>
Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus.
</p>
</div>
</div>
</body>
Updated the HTML as for in the demo, and apply these CSS class:
h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}
what about using the attribute clear:both ? you just need to insert a simple <div class="clear"></div> and give it clear:both in CSS
.clear {
clear: both
}
h3 {
text-align: center
}
img {
float: left;
margin-right: 10px /*demo */
}
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png" />
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
<div class="clear"></div>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
For simple image alignment with floating text you can use align="left within the image.
<p>
<img align="left" src="http://www.devtano.com/software/eco/images/console.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
Fiddle here.
Try using on the container div:
display: inline-block;
Or you can float all the elements to the left:
float: left;
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I have an HTML structure like this:
<div>
<div style="position:relative;">
<div style="position:absolute;float:left;top:0;left:0;width:50px;">57</div>
<div style="width:550px;position:absolute;float:left;top:0;left:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
As you can see from THIS FIDDLE, My Lorem Ipsum text overlaps with my paragraph. I tried putting somme <br /> between my div and my paragraph, but they still overlap. I want my paragraph to appear after my text. Any help please?
Thank you
You don't use position:absolute with a float. You can just use the float in this case and get rid of position and the related css.
Just this would be fine:
<div>
<div style="position:relative;">
<div style="float:left;width:50px;">57</div>
<div style="width:550px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
</div><br /><br />
<p style="margin-left:50px;">This is my paragraph</p>
</div>
Though, as the comments suggest - you should put this in a stylesheet and avoid inline declarations. It's cleaner and tends to be easier to maintain.
Remove your position absolute and put clear: both to your paragraph to reset the floating elements
<div>
<div style="position:relative;">
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;left:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec im.</div>
</div>
<p style="clear: both;margin-left:40px">This is my paragraph</p>
</div>
Live exemple here
If you are using floats why are you mixing it with absolute positions?
I've changed this a little.
<div style="float:left;width:40px;">57</div>
<div style="width:550px;float:left;margin-left:40px;">
Try this one. By the way, I've added clearfix method too, as it is recommended to clear floating spaces when you are not floating anything anymore.
If you don't want them, you can remove the div with .clearfix and the CSS.
Here you go.
Looks like you've got the unholy duo of absolute positioning and float:left without a "clear". This means your first child div with those two children will have no height whatsoever. I recommend removing position:absolute and float:left from these divs, using instead:
display:inline-block;
vertical-align:top;
This will allow them to flow left -> right and have a height within the page flow.
You know how tekst (paragraphs) always wrap around a floated image, like so? [see img]
I would like the tekst to go OVER the image. Like in the example img below. I tried using z-index and display:inline but neither worked.
This is not my actual HTML, but basically what I looks like;
<img src="" alt="" style="float:right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
Try:
<div style="position: relative;">
<img src="" alt="" style="position: absolute; top: 0px; right: 0px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
</div>
The key is absolute positioning. Make sure the container has a position set (use relative if it doesn't have one currently).
(You may also need some z-indexing to make sure the layers are correct).
You could either use position: absolute and z-index to move the image behind the text, or use the image as the paragraph's background image.
eg
HTML:
<p><img src="xyz.jpg" /> Lorem ipsum</p>
CSS:
img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
p {
z-index: 10;
}
Alternatively:
<p>Lorem ipsum</p>
CSS:
p {
background: url(xyz.jpg) top right no-repeat transparent;
}
If I understand the question, here is what you want jsfiddle .
Z-index only works with position: absolute.
Countdown coordinates depends on the value of the property position.
If the parent element is set to position: relative, then absolute positioning of child elements determines their position on top of the parent.