The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Unable to display list items inline and with no bullet
tkburton
post Sep 18 2020, 02:56 PM
Post #1





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



I formatted my social links as unordered list items, and can't figure out how to display them next to eachother without bullets.

Link to site: http://surfguardtv.com/#connect

Here is my HTML:

<div class="content">
<div id="connect">
<ul>
<li>
<a href="https://www.facebook.com/surfguardtv/"><img alt="FB LOGO" height="200px" src="/img/FB%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.instagram.com/surfguardtv"><img alt="IG LOGO" height="200px" src="/img/IG%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCUeDzkpWcM9ogocPhA_0Erw"><img alt="YOUTUBE LOGO" height="200px" src="/img/YOUTUBE%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.imdb.com/title/tt12848840/"><img alt="IMDB LOGO" height="200px" src="/img/IMDB%20logo.png" width="200px"></a>
</li>
<li>
<a href="https://open.spotify.com/album/6us2Zh2yoXvYI29IeqfseJ?si=xxZ6lFPUTAWKbcY4gESCaw"><img alt="SPOTIFY LOGO" height="200px" src="/img/SPOTIFY%20LOGO.png" width="200px"></a>
</li>
</ul>
</div>
</div>

And CSS:

#connect {
padding-left: 200px;
background-color: #9ec1bd;
height: 800px;
margin-top: 100px;
}

#connect ul {
list-style: none;
display: inline;
}

I'm going crazy over here... what am i doing wrong?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 18 2020, 03:03 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



Try applying the CSS to the LI elements instead of the UL.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 03:07 PM
Post #3





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



No luck using #connect li or #connect ul
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 03:10 PM
Post #4





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



For some reason my updated stylesheet isnt reflecting any CSS for these elements when i inspect the page using DevTools. I'm uploading the files using cpanel. Maybe I'm doing something wrong there..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2020, 03:16 PM
Post #5


Computer says no.
********

Group: WDG Moderators
Posts: 19,258
Joined: 9-August 06
Member No.: 6



QUOTE(tkburton @ Sep 18 2020, 10:07 PM) *

No luck using #connect li or #connect ul


Then you have a typo somewhere.

CODE
For some reason my updated stylesheet isnt reflecting any CSS for these elements when i inspect the page using DevTools. I'm uploading the files using cpanel. Maybe I'm doing something wrong there..


Or that. Look at it locally first so you know if it works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 03:24 PM
Post #6





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



I'm pretty sure I don't have a typo. But maybe? Is there any reason that CSS block (for #connect li) wouldn't show up in DevTools?

How do I look at it locally if the files are stored on the server? Do I have to change the file names every time?

Just starting out with all of this so any tips are appreciated!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 03:43 PM
Post #7





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



update: cleared my cache and i can see the edits to my CSS now. It's working!

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2020, 03:56 PM
Post #8


Computer says no.
********

Group: WDG Moderators
Posts: 19,258
Joined: 9-August 06
Member No.: 6



Good.

About viewing locally, didn't you create the files on your own computer first? Do you use some online editor in cPanel? It's much better to create your documents in a real editor on your own machine. It's also better to upload them with FTP than through a web interface (if that's what you have done). If you have cPanel you should also have FTP. Unless you mean just any control panel and not the rather expensive one called cPanel.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 04:27 PM
Post #9





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



Yes I'm using atom and created everything locally. I then uploaded the files through cpanel and had to change the names in my code bc they had a diff path when uploaded to the server.

Will FTP change the paths for me automatically?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tkburton
post Sep 18 2020, 04:38 PM
Post #10





Group: Members
Posts: 7
Joined: 18-September 20
Member No.: 27,544



If more background info would help: I'm doing this (for the first time!) for a friend who secured the domain and hosting via Godaddy, which includes cPanel. I'm using cPanels "File Manager" to upload everything. But now that I've changed the path names in my Atom file, I can't view it locally. So I'm making edits and uploading them after every edit. It feels so clumsy and I know I'm doing it wrong! But not sure of the best way..

Thank you so much for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2020, 03:10 AM
Post #11


Computer says no.
********

Group: WDG Moderators
Posts: 19,258
Joined: 9-August 06
Member No.: 6



QUOTE(tkburton @ Sep 18 2020, 11:27 PM) *

Yes I'm using atom and created everything locally. I then uploaded the files through cpanel and had to change the names in my code bc they had a diff path when uploaded to the server.

Will FTP change the paths for me automatically?


No. It's just a more convenient way to upload.

The trick is to keep the same directory structure on your hard drive as on the server. Then relative URLs will work in both places.

Or did you use Windows paths locally maybe? The ones with the backslashes? Don't do that. It just means trouble.

If you need it...
https://htmlhelp.com/faq/html/basics.html#relative-url
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 2nd December 2020 - 02:46 PM