Hello everyone, I'm new here and was looking for a forum where I could ask advice regarding web design,development using languages such as html/css, their newer versions,java and jscript. 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: <!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 Code (markup): 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
First fo all move the link tag for the CSS in to the head where it belongs. Ther should neve be anything between </head> and <body> As a start change the first two lines of the CSS: #nav-menu { list-style-type: none; padding: 0px; margin:auto; width:60%; } #nav-menu li { padding: 0; line-height: 40px; background: #8C7853 repeat-x 0 0;display:inline-block; } Then scrap the rest of the junk in the CSS and start by builing up a rule at a time. Experiment and try different properties. Spend some time looking at online tutorials, CSS references, and CSS resources to get comfortable enough with the attribute that you know pretty much how something will look just from the code.
Thank you Do you think I should be reading tutorials about css3/html5 or css/html? is it there any good place you would recommend me?
This is the source of the standards and is the place to start: http://www.w3.org/Style/Examples/011/firstcss.en.html These two are good quality training aids: http://www.htmldog.com/ http://www.tizag.com/cssT/
Thank you for the links; they look good so I'll start to build some knowledge from them. I have used the percentage as well but it didn't do the job, What I am looking for is some methods that can allow me to have a scalable interface so that it resizes and positions elements automatically depending on the browser window size.
First of all , call your layout.css before the "</head>" closing tag. Define a container for page content inside <body> </body> tags. Like <div id="content-wrap">Here will be title , menu , content</div> Code (markup): and apply some css to it. #content-wrap { width:1000px; /* A width , you can change this */ margin:0 auto; /* This will center it */ } Code (markup): For responsive design search Google for "responsive design with media queries" and there you'll find some good tutorials and examples.
1) pick a case for your tags. Consistency is key. 2) as already mentioned, <LINK> belongs between <head></head>, not between </head> and <body> -- in my own code I like to put each of the <html><head>, </head><body> and </body></html> pairings together on the same line with no space between them as a reminder that NOTHING should ever go between them. 3) your LINK to the CSS should have a MEDIA attribute, in this case most likely media="screen,projection,tv" 4) If that's a title, wouldn't that be the topmost heading under which all other headings on the page would be a subsection? Hey, don't we have a tag that means that called H1? 5) Lose the HTML 5 garbage, it's the road to failure. 6) if you change the font-size, redeclare the line-height. NEVER trust the default line-height or expect it to inherit properly. 7) condensed font properties help a good deal -- font:bold 48px/54px arial,helvetica,sans-serif; 8) serif is for print, not screen. 9) it would help to trip :active and :focus alongside your :hover so keyboard navigators aren't left out in the cold. 10) your CSS would be FAR more legible if you stop stuffing everything on one line and use the tab key. (Seriously I don't know why people make coding CSS harder for themselves that way). 11) why the devil do you have all those oddball transitions in place -- especially given how screwy they'd inherit. As to your question, that is one of those design concepts that as a rule of thumb is "not viable for web deployment" if you give a flying purple fish about accessibility -- treads into the "but I can do it in photoshop" nonsense and you are best off forgetting it; particularly . The best you could hope for is to strip off the floats, set the LI to display:inline and the anchors to display:block -- which can be problematic with the dropdowns in legacy IE. You also seem to be setting them transparent but NOT removing them from render, meaning that if the dropdowns overlap content OR each-other you're stuck clicking on the topmost one instead of the content -- that could be bad. Sneaky trick for that, set the parent LI to overflow:hidden; as it's normal state and overflow:visible on hover -- it'll chop off the apo child menu. You'd have to add a delay transition to overflow though so your fade-out animation would be visible... which is why I'd be targeting just the transitions you are actually using instead of the semi-dangerous 'all'. Might also help if you set up ALL the transitions, instead of just the ones that only work in Chrome/Safari.