Having trouble trying to make two images show side by side, they are not aligned perfectly and I do not know how to fix it,
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:left">
</article>
<article style=";width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:right">
</article>
here is the fiddle https://jsfiddle.net/Syystole/vfkg8018/11/
You can try this
<div style="float:left">
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:left">
</article>
</div>
<div style="float:left">
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We`enter code here` repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:right">
</article>
</div>
use flex layouting
i updated your jsfiddle:
https://jsfiddle.net/vfkg8018/13/
wrap all into div and set class .side-by-side on wrapping div
.side-by-side{
display: flex;
flex-direction: row;
}
this code may solve your problem :
<article style="width:100%;">
<div style="float:right;width:50%">
<div style="float:right; margin-left:20px">
<h1> Repair Services </h1>
<p> We repair computers </p>
</div>
<div style="float:right">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
<div style="float:right;width:50%">
<div style="float:right; margin-left:20px">
<h1> Repair Services </h1>
<p> We repair computers </p>
</div>
<div style="float:right">
<img src="http://lorempixel.com/400/200/">
</div>
</div></article >
Related
I want the picture to look like this:
but, it looks like this:
My code is this:
<div className="card">
<img src="html-css-assessment/images/desert.jpg" alt="Avatar" style="width:100%" style="height:194px">
<div className="container">
<header>
<img src="person-avatar.jpg" id="avatar">
<div>
<h3 style="color:#000" className="title1">Title goes here</h3>
<p style="color:#232F34">Secondary text</p>
</div>
</header>
<div>
<body font-size="22px" className="body1">
Greyhound divisely hello coldly wonderfully marginally far upon excluding.
</body>
</div>
</div>
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
Is there a way to align images to the right side of the screen without having a line break on the other side in HTML/CSS? I have tried to figure this out, but the methods I tried (absolute position, not using float) either did not do anything, or made the element go away entirely. Could someone tell me how to accomplish this?
<body>
<p class="title"><img src="pkd.png" class="logo"></p>
<h1>Hello!</h1>
<div class="wrap">
stuff on here:
<img src="bb.png">
<img src="ab.png">
<img src="rb.png">
</div>
<p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
<p> But what there is you can find over to your right .</p>
<p>Have a nice day! <img src="pippin.png"></p>
</body>
Looks like:
This.
I want it to look like: This.
Thanks!
You may try to use positioning,
<body>
<p class="title">
<img src="pkd.png" class="logo">
</p>
<h1>Hello!</h1>
<div class="wrap">
stuff on here:
<img src="bb.png">
<img src="ab.png">
<img src="rb.png">
</div>
<div style="position:relative">
<p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
<p> But what there is you can find over to your right .</p>
<p>Have a nice day!</p>
<img src="pippin.png" style="position:absolute; right:0;">
</div>
</body>
Nesting divs should help:
<p class="title"><img src="pkd.png" class="logo"></p>
<h1>Hello!</h1>
<div>
<div align=left width="80%" style="float:left">
<p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
<p> But what there is you can find over to your right .</p>
<p>Have a nice day! <img src="pippin.png"></p>
</div>
<div align=right class="wrap" width="20%" style="float:right">
stuff on here:<br/>
<img src="bb.png"><br/>
<img src="ab.png"><br/>
<img src="rb.png">
</div>
</div>
Hey I'm trying to get a website for a server I'm hosting and I'm trying to bring the bottom two images up into the open area above them.
Can anyone help me out I can't wrap my head around this, i'm also new to stack overflow so I'm not as fast as some people I'm sorry, it also won't let me post because there was too much code so I took out the css.
So Here is a "JSFiddle" link to the code:
https://jsfiddle.net/4hy7q2ou/2/
<body>
<div class="card1 one" style="margin-top: 40px;">
<img src="css/images/10.png" width="480" height="270"/>
</div>
<div class="card1 two" style="margin-top: 60px;">
<img src="css/images/4.png" width="480" height="270"/>
</div>
<div class="card2 one">
<h2>
Our Server.
</h2>
<p>
</p>
<p>
</p>
</div>
<div class="card3 two">
<h2>
Our Staff Team.
</h2>
<h3>
Owners:
</h3>
<dl>
Inc0gnitoON
IgnitionON
</dl>
<h3>
Admins:
</h3>
<dl>
N/A
</dl>
<h3>
Moderators:
</h3>
<dl>
WitherVoid_
</dl>
</div>
</body>
<body>
<div class="card1 three" style="margin-bottom: 5px;">
<img src="css/images/7.png" width="480" height="270"/>
</div>
<div class="card1 four">
<img src="css/images/9.png" width="480" height="270"/>
</div>
</body>
You should just align all the images into a square, this is good for cleaner and minimal code:
CSS:
img {
width:20%;
display:inline-table;
margin:5px;
}
I just did "img" but you can actually make this a class e.g. ".card"
HTML:
<div>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
<br>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
Output:
This link could also help you achieve this, if my post doesn't help or if you don't quite understand.
EDIT: This should align two images, may need to mess around with the numbers in the CSS to get it to fit better:
CSS:
.block {
width:20%;
display:inline-table;
margin:5px;
}
.side {
display:inline;
margin-left: 50%;
margin-top: -20%;
}
.second {
display:inline;
margin-left: 50%;
margin-top: -1%;
}
HTML:
<div>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
<br>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
</div>
<div>
<img src="https://via.placeholder.com/150x300" class="side"/>
<img src="https://via.placeholder.com/150x300" class="second"/>
</div>
Original CODE:
div class="container body">
<div class="row">
<div>
<div class="bodyhead"><div>
<h1>We are a Creative Digital Agency</h1></div>
<div>
<p class="learn_more">Learn More</p>
</div>
</div>
<div>
<img class="laptop" src="/images/laptop.png">
</div>
</div>
</div>
</div>
I'd like to achieve the following by using CSS only
<div><center>
<p class="learn_more">Learn More</p>
</center></div>
Thank you very much.
Use the text-align property:
text-align: center;
http://jsfiddle.net/089tnjom/
<center> is now deprecated and not supported in HTML 5.