My HTML is structured like this: The problem is that the image and each article are displayed in different lines. I tried to float them and to make them display inline, but it did not help
<img src="img/sjlk.jpg" /> <!-- Logo -->
<article>
<h2>askdfbkansdkn </h2>
<p>asdhfaksdhfk</p>
</article>
<article>
<p>selnlnl sf</p>
<p>shdfl</p>
<p>aehfonlknslfn</p>
</article>
I want the image float right to the article without changing the HTML Structure
Thank you!
You need to wrap the <article> DIVs.
<img src="img/sjlk.jpg" /> <!-- Logo -->
<div class="wrap">
<article>
<h2>askdfbkansdkn </h2>
<p>asdhfaksdhfk</p>
</article>
<article>
<p>selnlnl sf</p>
<p>shdfl</p>
<p>aehfonlknslfn</p>
</article>
</div>
CSS:
img, div.wrap {
float: left;
}
Related
I would like to place my logo on the border of two divs. I've two questions:
In which div should I place this logo: in div above or in div below or maybe put in another div?
How can I position it. I tried absolute and relative but it doesn't work.
It should looks like:
HTML
<!-- Favorites -->
<section class="favorites">
<h2 class="favorites-header">Urban Favorites</h2>
<div class="favorites-box">
<img src="img/burger-craft-burgers-e1497746930767.png">
<div class="favorites-info">
<h2>Craft Your Own Burger</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<div class="favorites-box-last">
<img src="img/burger-craft-fries.jpg">
<div class="favorites-info">
<h2>Loaded Cheese Fries</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
</section>
<!-- Review -->
<section class="review">
<div class="review-element">
<p>"Great meals!"</p>
<img src="img/five-stars.png">
<p>-Jane Doe</p>
</div>
<div class="review-element">
<p>"Awesome atmosphere!"</p>
<img src="img/five-stars.png">
<p>-Aicia Fox</p>
</div>
<div class="review-element">
<p>"Everything is ok"</p>
<img src="img/five-stars.png">
<p>-Cesar Algir</p>
</div>
<button>Leave a Review</button>
</section>
I am trying to align my text under a line of 3 images using HTML/CSS. As
soon as i remove my comments it aligns everything vertically.
<div class="inline">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
</div>
See my example https://jsfiddle.net/gvrr25bk/1/
Thanks in advance!
Ivan
you could wrap each img with it's p inside a div and add display:inline-block to that div instead
.inline {
text-align: center;
}
.wrap {
display: inline-block;
margin: 0 2%;
}
<div class="inline">
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
</div>
see more here CSS align and here CSS inline-block or in general about css CSS w3schools
about HTML blocks and inline elements see here HTML Block and Inline Elements
the idea to the solution i gave you is that if you want the image to stay together with it's text , you should put them in the same container separately. in that way they will always stay together as you want.
I am trying to display this content in a line so that it shows with Shopping on the left of my page and content in the "right" div on the right. I have tried floating the div to the right but that didn't work.
Any help is much appreciated.
<header>
<h1>Shopping</h1>
<div id="cart"
<img src="images/cart.png" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
</header>
Like this
<h1> and <div> are block element so they take a whole line each. You have to make them as below to display them in a line.
header h1, header #cart {
display:inline-block;
}
Well there're a few more methods to show them in a line, but this is the easiest.
Try this https://jsfiddle.net/g6camng3/1/
HTML
<header>
<h1>Shopping</h1>
<div id="right">
<img src="http://placehold.it/350x150" width="80" height="80">
<p> Cart: 0 </p>
Login
</div>
CSS
h1 {
float: left;
display: inline-block;
}
#right {
display: inline-block;
}
I would suggest you to use span instead of p tag :
<header>
<h1>Shopping</h1>
<div id="cart"
<span><img src="images/cart.png" width="80" height="80"></span><span> Cart: 0 </span><span>Login</span>
</div>
</header>
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.
My problem is that I have this floated elements to the left. Every element has hidden subelement with some text. I want them to be next to each other (if there is space) like in this demo .
After I click on image then that subelement which is hidden will show up. It work fine with element which are on left side (like in demo) but I have problems with the right side. When I click on element on this side, there is plenty of white space in left side.
What can I do about it?
Here is my code:
HTML:
<div id="main">
<section>
<article class="articles">
<img src="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://theconceptartblog.com/wp-content/uploads/public_html/dev3/wp-content/uploads/07/GEARS3-imgs-05.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://blog.art21.org/wp-content/uploads/2011/08/imgs-189.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://www.klafs.com/media/klafs/imgs-700x394_49_c1_5d_64_fee67da23384276e60644482670c3f22"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtX4Yk1Sxew5RqlARZHKoSnePwp86PVCOpmfTkE9bGCL2Iffic"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://89.152.245.33/DotNetNuke/Portals/SecureChains/Images/imgs.jpg"/>
</article>
</section>
</div>
CSS:
.articles {
position: relative;
float: left;
width: 49.8046875%;;
min-height: 100px;
}
.articles img {
height: 100px;
width: 100%;
}
#main {
font-size: 0;
}
p {
margin: 0;
font-size: 16px;
}
Thanks for your advice.
You need to specify the float of every element on the ride side. You can do this by using :nth-child(even):
.article:nth-child(even) {
float: right;
}
If you want to use more complex grid systems you need some JavaScript or use the CSS flexbox property.
If you decide to use JavaScript there are several jQuery plugins available.