I have a quick question, when I try to style my image in this example, the text doesn't go down in its own line? How can I do that without adding many br's, is there a easier way to do this? I DO NOT WANT TO EDIT ON THE IMAGE STYLE (thats the whole point of this question)
JS Fiddle link: https://jsfiddle.net/3vy8p6fx/
How do I get the "Staff" to be its own line?
<strong>History</strong><br />
<br />
<strong>Mission</strong><br />
<br />
<strong>Leadership</strong>
<div class="image123">
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vujic-150x150.jpg">
</img>
</a>
<p align="center">
Jasmina Vujic
<br>Principal Investigator
</p>
</div>
<div class="imgContainer">
<a href="http://www.nuc.berkeley.edu/karl-van-bibber">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/KarlVan-Resized-150x150.jpg">
</img>
</a>
<p align="center">
Karl Van Bibber
<br>Executive Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Bradley_M_Sherrill-150x150.png">
</img>
</a>
<p align="center">
Bradley Sherill
<br>Deputy Exec Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vetter-150x150.jpg">
</img>
</a>
<p align="center">
Kai Vetter
<br>NNSA Liaison
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://npwg.berkeley.edu/wp-content/uploads/2014/05/Leadership-Bethany-Goldblum.png">
</img>
</a>
<p align="center">
Bethany Goldblum
<br>Associate Director
</p>
</div>
</div>
<br>
<b>Staff:</b>
css:
.imgContainer
{
float: left;
}
In your fiddle, simply adding the following will resolve your issue:
.image123 { overflow: auto }
That being said, I would refactor this a bit to use something like flexbox. I took the liberty to rework your fiddle a bit to reflect better semantics, and more organized styling.
Fiddle: https://jsfiddle.net/3vy8p6fx/3/
The following material was in response to the original code provided by the OP.
This is because the image is positioned absolutely to the viewport, thus removed from the flow of the layout, overlapping the paragraph. Also, the image element is self-closing, thus </img> is not needed.
Furthermore, paragraphs are already block elements. So your inline styles are not needed. Remove all styles, and you'll have the effect you're desiring.
<!DOCTYPE html>
<head></head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
If you must have the image positioned absolutely, at the top of the document, you can give the <body> itself some additional padding to push the contents (the <p> in this case) down further:
<!DOCTYPE html>
<head>
<style>
body {
padding-top: 150px;
}
img {
top: 0; left: 0;
position: absolute;
width: 100px; height: 140px;
}
</style>
</head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
just change your
.imgContainer
{
float: left;
}
TO
.imgContainer
{
display: inline-block;
}
DEMO:
https://jsfiddle.net/3vy8p6fx/2/
NOTICE:
i changed some html syntax too, like:
instead of <img ...></img> i do <img ... />
break tags <br> to <br/>
...etc. look to my DEMO!
Related
I have this fiddle:
https://jsfiddle.net/bnqksu4y/
Here is the HTML:
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a></h4>
<a href="https://www.website.co.uk/logout/">
Log Out</a> </div>
</body>
</html>
Basically, I want the name to show to the right of the avatar. And Log Out should show underneath.
If I use a float:left on the img and h4 objects then then everything shows side by side, including Log Out which is not what I want.
How to fix?
Solution 1:
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a>
<h4 style="display:inline">
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a></h4>
<br>
<a href="https://www.website.co.uk/logout/">
Log Out</a> </div>
</body>
</html>
Basically, I just changed <h4> to <h4 style="display:inline">
Is it something like this? or something different?
Fiddle:
https://jsfiddle.net/n8Lrg1d6/
I have tried to get the solution without modifying the HTML. Assuming that you do not have any control on HTML part. Below is the CSS which helps you align your tags.
But if you can modify your HTML, I would suggest that you add some class or id and add the below CSS to respective selector instead of applying globally.
Solution:
h4, img {
display: inline-block;
vertical-align: middle;
}
a[href*="logout"] {
display: block;
}
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40">
</a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>
</h4>
<a href="https://www.website.co.uk/logout/">
Log Out</a>
</div>
</body>
</html>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<p> <img src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g"
alt="" height="40"> <a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>.</p>
Log Out
</div>
</body>
Easiest is to just insert content into the tags : <p> text, image, link... </p>
First put the anchor tag of the Log Out link outside and below the div tag. because avatar, name and log out are sibling and children of div so you can't use use float and flex box to layout avator, name respectively and log out beneath them the. you can only layout using with CSS relative and absolute positioning
try this;
<html>
<head>
<title>Document</title>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40">
</a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>
</h4>
</div>
Log Out
</body>
</html>
html body{
margin:0;
padding:0;
}
body div{
display: flex;
justify-content: flex-start;
align-items: center;
}
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
My current output:
I want to make this kind of output:
How should I do this? I really don't have any ideas on this.
As of now here is my Html code:
<div id="Profile">
<p class="cover">
<img src="resources/default-cover.png" alt="">
</p>
<p class="profile-pic">
<img src="resources/default-male.png" alt="Male">
</p>
</div>
Firstly, your second class is in the wrong place; it should be in the opening paragraph tag, not the closing.
Secondly, try the following(assuming your class placement is correct):
.profile-pic {
margin-top: -50px;
}
HTML
<div id="Profile">
<p class="cover">
<img src="resources/default-cover.png" alt="">
</p>
<p class="profile-pic">
<img src="resources/default-male.png" alt="Male">
</p>
</div>
CSS
.profile-pic{
margin-top: -20px;
border-bottom: 40px solid white;
}
Your html is not valid with the class placed in the closing p tag.
There are many ways to do this. Here is one that cleans up your html.
I usually try to avoid using the p tag unless there are chunks of text inside it.
<div id="Profile">
<img src="resources/default-cover.png" alt="" class="cover">
<img src="resources/default-male.png" alt="Male" class="profile-pic">
</div>
Here is css to accomplish the effects. Place the size of your .profile-pic in the css.
<style type="text/css">
.cover {display:block;}
.profile-pic {position:relative; margin-top: -25px;height: 50px; width: 50px;}
</style>
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>