Login | Register | FAQ
Anonymous

How to style like this?

+ Post a reply

13 posts 1, 2


Re: How to style like this?

by Thianna » Wed Sep 09, 2020 3:10 am

Thanks for this forum, there are a lot of styles that you can do. The CSS background-color property defines the background color for an HTML element.
Roadside assistance Prince George
User avatar

Thianna

  • Posts: 6
  • Joined: Fri Aug 28, 2020 6:38 pm

Re: How to style like this?

by Tp24 » Wed Sep 30, 2020 8:59 am

Thianna wrote:This is really cool. I'm still learning about this. Thanks for sharing.
minneapolisstpaulrealtor.com



I think A List Apart already covered this many years ago: http://www.alistapart.com/articles/taminglists/

Vertical

(credit: A List Apart)

#related_links {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#related_links ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#related_links li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#related_links li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #related_links li a {
width: auto;
}

#related_links li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
<div id="related_links">
<ul>
<li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
<li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
<li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
<li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
</ul>
</div>
Run code snippetExpand snippet

Horizontal

Here's almost the same example that I've touched up with a few formatting changes.

#related_links {
background-color : #90bade;
color : #333;
font-family : Tahoma;
font-size : .7em;
padding : 1em;
}

#related_links li {
border-bottom : 1px solid #90bade;
list-style-type : none;
display : inline-block;
}

#related_links li a {
background-color : #2175bc;
color : #fff;
border-left : 10px solid #1958b7;
border-right : 10px solid #508fc4;
font-weight : bold;
padding : .5em;
text-decoration : none;
}

#related_links li a:hover {
background-color : #2586d7;
color : #fff;
border-left : 10px solid #1c64d1;
border-right : 10px solid #5ba3e0;
}

### If you don't want the background spanning the whole screen

#related_links, #related_links ul{
display : inline;
}
<div id="related_links">
<ul>
<li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
<li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
<li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
<li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
</ul>
</div>

Thank you

https://teslapress24.com
User avatar

Tp24

  • Posts: 1
  • Joined: Sat Sep 19, 2020 3:43 pm

Re: How to style like this?

by fulldrawconstruction » Mon Oct 26, 2020 11:54 am

check out w3school site, you can fins ideas in there. http://www.fulldrawconstruction.com/
User avatar

fulldrawconstruction

  • Posts: 1
  • Joined: Mon Oct 26, 2020 11:49 am


+ Post a reply

1, 2