Help with div class and div id (calling specific item in css)

@filip4428Feb 07.2017

Hello guys, i’m having some minor problem, and it has been bugging me yesterday and today, and i can’t get it to work :/

Anyway, i’m trying to have several pictures manipulated by .floating css command,

but if i put my picture with command like this

[CODE]<div class=”floating”><img src=”http://zlatni-put.com/wp-content/uploads/2017/02/zlatni-put-gumb.jpg” alt=”” width=”90%” height=”90%” /> </div>[/CODE]

and if i put another picture with the same class “floating” i don’t know how to type css for each of them separately? should i id them? and if yes how do i target that id in css?

if i complicated i can also explain like this:

[CODE].floating { position: fixed; bottom:0; right:0; }[/CODE]

i want to use this command on every picture separately, i need to modify these parameters for each picture

Anyway, here is the website im working on, the problem is on lower right corner (little box, and another picture that i should move with css a little higher)

~~[url]~~www.Zlatni-put.com[/url]

Thank you in advance!

to post a comment

HTML

19 Comments(s) _↴

@filip4428authorFeb 07.2017 — #UPDATE: i managed to make html code and css code with this online tool..

http://codepen.io/anon/pen/wgEvrd (here is the sample of the code)

Unfortunatelly that code isn't working on my site..

you can go to site im working on and try to manage what's wrong..

i've been tweaking and trying everything for last 2 days.. i'm slowly giving up :/

www.zlatni-put.com

@SempervivumFeb 07.2017 — #Simply put the second image into the same container:

[code=html]<div class=”floating”><img src=”http://zlatni-put.com/wp-content/uploads/2017/02/zlatni-put-gumb.jpg” alt=”” width=”45%” height=”90%” /><img src=”second-image.jpg” alt=”” width=”45%” height=”90%” />
 </div>[/code]

@Kevin2Feb 07.2017 — #Getting that dang "Something went wrong!" error again while trying to post some example code. I'll try again...

@Kevin2Feb 07.2017 — #Screw it. I quit.

@Douglas_WilliamFeb 07.2017 — #got the error too!

- Douglas

@Douglas_WilliamFeb 07.2017 — #The incident ID is: 247454387184661104.

Event id: 2021334588513675121

-Douglas

(hopefully this Post's was using BBCODE: HTML and then an attempt with CODE. Both were with an use of URL additionally within the content to be posted in Reply.

@Douglas_WilliamFeb 07.2017 — #Hi filip4428,

I tested what the "division" had and the CSS you've provided:

I'm going to believe that the CMS Internal Coding (that you just decided to place your "division" into somewhere where you did) you are using is preventing this from occurring as it appears as this on my local computer in Firefox as:

thumbsnap.com/FOKX2UTF <= Here is one avenue to view what the above code reveals on my local computer

if that link fails try this one:

thumbsnap.com/t/FOKX2UTF.jpg <=Here is a second avenue to view what the above code reveals on my local computer.

Tiny Pic seems to be having an issue at the moment and my search engine (ask.com) has gotten stupid showing me foreign language results ... something else to resolve today ....

Also your URL links need the "Closing Tags", filip4428.

Hope this helps out. - Douglas

@Kevin2Feb 07.2017 — #Try this:

[code=html]<!doctype html>
 <title>zlatni-put</title>
 <style>
 #floating {
 width: 125px;
 position: fixed;
 bottom: 0;
 right:0;
 padding: 5px 10px;
 background-color: rgb(58,58,58);
 border: solid 3px rgb(214,172,60);
 text-align: center;
 }
 #floating img {
 width: 96px;
 margin: 5px 0;
 border: solid 3px rgb(214,172,60);
 }
 </style>
 
 <div id="floating">
 
 <a href="goldroad"><img src="zlatni-put-gumb.jpg" alt=""></a>
 
 <a href="mailto:[email protected]"><img src="posalji-pitanje.jpg" alt=""></a>
 
 <a href="goldroad/productterms"><img src="opci-uvijeti.jpg" alt=""></a>
 
 <a href="goldroad/pricelist"><img src="cjenik.jpg" alt=""></a>
 
 </div>[/code]

Add back any absolute URL paths needed.

@Kevin2Feb 07.2017 — #Both were with an use of URL additionally within the content to be posted in Reply.[/QUOTE]

You are a genius! Took out the absolute URLs and the code posted! Many thanks!

@Douglas_WilliamFeb 07.2017 — #Hi Kevin2, (and then addressing afterwards to: filip4428)

Kevin stated: "You are a genius!"

I would not quite go that far - You actually proved to me that "posting" was possible while experiencing the problem.

