I am new to UI design, and I'm trying to create a tabbed layout.
All the tabs are on the center top, and then there are two divs on each other:
Blue Div
Red Div
The problem is with zooming in and out.
Zoom out misplaces all the tabs (tab F moves to another row).
Same sort of problem with zoom in: Content moves somewhere else apart from their original positioning
I just want the zooming to work the same as image zooming. The content should not move anywhere.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body,html {
height: 100%;
}
div.tabcontents {
padding: 1%;
background-color: black;
color: white;
height: 80%;
background-color: blue;
margin-left: 10%;
margin-right: 10%;
}
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: right;
}
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
padding: 0.5% 4%;
border: 1px solid white;
border-bottom-color: black;
color: white;
}
ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
background: black;
color: white;
}
ul.tabs li a {
text-decoration: none;
color: white;
}
</style>
</head>
<body bgcolor="black">
<ul class="tabs" style="margin-right: 19%">
<li id="admin" class="activeTab"><a>tabA</a></li>
<li id="admin" class="activeTab"><a>tabB</a></li>
<li id="admin" class="activeTab"><a>tabC</a></li>
<li id="admin" class="activeTab"><a>tabD</a></li>
<li id="admin" class="activeTab"><a>tabE</a></li>
<li id="admin" class="activeTab"><a>tabF</a></li>
</ul>
<div class="tabcontents">
<div style="height: 100%; background-color: red"></div>
</div>
</body>
</html>
Try Removing The Padding from the tab list
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
padding: 0.5% 4%; /*Remove This*/
border: 1px solid white;
border-bottom-color: black;
color: white;
your new CSS will be looks like
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
border: 1px solid white;
border-bottom-color: black;
color: white;
Also I made the following Changes:
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: center; /* Text made center*/
}
Removed the Style from
<ul class="tabs" style="margin-right: 19%">
now looks like <ul class="tabs">
The whole code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body,html {
height: 100%;
}
div.tabcontents {
padding: 4%;
color: white;
height: 80%;
background-color: blue;
margin-left: 10%;
margin-right: 10%;
}
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.tabs li {
position:static;
max-width: 80%;
display: inline;
margin: 3px;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
border: 1px solid white;
border-bottom-color: black;
color: white;
}
ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
background: black;
color: white;
}
ul.tabs li a {
text-decoration: none;
color: white;
}
</style>
</head>
<body bgcolor="black">
<ul class="tabs" >
<li id="admin" class="activeTab"><a>tabA</a></li>
<li id="admin" class="activeTab"><a>tabB</a></li>
<li id="admin" class="activeTab"><a>tabC</a></li>
<li id="admin" class="activeTab"><a>tabD</a></li>
<li id="admin" class="activeTab"><a>tabE</a></li>
<li id="admin" class="activeTab"><a>tabF</a></li>
</ul>
<div class="tabcontents">
<div style="height: 100%; background-color: red"></div>
</div>
</body>
</html>
Related
I am banging my head against a wall trying to add a dropdown menu to an existing menu bar and can't seem to get it to line up right without screwing up the existing menu, can anyone please just add a single dropdown to my menu so I can see what I have been missing? I believe I am not getting the position: absolute/relative correct or maybe it is the paddings?
This is my code:
html {
display: table;
margin: auto;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
max-width: max-content;
margin: auto;
}
td {
background-color: #FFF;
border:1px solid black;
padding: 5px;
}
table {
background-color: #FFF;
width: 100%;
border-collapse: collapse;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
hr {
border: none;
border-top: 1px solid #CCCCCC;
height: 1px;
margin-bottom: 25px;
}
#styletwo {
position: relative;
display: block;
height: 24px;
font-size: 11px;
font-weight: bold;
background: transparent url(bgOFF.gif) repeat-x top left;
font-family: Arial,Verdana,Helvitica,sans-serif;
width: 715px;
}
#styletwo ul {
position: absolute;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 715px;
}
#styletwo ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
#styletwo ul li a {
display: block;
float: left;
color: #000;
text-decoration: none;
padding: 6px 20px 0 20px;
height: 24px;
}
#styletwo ul li a:hover, #styletwo ul li a.current {
color: #fff;
background: transparent url(bgON.gif) repeat-x top left;
}
.center {
margin: auto;
width: 60%;
padding: 10px;
}
input[type=text] {
width: 100%;
# padding: 12px 20px;
# margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title </title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body align = "center">
<a href='index.php'> <img src='images/simplesmdrlogo.jpg'> </a>
<div id="menucase" align="center">
<div id="styletwo">
<ul>
<li><a href='results.php'>Search All</a></li>
<li><a href='user.php'>Extensions</a></li>
<li><a href='accountcodelist.php'>Account Codes</a></li>
<li><a href='trunk.php'>Trunks</a></li>
<li><a href='pbx.php'>PBX Configuration</a></li>
<li><a href='#'>Help </a>
</ul>
</div>
</div>
Figured it out, was not placing the new dropdown class I had created in the correct entry.
i am a 17 year old boy and recently new at using html and css ,i have been making a website and i am trying to add a drop down menu on my existing website but i am struggling to do so as everything , i want a drop down menu on my photos tab so that i can add some pictures and one in my "ABOUT" tab as well , i tried is not working , any help will be appreciated and welcomed. Thanks in advance
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
index.html
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="fr.png">
</div>
<ul class="main-nav">
<li class="active"> HOME</li>
<li> ABOUT</li>
<li> PHOTOS</li>
<li> CONTACT</li>
</ul>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
Does this help you?
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I didn't change too much of your code, just some designs and dynamics. Please sort your code later, it's a bit confusing.
CSS
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
padding-top: 10px;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
.float-right{
margin-left: 60%
}
.dropbtn {
background-color: #464;
border-radius: 5px;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
HTML
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row" style="">
<div class="logo">
<img src="fr.png">
</div>
<div class="float-right">
<!-- ++++++++ Home -->
<button class="dropbtn">Home</button>
<!-- ++++++++ About -->
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
<!-- ++++++++ Photos -->
<div class="dropdown">
<button class="dropbtn">Photos</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- ++++++++ Contact -->
<button class="dropbtn">Contact</button>
</div>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
I am trying to add a hover effect from Youtube Video
I tried for an hour, changed my code two times; where my original code was this:
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I removed the <div class="header"> etc and made it all <header> and such (Basically got rid of div)
I followed the video and until 14 minute mark it was okay, I understood what he was doing. After that stuff went downhill.
I added these to my code:
.navbar,
li
{
position: absolute;
display: inline-block;
}
and
.navbar,
li
a::before
{
content: '';
display: block;
height: 5px;
width: 100%;
background-color: red;
position: absolute;
}
and got this as a result:
Result
I am not sure how can I fix this as I am not that experienced. Would someone mind helping me? I am not sure if I should remake the site from scratch and just use <header>, <nav> etc instead of using divs and labeling 'similar' classes to them (class="header" etc)
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Use this CSS code and check your hover effect
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
I'm trying to create a shopping site for an assignment and having trouble with my index CSS3.
My second section (background of "Open Link") is not behaving as a block but as a full page. For example my picture is only partially viewable and the rest is hidden below
My "Open Link" button is flawed, I'm currently unable to add any sort of design to it as it messes with the section it is in (EG boxes don't work, they just bug out
Am I even creating the layout I want the correct way?
body{
margin: 0px;
padding: 0px;
font-family: tahoma;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #363377;
border-bottom: 1px solid white;
}
#design-top{
width: 100%;
height: 40%;
*background-color: #575594;
border-bottom: 1px solid white;
background-image: url(../img/bg2.jpg);
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
}
#design-bottom{
background-color: #333;
height: 56%;
}
#startbtn{
text-decoration: none;
color: white;
}
span{
display: block;
vertical-align: middle;
padding-top: 150px;
text-align: center;
}
#left{
float: left;
border-right:solid 1px #fff;
}
#right{
float: right;
}
li a{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#left:hover, #right:hover{
background-color: #555;
}
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left">Company</li>
<li id="left">Sales</li>
<li id="left">About</li>
<li id="left">Contact</li>
<li id="right">Cart</li>
<li id="right"><?php echo $_SERVER['REMOTE_ADDR']; ?></li>
</ul>
<div id="design-top">
<span><h1>Open Store</h1></span>
</div>
<div id="design-bottom">
</div>
</body>
</html>
So is it you are looking for vertically centering the open store text. If so, you can do it like this.
I've marked the changes in the code.
https://jsfiddle.net/8m5m8627/3/
body {
margin: 0px;
padding: 0px;
font-family: tahoma;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #363377;
border-bottom: 1px solid white;
}
#design-top {
width: 100%;
height: 150px; /*40%;*/
background-color: #575594;
border-bottom: 1px solid white;
background-image: url(../img/bg2.jpg);
background-size: cover;
background-size: 100%;
background-repeat: no-repeat;
display: table; /*added*/
}
#design-bottom {
background-color: #333;
height: 56%;
}
#startbtn {
text-decoration: none;
color: white;
}
span {
/*display: block;*/
/*padding-top: 150px;*/
text-align: center;
vertical-align: middle;
display: table-cell; /*added*/
}
#left {
float: left;
border-right: solid 1px #fff;
}
#right {
float: right;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#design-top h1 { /*added*/
margin: 0;
}
#left:hover,
#right:hover {
background-color: #555;
}
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left">Company</li>
<li id="left">Sales</li>
<li id="left">About</li>
<li id="left">Contact</li>
<li id="right">Cart</li>
<li id="right">
<a href="">
<?php echo $_SERVER['REMOTE_ADDR']; ?>
</a>
</li>
</ul>
<div id="design-top">
<span><h1>Open Store</h1></span>
</div>
<div id="design-bottom">
</div>
</body>
</html>
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}