first project, playing with css selectors, properties and values

[drone4four]

Here is my test case.

There are a few fun things I am trying to do with my first real html and css project.

#1 . My cat picture isn’t rendering. I have a cat.jpg in the active directory and as far as I can tell, the cat.jpg is refered to properly in my html file. What am I doing wrong here?

#2 . Notice the 50-60px white gap at the very bottom in between the green (#226640) border around the body and the green (#99FF66) body. Which property and value and under which selector do I have to change in order to close the gap?

#3 . As you can see in the test case, the image has a padded border of 10px. The padding exists between the image and the dashed grey border. How do I add an additional 10px between the border and the surrounding text? I Googled ‘img padding html css’ and came across w3schools docs on padding. The w3schools docs don’t explain how to achieve what I am try to do here.

#4 . How could I go about aligning the img so that it straddles the body margin so its partially protruding into the white space and partially protruding into the green body?

#5 . A peer on irc some time ago shared with me the html css example that I have based my test case on. His sample on his website included a reference to the CSS-Tricks website. Where on CSS-Tricks did he get this from? I’ve looked and can’t find the template. I ask because I would like to see if there are any similar css/html templates I could learn from.

#6 . I checked the profile preferences and control panel for my account here at CSS-Tricks and I can’t figure out how to change my pic. When I click ‘Edit’ there is no place to change my pic. How do I make this change?

[__]

as far as I can tell, the cat.jpg is refered to properly in my html file. What am I doing wrong here?

I get a 403 “Forbidden” response when trying to download the cat pic. Might be a permissions issue on the file or folder (probably the latter).

Notice the 50-60px white gap at the very bottom in between the green (#226640) border around the body and the green (#99FF66) body.

the body isn’t green; the div inside it is. There is an empty paragraph outside that div which is causing the extra space. But if the body is supposed to be green, then put the “green” rule on the body instead of the div and you won;t have this problem in the first place.

the image has a padded border of 10px. …How do I add an additional 10px between the border and the surrounding text?

You’re looking for the margin property. Also, avoid w3schools. Not a great learning resource. Use sitepoint or the mozilla developer network (MDN).

How could I go about aligning the img so that it straddles the body margin so its partially protruding into the white space and partially protruding into the green body?

Learn about position: relative.

Where on CSS-Tricks did he get this from?

no clue.

When I click ‘Edit’ there is no place to change my pic.

Profile images are from gravatar).

[drone4four]

The style sheet and cat.jpg is no longer forbidden. The problem was the permissions. The solution was to let loose this command in the working directory: chmod -R 0777 css/ and chmod -R 0777 cat.jpg . When it comes to permissions on a web server, obviously you’re not gonna set chmod 0777 system-wide. But is there a different rwxXst set that would be better suited for my public folders?

By removing two divs of the three div tags eliminated the extra space.

I searched sitepoint for margin property. I discovered some thorough documentation on the property. I’m gonna examine these docs closely.

That codepen test case is great. I’m gonna play around with this position: relative. Thank-you for taking the time to set up this test case for me.

I changed my pic at gravatar.

Thanks for all your pointers and advice, Mr. sandwich_ .

[__]

chmod -R 0777 css/ and chmod -R 0777 cat.jpg …is there a different rwxXst set that would be better suited for my public folders?

most definitely. Generally speaking, 755 is what you need. But more importantly, those files need to be in the same user group as your webserver (typically www-data for Apache, but you’ll have to look into this).

That codepen test case is great. I’m gonna play around with this position: relative. Thank-you for taking the time to set up this test case for me.

no problem; you’re welcome.

Mr. sandwich_

hehe, that’s a new one.

[drone4four]

Whaaa? I made a post, edited it moments later and when I clicked submit, my post was removed with some error message about being a duplicate post.

[Paulie_D]

I’ll check the filters.

[drone4four]

I’ve been playing with two codepen samples as an exercise to learn about relative positioning. The first was given to me by ham-sandwich-man (haha) which I forked to play with on my own. The second one I created based on something else I found on Google. In both cases I am trying to wrap the text around a relatively positioned image to the right. I am having difficulty with this.

I looked up the position property and relative value. In my search for an explanation of how to use relative positioning, I came across Chris Coyier’s helpful doc on css-tricks called, “Absolute, Relative, Fixed Positioning: How Do They Differ?”
which links to another doc by the same author on relative positioning called, “Absolute Positioning Inside Relative Positioning”. I also found a helpful tutorial on YouTube by LearnWebCode called, CSS Absolute and Relative Positioning Tutorial

Based on LearnWebCode’s tutorial (especially the 30 second segment starting at 1:56), in my test case I would think that my relatively positioned floated divider wouldn’t affect any of the other content. I was expecting to see the floated content hovering above the rest of the container content. But my divider affected the text content after the content divider which splits the rest of the content in two. The container content wraps around the floated content (the orange box) but only after the point in the paragraph in which I introduce the floated divider. My first question is: Why is that? You can see what I am talking about by selecting the text using your cursor. The text initially is buried beneath the floated text but then wraps around perfectly as intended in the second half. I placed the floated divider directly in the center of the placeholder text in my HTML. I didn’t intend to split the content into two paragraphs. I didn’t using a paragraph tag to create a line break but it looks like I did when I introduced my second divider. My second question is: How do I make it seamless? How do I make it so that the floated orange box is positioned better so as to have the surrounding text wrap more smoothly all around (not just the second half)? I tried shifting the img HTML element around to the very beginning and the very end of the container content, but what that does is put orange box off the screen, something which puts me farther away from what I set out to achieve.

Chris Coyier’s second css-tricks doc linked to above (“Absolute Inside Relative”) in particular illustrates exactly what I am trying to achieve, but it seems to indicate to me to try an absolute position (along with values such as top: 30% and right: -50%). I tried that and to my surprise, nothing changes. When I swapped out relative for absolute, everything stays the same. But when I play with the % values I managed to get the text content to wrap around the orange box again after the halfway point in the HTML where I inserted the img. The difference is that with 30% -25%, the text appears on top above the orange box rather than being hidden below.

In my fork of adrian-enspired’s codepen case, it’s a horse of a different color. I tried swapping out relative for absolute and adding top and right values which changed nothing.

I’m confused but I’m reaching for my ah-ha moment.

edit: formatting aa

[Paulie_D]

Yeah…too many links in the post…filter thought it was spam.

3 is usually the max before it kicks in.

[drone4four]

Ah OK, thanks Pauline for the clarification. I am happy to continue my discussion here on this message board.

Eureka! I figured out how to position images where ever I want. See here.

Now how do I get the text to wrap around it seamlessly?

[drone4four]

Take a look at these two test cases. The first does exactly what I am trying to achieve. This one was given to me by a kind soul. The second test case is my pet experiment. I am trying to make it look exactly the same as the first test case, just with an identifier and divider and text content instead of an img. I’ve copied the css declaration basically verbatim (although I did make some slight changes to the colors). What I am trying to do is get my orange rectangle text to squish into a more square shape and align to the left, just like the cat. I am also trying to get the green text to wrap around the orange square seamlessly. In what way is styling an img different from styling a text divider?

[Author]

Posts