I am trying to build a simple website and i cannot figure out how to do a couple of things.
There is a nav bar, but it is stuck underneath the image at the top, how do i move it down?
I would like to arrange all of the ul's to be alongside each other, horizontally not vertically.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.nav a {
color: #ff0000;
font-size: 50px;
padding-top: 250px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 0px;
height: 350px;
}
.page h3 {
color: #000000;
font-size: 30px;
font-family: Calibri;
padding-top: 250px;
padding-left: 50px;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
.nav li {
display: inline;
left: 20px;
position: relative;
}
background:url(./image.png) no-repeat top center;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Well you can either change the jumbotron to position: relative/static
or
make the nav go down a bit:
.nav{
margin-top: 350px;
}
Regarding the uls:
ul {
text-align: center;
background: grey;
}
ul li {
display: inline;
}
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<ul>
Here's what I would do:
First move all of the jumbotron above the nav in the HTML. Set them both to display: block; if you need to.
For the uls, add
.page ul li {
display: inline-block;
}
or
ul li {
display: inline-block;
}
for all of them on the page
Related
I have a unordered list in my HTML with 5 lists that all had with links on them that were working fine. It was working fine until I added another unordered list, but i have no links inside it. I even gave it a separate class.
Here is my markup/CSS:
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
}
ul li {
padding-left: 45px;
padding-right:45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight:bold;
color:grey;
}
a {
text-decoration: none;
color:white;
}
<div id="mainPage" >
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena </h1>
</div>
<ul id="select">
<li>
<a style="color:#ffe700;" href="#">Home</a>
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I've only added the code regarding the list and area of my problem.
Add position: relative; to ul, otherwise other elements are above it and prevent the link behavior.
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
/* added */
position: relative;
}
ul li {
padding-left: 45px;
padding-right: 45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight: bold;
color: grey;
}
a {
text-decoration: none;
color: white;
}
<div id="mainPage">
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;">Ice Arena</h1>
</div>
<ul id="select">
<li><a style="color:#ffe700;" href="#">Home</a></li>
<li>Gallery</li>
<li>Order Form</li>
<li>The Arena</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Try deleting the CSS property (position:absolute;) in line 3.
I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!
First remove BR from ur html code this is bad idea to create vertical space use padding or margin.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
hope this help :D
Hi there you can use HTML to do that:
use the <center> tag, your code would become something like that:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact Us</li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
Please test it and let me now if it works :)
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}
i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}
You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}
I'm trying to give a wrapper a background so that I can have an infinite sidebar. The background gets applied properly when I apple the same CSS rules to any other HTML element. It just won't work on .wrapper for some reason. Here's the HTML:
<html>
<head>
<title> Packard Carburetors </title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 id="banner">Packard Carburetors</h1>
</div><!--Header-->
<div id="navbar" class="green">
<ul id="navigation">
<li>HOME</li>
<li>PACKARD
<ul class="sub-nav">
<li>-1930 Speedster</li>
<li>-1929-31 Super 8</li>
<li>-Late 1931-32 Super 8</li>
<li>-1929-31 Standard 8</li>
<li>-Late 1931-32 Standard 8</li>
<li>-Rare Parts</li>
<li class="last">-745 Parts</li>
</ul>
</li>
<li>CADILLAC
<ul class="sub-nav">
<li>-1932-33 V12 & V16</li>
<li class="last">-1934-1937 V12 & V16</li>
</ul>
</li>
<li>SHOPPING CART</li>
<li>CHECK OUT</li>
<li>CONTACT US</li>
</ul><!--Navigation-->
<img id="#navbar-logo" src="img/logo.png">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">packardcarbs#gmail.com</p>
<p class="black center nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->
<div id="content">
<h1 class="green center bold">All Packard Carburetors 1929-'32</h1>
<h2 class="green center bold">1930 Speedster | 1929-32 Super 8 | 1929-32 Standard 8</h2>
<hr>
<h1 class="green center bold">Cadillac Carburetors</h1>
<h2 class="green center bold">1932 - 1937 V-12 & V-16</h2>
<img src="img./detroit-lubricator.png">
<div id="middle-column">
<ul id="feature-list-home">
<li>Silicone Bronze Investment Casting</li>
<li>Precision CNC Brass Machine Parts</li>
<li>Viton-Tipped Needles</li>
<li>Current Design
<ul id="sub-feature-list-home">
<li>-Needle Seats</li>
<li>-Pressure Valves</li>
</ul>
</li>
<li>Authentic Polished Brass Components</li>
<li>Gasoline and Ethanol Proof Exterior Coating</li>
<li>Exact Size as Original</li>
</ul>
<img id="middle-bar-spacer" src="img/divider-bar.png">
<div id="box-and-copy">
<img id="boxes" src="img/packard-boxes.png">
<p class="bold">All Components In-Stock!</p>
<p>Your Carburetor will be professionally assembled, engine tested and shipped quickly worldwide.</p>
</div><!-- Box and copy -->
</div><!--Middle Column -->
</div><!--Content-->
</div><!--Wrapper-->
</body>
</html>
And the CSS:
/*General styles*/
.wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
background-image: url('../img/body-bg.png');
background-repeat: repeat-y;
}
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
#content {
float: left;
width: 700px;
padding-left: 20px;
}
#banner {
display: inline-block;
text-indent: -9999px;
width: 940px;
height: 201;
background-image: url('../img/banner.png');
}
/* Nav Stuff */
#navbar {
width: 190px;
font-weight: bold;
font-size: 1.33em;
padding: 20px 20px 0px 10px;
float: left;
}
#navigation li {
padding-bottom: 20px;
}
.sub-nav{
font-size: .87em;
padding-top: 20px;
padding-left: 2.5em;
}
#navigation li ul.sub-nav li.last {
padding-bottom: 0px;
}
#nav-phone {
font-size: 1.19em;
padding-top: 15px;
}
.nav-small {
font-size: .75em;
padding-top: 5px;
}
/* Middle Column */
#middle-column{
width: 220px;
padding-right: 20px;
margin-top: 40px;
border-right: 2px solid #000000;
}
#feature-list-home {
list-style-image: url('../img/bullet.png');
font-size: 1.17em;
padding-left: 20px;
font-weight: bold;
padding-bottom: 40px;
}
#feature-list-home li {
padding-bottom: 20px;
}
#sub-feature-list-home {
padding-left: 10px;
}
#sub-feature-list-home li {
padding-bottom: 0px;
}
#middle-bar-spacer {
padding-bottom: 20px;
}
#boxes {
padding-bottom: 10px;
}
#box-and-copy {
font-size: 1.33em;
line-height: 1.5em;
text-align: center;
}
/* OOCSS properties */
.green{
color: #117041;
}
.black{
color: #000000;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
try to add:
overflow: auto;
to your wrapper class