I have had a good start at geting my codeded table turned over from a table to Div setup but some where in this part right here it seems to be having a problem. This is what the site should look like: http://db.tt/YeUZiiBy.
Here is the code and CSS Link: http://jsfiddle.net/8WKR9/1/.
Here is my HTML `
<div id="container">
<article>
<div class="item">
<img src="4-cute-cats.jpg" class="centerImage" width="300" height="300"
/>
<p class="centerText">They hunt in packs.</p>
</div>
<div class="item">
<img src="cat_sniping.jpg" class="centerImage" width="256" height="192"
/>
<p class="centerText">Sniper Cat</p>
</a>
</div>
<div class="item">
<img src="LOL1.jpg" class="centerImage" width="300" height="298" />
<p class="centerText">Sneaking Cat</p>
</div>
<div class="item">
<img src="hammercat.jpg" class="centerImage" width="300" height="163"
/>
<p class="centerText">80s Cat</p>
</div>
</article>
<article>
<div class="item">
<img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
<p class="centerText">It's a trap!</p>
</div>
<div class="item">
<img src="chop-cats.jpg" class="centerImage" width="300" height="140"
/>
<p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
</div>
<div class="item">
<img src="smartkat.jpg" class="centerImage" width="200" height="338" />
<p class="centerText">Intelligent cat.</p>
</a>
</div>
<div class="item">
<img src="narniacat.jpg" class="centerImage" width="200" height="337"
/>
<p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
</div>
</article>
<article>
<div class="item">
<img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
<p class="centerText">Tired cat.</p>
</div>
<div class="item">
<img src="lol_cats_1.jpg" class="centerImage" width="300" height="142"
/>
<p class="centerText">Gollum Cat.</p>
</div>
<div class="item">
<img src="Magical-Kitty.png" class="centerImage" width="300" height="180"
/>
<p class="centerText">Super Cat.</p>
</div>
<div class="item">
<img src="sad-kitty.jpg" class="centerImage" width="300" height="188"
/>
<p class="centerText">Sad Kitty.</p>
</div>
</article>
<article>
<div class="item">
<img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200"
/>
<p class="centerText">Wallpaper cat.</div>
<div class="item">
<img src="thinking-cat.jpg" class="centerImage" width="300" height="475"
/>
<p class="centerText">Thinking cat.</p>
</div>
<div class="item">
<img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72"
class="centerImage" width="300" height="225" />
<p class="centerText">Gamer Kitty.</p>
</div>
<div class="item">
<img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg"
class="centerImage" width="300" height="504" />
<p class="centerText">Couch cat.</p>
</div>
</article>
</article>
<article>
<div class="item"> More Kitties
</div>
</article>
</div>`
I think you had the right idea with the mark up but needed some work on the CSS side of things. The key is to clear your floats or else it the item will go to the next available place. I suggest doing a bit more reading on floating and how they effect block elements and the parent element.
I've done a quick 'bare bones' example for you that you should be able to adapt.
http://jsfiddle.net/ZbfXU/2/
<html></html>
Try setup height in tag img
.item > img {
width: 100%;
height: 100%;
}
you could use max-width and/or max-height on your img tags to make sure they keep ratio instead of transforming.
Go through your code and tidy it up, you've got the right idea of separating into rows then using divs within each row.
Here's one I very quickly mocked up, http://jsfiddle.net/8WKR9/5/ 1st and 3rd height are the same and 2nd and 4th are the same, i'm not getting any display errors so probably best going through your HTML & CSS and tidying it up, that way you can see what each part is doing and work out where it's going wrong, rather than try and find a quick fix, it'll also make your code cleaner and easier to read.
<html></html>
Related
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>
This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 2 years ago.
Alignment of this div is floating on the left side but I want that to be in center on on desktop browser and in mobile browser too.
It floats on left on desktop browser.
It floats on left on mobile browser.
I just want that to be in center.
<style>
div.logolist {
float: left;
margin: 20;
}
</style>
<div>
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p style="text-align:center;">Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Refund</p>
</div>
</div>
float is designed to move an element to the side and let content that follows it flow up beside it.
It is a terrible tool to try to use for any other kind of layout.
For a long time, it was about the only tool we had for layout, but we've had Flexbox (for single dimension layouts) for years and support for Grid (for two dimension layouts) has good support these days.
Use Flexbox to lay the elements out.
.flex-container {
display: flex;
justify-content: center;
}
.logolist {
text-align: center;
}
<div class="flex-container">
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p>Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p>Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p>Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p>Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p>Refund</p>
</div>
</div>
Also, consider representing you list using actual list markup (ul/ol/li) instead of divs. Divs are generic block elements that should only be used as a last resort if no other HTML element has semantics that describe your content.
As another answer mentions, Flexbox is the modern option for laying out data and aligning it. In this case, Flexbox would be the better option, but this is without Flex.
First there is no need for float: left. You can replace with display: inline-block. margin: 0 auto with a width will center the container inside the page. You then add text-align: center to center the content inside the container <div>.
div.logolist {
display: inline-block;
}
.container {
margin: 0 auto;
width: 100%;
text-align: center;
}
<div class="container">
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p>Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p>Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p>Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p>Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p>Refund</p>
</div>
</div>
I have two titles of some articles. It goes Camping tips, then its content and then the title of the next article. But somehow Mountaineering keeps selecting all the divs from Camping tips. I want to change only the background color of the h2 and it keeps changing it to all the divs inside Camping tips. How do I resolve this issue? PICTURES of how it looks like, only headings should be red, not the content:(https://snag.gy/rvJAh2.jpg) and (https://snag.gy/s8ouEA.jpg)
**Here is the code:
<h2 id="camptips" style="font-family:'courier'; background-color:#800000; text-align:center;font-size:30px">Camping tips</h2>
<div class="imgContainer">
<h3 class="head3"> 1.Create a makeshift lantern.</h3>
<img src="stylesheets/images/tip1.jpg" alt="TIP1" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 2.Sage - a natural bug repellent.</h3>
<img src="stylesheets/images/tip2.jpg" alt="TIP2" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 3.Spice that shit up.</h3>
<img src="stylesheets/images/tip3.jpg" alt="TIP3" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 4.Pack a cooler like a boss.</h3>
<img src="stylesheets/images/tip4.jpg" alt="TIP4" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 5.Hide your valuables in soap.</h3>
<img src="stylesheets/images/tip5.jpg" alt="TIP5" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 6.Make calzones. And cook over fire.</h3>
<img src="stylesheets/images/tip6.jpg" alt="TIP6" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 7.You can cook anything in foil.</h3>
<img src="stylesheets/images/tip7.jpg" alt="TIP7" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 8.Pre-make your pancakes.</h3>
<img src="stylesheets/images/tip8.jpg" alt="TIP8" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 9.Cook all your hot dogs at once.</h3>
<img src="stylesheets/images/tip9.jpg" alt="TIP9" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 10.Never lose keys in the water.</h3>
<img src="stylesheets/images/tip10.jpg" alt="TIP10" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 11.Get comfy with padding.</h3>
<img src="stylesheets/images/tip11.jpg" alt="TIP11" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 12.Know your knots!</h3>
<img src="stylesheets/images/tip12.jpg" alt="TIP12" width="350" height="300">
</div>
<h2 style="font-family:'courier'; background-color:#880000; text-align:center; border: 5px solid black;font-size:30px">Mountaineering</h2>
I changed the
.imgContainer {
float: left;
margin: auto;
padding: 25px;
}
to
.imgContainer {
display: inline-block; /* <-- changed this */
margin: auto;
padding: 25px;
}
and now it works perfectly.
I have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
For some kind of menu I would like a box of 300 pixels width, with the items in it aligned to the right. I came up with the following code which works just fine in IE and Chrome, but not in FF :
<div style="width:300px;" align="left">
<div align="right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
UPDATE : In FF, the images are on the right side of the screen, in stead of aligned right at 300px from the left.
UPDATE 2 : The solution appeared to be text-align...
OK, after a lot of trying out things, I found it myself : text-align does the trick
(although it's aligning images here)
<div style="width:300px; text-align:right;">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
Try that:
<div style="width: 300px;">
<div style="float: right;">
<img src='images/item1.png' />
</div>
</div>
Oh and also, don't use HTML align parameters, use style.
Try using this instead:
<div style="width=300px;">
<div style="float: right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
try this width : not width =
<div style="width:300px;">
<div style="float: right">
<img src="images/item1.png">
<br />
<img src="images/item2.png">
<br />
<img src="images/item3.png">
<br />
<img src="images/item4.png">
<br />
</div>
</div>
<div style="width:300px;">
<div style="float:right">
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
</div>
</div>