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>
Related
The problem arises once I shrink the window down under 500px; I created a media query to change size depending on the size of the display. Unfortunately upon doing this, all the menu items seem to float to the left and there is too much empty space making things unbalanced. I've tried various centering methods but can't identify the issue. As always, help is greatly appreciated. Here are my html css work files:
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
.wrapper {
min-height: 100%;
min-width: 100%;
display: inline-block;
position: relative;
}
body{
height: 100%;
background-size: cover;
background-repeat: no-repeat; background:url("https://images.pexels.com/photos/1054198/pexels-photo-1054198.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
}
.imagebox {
margin:0px auto;
width:800px;
}
.banner {
font-size: 18px;
background:rgba(0, 33,33, .3);
color:aliceblue;
}
h2{
padding:10px;
background: #646ecb;
min-width: 500px;
color:#f0f1f5;
font-size: 30pt;
text-align: center;
}
.Logo {
text-align: center;
height: 130px;
width: 260px;
}
hr.style-one {
border: none;
height: 1px;
min-width: 500px;
margin:20px auto;
background: #333;
background-image: linear-gradient(to right, #646ecb, #fff, #646ecb);
}
.navbar {
background: teal;
height: 40px;
width:700px;
display: block;
margin:0 auto;
text-align: center;
font-size: 14px;
font-weight: bold;
border-bottom: 4px solid aliceblue;
}
nav ul {
list-style: none;
display: block;
color:aliceblue;
font-family:arial;
font-size:18px;
}
nav a {
display: inline-block;
text-decoration:none;
font-weight: bold;
font-size: 20px;
color: aliceblue;
}
nav a:hover {
color: #a2f3fe;
;
}
nav ul li:hover ul li {
display:block;
background: teal;
}
nav ul li {
float:left;
width:140px;
height: 40px;
line-height: 40px;
}
nav ul ul li{
position: relative;
display:none;
}
h3{
text-align: center;
font-family:"Pathway Gothic One";
color:aliceblue;
margin:10 auto;
text-shadow: 1px 2px rgba(0,0,0,.1);
padding: 5px;
min-width: 700px;
font-size: 20pt;
letter-spacing: 2px;
}
article{
margin:20px 20px;
text-align: center;
}
fieldset
{
height: 20%;
width: 70%;
background: rgba(0,0,0,.4);
text-align:center;
margin:auto;
color:;
}
#media (max-width: 500px) {
body {
background:url("https://c.pxhere.com/photos/07/83/adult_background_beach_black_sand_brunette_clear_sky_coast_coastline-1527307.jpg!d");
background-size: cover;
background-repeat: no-repeat;
height:100%;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
h2{
padding: 20px;
background: #646ecb;
font-size: 30px;
text-align: center;
}
.Logo {
text-align: center;
height: 60px;
width: 120px;
}
fieldset
{
height: 25%;
width: 70%;
background: rgba(0,0,0,.4);
text-align:center;
margin:auto;
color:red;
}
.imagebox {
width: 700px;
margin:0 auto;
text-align: center;
}
h3 {
font-size:14px;
font-family:"pathway gothic one";
line-height:10px;
}
hr.style-one {
border: none;
height: 1px;
min-width: 400px;
background-image: linear-gradient(to right, #646ecb, #fff, #646ecb);
margin:4px auto;
}
.navbar {
background: teal;
height: 30px;
width:400px;
display: block;
font-size: 12px;
font-weight: bold;
border-bottom: 4px solid darkorchid;
}
nav ul {
list-style: none;
display: block;
color:aliceblue;
font-size:12px;
}
nav a {
display: inline-block;
text-decoration:none;
font-weight: bold;
font-size: 12px;
color: aliceblue;
margin:0px;
}
nav a:hover {
color: #a2f3fe;
;
}
nav ul li:hover ul li {
display:block;
background: teal;
}
nav ul li {
float:center;
width:70px;
height: 30px;
line-height: 30px;
}
nav ul ul li{
position: relative;
display:none;
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/maintravel.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
<title>Round-a-Whirl</title>
</head>
<body>
<div class="wrapper">
<header>
<div></div>
<h2><img src="HatchfulExport-All/linkedin_banner_image_1.png" height=75 width="auto" class="Logo"></h2>
</header>
<div class="navbar">
<nav>
<ul>
<li><i class="fa fa-plane"> </i> Flights</li>
<li><i class="fa fa-hotel"> </i> Hotel</li>
<li><i class="fa fa-car"> </i> Rental</li>
<li><i class="fa fa-globe"> </i> Discover
<ul>
<li> Vacation</li>
<li> Cruise</li>
<li> City</li>
<li> Nature</li>
<li> Getaways</li>
</ul>
</li>
<li><i class="fa fa-tag"></i> Deals </li>
</ul>
</nav>
</div>
<hr class="style-one" width="20%">
<h3>Don't travel in Whirl! Find flights and compare</h3>
<hr class="style-one" width="20%">
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<article>
This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
<br /><br />
<p class="banner">Check out our all inclusive vacation packages!</p>
</article>
<fieldset>
<form>
Origin:<input type="text" name="Origin">
Destination:<input type="text"><br /><br />
Depart:<input type="date">
Return:<input type="date">
</form></fieldset>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
#media (max-width: 500px)
nav ul li {
float: left;
width: 103px;
height: 30px;
line-height: 30px;
text-align: center;
}
.navbar {
width: 100%;
}
hope this will help you
How can I increase the width of an element in HTML when someone hover on that element.
I wrote some code for that animation using CSS but I am not getting the expected result.
Here's what I am getting when I hover on that element:-
image.gif
Here's what I want:-
image
here is my code:-
HTML:-
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="animations/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li><a class="active" href="#home">Home</a></li>
<li>blog</li>
<li>subjects</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
CSS:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("../images/index/header/header.jpg");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li {
float: center;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
}
#subjects_nav li a:hover {
animation-name: subject_animation;
animation-duration: 1s;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/physics.jpg");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/chemistry.jpg");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/maths.jpg");
background-size: cover;
}
#space {
list-style: none;
}
(ANIMATION) CSS :-
#keyframes subject_animation {
from {
width: 80%;
}
to {
width: 90%;
}
UPDATE - 1:-
i used this code in CSS transform: scale(1.2, 1); but it stretch the images and make them look ugly and i only want transformation in x-axis so i used transform: scaleX(1.4); this also stretch the image
Think differently and instead of changing the width change the margin to make them negative values. You can also use transition instead of animation:
By the way there is no float:center, you need to correct this on your code.
Here is the relevant part of the code to show the result:
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border: 3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -30px;
}
#physics_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/1000/");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/800/1000/");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/600/");
background-size: cover;
}
#space {
list-style: none;
}
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
So my website shows the images in google chrome but not in firefox! Anyone who can help? It only shows the background image in firefox! I've tried many things but nothing works for me. Anyone who can help :D
website: http://z16-zacho.it.slotshaven.dk/html/index.html
body {
background-color: transparent;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
margin:0px 0px 0px 0px;
}
h1, h2 {
color: black;
text-align: center;
}
h1 {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
border-radius: 100px;
display: table;
margin: 0 auto;
margin-bottom: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
}
h3 {
text-align: center;
color: black;
font-size: 24px;
}
p {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
color: black;
font-size: 24px;
font-weight: bold;
}
span {
color: rgb(16, 140, 206);
}
ul {
list-style-type: none;
margin-top: -3px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#boks1 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: left;
background-color: white;
overflow: hidden;
}
#boks2 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: right;
background-color: white;
overflow: hidden;
}
#background {
background-image: url(../billeder/background.jpg);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img-me {
content: url(../billeder/billede_af_mig.jpg);
width: 300px;
height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
float: center;
margin: 0 auto;
display: table;
}
#head {
content: url(../billeder/head.png);
margin-bottom: 3px;
background-color: rgb(238, 242, 254);
height: 0 auto;
max-width: 100%;
float: center;
margin: 0 auto;
display: table;
}
#facebook {
content: url(../billeder/fb.png);
width: 16px;
}
#instagram {
content: url(../billeder/instagram.png);
width: 16px;
}
#twitter {
content: url(../billeder/twitter.png);
width: 20px;
}
#snapchat {
content: url(../billeder/snap.png);
width: 16px;
}
#normalP {
font-size: 16;
font-weight: normal;
text-align: left;
border-style: none;
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 0px;
opacity: 1;
color: black;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="../css/frontpageStyle.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<title>Zacool site</title>
</head>
<body>
<body id="background"></body>
<header>
<a href=" (link here was url shortened so i removed it) " target="_blank">
<div id="head"></div>
</a>
<ul>
<li><a class="active" href="index.html">Forside</a></li>
<li>Min valgfrie ting</li>
<li>Kronik</li>
<li><a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"></a></li>
<li><a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"></a></li>
<li><a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"></a></li>
<li><a id="snapchat" href="snap.html" target="_blank"></a></li>
<li>Slotshaven</li>
</ul>
</header>
<h1>Velkommen! Denne side er kodet af <span id="header-shadow">Tobias Zacho</span></h1>
<div id="img-me"></div>
<p>↓ <span>Scroll ned for mere info</span> ↓</p>
<body>
<div id="background"></div>
<div style="height:0px;background-color:transparent;"><!-- Lavet så man får scrolling effekten! --></div>
</body>
<div id="boks1">
<h3>
Hvem er jeg?
</h3>
<p id="normalP">
Test
</p>
</div>
<div id="boks2">
<h3>
Overskrift
</h3>
<p id="normalP">
Test
</p>
</div>
</body>
</html>
Try changing #head on your CSS:
#head {
background-image: url(../billeder/head.png);
background-color: rgb(238, 242, 254);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 15vh; /* 15% of the screen's height */
}
The way you set it, it doesn't have a defined height, and different browsers interpret that in different ways.
Also, a thing to note: on small width screens, that header image looks quite small. Try cutting a bit of that whitespace on the .png to give it some space!
And lastly, this is one solution to it. If you're ever unsatisfied, there surely are other ways to accomplish what you're looking for!
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>
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;
}