I have a section which is devided by 2 parts. Left side is only for image and right - only for article. Is my code correct?
<section>
<h1>Section header</h1>
<div style="float: left;">
<img src="#" alt="somepic" />
</div>
<article style="float: right;">
<h2>About me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</section>
Yes, your markup structure is perfectly acceptable. An HTML5 section element can be used at your discretion to contain content related to a particular topic or activity. There are no specific rules about what elements it may include. You might use figure for your image wrapper as well. MDN
I recommend against using floats (which often lead to unpredictable or undesired behavior) and inline styles (which are just messy), though. Instead, set your elements to inline-block and give them explicit (percentage) widths using CSS classes in an embedded style tag or an external stylesheet.
Related
I searched but I couldn't figure out this !!
as you know img tag is an inline-block as default but when I want to wrap text around it, I can't.
I know that inline-block elements behave like inline elements to take the screen, I mean they take the screen just the content dimensions, but my question is why img element doesn't let text wrapped around it?
I mean why do we need to use float?
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
hello<br>
hello<br>
hello<br>
</body>
</html>
**NOTE: ** download.png file is on my local PC.
but I can show you the result!
IMAGE OF MY CODE
Inline and inline-block elements render on the same line (imagine lines of text in the book for example). And since img is inline-block element, it renders on the same line as the text next to it. So what you see in your example are three lines. First one contains image and text, the other two only contain text.
However two things happen here:
Inline-block also has height (by definition), which makes the first line higher.
All the elements in the line are (by default) vertically aligned to the bottom. That is why the text in the first line is aligned with lower border of the image.
In case you add float to the image, the concept of line is broken, which lets the subsequent content floating around.
When you wrap the text in <span> elements it works as you described because <span>s are inline elements.
<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.
MDN
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
inline-block elements have some properties of block elements and some properties of inline elements … and neither of them have the property of "content wraps around them".
An image is rendered a lot like a single character. A large character.
So you might compare these two paragraphs:
img { display: inline-block; }
span { display: inline-block; font-size: 50px; }
<p>A <img src="http://placekitten.com/50/50"> that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p>A <span>k</span>itten that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
The inline block box generated by the image is a lot like the inline box generated by a letter of the same size.
Wrapping of text around images in HTML / CSS is achieved with the float property;
img { float: left; }
p.foo::first-letter { float: left; font-size: 50px; }
<p><img src="http://placekitten.com/50/50"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
I'm designing a website and i'm trying to center elements vertically in a div following this tutorial https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical.
The content technically does get centered. Problem is: the content div gets higher than the content itself, so in reality it's not completely centered, giving problems in mobile screens.
Unluckily have no idea how it happens or how resolve it.
Html section:
<div class="banner-item-content">
<img src="https://alto.7180.eu/modules/custombanners/views/img/uploads/b09df371daff098e783367d788f96a20731083b9.PNG" alt="Banner1" class="banner-img">
<div class="custom-html"> <!--div to center-->
<h1 style="text-align: left;"><span style="color: #ffffff;">Prodotto 1</span></h1>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p style="text-align: left;"><span><span>SHOP NOW</span></span></p> </div>
</div>
</div>
CSS that does the centering:
.banner-item-content div.custom-html{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's the link to the website to check it directly: https://alto.7180.eu/it/. You can see the problem in the first banner that says "Prodotto 1" (skip the slider).
I would just like to understand which way i can avoid having this empty space included in the centered div, thanks!
Add display flex to banner item content , it will align center.
.banner-item-content {
display: flex;
}
Between:
<h2>Menu</h2>
and
<h5>Hover to see more!</h5>
I have this huge gap, is there a way to remove it?
For more references this is my code before heading 2:
<div class="container">
<img src="Lato Font Test.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><p>About Us // Origin</p><p>Sample Text</p><p>Sample Text</p><p>Sample Text</p></div>
</div>
</div>
<br></br>
And after heading 5:
<ul id="accordion">
<li>
<h2>MENU // SOUPS</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
Picture Reference: http://i.imgur.com/Imc3DPb.png
Thanks in advance!
One of your elements has a default padding or margin. You can inspect your elements with your browsers dev tools to figure out which if not both is causing the issue. Adjust your paddings and margins using padding: x; and margin: x; x being the amount of pixels [ex. 5px] you want.
Problem: http://i.snag.gy/TYvi4.jpg
Fiddle: http://jsfiddle.net/CadDC/7/
As you can see in the problem image above, I would like to position the image alongside the title but keeping the structure of the html for a responsive layout.
<div class="listingWrapper clearfix">
<div class="headlineText">FLOAT: RIGHT</div>
<div class="subText">FLOAT: RIGHT</div>
<div class="logo">FLOAT: LEFT (ALONGSIDE HEADLINE)</div>
<div class="introduction">FLOAT: RIGHT</div>
Look at this fiddle: http://jsfiddle.net/caprella/7kbVX/
I propose to add one more wrapper .heading for .headlineText and .subText. It will give us opportunity to move the whole header. But that .heading steel needs fixed width:(
Check the Js fiddle
http://jsfiddle.net/CadDC/9/
<div class="listingWrapper clearfix">
<div class="logo">
<img class="listingImage" src="http://media-cdn.tripadvisor.com/media/photo-s/02/d0/d7/ed/hotel-du-vin-york.jpg" />
</div>
<div class="headlineText"><h2>Hotel name</h2></div>
<div class="subText">Mars - 0.7 miles from Mars City Centre</div>
<div class="introduction">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost
</div>
</div>
Cant you just:
.listingImage{
max-width: 190px;
float: left;
}
I think this is your perfect answer http://jsfiddle.net/CadDC/14/ .
If you want it to be responsive you must give width and all in %.
I have a section where there is a image of a site and a paragraph thats referencing to that site. I am wondering what would be the correct way, in your opinion how I should wrap these 2 HTML objects.
I have originally thought this would just work(ignore .img-wrap and the h2):
<section class="featured">
<h1> Featured Project </h1>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</section><!-- .featured -->
But what if my client adds multiple paragraphs? It will be styled with a background color and margin so it wouldn't look right.
Wouldn't figure and figcaption be appropriate? I can't really tell when I read on it on HTML5Doctor.
<section class="featured">
<h1> Featured Project </h1>
<figure>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<figcaption>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</figcaption>
</figure>
</section><!-- .featured -->
Or maybe just wrap the paragraph?
It's hard to say what the best practice here would be since you haven't given us enough context. I doubt that what you're showing us here really is a good candidate for a <section>, since it seems more like the bulk of an article, especially with that <h1> thrown in there.
As far as using that <figcaption> around paragraphs of content, well, that's not really what it's intended for. Think about a newspaper or magazine article with an image or two to spice it up. The image isn't described in the body of the content, but the image content is related to the article. The captions on the image are brief descriptions of what the image is showing, usually to clarify who or what you're looking at.
For your situation, something like the following might be most appropriate:
<article id="featured">
<h1>Featured Project</h1>
<figure>
<img src="image.jpg" alt="A brief caption about the image.">
<figcaption>A brief caption about the image.</figcaption>
</figure>
<p>
Lorem ipsum, your articlus can goeth here.
</p>
</article>
There's no need for you to wrap the entire article inside of a <figcaption> wrapped inside a <figure>, just to show an image. You don't have to use <figure> at all, and if you do, a <figcaption> is quite possibly unnecessary. Don't get caught up with trying to use HTML5 elements just for the sake of using them. If you don't think there's a compelling reason to use them, your time is probably better spent just getting things built and iterating over them later to make semantic improvements to the markup.