PDA

View Full Version : css image placement driving me mental


monkeymedia
07-09-2012, 07:54 PM
once again I'm here cap in hand asking for help

http://www.redwebhosting.co.uk/test/sarahfoster/personaltraining/index.php

its driving me nuts, all I want is a 10pc gap above each image, and for the same background image from the p tag to carry on for the length of the content box.

help! arrgggh!

thanks in advance.

edbr
07-10-2012, 03:32 AM
.top {margin-top:10px;} add to image class or apply as style or span
not sure what you mean re image. sorry coffee shortage this morning

monkeymedia
07-10-2012, 08:29 AM
you see how there's a white background behind the text, that doesnt run all the way down to meet the rounded corner bottom of box image?

I swear I tried adding margin to my imageright class with no success. weird.

monkeymedia
07-10-2012, 07:27 PM
I just added margin-top to imageright class with no avail...

edbr
07-11-2012, 02:42 AM
ok ill try and look but a bit strapped for time so if any one else can help this poster please do

Corrosive
07-11-2012, 08:58 AM
The content area is just not 'clearing' the images because they are floated. Try

.content {
float: left;
width: 720px;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}

As for the margin at the top of each image try removing the wrapping paragraph tags (images are not paragraphs!!) and then try;

.content img {
margin: 10px 0 0 0;
padding: 0;
}

monkeymedia
07-11-2012, 11:42 AM
cheers guys.

my graphic box that sits behind the content consists of a top image with rounded corners, a middle image that is tiled to fill the space and a bottom image with rounded corners. all of this sits inside the div.

if I change the css for content img wont that bugger up the top and bottom rounded corner images as they're inside the div?

big thanks to people for helping me out, when I'm stuck I'm stuck with little chance of just stumbling across a solution so I really apreciate this place and your help.

Corrosive
07-11-2012, 11:52 AM
Yes, probably. Why not set your top and bottom sections of your box as div backgrounds rather than images? In web dev terms for the purist you are including images in your content that aren't actually content anyway ;)

monkeymedia
07-11-2012, 12:21 PM
so are we saying have one div that contains all the elements for one 'box' and within that div have 3 more, the top and bottom ones will have the height specified the same size as the image and make that the background. the middle div is the one that will contain all my css rules for p and img tags etc?

Corrosive
07-11-2012, 01:01 PM
Yes, that's pretty much it apart from you shouldn't really need the outer 'wrapping' div as your content div is positioning that already.

monkeymedia
07-11-2012, 02:46 PM
cheers corrosive, I'll give that a whirl later

monkeymedia
07-11-2012, 06:38 PM
http://www.redwebhosting.co.uk/test/sarahfoster/personaltraining/index.php

well thats fixed one problem but I still cant get the background image to go past where the text stops. I was messing around with margin padding and box size but I just could get what I wanted at all. It either buggered up the 'column' where the text is sitting or the background didnt go all the way across.

help again please?

Corrosive
07-11-2012, 06:56 PM
You are floating an awful lot of stuff there (not sure why you are floating the content head and content footer when their parent div is floated to create the columns) and you haven't applied my overflow: hidden; suggestion. Perhaps give that main box and id as well as a class and then add the rule I suggested to 'clear' it.

monkeymedia
07-11-2012, 07:20 PM
I honestly do not understand the basics of float and clear, I bought a book on css to read and just haven't found the damn time to sit down and go through it! very annoying.

the main box will be used a few times in the same column so I cant really id it can I?

monkeymedia
07-11-2012, 07:23 PM
ok, have applied the overflow and removed the extra floats. and its all gone a bit tits up.

monkeymedia
07-11-2012, 07:25 PM
I just aplied the overflow hidden to the div id #contentcol as that was in place already. doesnt seem to have improved matters

Corrosive
07-11-2012, 07:31 PM
the main box will be used a few times in the same column so I cant really id it can I?

You know you can apply an ID & a class to a div right?

monkeymedia
07-12-2012, 08:00 AM
yeah but you can only use an id once cant you?

I woke up with an idea this morning. now the head image and foot image of the boxes isnt inside the content div, why not just move the background image to the content dive instead of the p tag?

Corrosive
07-12-2012, 08:44 AM
Sorry, didn't event notice your background was on the p tag rather than the content div. Yep, that's a no-brainer ;)

monkeymedia
07-12-2012, 01:24 PM
I think if I just do that my wordly worries will go away. thanks for the help everyone.

