Basically I'm trying to add padding to a profile image and align it as shown below in my bootstrap page.
Here's how it looks as of current:
And here's how I want it to look:
(notice that the username is on top with the profile image and the comment text is below but aligned alongside with the profile image)
Here's the HTML: (I'm kind of new with Bootstrap)
<div class="row">
<div class="col-md-12">
<img src="~/Images/avatar.png" class="profile-picture" />
<label>Username - 1 month ago</label>
<p>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</p>
</div>
</div>
Here's my CSS that adds a bit of padding to the profile image:
.profile-picture
{
padding-left: 10px;
padding-right: 10px;
}
Based on the Bootstrap3 documentation, use of the media class should work.
<div class="row">
<div class="col-md-12 media">
<img src="~/Images/avatar.png" class="media-object profile-picture" />
<div class="media-body>
<label class="media-heading">Username - 1 month ago</label>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</div>
</div>
</div>
More documentation on this here: http://getbootstrap.com/components/#media
You might want to consider giving some css property to the p tag.
http://jsfiddle.net/hXaRG/2/`">Fiddle
You have to float the image and the content to achieve the desired result. You have to modify a bit the html code like this :
<div class="row">
<div class="col-md-12">
<img src="~/Images/avatar.png" class="profile-picture" />
<div class="comment">
<label>Username - 1 month ago</label>
<p>
This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment.
</p>
</div>
</div>
</div>
and the css
.profile-picture, .comment{float:left;}
.comment label {display: block;}
I haven't put the margin's / padding's that you want.
Try this CSS:
.row {
position:relative;
background: #999;
}
img {
position:absolute;
left:0;
top:0;
}
.col-md-12 {
padding-left:80px;
}
jsFiddle example
(Note the background color on .row is only for visualization purposes)
Try this:
.profile-picture{float:left;margin-right:5px;}
.row p {margin-top:0;margin-left:52px;}
.row{width:500px;background:gray;}
this is the result final :
https://docs.google.com/file/d/0B3q2DOPnNwNhM29SYXhEMXhlc3c/edit?usp=sharing
Related
I am having an image and text to be displayed on a page. Is there any way to have fixed distance between the both? Tried with media queries but couldn't do it.
<div id="element">
Text Here
<div class="imagehere">
<img src="./img/pic.jpeg"/>
</div>
</div>
Note: The text need to be displayed above the image. Problem is the text is disappearing when the image overlaps with it.
Add this style
.imagehere {
margin-top: 10px; /* This will be fixed distance */
}
A simple margin will do the trick:
.text-wrapper {
margin-bottom: 30px;
}
<div id="element">
<div class="text-wrapper">Text Here</div>
<div class="imagehere">
<img src="./img/pic.jpeg" />
</div>
</div>
At the moment, what I have is seen in the first picture. I would like to know how can I add the spaces (bottom margin?) between the images as shown in picture 2? They 2 side-by-side blocks are 2 different DIVs, and the pictures in each line are elements of the same div, so bottom-margin doesn't work. (CODE AT THE BOTTOM)
Picture 1:
Picture 2:
HTML:
...
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
<div class="rightbar">
<div class="rightpic2">
<img src="pic3.png"> <br>
<img src="pic4.png"> <br>
<img src="pic4.png"> <br>
<img src="pic5.png"> <br>
<img src="pic3.png">
</div>
</div>
<div class="rightpic1">
<img src="pic1.jpg"> <br>
<img src="pic2.jpg">
</div>
...
CSS:
.rightpic1{
float:right;
margin-right:30px;
margin-top:100px;
}
.rightpic2{
margin-right:24px;
margin-left:24px;
margin-top:38px;
}
.rightbar{
float:right;
background-color:white;
margin-top:62px;
}
<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.
.rightpic1 a, .rightpic2 a {
display: block;
margin-top: 15px
}
First of all, you need to close all your image tags. Then add display:block; to the links inside your .rightpick1 & .rightpick2 classes. Then, you can successfully add a margin-bottom to your links.
I attached a fiddle as an example. Hope that helps!
i have several images, with the image i have a link(text).
However i want both the text and image to click-able rather than just the text.
This is my code: html:
<div id="testimage">
<div id="a1">Awards</div>
</div>
(another image) :
<div id="testimage1">
<div id="a2">Events</div>
</div>
css:
#testimage {
background-image: url(images/mja1.jpg);height: 205px;width: 322px;
}
#a1 a
{position: absolute;font-size: 25px;color: #085da2;top: 503px;}
#a1 a:hover
{color:#085da2;opacity:0.5;}
as you can see the a1 has a link, however i need a link to testimage too.
i have tried :
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
with this; when I added the 2nd image, the whole page started to look different.
So am looking to have a link for both div.
I think this is what you need.
<a href="http://mja.co.uk/Events">
<img src="images/mja1.jpg"/>
<span id="a2">Events</span>
</a>
a { display: inline-block } will "expand" the clickable area of the link to the full size of it's containing element, in this case, the <div>, yet holds the layout.
Just wrap the div in an a tag... <div id="whatever">The text</div>
I am trying to make my own website and only know some basic HTML, I've searched the web for a bit and can't seem to figure out how to place text under an image and on the left of the image.
So pretty much:
[image] [text]
[text]
would pretty much be my layout of the web page. At the moment I can only float the image or align it to the left making the text wrap around the image, which I don't want. Can someone help me?
<div style="width:400px; clear:both;">
<img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
<div style="width:100px; float:left;">
text beside image
</div>
</div>
<div style="clear:both;">
text beneath image
</div>
http://jsfiddle.net/Tw2v7/
This is a simple layout matter; I think it should be done without using a table.
You can add an additional "clear: both"-Element behind the text you are floating next to the image, like so:
http://jsfiddle.net/nENVN/
I would suggest using divs instead of tables and then using CSS to size and position the divs
<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>
This is the basic style for the above
.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}
the ltext div would then be set to a width that is to wide to sit next to the image or the rtext div. It would then be forced to sit below the other 2 divs. This should achieve the look you want.
Use floats:
<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>
The text will appear beside the image and then wrap around to the bottom if it's long enough
Is this what youre after?
http://jsfiddle.net/ptzDw/
Basic HTML Structure:
<div id="wrap">
<div id="left">
<img src="http://dummyimage.com/300x90/7999/fff" alt="image">
<p>text goes here</p>
</div>
<div id="right">
<p>text goes here</p>
</div>
</div>
CSS:
#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}
I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">