Actually, I’m trying to create a website that has a vertical navigation bar on the left side and a notification bar on the right side. On the middle side, there will be contents. So the left and right sidebars will be fixed but the middle side or the content area will be scrollable.
I have tried something but I couldn’t make the right sidebar. I would really appreciate if anyone could help me with that.
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>Left Nav</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Profile</li>
<li><i class="fas fa-address-card"></i>About</li>
<li><i class="fas fa-project-diagram"></i>portfolio</li>
<li><i class="fas fa-blog"></i>Blogs</li>
<li><i class="fas fa-address-book"></i>Contact</li>
<li><i class="fas fa-map-pin"></i>Map</li>
</ul>
<div class="social_media">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="sidebar2">
<h2>Right Nav</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Profile</li>
<li><i class="fas fa-address-card"></i>About</li>
<li><i class="fas fa-project-diagram"></i>portfolio</li>
<li><i class="fas fa-blog"></i>Blogs</li>
<li><i class="fas fa-address-book"></i>Contact</li>
<li><i class="fas fa-map-pin"></i>Map</li>
</ul>
<div class="social_media">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
</div>
</div>
</div>
</body>
</html>
CSS--
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 200px;
height: 100%;
background: #000000;
padding: 30px 0px;
position: fixed;
}
.wrapper h2{
color: #bdb8d7;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #fdfdff;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
Trying to make something like the picture.
sidebar2 has to be like just like sidebar but adding the right: 0 property:
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body {
background-color: #f3f5f9;
}
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar {
width: 200px;
height: 100%;
background: #000000;
padding: 30px 0px;
position: fixed;
}
.wrapper h2 {
color: #bdb8d7;
}
.wrapper .sidebar2 {
width: 200px;
height: 100%;
background: #000000;
padding: 30px 0px;
position: fixed;
right: 0;
}
.main_content {
padding: 0 210px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>Left Nav</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Profile</li>
<li><i class="fas fa-address-card"></i>About</li>
<li><i class="fas fa-project-diagram"></i>portfolio</li>
<li><i class="fas fa-blog"></i>Blogs</li>
<li><i class="fas fa-address-book"></i>Contact</li>
<li><i class="fas fa-map-pin"></i>Map</li>
</ul>
<div class="social_media">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="sidebar2">
<h2>Right Nav</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Profile</li>
<li><i class="fas fa-address-card"></i>About</li>
<li><i class="fas fa-project-diagram"></i>portfolio</li>
<li><i class="fas fa-blog"></i>Blogs</li>
<li><i class="fas fa-address-book"></i>Contact</li>
<li><i class="fas fa-map-pin"></i>Map</li>
</ul>
<div class="social_media">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
<div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
</div>
</div>
</div>
</body>
</html>
You need to add this code for sidebar2
.wrapper .sidebar2 {
position: fixed;
right: 0px;
background: black;
padding: 20px;
height: 100%;
width: 180px;
}
.wrapper .main_content {
width: 100%;
margin-left: 200px;
margin-right: 180px;
}
and then do flex for left and right with flex-direction:column
#container {
display: flex;
justify-content: space-between;
height: 100vh;
}
body,
html{
margin: 0;
padding: 0;
}
#left,
#right {
background-color: gray;
width: 15%;
}
<div id='container'>
<div id='left'></div>
<div id='middle'></div>
<div id='right'></div>
</div>
.sidebar {
display: flex;
position: fixed;
top: 0;
left: 0;
}
Do the same for sidebar 2, just change with right: 0;
You may also need to change the flex-direction to your needs.
Related
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
I am trying to make a start page of sorts, and I want it to look somewhat like this: https://imgur.com/zjzKyRD (poorly made, but the program I used was really bad(I miss mspaint))
I originally used buttons, which made it really easy to link and customise, but I had some issues with size, so I tried with a div, but I can't seem to make the whole div box a clickable link. If I am able to figure that out, I still need to place the boxes in specific places and I have no idea how.
The question: How can I make these boxes, place them in a grid like formation and have them link to different sites? Would it also be possible to make a function where I can hover over one of the "sites" and it would show me some information about it? (manually entered)
Please keep in mind I'm really new to this, so an explanation would be nice :P Thanks.
Edit: Didn't include any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
Google
Thats just one of the buttons, but the others are basically the same, but with different links, margins and colours(colors?).
When using multiple boxes they appear below each other, not besides each other. I have messed around with a bunch of different margin settings, a few things I found online when browsing around but nothing seems to align them properly.
First of all I'd suggest that you use some grid framework, such as Bootstrap or Foundation. Nobody writes websites in plain HTML anymore.
Secondly, I think you can use the a-tag and change the css so that it's an inline-box. Especially if you're only going to use them as links and not do anything fancy (such as some dynamic animations). You should probably have a container class around those to represent a row. As follows:
<div class="container">
<a class="linkbox" href="link1"> Link 1 </a>
<a class="linkbox" href="link2"> Link 2 </a>
<a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
<a class="linkbox" href="link4"> Link 4 </a>
<a class="linkbox" href="link5"> Link 5 </a>
<a class="linkbox" href="link6"> Link 6 </a>
</div>
Check out this fiddle with accompanied css https://jsfiddle.net/wwk4tyzw/2/
Just because it's probably going to be more relevant in the future i want to throw this in here: https://drafts.csswg.org/css-grid/
You can view my site live here.
I'm fairly new at designing responsive websites and I'm trying to develop my coding skills. I am trying to make sure that my main navigation and site title look consistent across all screen sizes. However I'm having issues with setting up the CSS properly. I'm usually quick with finding a solution, but for some reason I can't get the result I want to achieve.
The plan is to align the site's title and the navigation below each other and although there numerous ways of doing that, I can't seem to figure out the best practice.
It currently looks messed up and the navigation is being cut off at certain edges. I've tried adding more and removing padding to/from the responsive stylesheet rules.
Current Screenshot
My current navigation looks like this:
CURRENT MARKUP
/*** CURRENT CSS ***/
.title {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
padding:10px;
text-transform:uppercase;
letter-spacing:2px;
color:#00e9d9;
margin-right:232px;
}
#navigation {
background-color:#18161d;
padding-top:4px;
padding-bottom:4px;
font-size: 13px;
letter-spacing:2px;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-weight:700;
font-size:13px;
z-index:1;
overflow:hidden;
color:#00e9d9;
margin-bottom:25px;
}
<!-- CURRENT HTML -->
<div id="navigation">
<span class="title">KATERINA GRAHAM WORLD</span>
<i class="fa fa-home"></i> Homepage
<i class="fa fa-info-circle"></i> Information
<i class="fa fa-camera"></i> Photo Archive
<i class="fa fa-desktop"></i> Website
<i class="fa fa-align-left"></i> Online
</div>
Solved the issue. I didn't think it'd be necessary to create a styling for mobile screen sizes because I thought adding a max-device-width would tell the browser what I wanted 'cause I gave it a max. I should've been way more specific about it and making sure the code DOES have styling for smaller screen sizes zo I added this:
/*------------------------------------------
450px Media
------------------------------------------*/
#media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
_#header {
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}
.title {
padding:10px !important;
width:100% !important;
display:block;
}
#navigation a:link {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:active {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:visited {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:hover {
display: block;
margin: 3px;
padding: 10px !important;
}
}
Instead of entirely customising your container, customise the links as well.
E.g.
a {
padding:7px;
margin:0 8px;
color:#00e9d9;
background:#00e9d9
}
I think that you should refer to this answer on this previous question Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
I really do recommend that you read a little about Design Fundamentals and also read about responsive web design. Here is a few articles to get you started: HTML Responsive Web (W3) and Responsive Web Design: What Is It and How To Use it (Smashing Magazine)
Designing a good, user-friendly responsive website takes time and planning. Personally I like to design each element at a time (e.g I'll design the generic desktop header element then redesign or tweak it for tablet and mobile. Then I'd do the same for the footer and site content.)
Basically I'm creating a spry menu, but can't seem to get this 10x10px image to sit next to a menu item. Photoshop ex:
Without seeing your code, it is impossible to know how you're trying to implement it. However, for these types of icons it's often easier to just use something like font-awesome. Here is a JSFIDDLE of it being very easy implemented with font-awesome. http://jsfiddle.net/JfGVE/448/
<a class="navlink">
Design <i class="fa fa-angle-down"></i>
</a>
#import 'http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css';
.navlink {
font-family: verdana;
font-size: 40px;
font-weight: 100;
}
.navlink i {
font-size: 30px;
}
I am new in HTML & CSS. I learned web design using table tags. Now i am learning table-less design using div tags. I am now converting my old designed website to new one using div tags. I am having a problem in my design. I am posting table tag which is working fine and new code in div tag which is not accurate as old one. Kindly tell me where I am having mistake.
New design which is working fine:
Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/
New design which is not accurate as old:
Visit http://jsfiddle.net/rizwan1969/8vpyk815/
How can I achieve the same look without using tables?
you're sorta close, when you're using divs, you have to be careful of what you put on the outside divs, because they also hold true for the inner divs, so what you want is something like this:
#right_col {
width:260px;
/* padding:5px; */
background-color:#999900;
float:left;
line-height:18px;
font-size:12px; color:#FFFFFF; text-align:justify
}
#heading
{
font-size:16px;
color:#FFFFFF;
padding:10px;
background-color:#030;
display:block;
}
.content {
padding:7px;
}
and add a content div to separate the header from the text:
<div id="right_col">
<strong id="heading">QUAID'S MESSAGE</strong>
<div class="content">
<img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them."
</div>
</div>
heres the fiddle: http://jsfiddle.net/8vpyk815/2/
you also should be careful of all the random paddings cause they can make working with elements inside other elements difficult