Correct positioning of image

[theremotedr]

Hi,
Here is the page in question http://www.theatticbanwell.co.uk/slideshow.html

I would like to insert an image to the right of the centered text, as shown

6262

But i have managed to do the following & not sure on the correct procedure to do so

6263

The finished product should like like so

6264

I have uploaded the file so you can see it live.
Thanks.

[coothead]

Hi there theremotedr,


please note that your three attachments, take me to pages similar to this...


http://www.dynamicdrive.com/forums/attachment.php?attachmentid=6262


coothead

[theremotedr]

Hi,
I will check that out when home.

The picture which is out of place Is bottom of page to the right.

[theremotedr]

Hi,

Here we go.

This is where i would like the picture to be placed.

6265

This is currently where i have it.

6266

It should look like this once done.

6267

Thanks

[coothead]

Hi there theremotedr,


try replacing your "slideshow.html" file and your "demo.css" file
with those that are to be found within the attachment below.



coothead

[theremotedr]

Hi,
Can i asked what you changed.
I notice a white background & the page sits lower as if there is padding at the top.

Thanks

[coothead]

Hi there the remotedr,


ooooooops, I seem to have suffered a few "Brain Farts" during
my editing processes, one of which caused me to delete this...



<link rel="stylesheet" href="css/reset.css">

I hope that I have now corrected all my errors,

Please download my amended attachment in post #5 again.



coothead

[theremotedr]

Hi,

Ive done as advised above but still white.

I have uploaded so please check here http://www.theatticbanwell.co.uk/slideshow.html

[theremotedr]

Hi,
Using chrome dev tools i dont see the below of which is on the original site.

6271

[coothead]

I've done as advised above but still white.


You probably just need to clear cache for that.

Unfortunately, my brain is still malfunctioning this afternoon, though.

I did not delete this...



<link rel="stylesheet" href="css/reset.css">

...as it was never there in the first place.

So if you have added it to the HTML you can remove it.

What I did wrong, was to somehow put some errant code in the "demo.css" file...



file:///@import url('reset.css');

Remove the bit in red , and the amended "demo.css" file should be safe to use.



coothead

[theremotedr]

Its fine now after taking out the file/// etc

I also come across this at the bottom of the css fil.

C:/Users/coothead/amended-files/slideshow.html

Delete correct ?

[coothead]

I also come across this at the bottom of the css fil.

C:/Users/coothead/amended-files/slideshow.html

Delete correct ?

Yes, please. :)

I am need to be very careful now as an overload of "Brain Farts" can
often be followed by an uncontrollable deluge of "verbal diarrhea". :eek:



coothead

[theremotedr]

No problem.
It was good for me to find some issues.
shows me that using chrome dev tools can work great.

Teaching yourself is hard but its coming along and i use it plenty every day now.

Thanks for your time.

[theremotedr]

Coothead,
Hear is a question for you.

Can you tell me why when i add a link to the facebook icon it nudges it up the page ?

I though by adding a link had no bearing on the icons placement but just when you clicked on it then a new page would open etc.

Take a look http://www.theatticbanwell.co.uk/slideshow.html

Confused

[coothead]

Can you tell me why when I add a link to the Facebook icon it nudges it up the page ?

I certainly can. :)

It occurs because the CSS originally applied to the only "img element" in the parent "p element" will not work.

The CSS originally applied to the only "a element" in the parent "p element", will be applied to both "a elements".

So you now need to use this revised CSS....



.sub{
padding: 0 5px ;
text-align: center;
color: #fff;
}

.sub a:nth-of-type(1) {
display: inline-block;
padding-top: 32px;
vertical-align: middle;
}

.sub a:nth-of-type(2) {
position: relative;
top: -32px;
margin-right: 80px;
}

@media ( max-width: 30em ) {
.sub {
width: 12em;
padding-top: 16px;
margin: auto;
}
.sub a:nth-of-type(1) {
padding-top: 0;
}
.sub a:nth-of-type(2) {
position: static;
margin-right: 0;
}
}




coothead

[theremotedr]

Thanks,

Please can you check my demo css.
I have inserted part of the above code starting at line 17

I altered the following so the red text sat more central etc to the white text above etc.


