please see the code its working fine until am zooming the page...after zooming page the page gets distorted with its horizontal menus coliding together please seee the code it would be great if anybody can tellme what "not to do " instead just providing correct css part for this i am new in this and want to learn aspects rathern than copying from various sources
here is the CSS part ..
body{ background-color:#603}
div#hor ul{ position:relative; left:16%; }
div#hor li,div#ver li{ float:left;list-style-type:none; background-color:#603; border-radius:22px; margin:5px; }
div#hor a,div#ver a{text-decoration:none;
padding-left:32px; padding-right:32px;
font-family:"Comic Sans MS", cursive;
line-height::100px;padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 40px;
color:#fff;
}
div#hor a:hover{background-color:#fff;color: #603;border-radius:22px;
}
div#hor a:focus{background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
}
div#ver{ position:relative; top:100px;}
div#ver ul{ position:relative; left:-50%; float:left; }
div#ver li{ float:none; margin-bottom:20px;}
div#ver a:hover,div#ver a:focus{border-radius:22px;background-color:#fff;color: #603}
div#ver a:focus{ font-weight:bold; }
# here is the html part ...#
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<div id="hor">
<ul>
<li >Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="ver">
<ul>
<li >Java</li>
<li>Php</li>
<li>Asp.net</li>
<li>Android</li>
<li>Iphone</li>
</ul>
</div>
</body>
</html>
All of your div settings are in px, which means pixels. Pixels don't scale if, for example, a user makes the text larger, because a pixel on their screen is still the same size. If you size divs in em, meaning 'the width of the letter m in the current font' or % things should scale better. Also, once you're comfortable using CSS, try using a framework such as Twitter bootstrap to make your life easier.
Check this CSS and HTML
and just replace it with the existing one and please tell me
body
{
background-color:#603;
}
.page
{
width:960px;
margin:0px auto 0px auto;
}
.clear
{
clear:both;
}
div#hor
{
}
div#hor ul
{
list-style-type:none;
}
div#ver
{
float:left;
}
div#hor li
{
float:left;
background-color:#603;
border-radius:22px;
}
div#ver
{
}
div#ver li
{
list-style-type:none;
background-color:#603;
border-radius:22px;
margin:5px;
}
div#hor a,div#ver a
{
text-decoration:none;
padding-left:32px;
padding-right:32px;
font-family:"Comic Sans MS", cursive;
line-height:100px;
display: block;
line-height: 40px;
color:#fff;
}
div#hor a:hover
{
background-color:#fff;color: #603;border-radius:22px;
}
div#hor a:focus
{
background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
}
div#ver
{
//position:relative; top:100px;
}
div#ver ul
{
position:relative;float:left;
}
div#ver li
{
//float:none; margin-bottom:20px;
}
div#ver a:hover,div#ver a:focus
{
border-radius:22px;background-color:#fff;color: #603
}
div#ver a:focus
{
font-weight:bold;
}
//Html Part//
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<div class="page">
<div id="hor">
<ul>
<li >Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="clear"></div>
<div id="ver">
<ul>
<li >Java</li>
<li>Php</li>
<li>Asp.net</li>
<li>Android</li>
<li>Iphone</li>
</ul>
</div>
</div>
</body>
</html>
Related
This is the code I wrote and I don't know what I did wrong, I'm trying to recreate this interface but all the content just disappears, the only thing that shows is a white rectangle on the top of the page...
This makes no sense to me and I don't know how to address it
website taken from oswd.org
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>Bookish recreated by LuckyP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=viewport-width, initial-scale=1.0">
<meta name="author" content="Luca Santarelli">
<meta name="description" content="Come to see the first practice website by LuckyP,
commonly called Lucio, depending on the platform you watch him on">
<meta name="robots" content="index">
<meta name="keywords" content="bookish, real web development project">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:"trebuchet ms", helvetica, sans-serif;
background-image: url(images/bg.gif);
}
#wrap{
background-color:white;
padding:15px;
margin:auto;
width: 800px;
}
.orange-text{
color:#D97900;
}
.bold{
font-weight:bold;
}
header{
position:relative;
background-image: url(images/headbg.gif);
background-repeat: repeat-x;
width:770px;
}
h1{
position:absolute;
left:40px;
bottom:15px;
}
header ul{
position:absolute;
right:30px;
bottom:15px;
}
header ul li{
color:#fff;
text-decoration:underline;
border-right:#D97900;
float:left;
padding: 10px;
}
header ul li:hover{
background-color:#D97900;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1><span class="orange-text">my</span><span class="bold">website</span>name</h1>
<ul>
<li>homepage</li>
<li>recent articles</li>
<li>about us</li>
<li>contact us</li>
</ul>
</header>
</div>
</body>
</html>
This is the output:
Remove "bottom:15px;" from H1 and "header ul".
I'm mocking up a site as an assignment and my text is appearing behind my nav bar. I need it to be under the nav bar how can I fix this?
so I've tried setting the margin-bottom to 50px and setting it as important.
I've tried setting the nav bar as static.
I've tried messing with a bunch of different settings as well but I can't seem to find something to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
Because your nav is position: fixed;, it doesn't push the rest of your content down the page. Anything absolutely positioned, be it absolute,sticky, or fixed, is not a part of the DOM in the same way that a normal element is. To non-absolute positioned elements it may as well not exist. What you want to do is add a margin-top to your content like this:
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
body{
margin-top: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" />
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
</html>
I want to take this navigation bar up( on alignment of middle of the logo). How to do this?
I am new to html/css as well new to stack overflow.
You can use the HTML5 <nav> tag, and FlexBox box model to achieve this.
Here is the a live DEMO.
HTML:
<nav>
<img src="path/to/my/logo" width="180" height="100%">
home
gallery
about us
contact
</nav>
CSS:
body{
margin: 0 !important;
}
nav{
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(21, 138, 194);
}
nav > a{
margin: 0 1em;
display: flex;
color: #036088;
text-transform: capitalize;
text-decoration: none;
}
nav > a:hover{
color: white;
}
What I usually do is capture page elements within div tags and play with margins...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.bar{
margin-left: 150px;
margin-top: -95px;
}
.abc {
width:600px;
height:120px;
background-color:yellow;
position:absolute;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div>
<div class="bar">
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
want something like this right? :)
In your CSS, you can set the margin of your page to 0, making the elements on the very border of the page.
Add like below :
*{
margin:0px;
}
This will set all the content of your page with a 0 margin. The * selector matches every element in your html page.
Set the 'vertical-align' property on the image in the navbar to 'middle'.
This will align any other inline elements next to that image relative to the image's vertical center.
This link describes how the vertical-align property works https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul {
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
/* THIS IS THE ONLY NEW CODE */
.abc img {
vertical-align: middle;
}
<body>
<div class="abc">
<img src="http://lorempixel.com/400/200/" width="180" height="120" />
<ul>
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
I'm trying to make a drop down menu (class is "scenemenu") that appears when I hover over the li class "scenebutton". However, I'm not sure of the CSS selector I'm using is correct. Can somebody help me fix it please? Here is my code.
#charset "utf-8";
/* CSS Document */
body{
background-color:#000;
background-image:url(Pictures/Plundergem-Title.png);
background-repeat:no-repeat;
background-position:50% 0%;
height:1500px;
}
.menu-list{
list-style-type:none;
color:#E92A27;
font-family:"Mayan Font";
font-size:36px;
}
.menu-list li{
cursor:pointer;
}
.menu-list li:hover{
background-color:#E92A27;
color:#000;
}
#font-face{
src:url(CFCivilisationMaya-Regular.ttf);
font-family:"Mayan Font";
}
.menu-block{
width:200px;
position:fixed;
top:200px;
left:-23px;
border-right:3px solid #E92A27;
}
#menu-seperation{
width:150px;
position:fixed;
left:20px;
top:270px;
}
#flash-container{
position:relative;
height:500px;
width:700px;
left:300px;
top:700px;
color:#FFF;
font-family:"Cataneo BT";
font-size:18px;
}
#flash-container p{
color:#FFF;
font-family:"Text Font";
}
#font-face{
font-family:"Text Font";
src:url(TT0952M_.TTF);
}
.scenemenu{
list-style-type:none;
color:#E92A27;
font-family:"Mayan Font";
position:fixed;
top:297px;
left:190px;
z-index:2000;
width:150px;
display:none; }
.scenemenu li{
position:relative;
left:-50px;
}
li.scenebutton:hover ul.scenemenu{
display:inline;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-scrollto.js"></script>
<script src="animation.js"></script>
<link rel="shortcut icon" href="Pictures/Gem Icon.png" />
<title>Plundergem Adventure Game</title>
</head>
<body>
<div class="menu-block">
<ul class="menu-list">
<li>HOME</li>
<hr id="menu-seperation"/>
<br style="line-height: .3em" />
<li id="scenebutton">SCENES</li>
<ul class="scenemenu">
<li>SCENE 2</li>
<li>SCENE 3</li>
</ul>
</ul>
</div>
<div id="flash-container">
<img src="Pictures/Scene_1_converted.jpg" width="700" height="504" />
<p>The sky is dark, the grass is dark, and even the dark is quite dark. This will do a perfect job of setting the mood. Unfortunately, it is raining, meaning that you will be unable to pull off your uncanny Batman impressions. Will you climb the temple stairs, or will you head home?</p>
<br />
<u>1. Climb the temple stairs in an over manly fashion.</u>
<br />
<br />
<a><u>2. Run away and never come back.</u></a>
</div>
</body>
</html>
Tthe ul you are trying to select comes after the li; you should move the ul you are trying to display within the li instead of after it.
<li id="scenebutton">
SCENES
<ul class="scenemenu">
<li>...</li>
</ul>
</li>
Also, you need to use the id selector for scenebutton.
#scenebutton:hover ul.scenemenu {
I'm trying to get each button separate from each other. Also if you put your mouse to the right of the navbar the link is still clickable, how can I remove this?
Here's the JSFIDDLE link
HTML Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
</head>
<body>
<section class="main_front">
<nav class="nav_container">
<div class="nav_links">
<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li">Schedule</li>
<li class="nav_li">Summer</li>
<li class="nav_li">Web Design</li>
<li class="nav_li">School</li>
<li class="nav_li">Whatever</li>
</ul><!--end of right_links-->
</div><!--end of nav_links-->
</nav><!--end of nav_container-->
</section><!--end of main_front-->
<section class="footer">
<div class="phonenumber">
<b>Contact:</b> XXX-XXX-XXXX
</div><!--end of phonenumber-->
<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
* {
margin:0;
margin:none;
}
.logo {
font-family: stalemate, Verdana, Geneva, sans-serif;
font-size:36px;
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:650px;
background-color:#A9D2F1;
}
.nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
}
.nav_container {
width:100%;
height:79px;
position:fixed;
background-color:#82B5E8;
}
.right_links {
width:600px;
float:right;
position:relative;
}
.right_links a {
display:inline-block;
list-style-type:none;
text-decoration:none;
color:white;
font-size:17px;
margin-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
width:130px;
height:40px;
background-color:#82B5E8;
line-height:40px;
text-align:center;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
margin-left:-260px;
}
.nav_li {
margin-right:200px;
}
.right_links li:hover {
background-color:#166083;
}
1) I'm trying to get each button separate from each other.
A:I changed your nav.nav_container tag to a div#nav_container tag, and removed the div.nav_links. It seemed to work against you, then I updated the style sheet accordingly.
2) Also if you put your mouse to the right of the navbar the link is still clickable, how can I remove this?
A: open your list items first, and then nest your anchors in those, you have them backwards so you're probably getting several errors, but you're definitely getting hyperlinks where you don't want them. This will put the links on the text inside your nav items.
NOTE: Also changed your {styles}; to body{styles}; typically you want to stay away from ""
as a universal class, later on in your page's maturation you'll find it can hurt performance.
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
</head>
<body>
<section class="main_front">
<div id="nav_container">
<div class="logo"><img src="../images/logo.png" height="65px" alt="My logo" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li">Schedule</li>
<li class="nav_li">Summer</li>
<li class="nav_li">Web Design</li>
<li class="nav_li">School</li>
<li class="nav_li">Whatever</li>
</ul><!--end of right_links-->
</div><!--end of nav_container-->
</section><!--end of main_front-->
<section class="footer">
<div class="phonenumber">
<b>Contact:</b> XXX-XXX-XXXX
</div><!--end of phonenumber-->
<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
.logo {
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:650px;
background-color:#A9D2F1;
}
#nav_container {
width:100%;
height:79px;
background-color:#82B5E8;
}
/* .nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
} */
.nav_li {
margin-right:20px;
float:right;
}
.right_links {
width:70%;
float:right;
list-style-type:none;
}
.right_links li {
width:130px;
height:40px;
background-color:#82B5E8;
line-height:40px;
text-align:center;
margin-right:10px;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.right_links li:hover {
background-color:#166083;
}
.right_links li a {
text-decoration:none;
color:white;
font-size:17px;
margin-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
Hope it helps!