I'm having trouble doing my homework with an HTML exercise. Basically I have to place multiple images in different locations on the screen/body but the problem comes from placing a line "hr" element to the right of the image..mine is being placed under it. Here are the photos with my progress and the exercise. I would be glad if someone could help me. Have a great day!
[1] https://imgur.com/6SWWGx1 "Exercise"
[2] https://imgur.com/0qL3V32 "My Progress"
<!DOCTYPE html>
<html>
<head>
<title>ES 8</title>
</head>
<body>
<img src="erba.jpg" width="10%">
<hr>
<img src="erba.jpg" width="30%">
<img src="erba.jpg" width="10%" align="top">
<div><hr align="left" width="20%"></div>
</body>
</html>
That's because by default most elements including <hr/> and <div/> are full-width boxes - or blocks stacked on top of each other. Read a bit more about the box-model of CSS elements here.
Taking it out of that <div/> and changing the <hr/>'s CSS to display: inline-block will add it to the side because it will set it as "inline" to the images. Keep in mind this will only work if it actually has room - so elements widths and borders and margins put together <= 100%.
You can also achieve the same effect with a transparent </div> where you just set one of its border to be visible instead of using <hr/>.
However, looking ahead at the rest of the exercise as well you will probably want to look at at some general layout elements such as flexbox and grid. They make positioning things in the page a whole lot easier once you get the hang of them.
Do you want something like this?
.upper img{
width:15%
}
.lower{
display:flex;
border-top:1px solid black;
padding-top: 1rem;
margin-top:1rem
}
section{
flex-basis:calc(100% / 3);
}
section img{
width:100%
}
section:nth-child(2) div:first-child img{
width:25%
}
section:nth-child(2){
margin:0 1rem;
}
section:nth-child(2) div:nth-child(2){
display:flex;
justify-content:flex-end;
border-top:1px solid black;
padding-top:1rem
}
section:nth-child(2) div:nth-child(2) img{
width:80%;
border: 2rem solid black
}
<div class="upper">
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</div>
<div class="lower">
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
<section>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
</section>
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
</div>
Related
I'm working on learning css and I made a small dumb site, but I screwed up somehow and it's applying the border of the second page to the first page.
Here's the html of the part using the border
<div class="rickmorty">
<p>The rick and morty copypasta</p>
</div>
Here is the html it is also applying to
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
And here is the css the html is applying
.rickmorty p{
/*margin:50px;
padding:20px;*/
border: 20px #007700 solid;
margin:50px;
padding:10px;
font-weight: bold;
}
.box-1{
background-color: #222
}
.box-1 p{
font-weight: 80px;
}
If it's something else here is my github repository of the site
If you wish to apply styles to specific pages — and make it easy to manage — simple add a class reference to the body that is unique to the page.
E.g.
<body class="some-page-reference">
<p>Foo bar</p>
</body>
Then in your CSS:
body.some-page-reference p {
border: 1px solid red;
}
Although it's a matter of preference I personally find this method better than using IDs.
Alternatively, if you want to use CSS on a specific page only you can add <style> tags to the <head> and put your CSS. However, it is often desirable to keep CSS separate from the HTML.
Instead of class, try to give id for an div..
The priority of id is greater than class.
Ex:
<div id="rickmorty">
<p>The rick and morty copypasta</p>
</div>
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
#rickmorty p{
/*margin:50px;
padding:20px;*/
border: 20px #007700 solid;
margin:50px;
padding:10px;
font-weight: bold;
}
Add an ID to the elements that appear only on that unique page by doing something like:
<div id="unique-box-1" class="box-1">
<p>Test<br />Test again<br /></p>
</div>
Then in CSS do:
#unique-box-1
{
color: red; //just an example
}
Then the red color will be applied only to the element with that ID. Adjust the code accordingly.
How do I get 2 pictures to appear side by side in this particular html example?
Here is my fiddle
What I want is to align pictures side by side in html, and similarly for the h1 tag above and the p tag below the pic.
illustration of what I want:
title0------------title1
pic0--------------pic1
word0-------------word1
^^^^^^^^^^^^^^^^^^^^^^^^^
This is an example of what I want fiddle, but here it doesn't work when I want add the h1 tag above and the p tag below the picture. I do, however like the way margin-right can control the lateral distance between the pics.
Here is a similar question but this is slightly different.
EDIT1 here is the bootstrap version mentioned below
EDIT2 here are other solutions from below
Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
YoYo - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/
they all offer a solution but I think the bootstrap version is the best as it handles when the screen width is resized the best.tks
You can use display:inline-block; to set the element to just use the width they have. Normally, h1 or div are the display:block; elements.
Here is the fiddle for you.
What you can do is put title0, pic0, and word0 in a div and add a class to the div so you can float it to the left using css. On the other side you have title1, pic1, and word1 in a div that has a class that would float it to the right.
Here's the float in work:
.leftBlock {
float: left;
}
.rightBlock {
float: right;
}
Check out this jsfiddle: https://jsfiddle.net/ko1qsbom/6/
Also more information on floats: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Side-by-side positioning is simple and easy with flexbox.
Here's all you need:
#container {
display: flex;
text-align: center; /* optional */
}
<div id="container">
<section>
<h1 class="left">title0 </h1>
<img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<p class="left"><a>word0</a></p>
</section>
<section>
<h1 class="right">title1 </h1>
<img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<p class="right"><a>word0</a></p>
</section>
</div>
There are various options for aligning the two sections in the row (center, space-between, flex-start, etc.). See here for details: https://stackoverflow.com/a/33856609/3597276
Learn more about flexbox here: A Complete Guide to Flexbox
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Try This give them witdth total width should be less then 100% and float:left
HTML
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
<!--<h1 class="left">title0 </h1> -->
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->
<!-- <h1 class="right">title1 </h1> -->
<img class = "right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> -->
CSS
/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}
h1.right p1.right{
text-align: right;
}
.div1 {
width:40%;
float: left;
}
.div2 {
width:40%;
float: left;
}
you can use display:inline-block; also
Here is a prototype of what I am trying to implement
Here is what I currently have : JsFiddle
I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...
What I've tried is using Align attribute, changing my img src code to
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
but that didn't have any effect.
I also tried Float but that messed up my margins and the organization of my left components.
Is there a way I can do this without floating?
See the fiddle
The HTML and CSS that i've used is as follows. Used float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
You will have to work with the height and width of each divs. I just made it roughly.
You have to create two columns. 1 column for the menu and the second column for the image. If you do this, you wont have trouble floating.
I have a footer with social media icons. I want the icons arranged in a 3 x 3 grid
like below.
# # #
# # #
# # #
I also want it centered in a div. The issue that I'm running into, is that when I float the elements left to keep them on the same line my
margin-left:auto;
margin-right:auto;
Doesnt work, and they just align left. I need a solution that will work for mobile since my whole site is responsive.
Here is the HTML
<div class="d-all m-all" id="mainFooter">
<div class="d1-d4 m-all" id="socialMedia">
<div id="centerIcons">
<img src="images/fb_icon_vi.png"><img src="images/tw_icon_vi.png"><img src="images/in_icon_vi.png">
</div>
</div>
<div class="d5-d8 m-all" id="contact">
Contact
</div>
<div class="d9-d12 m-all" id="awards">
awards
</div>
</div>
And here is the CSS
#mainFooter{
background-color:black;
height:250px;
}
#socialMedia{
background-color:green;
}
#socialMedia img{
display:block;
}
#centerIcons{
background-color:yellow;
width:50%;
margin-left:auto;
margin-right:auto;
height:75px;
}
#centerIcons img{
margin-left:auto;
margin-right:auto;
}
The whole site can be seen HERE
I guess you want to something like this, right?
#socialMedia img {
display: inline-block;
}
#centerIcons{
background-color:yellow;
width:50%;
height:75px;
max-width: 171px;
margin: 0 auto;
}
#centerIcons img{
/* nothing is needed */
}
Explanation:
display: inline-block; will keep as block but not opening a new line
since #centerIcons is a DIV element, it is a block element, to make use of centering effect with margin: 0 auto; a width control is needed
so max-width: 171px; will constraint its width to a maximum of 171px (icon width 57px * 3), you may adjust as you need
Note:
About display property, please refer to W3C's visual formatting model.
About box model specification, you may refer to W3C's box model.
Depends on your browser compatibility plan, max-width does not supported in IE8 below and IE8 have some bugs. For details, you may refer to online compatibility chart like this.
If you are using jQuery and really mean to support IE6-8, you may consider using polyfill such as Scott Jehl's Respond.js
Edit: I think #Matt Smith's answer is what you want, I may have misinterpreted your meaning. Anyway, for your reference.
<img> is a replaced inline element (by default). The image elements sit beside each other like words. Therefore there's no need to change their display type to block (as you have done in the live demo).
I want the icons arranged in a 3 x 3 grid
In order to achieve that, you could wrap each 3 images by a wrapper, and add text-align: center to that element to align the inline images horizontally.
EXAMPLE HERE.
<div id="centerIcons">
<div class="wrapper">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
<div class="wrapper">
<img src="images/4.png">
<img src="images/5.png">
<img src="images/6.png">
</div>
<div class="wrapper">
<img src="images/7.png">
<img src="images/8.png">
<img src="images/9.png">
</div>
</div>
.wrapper {
text-align: center;
}
Add text-align: center to the #centerIcons {} rule and display: inline-block to your #centerIcons img {} rule:
#centerIcons img {
text-align: center;
}
#centerIcons img {
display: inline-block;
}
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}