Messages Inbox
How do I make an messages inbox?
A quick design of an inbox using absolute positioning and padding to make a fixed width div float along with a 100% width div. Also uses ul/li dropdown for CSS styling.. What is a messages inbox? How do you make a messages inbox? This script and codes were developed by Lauren on 18 September 2022, Sunday.
Messages Inbox - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Messages Inbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>messages</h1>
</header>
<div class="mailbox"> <div class="nav"> <a href="#">compose</a> <a href="#" class="active">inbox</a> <a href="#">starred</a> <a href="#">sent</a> <a href="#">drafts (1)</a> <a href="#">trash</a> </div> <div class="messages"> <input name="search" placeholder="search" /> <div class="actions-dropdown"> <label>actions <span>▼</span></label> <ul> <li>flag</li> <li>move</li> <li>delete</li> </ul> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> <div class="message"> <input type="checkbox" /> <span class="sender">lauren</span> <span class="date">today</span> <span class="title">hello world</span> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Messages Inbox - Script Codes CSS Codes
* { margin: 0px; padding: 0px; border: none; box-sizing: border-box;
}
html, body { background: #333B3D; font: 14px Tahoma, Geneva, sans-serif; width: 100%; height: 100%;
}
header { margin: 0px auto; position: relative; width: 90%; max-width: 960px; height: 100px;
}
header h1 { margin: 0px; padding: 50px 0px 0px; color: #EEE; font-size: 30px;
}
.mailbox { margin: 0px auto -100px; position: relative; background: #CCDDED; border-radius: 0px 5px 0px 0px; width: 90%; max-width: 960px;
}
.nav { position: absolute; top: 0px; bottom: 0px; background: #EEE; width: 200px;
}
.nav a { display: block; padding: 5px 10px; color: #3D9FC4; font-weight: bold; text-decoration: none;
}
.nav a.active { background: #CCDDED;
}
.nav a:first-child { margin: 10px 0px 10px;
}
.messages { padding: 10px 10px 10px 210px; width: 100%;
}
.actions-dropdown { display: block; float: right; position: relative; margin: 5px 10px 10px 0px;
}
.actions-dropdown label { padding: 5px 10px; background: #EEE; color: #666; border-radius: 5px; cursor: pointer;
}
.actions-dropdown label span { color: #999; font-size: 10px;
}
.actions-dropdown:hover ul { display: block;
}
.actions-dropdown ul { display: none; position: absolute; list-style: none; background: #EEE; border-radius: 5px; width: 100%;
}
.actions-dropdown li { padding: 5px 10px; color: #666; cursor: pointer;
}
.actions-dropdown li:hover { color: #000;
}
.actions-dropdown li:first-child { margin-top: 5px;
}
input[name=search] { display: block; float: right; margin-bottom: 10px; padding: 5px 10px; background: #EEE; font: 14px Tahoma, Geneva, sans-serif; border-radius: 5px;
}
input[name=search]:focus { outline: none;
}
.message { clear: both; margin-bottom: 5px; position: relative; padding: 5px; background: #bbd0e4; border-radius: 5px;
}
.message input { position: absolute; top: 8px; left: 10px; width: 30px;
}
.message .sender { display: block; position: absolute; left: 40px; color: #000; font-weight: bold; width: 90px;
}
.message .title { display: inline-block; padding-left: 150px; width: 100%;
}
.message .date { position: absolute; right: 10px;
}
Developer | Lauren |
Username | phantomesse |
Uploaded | September 18, 2022 |
Rating | 3 |
Size | 2,417 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Image Slider | 3,498 Kb |
Switching Images | 2,412 Kb |
Hover Map | 1,974 Kb |
Dissolving Block Art | 7,893 Kb |
Thumbnail Example | 2,687 Kb |
Mondrian Generator | 4,791 Kb |
Hover Buttons | 2,311 Kb |
Dropdown Menu | 4,216 Kb |
Multiple Choice Quiz | 4,864 Kb |
URL Parameter Extractor | 2,712 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Popover Example | Seanboom | 2,429 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Shopping List | Markmurray | 6,015 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Simple personal profile | Miroot | 2,856 Kb |
My three.js practice | Esambino | 3,203 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!