<!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>
Related
How can I access the ul and the li menu inside the div in CSS?
<section id="main">
<div id="=cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
I've tried so many combinations in css but can't seem to be able to access that menu and style it.
Thanks very much in advance!
You have mistake in <div id="=cont"> change it to <div id="cont"> like this
#cont > ul{
list-style-type: none;
}
#cont > ul li{
padding: 10px;
background: green;
}
#cont >ul li ul{
list-style-type: none;
}
#cont >ul li ul li{
padding: 10px;
background: black;
}
<section id="main">
<div id="cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
</section>
this is an example of stylization
Taken from: http://www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm
#footer ul {
width: 1000px;
text-align: center;
}
#footer li {
display: inline;
list-style-type: none;
line-height: 44px;
}
#footer li a {
color: #574621;
text-decoration: none;
margin: 0 10px;
}
#footer li a:visited {
text-decoration: none
}
#footer li a:hover {
text-decoration: underline
}
?<!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" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Home|</li>
<li>About our Hotel|</li>
<li>Services|</li>
<li>Photogallery|</li>
<li>Testimonials|</li>
<li>Locations|</li>
<li>Contacts</li>
</ul>
</div>
</body>
</html>
To speak to a Tag you can use in the CSS Sheet things like
Example 1:
.id ul li {
your Css Code
}
/* in your case */
.cont {
position: ...;
}
/* Or for deeper Tags
* for example:
*/
.cont ul li a {
position: ...;
}
or but that is a bad Programmingstyle
Example 2:
<li style="color:green"> Our Hitory
there is also a third option to put css Code like in example 1 in a styletag in the head tag
Example 3:
<head>
<style>
<!-- Code from Example 1 -->
</style>
</head>
Hope i can help you!
If you have any Questions left just ask.
Good Luck
I have a navigation bar that has a black background with white text. The text changes to red when hovered over. however when the user is on the select page that specific background will change to red. however the hover over change the text to red. I want it so that when the user is on the home page, and they hover over the home button, the text doesnt change to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="topbar">
</div>
<div id="navbar">
<div id="navbtn">
<ul>
<li>Home</li>
<li><a href="custom.php" >Custom Printing</a></li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="logo">
<img src="testlogo.png" alt="logo">
</div>
</body>
</html>
the CSS:
#navbtn {
width:100%;
Margin:20px;
white-space: nowrap;
text-align:center
}
ul {
width:100%;
list-style:none;
margin:0;
padding:0;
display: inline-block;
padding-top: 2.25em;
}
li {
width: 140px;
display: inline-block;
}
a {
text-align:center;
font-size: 1.25em;
padding:8px 0;
display:block;
width:100%;
text-decoration:none;
color:#FFF;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
a:hover {
color:#F00;
background-color:#000;
}
You can use an active class to fix this easily: JSFiddle
<li>Home</li>
a.active {
background-color:#F00;
}
a.active:hover {
color: #fff;
}
I also added your active tab background color into the .active class removing your inline style
You could add:
<style type="text/css">
a:hover {
color:#FFF !important;
background-color:#000;
}
</style>
In your html pages but your "home" so it will rewritte the main css sheet.
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.
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>
I'm having a minor problem with Chrome and IE.
On Firefox, my buttons are perfectly centered inside my navigation bar but on Chrome & IE, my buttons are 1pixel to high and a couple pixels to the left.
Could anyone help me figure this one out?
Here's the url and code : http://nonlocalhost.uphero.com/petshopindex.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>Pet Shop</title>
<style type="text/css">
/* Background */
body {background-color:black;}
/* Wrapper */
#wrapper {margin:0 auto;width:700px;}
/* Navigation Bar */
#nav_bar {height:95px;}
#nav_bar ul {position:relative;left:47px;list-style-type:none;border:1px solid red;width:565px;}
#nav_bar li {position:relative;left:4px;display:inline-block;height:40px;padding-top:19px;}
#nav_bar a:hover {background-color:#F116BA;}
#nav_bar a {padding:20px;color:white;text-decoration:none;background-color:#790D9E;}
/* Content Box */
#cont_box {background-color:#450768;width:700px;height:500px;border:1px solid white;}
#cont_box ul {border:1px solid white;position:relative;top:10px;left:220px;width:420px;height:450px;list-style-type:none;}
#cont_box li {width:200px;position:relative;top:42px;right:13px;display:inline-block;border:1px solid white;height:180px;}
#cont_box a {color:white;text-decoration:none;position:relative;top:2px;}
#cont_box a:hover{color:red;}
/* Side Menu */
#side_menu {}
/* Product Name Position */
#prod01_namepos {left:70px;}
#prod02_namepos {left:30px;}
#prod03_namepos {left:50px;}
#prod04_namepos {left:70px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
<div id="cont_box">
<ul>
<li> <img src="1.png" height="120" width="200" /> <a id ="prod01_namepos" href="#">Whiskas</a> </li>
<li> <img src="2.png" height="120" width="200" /> <a id ="prod02_namepos" href="#">Whiskas Temptation</a> </li>
<li> <img src="3.png" height="120" width="200" /> <a id ="prod03_namepos" href="#">Pedigree Adult</a> </li>
<li> <img src="4.png" height="120" width="200" /> <a id ="prod04_namepos" href="#">Dog Toy</a> </li>
</ul>
</div>
</div>
</body>
</html>
I fiddled around with your CSS and I think I managed to obtain the behaviour that you are after. Give this CSS a shot:
Live demo: jsfiddle
/* Navigation Bar */
#nav_bar {
height:95px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline-block;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color:#F116BA;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 95px;
padding: 0 1em 0 1em;
background-color:#790D9E;
}