Chapster5
07-16-2012, 10:36 AM
Had a quick play and got it working things I changed

.content {
float: left;
width: 706px;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
border-radius: 10px;
border: 2px solid black;
background-color: white;
padding-top: 10px;
}

.imageright {
float: right;
clear: both;
display: block;
}

Got rid of the content-head div and the content-footer div

Use border-radius and add a border... Done

Hope it helped mate :)

Nick

http://img696.imageshack.us/img696/1520/fitnesssite.png

Corrosive
07-16-2012, 10:49 AM
Border radius is fine as long as your audience can be guaranteed to use compatible browsers ;)

Chapster5
07-16-2012, 11:34 AM
Border radius is fine as long as your audience can be guaranteed to use compatible browsers ;)

That's true,

What about
moz-border-radius

some browsers can get away with that too can't they? Even so i'm sure a couple of sharp corners would make little difference as long as the info was there :)

Corrosive
07-16-2012, 12:23 PM
The -moz- -webkit- and -o- prefixes were for CSS3 early days and beta testing and refer to the rendering engine for each browser (Safari, Chrome, Firefox, Opera etc.) As 'decent' browsers tend to update themselves in the background there should be less need for it now. I was really thinking about Internet Exploder (typo intended) which is still a well used browser.

It is just typical that you show a nice rounded mockup to a client and they love it, you build it and they still have XP and IE8! Of course there is always CSS3 PIE plugin to consider.

Chapster5
07-16-2012, 12:25 PM
The -moz- -webkit- and -o- prefixes were for CSS3 early days and beta testing and refer to the rendering engine for each browser (Safari, Chrome, Firefox, Opera etc.) As 'decent' browsers tend to update themselves in the background there should be less need for it now. I was really thinking about Internet Exploder (typo intended) which is still a well used browser.

Ahhh, I see IE being it's gay self as per usual they should really update IE to support features as simple as this and they wonder why people use alternative browsers they provide so much more in the terms of user experience and compatibility

Corrosive
07-16-2012, 03:34 PM
Ahhh, I see IE being it's gay self as per usual they should really update IE to support features as simple as this and they wonder why people use alternative browsers they provide so much more in the terms of user experience and compatibility

To be fair, IE9 does support it but users on XP cannot have IE9 and, even if they did, because MS don't update browsers in the background, people get 'stuck' on older versions. Some people fear change as well!

monkeymedia
07-16-2012, 04:30 PM
thanks Nick, for making me think about CSS3, I was going to come here and ask about compatibility but its been all debated out before I got here.

so, what % of everyone using the net would see square corners then? does anyone know?

monkeymedia
07-16-2012, 04:30 PM
oh and tonight I'll be fixing the site so expect more questions approx 8.30pm tonight! ;)

Corrosive
07-16-2012, 04:56 PM
%s of people on IE would be shown in your server logs. You can also try http://css3pie.com/ for CSS3 that works on IE. Can be a bit flaky if you have multiple effects but rounded corners alone should work OK.

monkeymedia
07-16-2012, 06:37 PM
I was so close! and then I added a second image place holder in the main content and it all went to shit.

I've arsed about with floats and clear but to be honest I havent really got a clue what they do. I'm sure its pretty simple though (annoyingly)

Could someone tell me whats wrong? ideally I want to be able to add 3 or 4 images down the right hand side and have it not bugger up the box below it.

well, that was earlier than expected!

monkeymedia
07-16-2012, 06:38 PM
CSS3 looks cool. why is IE so damn shit all the time?

edbr
07-17-2012, 02:29 AM
that is a complete mystery to me

monkeymedia
07-17-2012, 08:20 AM
http://www.redwebhosting.co.uk/test/sarahfoster/personaltraining/index.php

Just in case it gets missed because of the new page. I'm having an issue with the place holder images falling off the bottom of the main content box. help!

the internet is bad sometimes, because of its global nature it really buggers up the ability to buy someone a beer when they do you a favour.

Chapster5
07-17-2012, 08:51 AM
Here you go mate



.content {
width: 720px;
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/sarah-foster-fitness-banbury-cb.png);
background-repeat: repeat-y;
overflow: hidden;
}



I added overflow: hidden; property to the content div

http://snag.gy/f7uHr.jpg

monkeymedia
07-17-2012, 09:29 AM
excellent, thank you.

now I think about it I deleted that out of somewhere like a dick!

Chapster5
07-17-2012, 09:47 AM
LOL Happens to the best of us mate :)

Enjoy!

Nick