Jump to content
Stef's Coding Community
Sign in to follow this  
joecool

Help With Simple Img Placement With Background

Recommended Posts

Hi all,

 

Just when I think I am beginning to get this stuff, something simple comes up and I am embrassed at not being able to do it.

 

Anyway, I am trying to create a simple page with a h1 tag at the top and four images, 2 on one side and 2 on the other with a background color for the images and for the h1 and all the content being centered.

 

Something like this.

 

This Is My Title

 

img1 img2

 

img3 img4

 

 

The background color same for everything but with a white space between the title and top images.

 

I am trying to do this by CSS (I have had to resort to some on page CSS to try and get things to look right) and I am coming up with things not working correctly, notably I don't seem to be able to use margin:auto; to center everything, which I think I should be able to. In the past I would have just got frustrated and resorted to using tables, but I am not going to do that anymore, I need to master this stuff.

 

Anyway, please don't laugh, :lol: I am new to all this, but here is my CSS code (I know to an expert it is probably a bit of a mess, but to me it, from where I was 3 weeks ago, this is actually progress). :clap:

 

 

On page code:

 

<div class="mainresources">

 

<h1 class="resourcetitle">Title is here</h1>

 

</div><!--End of Div main resources-->

 

<div style="background-color:ffffff;padding:5px;float:none;"><p> </p></div>

 

<div class="mainresources2">

<div class="leftresource"><a href="#"><img style="WIDTH: 294px; HEIGHT: 150px" src="#"></a></div>

 

<div class="rightresource"><a href="#"><img style="WIDTH: 294px; HEIGHT: 150px" src="#"></a></div>

 

<br class="both">

 

<div class="leftresource"><a href="#"><img style="WIDTH: 294px; HEIGHT: 150px" src="#" /></a></div>

 

<div class="rightresource"><a href="#"><img style="WIDTH: 294px; HEIGHT: 150px" src="#" /></a></div>

 

</div><!--End div main resources2 -->

 

CSS file code:

 

.both {clear:both;}

 

.resourcetitle {font-size:2.25em; text-align:center; font-weight:bold;}

 

