I am working on a project where we aren't allowed to touch the html, but instead, design a CSS page with flex box and whatnot to alter the design. The html code has links to other CSS page designs for this project with the design type, and the designer name. I want to put these two links in the same circle box. If you run the code, you'll see the design name and the designer name are in the same circle - how do I go about putting them in the same circle? I believe theres a way to without altering the html since the design is in "class="design-name" and the designer is in "class="designer-name". In the code, it looks like this:
body {
margin: 1%;
padding: 1%;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header {
background-color: red;
font-family: 'Playfair Display', serif;
font-family: 'Prata', serif;
}
header h1 {
font-size: 72px;
}
.design-name {
color: black;
}
.designer-name {
color: black;
}
.designer-name li a {
background: green;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-flex;
}
li a {
background: red;
box-shadow: black;
width: 120px;
height: 120px;
line-height: 115px;
border-radius: 50%;
display: block;
}
li a:hover {
transition-duration: 300ms;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata" rel="stylesheet">
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link href="zengarden.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</body>
</html>
Any guidance would be awesome!
Desired outcome, with both design name and designer being clickable links:
You can use the css of <a> to the <li>...
Also apply display:flex to the ul and li to adjust the alignment of inner items
Stack Snippet
body {
font: 13px Verdana;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
}
nav ul li {
background: red;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px;
color: #fff;
}
nav ul li a {
color: #fff;
}
nav ul li:hover {
transition-duration: 300ms;
background: black;
color: #fff;
}
nav ul li:hover a {
color: #fff;
}
<body id="css-zen-garden">
<div class="page-wrapper">
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
</nav>
</div>
</div>
</aside>
</div>
</body>
Related
I am creating a project in HTML,CSS & Flask. Whenever I check my nav bar in the live server 'justify content' is not working, I try to figure out via fixing the sizing of ul & li elements and I give main container 100% width but this way is also not working!
How can I solve and avoid these mistakes when we are using justify-content and also give some tips for using justify-content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document
</title>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
justify-items: flex-start;
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
<hr>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
Because you add <hr> tag inside <nav class="navbar">. so move it outside <nav class="navbar"> then it works.
You placed a extra hr inside .navbar. I removed it. You have a border-bottom for .navbar so you don't need to hr. Also, justify-items isn't a correct style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document
</title>
<style>
.navbar {
display: flex;
align-items: center;
border-bottom: 2px solid lightgray;
width: 100%;
justify-content: space-between;
/*justify-items: flex-start; (removed) */
}
.logo {
color: blueviolet;
font-size: 35px;
width: 110px;
}
.navitems ul {
display: flex;
align-items: center;
width: 350px;
}
li {
color: tomato;
font-weight: 500;
list-style: none;
text-decoration: none;
}
li a {
text-decoration: none;
color: tomato;
padding: 3px;
font-size: 19px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
xMu5<span class="titel">ic</span>
</div>
<div class="navitems">
<ul>
<li>
<a href="">
Home
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Services
</a>
</li>
<li>
<a href="">
Contact Us
</a>
</li>
<li>
<a href="">
About Us
</a>
</li>
</ul>
</div>
</nav>
<br>
<h1>
hi
</h1>
</body>
</html>
text-align: center;
Please use the text-align property to align the content to center
After I was done working on side bar I wanted to head to the content page to the right so I added a container div that I wanted to set to flex So that I make the two boxes to start styling, but right after adding it, the footer's position is ruined and the side bar isn't taking as much space as it should.
Here's a picture:
.side-bar {
font-family: 'Montserrat', sans-serif;
font-size: large;
font-weight: bold;
display: flex;
justify-content: left;
background-color: rgb(235, 235, 235);
width: 20%;
height: 80%;
flex-direction: column;
}
.side-bar ul {
display: flex;
flex-direction: column;
margin-left: 0%;
list-style: none;
margin-top: 5%;
}
.side-bar ul li {
margin-bottom: 10px;
display: inline;
cursor: pointer;
}
.togglable:hover {
border-radius: 7px;
background-color: rgb(216, 216, 216);
}
.togglable:active {
background-color: rgb(221, 221, 221);
}
.side-bar ul a {
color: black;
text-decoration: none;
}
.side-bar h2 {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 20px;
}
.container {
display: flex;
}
.task-container {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-bar">
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>Services</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</div>
<div class="container">
<div class="side-bar">
<ul>
<li class="togglable"><img src="gym.png" alt="gym" id="gym">Gym</li>
<li class="togglable"><img src="today.png" alt="calendar" id="today"> Today</li>
<li class="togglable"><img src="week.png" alt="calendar" id="week">This Week</li>
<li class="togglable"><img src="month.png" alt="calendar" id="month"> This Month</li>
<h2>Projects : </h2>
<li id="addPr" class="togglable"><span id="plus-sgn">+</span> Add Project</li>
<!-- <li class="togglable"><img src="checklist.png" alt="checlist" id="list"> Testing</li> -->
</ul>
</div>
<div class="task-container">
<p>Some Text To test the box</p>
</div>
</div>
<div class="footer">
<p id="copyright">Copyright © 2021 FaroukHamadi</p>
</div>
<script src="main.js"></script>
</body>
</html>
Add width attribute to task-contianer and add your fotter class attribute on your CSS file.
.task-container {
background-color: red;
width: 100%;
}
.footer{
position: absolute;
bottom: 0px;
width: auto;
}
I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!
First remove BR from ur html code this is bad idea to create vertical space use padding or margin.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
hope this help :D
Hi there you can use HTML to do that:
use the <center> tag, your code would become something like that:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact Us</li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
Please test it and let me now if it works :)
I am trying to build a simple website and i cannot figure out how to do a couple of things.
There is a nav bar, but it is stuck underneath the image at the top, how do i move it down?
I would like to arrange all of the ul's to be alongside each other, horizontally not vertically.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.nav a {
color: #ff0000;
font-size: 50px;
padding-top: 250px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 0px;
height: 350px;
}
.page h3 {
color: #000000;
font-size: 30px;
font-family: Calibri;
padding-top: 250px;
padding-left: 50px;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
.nav li {
display: inline;
left: 20px;
position: relative;
}
background:url(./image.png) no-repeat top center;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Well you can either change the jumbotron to position: relative/static
or
make the nav go down a bit:
.nav{
margin-top: 350px;
}
Regarding the uls:
ul {
text-align: center;
background: grey;
}
ul li {
display: inline;
}
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<ul>
Here's what I would do:
First move all of the jumbotron above the nav in the HTML. Set them both to display: block; if you need to.
For the uls, add
.page ul li {
display: inline-block;
}
or
ul li {
display: inline-block;
}
for all of them on the page