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>
Related
So i have this test site that i am building and i am having a CSS issue that makes no sense as you will see in the jsfiddle i linked below i have a div which makes up the first big box (class p1 and ps) for some reason my text bar (class tagto with the words COMING SOON) has a margin of about 20px on the top and bottom. There is no reference to a margin in my css that should be doing this i have gone through every line maybe a dozen times and just dont get it so i turn to you people who have helped me many times before.
If you can please take a quick look and help me out. It would greatly appreciated.
<body>
<div class="header">
<div class="header-content">
<div class="one"><h1 class="name">Title of Site</h1></div>
<div class="one two"><h5 class="tag">Subtext</h5></div>
</div>
</div>
<div class="codepen"></div>
<div>
<div class="p1 ps">
<img class="img" src="http://placehold.it/300x200" >
<p><h3 class="tagto">COMING SOON</h3></p></div>
<div class="p2 ps">
<p class="c2"><h3 class="tagto">COMING SOON</h3></p></div>
<div class="p3 ps">
<p class="c3"><h3 class="tagto">COMING SOON</h3></p></div>
</div>
</body>
The CSS is in the jsfiddle because the code block here doesnt format it right.
https://jsfiddle.net/kd2q454c/
The margin is from the browser rules. Set:
p, h3 {margin:0;}
in your CSS to override browser based rules.
Fiddle HERE
The margin is present because of the user agent stylesheet's css on h3:
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
To override it, just do:
h3 {
margin: 0;
}
You have to remove the wrapping <p> tags around the <h3> so you have the following code:
<div class="header">
<div class="header-content">
<div class="one"><h1 class="name">Title of Site</h1></div>
<div class="one two"><h5 class="tag">Subtext</h5></div>
</div>
</div>
<div class="codepen"></div>
<div>
<div class="p1 ps">
<img class="img" src="http://placehold.it/300x200" >
<h3 class="tagto">COMING SOON</h3></div>
<div class="p2 ps">
<h3 class="tagto">COMING SOON</h3></div>
<div class="p3 ps">
<h3 class="tagto">COMING SOON</h3></div>
</div>
Then set the .tagto class to margin: 0
.tagto {
text-align: center;
background-color: yellow;
width: 66%;
height: 25%;
line-height: 2.5em;
margin: 0; /* add this line */
}
I'm trying to build a website and when I try make a wrapper for an image, nothing happens. The aim is to make a section with an image I can use as a background and the wrapper hold the content in order (centered etc).
CSS
.image-wrapper {
width:150px;
margin:0 auto;
}
HTML
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div>
</section>
You have mistake in your HTML </img>
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div> </section>
Should be
<section>
<div class="image-wrapper">
<img src="img/animebreeze.jpg" alt="animeb-image">
</div>
</section>
Fiddle
Place the img tag inside the image-wrapper.
There is no closing tag for <img> tag.
CSS
.image-wrapper { margin: 0 auto; }
HTML
<section>
<div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
</section>
You can try this way as well:
CSS
.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }
Using a background-image in your CSS, you don't use the <img> tag now.
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!
I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:
as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.
My current attempt looks like this:
The image is not in between the words, even tho the order in the mark up is like so:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
Relevant CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
If anyone could explain why the text is not either side of the image that would be greatly appreciated.
Thank you
Edit:
While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>
With your HTML and just this CSS, the three items will display together on one line:
.center h1 {display: inline;}
Working demo: http://jsfiddle.net/jfriend00/yK7Qy/
FYI, I notice that you're using the same id="title" in multiple places. That won't work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".
It may be easier to just put all the text and image in one <h1> tag like this:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1>
<span class="title">First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span class="title">Second</span>
</h1>
</div>
</header>
</div>
Demo here: http://jsfiddle.net/jfriend00/CHv4k/
Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.
However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.
A slightly different approach, using spans, and only one h1 tag:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 class="title">
<span>First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span>Second</span>
</h1>
</div>
</header>
</div>
And I also changed some of the CSS:
.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}
Fiddle here
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>