Highlighted

How to call out in CSS

Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

I have these two images I'm trying to upload into my website. (I'm using Squarespace).

Here is my HTML:

<div style="margin-left:1100px; margin-top:30px; z-index:99999; position:absolute;"><img src="https://static1.squarespace.com/static/5c15633e9d5abb17ab5faaac/t/5c3531e3c2241bf9e4b37f72/154699005... a, .sqs-block-content a:visited {border: none !important;}" width="128" height="128""></div>

  

   <div style="margin-left:730px; margin-top:30px; z-index:99999; position:absolute;"><img src="https://static1.squarespace.com/static/5c15633e9d5abb17ab5faaac/t/5c3532b04ae237db71f7e72d/154699025... a, .sqs-block-content a:visited {border: none !important;}" width="170" height="128""></div>

Question:

I want to fix the positioning of them: how do I call these elements out in CSS? I don't have a class name or a div name for them, so how can I call them out?

Thanks!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You have some malformed css in your code currently. It looks to me like you may have tried to copy/paste some styles from an external .css file directly into the image, right after the .jpg of each. That needs to be removed.

To target a specific image, all you need to do is add a unique ID to it (IDs can only be used once in any given page)...

<img id="myimage1" src="path/to/image1.jpg" alt="pithy text">

<img id="myimage2" src="path/to/image2.jpg" alt="more pithiness">

Then, in your css file, target the IDs...

#myimage1 {

     width:150px;

     height:200px;

}

#myimage2{

     width:170px;

     height:180px;

}

Views

259

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to call out in CSS

Community Beginner ,
Jan 10, 2019

Copy link to clipboard

Copied

I have these two images I'm trying to upload into my website. (I'm using Squarespace).

Here is my HTML:

<div style="margin-left:1100px; margin-top:30px; z-index:99999; position:absolute;"><img src="https://static1.squarespace.com/static/5c15633e9d5abb17ab5faaac/t/5c3531e3c2241bf9e4b37f72/154699005... a, .sqs-block-content a:visited {border: none !important;}" width="128" height="128""></div>

  

   <div style="margin-left:730px; margin-top:30px; z-index:99999; position:absolute;"><img src="https://static1.squarespace.com/static/5c15633e9d5abb17ab5faaac/t/5c3532b04ae237db71f7e72d/154699025... a, .sqs-block-content a:visited {border: none !important;}" width="170" height="128""></div>

Question:

I want to fix the positioning of them: how do I call these elements out in CSS? I don't have a class name or a div name for them, so how can I call them out?

Thanks!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You have some malformed css in your code currently. It looks to me like you may have tried to copy/paste some styles from an external .css file directly into the image, right after the .jpg of each. That needs to be removed.

To target a specific image, all you need to do is add a unique ID to it (IDs can only be used once in any given page)...

<img id="myimage1" src="path/to/image1.jpg" alt="pithy text">

<img id="myimage2" src="path/to/image2.jpg" alt="more pithiness">

Then, in your css file, target the IDs...

#myimage1 {

     width:150px;

     height:200px;

}

#myimage2{

     width:170px;

     height:180px;

}

Views

260

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 10, 2019 0
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

Discussion successfully moved from Adobe Creative Cloud to Dreamweaver support forum

I moved this to the Dreamweaver support forum, but it is probably even not an Adobe related question.

I would look here: W3Schools Online Web Tutorials

Regards,
Abambo
Hard- and Software Engineer and Photographer

I'm not an Adobe employee. All advice constitutes my own opinion. Use at your risk! 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 0
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

You have some malformed css in your code currently. It looks to me like you may have tried to copy/paste some styles from an external .css file directly into the image, right after the .jpg of each. That needs to be removed.

To target a specific image, all you need to do is add a unique ID to it (IDs can only be used once in any given page)...

<img id="myimage1" src="path/to/image1.jpg" alt="pithy text">

<img id="myimage2" src="path/to/image2.jpg" alt="more pithiness">

Then, in your css file, target the IDs...

#myimage1 {

     width:150px;

     height:200px;

}

#myimage2{

     width:170px;

     height:180px;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 2
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

See Squarespace Help -- Using Code Injection.

https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2019 1