I just pulled all the BBCODE out and posted what was expected (however as it was another attempt to "post" I figured I had better get in the information if I could as I seen you had the posting problem when you mentioned "trying to post some example code".

... if we all pull together as team we can make this into a monster (Pink Floyd) ...

with that being said ...

Hi filip4428,

I tested what the "division" had and the CSS you've provided:

<html>

<head>

<style>

.floating {

position: fixed;

bottom:0;

right:0;

}

</style>

</head>

<body>
   <div class="floating">
   <img src="http://zlatni-put. ..." alt="" width="24%" height="24%"  />
   <a href="http://pronobile ...">
   <img src="http://zlatni-put. ..." alt="" width="13.9%" height="13.9%"  /></a>
   <a href="mailto:prodaja@pronobile ...">
   <img src="http://zlatni-put. ..." alt="" width="13.9%" height="13.9%" bottom="55px" right="55px"  /></a>
   <a href="http://www.pronobile ...">
   <img src="http://zlatni-put. ..." alt="" width="13.9%" height="13.9%"  /></a>
   <a href="http://www.pronobile ....">
   <img src="http://zlatni-put. ..." alt="" width="13.9%" height="13.9%"  /></a>
   </div>
  </body>

</html>

I'm going to believe that the CMS Internal Coding (that you just decided to place your "division" into somewhere where you did) you are using is preventing this from occurring as it appears as this on my local computer in Firefox as:

http://thumbsnap.com/FOKX2UTF <= Here is one avenue to view what the above code reveals on my local computer

... the rest you can pick up from above, filip4428.

- Douglas (now that Kevin2 has showed me the avenue ... Thanks Kevin2)

Administration/Moderation Please Note: Tried to give the response with the "QUOTE" and "HTML" BBCODE in this and got the error again. If this Posts It is done without the "QUOTE" and "HTML" BBCODE. If It doesn't post I'll attempt a pull of the coded Opening URL Anchors. - Douglas

@Kevin2Feb 07.2017 — #This code somewhat replicates the gradient in your original "background image". The gradient does not work in any version of Internet Explorer, although it does work in Edge. In IE the plain gray background will appear.

#floating {
 width: 125px;
 position: fixed;
 bottom: 0;
 right:0;
 padding: 5px 10px;
 background: #353535;
 background: -webkit-linear-gradient(left,#343434,#5D5D5D,#343434);
 background: linear-gradient(left,#343434,#5D5D5D,#343434);
 border: solid 3px rgb(214,172,60);
 text-align: center;
 }

@Douglas_WilliamFeb 07.2017 — #Hi Kevin2,

Kevin stated: "You are a genius!"

I would not quite go that far - You actually proved to me that "posting" was possible while experiencing the problem.

I just pulled all the BBCODE out and posted what was expected (however as it was another attempt to "post" I figured I had better get in the information if I could as I seen you had the posting problem when you mentioned "trying to post some example code".

Administration/Moderation Please Note: Tried to offer up my initial response with the "QUOTE" and "HTML" BBCODE in this and got the error again. If this Posts It is done without the "QUOTE" and "HTML" BBCODE - And I'm experiencing the inability to "post" with BBCODE Inserts as Kevin2 was able. - Douglas

@Kevin2Feb 08.2017 — #<img src="blah" alt="" width="24%" height="24%" />[/quote]

OK, this is something I meant to address before the errors started hammering me. The [B]width[/B] and [B]height[/B] attributes for an image [I][b]cannot[/b][/I] have percentages or other metrics to describe their values. To do so is invalid HTML. Their values should only be numerical as in [b]width="24" height="24"[/b] which would be 24X24 pixels. If one needs to make a width or height a percentage of the container use CSS. Invalid HTML leads to ... well ... [I]unexpected[/I] results.

And FYI to admins/mods: until I changed the [B]src=""[/B] to "blah" from any sort of "http://etc." the "Something went wrong!" error showed up.

@filip4428authorFeb 08.2017 — #omg guys 5464574 replies, thank you a lot, but i got so deep into the making the site i totally forgot to look here what's new..

The site is finished(ish). I figured it out, and used the code i posted 2nd time.

You can check it out at

Zlatni-put.com

(i had problems with alignment of relative boxes with crome/firefox, so i made the box bigger ? )

btw. my first real real site.. was making it for my cousin.. ?

@filip4428authorFeb 08.2017 — #nope, i made it work with %... ?

@brad_jonesFeb 08.2017 — #Admin note (off topic): I provided tech team with a better example of the Something Went Wrong (SWW) error, and they are looking into it. Hopefully they will have a better fix in place tomorrow.

Brad!

Admin

@Kevin2Feb 08.2017 — #nope, i made it work with %... ?[/QUOTE]

Maybe... And with certain browsers... Which went into "Quirks Mode" when they ran across invalid HTML and made a "best guess", right or wrong, on how to display that HTML.

@Kevin2Feb 08.2017 — #Admin note (off topic): I provided tech team with a better example of the Something Went Wrong (SWW) error, and they are looking into it. Hopefully they will have a better fix in place tomorrow.

Brad![/QUOTE]

Thanks Brad! Or should it be "Thanks Brad!(!)? Punctuation aside I appreciate the efforts. Oh yeah, I like the new acronym (SWW). :p

@filip4428authorFeb 08.2017 — #Maybe... And with certain browsers... Which went into "Quirks Mode" when they ran across invalid HTML and made a "best guess", right or wrong, on how to display that HTML.[/QUOTE]

really? gah doesn't matter.. tried on firefox and chrome.. good enough ?

thanks tho

Also in #HTML _↴

Popup size and stuff.bgcolor help how do this

Success!

Help @filip4428 spread the word by sharing this article on Twitter...

Tweet This

Help with div class and div id (calling specific item in css)

19 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Help with div class and div id (calling specific item in css)

19 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #HTML _↴