The following code shows a pop up menu.
<!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>position ul</title>
<style type="text/css">
html, body, div, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main {
position:relative;
width:950px;
height:30px;
margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
border:2px solid #8c8b4b;
}
#main li {
width:92px;
height:30px;
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a { text-decoration:none; }
#main li ul li {
width:400px;
border:2px solid #8c8b4b;
height:30px;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
.menu2 li a {
color:white;
font-weight:bold;
}
li.menu2 div {
position:absolute;
margin-left:-999em;
padding-top:200px;
}
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
}
li.menu2:hover div { margin:0; }
li.menu2:hover ul li { clear:left; }
ul li ul.rounded-corner {
border:2px solid red;
height: 200px;
width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1">menu item1</li>
<li class="menu2">menu item2
<div>
<ul class="rounded-corner">
<li>submenu2 item1</li>
<li>submenu2 item2</li>
<li>submenu2 item3</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
The submenu is consisted of a ul entity reesides inside a div.
I would like to change that ul's position within its' ancestor: a div.
I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
Can anyone explain me please why i cannot make that ul repositioned inside its' div?
How can i make it move to other place within the div?
Attached is a screen shot of the present page which i'd like to change.
Thanks a lot !
you can add padding-top: 100px to your CSS
li.menu2 ul {
top:400px;
list-style:none;
margin:0;
font-size:110%;
padding-top:100px;
}
take a look here if that's what you meant (and what I understood)
http://jsfiddle.net/9NqDd/
give this div
position:relative;
if adding
padding-top:100px;
won't work try
margin-top:100px;
instead.
Related
I have a simple unordered list beside beside two other divs, all 3 contained within a parent container. Here's how it looks like: https://jsfiddle.net/f0bz4hc0/1/. If you zoom in, you can see that all 3 have borders around them, but the borders around the list items and the anchors extend beyond the container's bottom border while the two other divs are snug. Why does this happen and how can I fix it so that everything is within the container?
<!doctype html>
<html>
<head>
<title>practice</title>
<meta charset='utf-8' />
<style type='text/css'>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.page{
width:960px;
height:300px;
margin:0 auto;
border:1px solid red;
}
.row{
width:100%;
}
.header{
background-color:black;
height:40px;
}
.logo{
background-color:orange;
height:100%;
width:40px;
float:left;
display: inline-block;
}
.home{
display: inline-block;
height:40px;
width:40px;
float:left;
border:1px solid cyan;
}
.home img{
width:100%;
height:100%;
}
ul{
float:left;
height:100%;
}
ul li{
display: inline-block;
border:1px solid teal;
}
a{
display: inline-block;
color:white;
height:40px;
line-height: 40px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class='page'>
<div class='header row'>
<div class='logo'></div>
<div class='home'><img src='house.png' /></div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</body>
</html>
If you remove the set height on .header and make it inline-block, you'll see that the borders of on your anchors remain contained in their parent.
.header {
/*height: 40px;*/
background-color:black;
display: inline-block;
}
https://jsfiddle.net/q5mxbywp/
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
The div #leftcol won't go below the navigation panel. Dreamweaver shows it as if #leftcol and #navigation are the same div. I am an absolute newbie so any help is greatly appreciated. Here is the 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>Untitled Document</title>
<style type="text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 800px;
margin: 0 auto;
border: 1px solid #FC3;
}
#header h1 {
float: right;
padding-right: 150px;
padding-top: 50px;
}
#navigation {
border-left: 1px solid #FC3;
border-right: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}
#navigation ul {
margin: 0;
}
#navigation ul li {
display:inline;
}
#navigation ul li a {
display: block;
padding: 5px;
text-decoration: none;
float: left;
}
#navigation ul li a:hover {
background-color: #cadb2b;
}
#navigation ul li a:visited {
background-color: #cadb2b;
}
#leftcol {
width: 200px;
background: #cadb2b;
border: 1px solid black;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="header" />
<h1>Some Title!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
<div id="leftcol">Content for id "leftcol" Goes Here</div>
</div>
</body>
</html>
Also, I didn't know how to position the <h1> next to the picture so I floated it to the right and then positioned it with padding. Is this the correct method for positioning the title next to the header? Thanks in advance. PS. As a new user, I had to remove two of the links in my navigation and my header picture, so don't mind if it looks weird.
Is this what you have in mind. I'm not entirely sure what it is you intend for, so if I'm wrong, see my comment under your question.
http://jsfiddle.net/9hqCK/1/
If you don't want leftcol to take up the entire width of the page, add the following property to #leftcol
width:250px;
Change the width to what suits you.
I want to style the buttons on my own Facebook app like the normal Facebook UI,
e.g. tabs should look like that:
The apps is embed to an iframe so I (think I) can't use the CSS classes from FB?!
Sure you can...look into the source code from facebook for the source of their stylesheets. Or use FireBug in Firefox or Opera Dragonfly or any other web development plugin to get the CSS properties.
BUT don't recreate Facebook, I don't think that they would appreciate it!
What you are looking for is this: http://developers.facebook.com/docs/reference/fbml/tab-item/
It's called fb:tabs - Renders a group of standard Facebook navigation tabs. Must contain at least one fb:tab-item.
It's the part of FBML - Facebook Markup Language which they are deprecating and neither fb recommends you to use nor i recommend, its better to do it using css, but you can use it for as long as it works :)
Here you go, CSS for facebook style tabs:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Facebook Style Tabs</title>
<style>
body {
background:#fff;
font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
margin:0px;
padding:0px;
text-align:left;
}
a {
color:#3b5998;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .clearfix {
display:block;
}
* html .clearfix {
height: 1%;
}
/**********************************************************NAVIGATION TABS************************************************************/
.fb-tabs {
border-bottom:1px solid #898989;
padding:3px 0px;
/* top and bottom,left and right */
}
.fb-tabs .left_tabs {
float:left;
padding-left:10px;
}
.fb-tabs .right_tabs {
float:right;
padding-right:10px;
}
.fb-tabitems {
display:inline;
list-style:none;
margin:0;
padding:0;
text-align: center;
}
.fb-tabitems li {
display:inline;
padding:2px 0px 3px;
/*top,left and right,bottom*/
background:#f1f1f1 url(http://www.facebook.com/images/components/toggle_tab_gloss.gif) top left repeat-x;
}
.fb-tabitems li a {
border:1px solid #898989;
color:#333;
font-weight:bold;
padding:2px 8px 3px 9px;
}
.fb-tabitems li a small {
font-size:11px;
font-weight:normal;
}
.fb-tabitems li a:focus {
outline:0px;
}
.fb-tabitems li.first a /*only for the first anchor of the list*/ {
border:1px solid #898989;
}
.fb-tabitems li a.selected {
background:#6d84b4;
border:1px solid #3b5998;
border-left:1px solid #5973a9;
border-right:1px solid #5973a9;
color:#fff;
margin-left:-1px;
}
.fb-tabitems li.last a.selected {
margin-left:-1px;
border-left:1px solid #5973a9;
border-right:1px solid #36538f;
}
.fb-tabitems li.first.last a.selected {
border:1px solid #36538f;
}
.fb-tabitems li a.selected:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="fb-tabs clearfix">
<center>
<div class="left_tabs">
<ul class="fb-tabitems clearfix">
<li>NavbarLink1</li>
<li>NavbarLink2</li>
<li>NavbarLink3</li>
</ul>
</div>
<div class="right_tabs">
<ul class="fb-tabitems clearfix">
<li>NavbarLink1Right</li>
<li>NavbarLink2Right</li>
</ul>
</div>
</center>
</div>
</body>
</html>
Source: http://forum.developers.facebook.net/viewtopic.php?id=86504