Hi,i have just made a sidebar and i want to put a picture in it but it doesnt seem to work.I cant modify it`s height to matter what.Can you hel me?:))-(note:i am very very beginner:)) )
<aside class="sidebar">
<img src="img/apple.computer.jpg">
</aside>
.sidebar{
width: 35%;
float:left;
background-color: ;
margin-left: 20px;
margin-top: 60px;
word-break: break-word;
height: auto;
}
The first thing to do would be to add width and height attributes to the image, it’s also advisable to have an alt attribute too, but that does not affect the display.
Since the sidebar has a dynamic size you may also need some css to make the image responsive.
.sidebar img {
width: 100%; /* You may choose to use max-width here instead to keep it from exceeding its native width */
height: auto;
}
No. Not without the HTML and CSS for the full page. Preferably posted as a “working page”… one that starts with <doctype html>, includes the <head>,<style>, <body>, and appropriate closing tags; OR a link to your development page on a server.
A sidebar is only a part of a page. We cannot help without all of the relevent code. If someone asked you that same question, do you think yhou have enough information to answer it?
(ninja’d by SamA74!)
I’m going through this methodically and will make notes as I see the need in the next post.
The HTML should be validated if you expect it to behave “as expected” in most browsers. https://validator.w3.org/nu/
(1) There is no doctype at the top of the page. That’s a requirement, not an option.
(2) One can apply a preferred language to the <html> tag like so, <html lang="en">. At this time, you have no designated language.
(3) One should designate a character set.as the first meta tag in the <head> section,
<head>
<meta charset="utf-8">
The link to your stylesheet and the title are good. The <head> tag is properly closed.
(4) The <body> tag has been assigned a className of “body”. Since there is only one <body> element on a page, and since properties can be assigned directly to tags with CSS, the addition of a className is unnecessary.
(5) I do not recommend assigning a width to the <body> element. It should be allowed to extend to the full width of the <html>. Yes, a width can be assigned to the <body> element; however there are a few nuances that one must be aware of which can be cumbersome. It is simpler and more flexible to add an .outer html element such as <div class="outer"> and assign any page width to .outer. The window background can then be assigned to the <body>, not the <html>
.outer {
width: ; /* width and unit of measure depend on the design. */
margin: 0 auto; /* as needed */
}
IMO, if you are still convinced that using the <body> element to set the page width is the way to go, then go for it. Experience is a good teacher either way. 
(6) The first div inside the body tag with the className of “cont” is not closed. Validation would have caught that for you. In my revision, it is the second <div> tag, .outer is the first. I’m not convinced yet that they are both needed so I am deleting .cont for the time being.
(7) I have added a <main> element.below the <header> in which the .content and .sidebar will reside. NOTE that the main portion of the page with two columns is separate from the header and footer containers. <main> will hold the content and sidebar. Assigning {display:table} to <main> will allow the content and the sidebar to reside in two, equal height columns and can be easily combined into one column at narrow widths. {display:flex} can be used instead of {display:table}, if you prefer or if the design requires more flexibility than {display:table} allows…
(8) @font-face should appear at the top of the CSS file so it is loaded early.
(9) The code for the link pseudo-classes should have the same specificity. As you wrote your CSS, .mainheader nav a:link { will always override a:hover {, the a:hover properties will never take effect because .mainheader nav a outweighs the lone a.
(10) It is advisable to include the dimensions of images in the HTML using the width and height attributes. Doing so allows the page to reserve that space when the HTML is loading and thus load smoother.
(11) Responsive pages that display on mobile devices are popular nowadays. You do not appear to have given any thought to that. I added a media query so you can get the idea. FYI, using display:flex instead of display:table/table-cells could avoid the need for the media query. It would also allow you to shift the position of the image in the sidebar more easily, if desired.
(12) I’ve reworked some of the padding and margins, especially those involving article and contents. In fact, I made changes that are not documented here. You’ll have to compare your original code to this code to find all of them.
(13) Cutting edge properties are not guaranteed to work in all browsers. It is a good idea to bookmark and use https://caniuse.com/
(14) In my version of your incomplete page, both img elements have three common CSS properties:
img {
display:block;
width:100%;
height:auto;
}
therefore, they appears only once in the CSS. Other properties unique to each image are targeted via classNames.
(15) Your image shows the first paragraph in <article> indented. I coded it as shown. If you want all three paragraphs indented, change the CSS selector from
article p:first-of-type::before {
to
article p::before {
(16) Final note. I deleted the empty lines from the HTML and CSS to make it easier to read. I recommend you do the same when coding.
Your page is a work in progess so there are bound to be more questions. You know where to find us.
Apple.html (2.9 KB)
style.css (2.7 KB)
Hey I had a look at it not bad I tried to imitate some of it but as usual i have trouble with images next to content since content box expand when window shrinks and image shrinks.
but anyway I was thinking it maybe small but change the hover effect to the links.
a:hover{
color:#999;
padding:0px 0px 2px 0px;
border-bottom:#111 dotted 1px;
}
and also style your a:visited links simply use the color: applied in the a:link,
I know its something small but that text-decoration:underline; is bothering me make it “none”, otherwise i suppose line-height would also work but browsers interpret them differently.
@0_0Nathan, Who are you and what are you talking about? Your handle is not that of the original poster. Are you offering suggestions to the OP? If so, it’s not clear. And, where do you see that the :hover pseudo-class is not on the anchor? Maybe you posted in the wrong thread by mistake? If so, flag your post and a moderator can move it for you.
Hi Ron,
That may be true in this case, but as a blanket statement it can be misleading.
There are times when different pages within a site can have different background images. A class on the body is a good way to do that.
That’s also how we used to highlight the Current Page on a navbar.
So there are times when a simple classname on the body can streamline your css. 
You’re right, of course, @Ray.H. The matching-pairs technique is my favorite when calling a common menu to several pages with PHP. It was not on my mind at that moment, though.
Thanks for pitching in.
I never said there wasn’t a hover pseudo class i was just giving a suggestion to change it using the one I gave as in my opinion it just looks better underlined text kind of doesn’t give it enough space that is why I thought it would be better to change the underline to a bottom border.
It was just a matter of preference.
and what i was talking about is I looked at your file and was impressed with your idea because I also have trouble with those images issue so i was just applauding you as a way to thank you for that answer as it can help me when I run into those issues too!
And I am just a simple web designer trying to be part of the forum trying to be useful 
@0_0Nathan, please allow me to offer my apology for coming across so negatively. I misread your post rather badly. The sentences within your paragraphs are not punctuated. The sentences - train of thoughts within the paragraphs - run together and I was not paying adequate attention so I mentally grouped the words incorrectly. It wasn’t until I went back later and tried grouping the words again that I realized that I’d made several blunders.
Thank you for contributing to the thread. Your input was good and may have been useful to the OP.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.