.mainresources {width:80%; background-color:#f6f6f6; margin-left:5%; margin-right:5%;}

 

.mainresources2 {width:80%; background-color:#f6f6f6; margin-left:5%; margin-right:5%;}

 

.leftresource {float:left;}

 

.rightresource {float:right;}

Share this post


Link to post
Share on other sites

Running late and don't have time to go into detail, so on the quick:

 

You can only attach ONE background image and/or ONE background color to any block element. - http://www.csstutorial.net/2010/03/adding-a-background-image-with-css/ or http://www.csstutorial.net/2010/05/multiple-background-images-with-css/

 

To center things, enclose everything in a wrapper div, then your margin: 0 auto will work: http://www.csstutorial.net/2010/02/how-to-create-a-center-aligned-page-with-css/

 

float: none is redundant - something isn't floating, unless you tell it to.

 

For the white around the images, a white border around the images might work?

 

clear: both belongs to a block level element, not a <br>

 

Now I better get going. Surely, someone will show up with more detail later, but hopefully, this will get you started.

Share this post


Link to post
Share on other sites

Running late and don't have time to go into detail, so on the quick:

 

You can only attach ONE background image and/or ONE background color to any block element. - http://www.csstutorial.net/2010/03/adding-a-background-image-with-css/ or http://www.csstutorial.net/2010/05/multiple-background-images-with-css/

 

To center things, enclose everything in a wrapper div, then your margin: 0 auto will work: http://www.csstutorial.net/2010/02/how-to-create-a-center-aligned-page-with-css/

 

float: none is redundant - something isn't floating, unless you tell it to.

 

For the white around the images, a white border around the images might work?

 

clear: both belongs to a block level element, not a <br>

 

Now I better get going. Surely, someone will show up with more detail later, but hopefully, this will get you started.

 

 

Thanks for that Andrea,

 

I will start getting those things sorted.

 

I have also just read on another forum about using display:block for images and along with the margin:auto and even text-align:center to make sure things are compatible with some IE browsers, I play these with these things in about 15 minutes.

 

Thanks

Share this post


Link to post
Share on other sites

So from what you've written, I guess all you're asking is you can't use margin:auto to center the stuff? I just tried it and it works fine.

 

CSS file code:

 

.both {clear:both;}

 

.resourcetitle {font-size:2.25em; text-align:center; font-weight:bold;}

 

.mainresources {width:80%; background-color:#f6f6f6; margin: 0 auto; }

 

.mainresources2 {width:80%; background-color:#f6f6f6; margin: 0 auto;}

 

.leftresource {float:left;}

 

.rightresource {float:right;}

Share this post


Link to post
Share on other sites

Hi Joe, I managed to make something :ahem, cough: not half bad using example G from here:

http:(remove space)//www.alistapart.com/articles/css-positioning-101/. (Refer last post here: http://www.killersites.com/community/index.php?/topic/4489-how-to-make-a-web-site-the-lazya-waycheat-sheet/page__pid__22542#entry22542). Example E looks just right to me for your needs. Try playing around with the positioning and sizes in that, hopefully you will be able to adapt it to your needs.

Share this post


Link to post
Share on other sites

So from what you've written, I guess all you're asking is you can't use margin:auto to center the stuff? I just tried it and it works fine.

 

Hi BeeDev,

 

Sorry I didn't see your reponse last time, yep I can see that you are probably right, I think it was a slight glitch in my editor software that currently is making certain things look uncentered. Thanks for that. However, I know I probably didn't make it clear enough, but that was only part of my problem.

 

Hi Joe, I managed to make something :ahem, cough: not half bad using example G from here:

http:(remove space)//www.alistapart.com/articles/css-positioning-101/. (Refer last post here: http://www.killersites.com/community/index.php?/topic/4489-how-to-make-a-web-site-the-lazya-waycheat-sheet/page__pid__22542#entry22542). Example E looks just right to me for your needs. Try playing around with the positioning and sizes in that, hopefully you will be able to adapt it to your needs.

 

Thanks again mzsade,

 

I didn't have a chance to look over everything but by spending about 25 minutes absorbing what the article you recommended from the 'alistapart' website said I was able to get my head around it. Fantastic article and written in a really engaging way that explains the concepts better than I have come across before. I did have a big "a-ah!" moment while reading it.

 

Anyway, problem fixed. In short I used positioning instead of floating and I put the 4 images into a "relatively" positioned container and then I "absolutely" positioned them. There is still I slight think I need to figure out, but all in all, I have turned a bit of a corner - I think... :clap:

 

Thanks everyone for your help.

Share this post


Link to post
Share on other sites

You are welcome, Joe. A couple of other pages that i intend to come back to in order to get a firmer grasp on basics are:

http: //reference.sitepoint.com/css/demos

 

and for ready-made layouts that don't require you to display their Copyrights in the footer:

http: //www.maxdesign.com.au/articles/css-layouts/, but that's for later, Javascript, here i come... ;)

Share this post


Link to post
Share on other sites

Javascript, here i come... ;)

 

I think we are destined to be twins. :rolleyes:

 

We joined this site at roughly the same time and I am just starting on the Javascript stuff as well. I am Going through the killersite University stuff as well as the w3schools stuff. A combination of the two should give me all I need to be able to do what I need to do for now.

 

I have a goal of mastering, HTML, CSS, Javascript and PHP, this year. I feel like I have to; I can't afford to get someone else to make changes to some of my sites and one site/community in particular that I am just about to launch uses a normal css website for the front end then I have phpfox for the community and vbulletin for the forum on the backend and it is to expensive to get experts to sort out any issues with these software and it sometimes takes to long to wait for replys from their forums. So needs must. :D

Share this post


Link to post
Share on other sites

 

clear: both belongs to a block level element, not a <br>

 

 

 

I just wanted to get a little bit of clarification.

 

I was just watching on of the videos on the university and I thought that <br> was described as a block level element.

 

To me it is a bit inbetween, it isn't really block level and it isn't really inline.

 

But officially which one is it?

Share this post


Link to post
Share on other sites

I don't know what the video you saw says, bit <br> is just a line break - I think it's neither block nor inline element: http://www.w3.org/TR/html401/struct/global.html#h-7.5.3

 

The video I am referring to is in Part 4 of the Web Design 1, section about 5 minutes and 50seconds in, block tags are talking about and on screen it has a list of HTML block level tags which include <div>, <p>,<blockquote> and a bunch of other tags and the <br> tag is also in that list. This is why I was confused.

Share this post


Link to post
Share on other sites

Maybe I'm wrong (happened once before) but I would say that the <br> tag is NOT a block level (nor inline) tag.

Share this post


Link to post
Share on other sites

Thanks for the replies Andrea and Eddie.

 

One thing is obvious and that is that it isn't a big deal. You both still manage to build websites and they don't come crumbling down because of the <br> tag.

 

Anyway, in the course I think that it mentioned to use this tag very sparingly.

 

Interesting difference of opinion though on the old <br> tag, inline or not inline, block or not block?

 

I am not going to worry about it anymore. (not that I was worrying anyway, I just wanted to know :blink: )

Share this post


Link to post
Share on other sites

Whether something is an inline or a block level element is not a matter of opinion, it's just a fact and determined how it works. The br tag is a bit odd - compared to for example the <em> or <strong> tag, so I didn't recognize it as an inline tag.

 

There's also no need to use it sparingly - it's meant for a specific purpose (a line break) and can be used for that as needed. It is NOT meant to create space.

Share this post


Link to post
Share on other sites

Whether the <br> tag is an inline or block element is irrelevant to what it's used for. The benefit of using a <br> tag is exactly as Andrea stated. In my opinion I used it sparingly for a single line break line but I won't use it mulitple times to place content at a desired location.

 

<p>text with a<br> line break</p> is okay but...

 

<p>text with multiple <br><br><br><br> line breaks</p> is not.

 

Again, thats just my opinion.

 

@Andrea: We finally moved back to Texas...got hit by the blizzard/snow last week and now we are going to get some more tomorrow. Want some of this? :)

Share this post


Link to post
Share on other sites

Thanks, Eddie, but no thanks!!!! We had snow down here last week, too - and that's NOT what the brochures promised. There might be some more ice coming this week, too. I'm so ready for the Texas heat and sunshine.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...