This is what I'm trying to make
There are a couple reasons on why I'm having trouble making this, I can't put all of these tables in one big table since that will make the main box able to go through all the obstacles.
Here's the code for a simple level to show what I'm trying to do exactly:
Html:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title> Level 1 </title>
<link rel="stylesheet" type="text/css" href="Mohanned_Project.css" />
<style>
body {
background: blue;
background-size: cover;
}
</style>
</head>
<body>
<table>
<tr>
<th>
<img src="Obstacle_1.png" height="285px" width="1400px">
<img src="Box.png" id="Goat" align="left">
<img src="Win.png" align="right">
</th>
</tr>
</table>
<table style="padding: 0px 1300px 1300px 0px;">
<tr>
<th>
<img src="Obstacle_1.png" height="285px" width="1400px">
</th>
</tr>
</table>
</body>
</html>
Css:
#Goat {
position: sticky;
top: 300px;
left: 10px;
right: 10px;
}
#Goat_2 {
position: sticky;
top: 10px;
left: 10px;
right: 10px;
}
.btn{
color: #fff;
border: none;
margin: 5px;
padding: 10px 8px;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
border-radius: 10px;
transition: 0.4s;
transition-property: box-shadow;
}
.btn-primary{
font-size: 31px;
}
and heres the result: When you move the screen, the red box sticks to the borders and moves
I would really apprecciate advice on how do I set up the 2nd level since I've been trying for an hour and can't seem to figure it out
Stop using tables. Use divs. and flexbox.
.cafeteria {
display: flex;
flex-direction: column;
}
.first-row {}
.table-row {
display: flex;
}
.table {
width: 40px;
height: 200px;
border: 1px solid black;
background-color: brown;
}
.small-table {
align-self: flex-end;
width: 40px;
height: 100px;
background-color: brown;
}
.small-table.blue {
background-color: blue;
}
.small-table.green {
background-color: green;
}
<div class="cafeteria">
<div class="first-row">
<div class="small-table blue"></div>
</div>
<div class="table-row">
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table green"></div>
<div class="table">
</div>
</div>
</div>
Related
I am attempting to align the subheadings and body text on my webpage design (attached as a JPG) according to the specific locations I have indicated. I designed the page using Photoshop and am currently using pixel measurements to position the elements within a flex container in my CSS styles. However, I also want to implement a breakpoint that will alter the webpage's styling at a certain screen size. I am unsure if using pixel measurements is the best approach for this.
/*Universal selector-reset default*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Barlow, sans-serif;
}
/*nav flex box content*/
.navbar-container {
display: flex;
justify-content: space-between;
height: 64px;
width: 1365px;
background-color: #f9eaec;
border: 2px solid red;
}
.navbar {
height: 100%;
width: 100%;
}
#websiteName {
color: black;
font-style: Extrabold;
font-size: 18px;
align-items: center;
align-content: center;
height: 100%;
}
#logo {
left: 62.3px;
top: 6px;
}
.dropdown {
top: 26px;
align-items: flex-end;
}
/*body flex box content*/
.body-container {
display: flex;
height: 410px;
width: 693px;
margin: auto;
transform: translateY(115.6px);
border: 2px solid red;
}
#name {
font-style: Extrabold;
font-size: 59px;
left: 339.8px;
top: 179px;
border: 2px solid blue;
width: 276.2px;
}
#subname {
font-style: Extrabold;
font-size: 59px;
border: 2px solid blue;
width: 276.2px;
}
.subheading {
font-style: Extrabold;
font-size: 18px;
}
#subheadingOne {
margin-left: 317px;
border: 2px solid blue;
width: 156px;
}
#subheadingTwo {
margin-left: 561px;
border: 2px solid blue;
}
#chemistryLab {
border: 2px solid blue;
top: 149px;
left: 0px;
height: 235px;
width: 287.2px;
}
#down {
padding-top: 1000px;
}
#translations {
border: 2px solid blue;
font-style: Thin;
font-size: 14px;
margin-top: 61px;
margin-left: 317px;
}
#definition {
font-style: Thin;
font-size: 14px;
border: 2px solid blue;
margin-top: 158px;
margin-left: 317px;
}
.dropdown-content {
display: none;
}
#dropdown-btn:checked~.dropdown-content {
display: flex;
flex-direction: column;
top: 23px;
left: 1329px;
align-content: space-between;
gap: 20px;
margin: 20px 0;
}
.search-box {
position: absolute;
top: 23px;
left: 1197.8px;
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="periodictable.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<!--nav bar flex box-->
<div class="navbar-container">
<!--navbar general styling-->
<div class="navbar">
<!--navbar building blocks-->
<h3 id='websiteName'>EVERYTHING CHEMISTRY</h3>
<img id='logo' src="icon.png" alt="Hydrogen atom">
<div class="dropdown">
<input type="checkbox" id="dropdown-btn">
<label for="dropdown-btn" class="dropbtn">
<i class="fa-solid fa-bars"></i>
</label>
<div class="dropdown-content">
Home
About
Contact
</div>
<!--search box-->
<form class="search-box" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<!--body flex box-->
<div class="body-container">
<!--body general styling-->
<div class="body">
<div class="page-title">
<h1 id='name'>Periodic</h1>
<h1 id='subname'>Table</h1>
</div>
<img id='chemistryLab' src="Chemistry.JPG" alt="Chemist Lab">
<div class="subheading">
<h2 id='subheadingOne'>118 Elements</h2>
<h2 id='subheadingTwo'>7 Periods</h2>
</div>
<div class="body-text">
<p id='translations'>{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id='definition'>The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
</div>
</div>
</div>
<aside class="move-down"><i class="fa-solid fa-angle-down"></i>
</aside>
</body>
</html>
First of all if you have to align items using flex you must make the parent or container itself a flex in your case is subheading class. Which I don't think you do in your codes. Also the margin left and right in the subheadingOne and subheadingTwo is not supposed to be there since you using flex to align items.
So the codes should be like this
.subheading {
display: flex;
justify-content: space-between;
font-style: Extrabold;
font-size: 18px;
}
#subheadingOne {
border: 2px solid blue;
width: 156px;
}
#subheadingTwo {
border: 2px solid blue;
}
I have 2 monitors. The one is 24" and the other is my laptop's monitor (12.5"). A "div" (red box) in my web application can be shown on big monitor full height, but just part of it on my small monitor.
My question is why it displays differently on different size of monitor? Because all height settings in my css are percentage and I never used absolute number for the height. Why does the red box (div id is "scrollTable") show differently on different size of monitor? Because this issue, the dynamic table in this "div" cannot be shown completely even if the div is scrolled to the bottom. The row number of the dynamic table depends on Users' search result, maybe only 1 or 2 rows or maybe more than 30 or 40 rows sometimes. Please see the css and html below. Thanks for your help.
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 6%;
margin: 0px;
padding: 0.2px;
padding-left: 6px;
text-align: left;
vertical-align: central;
background: #8a1841;
color: papayawhip;
display: block;
}
#nsmap {
float: left;
left: 0;
width: 80%;
bottom: 0;
height: 94%;
}
#searchPanel {
padding: 3px;
float: right;
height: 94%;
width: 20%
}
#HomeButton {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
label {
font-size: 10px;
font-weight: bold;
text-align: center;
}
table.imagetable {}
table.imagetable tr td {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable tr:nth-child(even) {
background-color: #92c8da;
}
table.imagetable tbody tr:hover {
background-color: #EBECCD;
}
.cboWidth {
border: 1px solid #000000;
width: 100%;
}
.ccTable1 {
height: 77%;
}
#scrollTable {
border: 2px solid red;
max-height: 80%;
min-height: 80%;
width: 100%;
overflow-y: auto;
overflow-x: auto;
}
#StreetKey {
width: 100%;
}
.thirty {
width: 30%;
}
.twenty {
width: 20%;
}
.fifteen {
width: 15%;
}
thead {
visibility: visible;
}
.dijitButtonNode {
width: 160px;
height: 25px;
text-align: left;
font-size: 16px;
border: hidden;
}
.dijitButtonNode:hover {
font-weight: bold;
}
.center {
display: block;
margin-left: 52%;
width: 45%;
}
#tbPrint {
border: 0px;
padding: 8px;
min-width: 350px;
max-width: 350px;
}
.tdPrint {
border: 0px;
text-align: left;
padding: 0px;
font-size: 10px;
max-width: 140px;
min-width: 140px;
}
#trPrint {
background-color: white;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title> Online Map Book </title>
<header>
<h4>Online Map Guide Book</h4>
</header>
<div id="nsmap" style="background-color:whitesmoke">
</div>
<div id="searchPanel">
<form action="/action_page.php">
<label style="font-weight:bold;font-size:12.5px">Select Electoral District:</label> <br>
<select id="EDNum" name="EDNum" class="cboWidth"></select>
<br><br>
<label style="font-weight:bold;font-size:12.5px">
Select Polling Division: </label><br>
<select id="PDNum" name="PDNum" style="border:1px solid #000000"></select>
<br><br>
<div class="dropdown" style="width:100px">
<table id="tbPrint">
<tr>
<td><label style="font-size:12.5px">Print map or street key:</label></td>
</tr>
<tr id="trPrint">
<td class="tdPrint">
<button id="btnPrintGroup" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" disabled>
Print
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div id="btnPrint"></div>
</li>
<li>
<div>
<div class="dijitButtonNode" id="btnStKey" onclick="printStKey()" style="margin-left:10px">
Street Key
</div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</div>
</form>
<hr>
<div id="StreetKey" class="ccTable1">
<div style="font-size:14px; font-weight:bold"> Street Key </div>
<div id="scrollTable">
<table id="streetTable" class="imagetable " style="cursor: pointer;">
<colgroup>
<col class="thirty" />
<col class="twenty" />
<col class="fifteen" />
<col class="fifteen" />
<col class="twenty" />
</colgroup>
<thead>
<tr>
<th>Street</th>
<th>Town</th>
<th>Low No.</th>
<th>High No.</th>
<th>Order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
When you use 100% it means that you take the whole heigth os the div's parent. If you want to show your div always in the viewport, try using this units : vh
They mean: viewport height, so if you set the height:100vh, the div will always be fit to the viewport no matter what screen. :)
https://css-tricks.com/fun-viewport-units/
I'm realizing a new website. I have attached an image of how I would like it to be the base of my home page.
I ask you please what is the best method to create these three colored sections.
The first blue in which to insert the title.
The second light blue with black borders in which to include names.
And the rest light gray where I will add a table containing input boxes and below I will add the text.
I state that I have no problem formatting title, tables, texts, input boxes, etc.
I only can't get the effect of the three sections like in the image. I either tried to use div but I think it's not the best solution because I get unwanted margins.
How would you do?
Thanks :)
.div0 {
background-color: red;
margin-top: 0%;
margin-bottom: 0%;
}
.title1 {
font-family: Arial;
font-weight: normal;
color: black;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: 0%;
text-align: center;
bgcolor: red;
}
.td1 {
text-align: center;
}
.div1 {
background-color: blue;
margin-top: 0%;
margin-bottom: 0%;
}
<BODY>
<div class="div0">
<H1 class="title1">
Title
</H1>
</div>
<div class="div1">
<table width="96%" align="center">
<tr class="tr1">
<td class="td1" width="1/7">
Name1
</td>
<td class="td1" width="1/7">
Name2
</td>
<td class="td1" width="1/7">
Name3
</td>
<td class="td1" width="1/7">
Name4
</td>
<td class="td1" width="1/7">
Name5
</td>
<td class="td1" width="1/7">
Name6
</td>
<td class="td1" width="1/7">
Name7
</td>
</tr>
</table>
</div>
<div class="div2">
</div>
</BODY>
A minimal markup and css for something similar to that, using css grid and flexbox, would be more or less like this:
body {
margin: 0;
font-family: sans-serif;
}
.main {
display: grid;
grid-template-rows: 120px max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navbar__item {
flex-grow: 1;
padding: 6px 12px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
}
.content {
background: silver;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
</article>
</main>
I recommend you do a bit of studying about html5 semantic markup, to help you know where to use each kind of tag in their appropriate context.
It is not good practise using tables for the structure of a page. For a structure you may use display:flex or float:left. The first stylesheet removes differences between browsers and give some good readable default values for many devices. The second stylesheet is your styling (see below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<header id="header">
<h1 class="title1">Title</h1>
</header>
<nav id="nav">
<ul>
<li>Name1</li>
<li>Name2</li>
<li>Name3</li>
<li>Name4</li>
<li>Name5</li>
<li>Name6</li>
<li>Name7</li>
</ul>
</nav>
<main id="main">
<p>Your content</p>
</main>
<footer id="footer">
Footer
</footer>
</body>
</html>
And the css in file "style.css"
html, body {
height: 100%;
}
#page {
max-width: 100%;
min-height: 100%;
padding-top: 0.7%;
}
#header {
background-color: red;
}
#header h1 {
margin: 0;
text-align: center;
}
#nav {
background-color: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav::after {
display: block;
clear: both;
content: "";
}
#nav ul {
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
width: 14.2857%;
padding: 5px 0px 7px 0px;
text-align: center;
}
#main {
min-height: 5em;
padding: 12px 16px;
background-color: silver;
}
#footer {
text-align: center;
background-color: red;
}
My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.
.header1{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
#pic{
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
background-color: #333;
border-top-left-radius: 35%;
border-top-right-radius: 35%;
margin-left:2px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: green;
}
.navbar{
padding: 20px;
margin-top: 150px;
}
/* End nav bar */
.skin{
background-color: lightblue;
}
.table {
margin-top: 0px;
width: 100%;
}
.table .sidebar{
border-right: 2px solid black;
width: 20%;
}
.footer{
background-color: blue;
padding: 20px;
padding: 100px;
}
.left{
float: left;
display: block;
width: 40%;
color: gray;
border-right: 2px solid white;
border-color: gray;
padding-right: 70px;
}
.right{
float: right;
display: block;
width: 40%;
color: gray;
}
pre a{
font-family: helvatic, sanshrif;
font-size: 15px;
color: white;
}
pre a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
<meta charset="UTF-8"/>
</head>
<body>
<header class="header">
<div id="pic"> <img src="pics/saqib.png"/></div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Software</li>
<li>Contact Us</li>
<li>About us</li>
</ul>
</div>
</header>
<div class="skin">
<table class="table">
<tr>
<td class="sidebar">
This is sidebar
</td>
<td style="padding: 50px;">
<h1>My First Website</h1>
<p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
</td>
</tr>
<tr>
<th colspan="2">
<footer class="footer">
<div class="left">
<pre>Home | Software | Contact Us | About us</pre>
</div>
<div class="right">
The most important function of DBMS
is data processing. It includes creation,
storage and arrangements of data in database.
</div>
</footer>
</th>
</tr>
</table>
</div>
<body>
</html>
Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.
You can change in either one place to make it work:
In HTML:
<header class="header">
to:
<header class="header1">
or in CSS:
.header1 {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
to:
.header {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
It should be:
.header{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
I have several different sections in which I'm trying to center a set of tabs. One set of tabs I've tried to put in an unordered list and the other set I've tried with several <p> tags within a <div> but nothing seems to be working. I know others have had this problem but I haven't been able to find it so I apologize if this is a repetitive question.
I've tried <position: absolute>, <display: inline>, and others. I just can't seem to get it. Thanks in advance!
Also, they're not supposed to functioning tabs at the moment because I don't want to have to worry about jQuery right now, just supposed to look like them!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>STARSHIP CHRONICLES</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>STARSHIP CHRONICLES</h1>
<p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
</div>
<div id="ships">
<!--ships go here-->
</div>
<!--This section is the area for the tabs that attach to the boxinfo-->
<div id="tabs">
<ul id="tabs">
<li id="tabs">OVERVIEW</li> <!--link to div id="geninfo"-->
<li id="tabs">STATS</li> <!--link to div id="statsinfo"-->
<li id="tabs">IMAGES</li> <!--link to div id="imagesinfo"-->
<li id="tabs">CONTEXT</li> <!--link to div id="contextinfo"-->
</ul>
</div>
<!--need to figure out how to place different information in same box when click on separate tabs-->
<div id="geninfo">
<table>
<tr>
<td><p class="info">SHIP NAME:</td>
<td><span class="text">Recursant-Class Star Destroyer</span> </p></td>
</tr>
<tr>
<td><p class="info">ALLIANCE:</td>
<td><span class="text"> Commerce Guild</span> </p></td>
</tr>
<tr>
<td><p class="info">ORIGIN:</td>
<td><span class="text"> Star Wars</span> </p></td>
</tr>
<tr>
<td><p class="info">SIZE:</td>
<td><span class="text"> 1,187 meters </spam></p></td>
</tr>
</table>
</div>
<div id="bottommenu">
<!--This is the scale-->
<p id="length">0m-479m</p><p id="length">480m-1299m</p><p id="length">1300m-1999m</p><p id="length">2000m-4999m</p><p id="length">5000m+</p>
</div>
</div>
</body>
</html>
CSS
body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info {
margin-left: auto;
margin-right: auto;
position: relative;
}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
/*tab shape*/
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}
h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}
#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}
table {
padding: 0px;
margin: 0px;
line-height: 1px;
}
/*h2*/
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}
/*infotext*/
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}
#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}
#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}
To horizontally center p's within a div, you can make the parent div text-align: center;, and the inner p's display: inline-block;
Inside of #bottommenu, remove absolute positioning (there are better ways to place a footer), and add text-align: center
Many possible duplicates, such as this one