.sub a:nth-of-type(2) {
position: relative;
top: -40px;
margin-right: 145px;



The media query i have placed at the bottom at line 166

Not sure if i need to add 1 or 2 }} afterwards ?

[coothead]

Hi there theremotedr,


your...



.sub{
padding: 0 5px ;
text-align: center;
color: #fff;
}

.sub a:nth-of-type(1) {
display: inline-block;
padding-top: 32px;
vertical-align: middle;
}

.sub a:nth-of-type(2) {
position: relative;
top: -40px;
margin-right: 145px;
}
.sub img {
padding-top: 1px;
vertical-align: middle;
}
.sub a {
position: relative;
top: -32px;
margin-right: 80px;
}

...should be this...



.sub{
padding: 0 5px ;
text-align: center;
color: #fff;
}
.sub a:nth-of-type(1) {
display: inline-block;
padding-top: 32px;
vertical-align: middle;
}
.sub a:nth-of-type(2) {
position: relative;
top: -32px;
margin-right: 80px;
}


...and your...



@media ( max-width: 30em ) {
.sub {
width: 12em;
margin: auto;
}
.sub img {
padding-top: 0;
}
.sub a {
position: static;
margin-right: 0;
}
}

...should be this...



@media ( max-width: 30em ) {
.sub {
width: 12em;
padding-top: 16px;
margin: auto;
}
.sub a:nth-of-type(1) {
padding-top: 0;
}
.sub a:nth-of-type(2) {
position: static;
margin-right: 0;
}
}



coothead

[theremotedr]

Hi,
I have changed the code and replaced it with your code shown above.

I am needing to make the gap between thumbnails & the white text small.

This is why i altered those 2 lines

[coothead]

Hi there theremotedr,


you have not, as yet, made the changes that I gave you in post #17. :confused:

And if you want the text closer together, then of course, you can use this...



.sub a:nth-of-type(2) {
position: relative;
top: -40px;
margin-right: 80px;
}

...or to save you messing around, just use the updated file in the attachment. :)


coothead

[theremotedr]

Hi,
Yep i have installed the files from #17

[theremotedr]

Ok
The last thing for today to sort is the following.
The page loads but you can scroll the page still BUT i dont see a reason as to why as there is no padding etc to allow this.

[coothead]

Hi there theremotedr,


I am not sure what you mean. :confused:

With my browser, the vertical scrollbar does not disappear until the window is about 500px wide.



coothead

[theremotedr]

What I mean is,
Why can you even scroll down the page anymore.
There isn’t anything to see.

Below the blinking text I have say 2 inches of extra page ?

I would expect there to be say 20px after the blinking text then that’s it.
Did I explain right ?

[coothead]

Hi there theremotedr,


OK, now I am on your wavelength. :)

The cause of that space is...



.content{
margin: 0px 25px 30px 25px;
}

...in the "demo.css" file.

So just use...



.content{
margin: 0 25px;
}

While we are there, I will point out that defining units for zero - ( 0 ) - values is unnecessary.

This is because 0px = ( 0pt = 0em = 0rem = 0vw = 0vh = 0% ) etc = 0.



coothead

[theremotedr]

Great.
I will edit that shortly.

In another post say Thursday we spoke about the odd , etc missing would stop a script from running.
A member mentioned using a tool called Lint of which it would find errors in a css file.

Well you mention 0 above, this relates to the tools reply on the css file of whichbit came back with,

Values of 0 shouldn't have units specified.



So how is the correct way to write padding:0px 5px 0px 5px;

[coothead]

So how is the correct way to write padding:0px 5px 0px 5px;

You can use either...


padding: 0 5px 0 5px;
...or...


padding: 0 5px;


coothead

[theremotedr]

All done,

Thanks for your time today.

[coothead]

All done,


But you forgot to change this...


.content{
margin:0px 25px 30px 25px;
}
...to this...


.content{
margin:0 25px;
}
...to address your problem...


Below the blinking text I have say 2 inches of extra page ?
I would expect there to be say 20px after the blinking text then that’s it.

...in your post #23



coothead

[theremotedr]

Hi,
thanks,now done.

Not sure why i didnt do it.