-
February 6th, 2013, 07:20 AM
#1
Help:HTML/HTML5 CSS/CSS3 Automatic alignings and resizings
I'm not sure whether this is the right place to post these sort of requests; I'll be happy to post in a different section if someone points out where I should ask for help.
I have some very basic knowledge of HTML, CSS; I really like HTML5 and CSS3 and now just wanted to make a simple website;
One of the main issues I want to deal with is being able to resize and positions my objects automatically depending on the size of the screen(e.g browser). Is it possible to achieve this?
I currently have a menu and I'd like to center it but don't know how I can do this:
Here's the code:
Code:
<!DOCTYPE html>
<html>
<head>
<TITLE>Title of the Site</TITLE>
</head>
<link href="css\layout.css" rel="stylesheet" type="text/css">
<body>
<div id="titlestyle">
Insert Title
</div>
<ul id="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
=====================
CSS
body
{
background-color:#CDCDCD;
}
#titlestyle{
color:#8C7853;
text-align:center;
font-family: serif;
font-size: 48px;
font-weight:bold;
}
#nav-menu { list-style-type: none; height: 40px; padding: 0px; margin:0; }
#nav-menu li { float: left; position: relative; padding: 0; line-height: 40px; background: #8C7853 repeat-x 0 0; }
#nav-menu li:hover { background-position: 0 -40px; }
#nav-menu li a { display: block; padding: 0px 50px; color: #fff; text-decoration: none; }
#nav-menu li a:hover { color: #a3f1d7; }
#nav-menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#nav-menu li:hover ul { opacity: 1; }
#nav-menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#nav-menu li:hover ul li { height: 30px; line-height: 30px; }
#nav-menu li ul li a { background: #8C7853; }
#nav-menu li ul li a:hover { background: #5a8078; }
#nav-menu li { -webkit-transition: all 0.2s; }
#nav-menu li a { -webkit-transition: all 0.5s; }
#nav-menu li ul { -webkit-transition: all 1s; }
#nav-menu li ul li { -webkit-transition: height 0.5s
Can someone tell me how I can put that menu in the middle and also how I can have it across the page horizontally, so that it automatically resize depending on the browser screen size.
Thank you
-
February 8th, 2013, 05:58 PM
#2
Re: Help:HTML/HTML5 CSS/CSS3 Automatic alignings and resizings
Using the width property in percentages will give you resizing content. For example...
Code:
<div style="margin: 0px auto; width: 50%; height: 100%; background: #000000;"> </div>
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|