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
Related
I'm making a news webiste for my school project. I have a logo banner that hide when scrolling, after that there is nav-bar and sidebar which sticks to top after scrolling. But the main content is showing after the sidebar and not alongside it. Sidebar is fixed but the content is scrollable
HTML
`
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
</div>
<div class="sidebar">
<table class="match" >
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
</div>
<div class="main">
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
`
css
.logo {
height: 200px;
display: flex;
justify-content: center;
}
\#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
.sidebar {
width: 250px;
height: 100%;
position: -webkit-sticky;
position: sticky;
top: 60px;
background-color: red;
}
.main{
margin-left: 250px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
}
I tried many things like using a wrapper over sidebar and main content. but it didn't work.
full html https://pastebin.com/5rdiYdMa
full css https://pastebin.com/CHQDPVGY
Please check below working snippet
body{
background-color: #ddd;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
/*------LOGO------------------- */
.logo {
height: 200px;
display: flex;
justify-content: center;
}
/* -----------------NAV BAR-------------------------------*/
/* Add a black background color to the top navigation */
#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #e31e24;
color: white;
}
/*-----------------NAV BAR END-----------------------------*/
.content {
display: flex;
flex-wrap: nowrap;
}
/*-----------------SIDE BAR-----------------------------*/
.sidebar {
width: 250px;
height: 100%;
/* position: absolute; chnage this tro scroll*/
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.match {
margin-top: 10px;
width: 100%;
font-weight: bold;
color: white;
border-collapse: collapse;
border-spacing: 0;
}
.crest {
width: 40px;
height: auto;
padding: 10px;
/* center the image*/
display: block;
margin-left: auto;
margin-right: auto;
}
.teamA {
background-color: #e31e24;
/* border-radius: 20px 0px 0px 0px; */
}
.scoreA {
font-size: 20px;
font-weight: bolder;
background-color: #e31e24;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 20px 0px 0px; */
}
.teamB {
background-color: #0c5d9c;
/* border-radius: 0px 0px 0px 20px; */
}
.scoreB {
font-size: 20px;
font-weight: bolder;
background-color: #0c5d9c;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 0px 20px 0px; */
}
.sidebarnews {
width: 100%;
background-color: #0c5d9c;
height: auto;
padding: 0px;
color: white;
margin-top: 10px;
border-collapse: collapse;
border-spacing: 0;
/* border-radius: 20px 20px 20px 20px; */
}
.sidebarnews thead{
font-size: 20px;
}
.sidebarnews td{
height: 50px;
padding: 10px;
}
.sidebarnews tr:nth-child(even) td{
background-color: #0c5d9c;
}
.sidebarnews tr:nth-child(odd) td{
background-color:#e31e24;
}
/* ------------------------end sidebar-----------------------------*/
.main{
margin-left: 0px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
width: calc(100% - 250px);
}
article{
height: auto;
background-color: white;
padding: 10px;
margin-top: 10px;
/* border-radius: 20px 20px 20px 20px; */
box-shadow: 0px 0px 102px 0px rgba(0,0,0,0.5);
}
article h2{
font-size: 30px;
font-weight: bold;
}
article p{
font-size: 20px;
color: #313131;
}
article img{
width: 100%;
height: auto;
}
/* -----------------when screen width is small------------------- */
#media (max-width: 768px) {
.sidebar {
width: 96%;
height: auto;
position: relative;
padding-left : 10px;
}
.sidebarnews {
display: none;
}
.main {
margin: 0px;
padding: 0px;
}
.logo {
height: 100px;
}
.topnav {
display:none;
}
article h2{
font-size: 25px;
font-weight: bold;
}
article p{
font-size: 15px;
color: #313131;
}
}
<!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>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body class="body">
<!-- create a logo area in header -->
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<!-- create a logo area in header -->
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
<!-- searchbutton-->
</div>
<div class="content">
<!-- sidebar -->
<div class="sidebar">
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/spain.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/england.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="sidebarnews">
<thead>
<tr>
<th>LATEST NEWS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
</tbody>
</table>
</div>
<!-- main content -->
<div class="main">
<article>
<h2 >India's contenders for the 2023 ODI World Cup </h2>
<img src="images/news/team-india.jpg"></img>
<p>With many candidates for the final fifteen, the challenge for the hosts is to get their combinations right between now and the tournament</p>
</article>
<article>
<h2>Kuldeep Sen, Shahbaz to replace Dayal and Jadeja for Bangladesh ODIs </h2>
<img src="images/news/kuldeep.webp"></img>
<p>Pacer Kuldeep Sen and all-rounder Shahbaz Ahmed have been named as replacements for Yash Dayal and Ravindra Jadeja for the three-match ODI series against Bangladesh, the BCCI stated in a release on Wednesday (November 23). </p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
</div>
</body>
</html>
Here, I have Wrapped sidebar and main div into parent div.
Removed margin-left: 250px from main div and added this css:
.content {
display: flex;
flex-wrap: nowrap;
}
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;
}
I am beginner to web development. In fact, this is my second html page so its not very neat and tidy.
I have added three navigation links in the navigation header but all of them are lying outside the line and no matter what I can't fix them.
Can anyone help please? You can ignore the other code and check only navigation one.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
<style>
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 120px;
padding-top: 50px;
background-color: black;
margin-top: 25px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px 1px 25px 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th, td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
}
li a {
display: block;
color: #ffff00;
text-decoration: none;
float: right;
padding: 0px 20px;
margin: 0px;
position: relative;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="tab">
<div id="content">
<center>
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</center>
</div>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
I believe this is better :
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
<style>
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 130px;
padding-bottom: 50px;
background-color: black;
margin-top: 15px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th, td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
text-align: center;
width:100%;
}
li, li a {
display: inline;
color: #ffff00;
text-decoration: none;
padding: 0px 10px;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
</div>
<div id="tab">
<div align="center" id="content">
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</div>
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
These two setting should help you to get started:
nav {
float: right;
}
nav li {
display: inline-block;
}
The first one allows you to place the whole nav right of the image, the second one causes the li elements to be aligned horizontally instead of vertically (as they would be with their default display: block setting).
(Switch the snippet to full page view to see the proper result)
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 120px;
padding-top: 50px;
background-color: black;
margin-top: 25px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px 1px 25px 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th,
td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
}
li a {
display: block;
color: #ffff00;
text-decoration: none;
float: right;
padding: 0px 20px;
margin: 0px;
position: relative;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
nav {
float: right;
}
nav li {
display: inline-block;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
<nav>
<ul style="list-style-type:none;">
<li>Famous quotes</li>
<li>Some Famous Minions</li>
<li>Notable Minions</li>
</ul>
</nav>
</div>
<div id="tab">
<div id="content">
<center>
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</center>
</div>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.Click here to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.
Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.
If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).
For example:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
can be written as
margin:20px 50px;
Or the following:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
can be written as:
margin:50px 100px 20px;
Same thing goes for padding.
you can't use pixels to set margin!
you have to set margin of the main class to 50% of page height and width like this:
(to resolve problems change percent of size and margin to fit 100%)
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:50%;
padding-left:50%;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
img{
margin-left:50%;
}
html , body{
height:100%;
width:100%;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
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");
}