AJoy
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by AJoy
-
-
Oh duh, using <h1> instead of <span>... ha ha. Of course. Continuing my study...
-
Wow, that was fast. Thanks!! So... it was the "overflow: hidden" that made the tabs jump up there. I don't quite get why. I understand your other changes, though--putting the margins between the tabs on the right instead of on the left makes perfect sense.You're my hero of the day!
-
Hi all. I'm pretty new to web design with CSS, so bear with me if this is a really basic question. I'm having trouble getting my positioning right. Here's the webpage so far:http://studentaccess...site/index.html I want the tabs to sit on top of the image. Even though they are before the <div id="content"> part in my HTML, they are still overlapping the image, as you see.I also want them to be flush with the left edge of the image (which is centered). Here's the relevant part of the HTML:<body bgcolor="#EDEDED"> <div id="header"><p><span id="title"> AVA </span><br> my challenge for the 2013 year is to record one original song or musical piece per month.</p></div> <div id="Tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions </a></li><li><a href="Covers.html">Covers </a></li><li><a href="hire.html">Hire AVA to sing </a></li></ul> </div> <!– End of Tabs Div –> <div id="content"> <div id="Content_Area"><p>...the text...</p></div> <div id="followbox">links to RSS feeds, etc., here</div></div> <!-End of content-> </body> And the relevant CSS:body {font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;} #Tabs {display: block;position: relative;margin: 0;margin-right: auto;margin-left: auto;} #Tabs ul {padding: 0px;list-style-type: none;} #Tabs ul li {display: inline-block;clear: none;float: left;} #Tabs ul li a {position: relative;margin-top: 0px;display: block;margin-left: 5px;line-height: 1em;padding-left: 10px;background: #f6f6f6;border: 1px solid #ccc;border-bottom: 0px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;/* end of rounded borders */ width: 150px;height: 50px;color: #000000;text-decoration: none;font-style: italic;} #Tabs ul li a:hover {text-decoration: underline;} #content {background-image: url(images/bg_image_med.jpg);background-repeat: none;border: 1px solid #000000;height: 500px;width: 900px;margin-left: auto;margin-right: auto;} #Content_Area {padding: 15px;overflow: hidden;position: relative;width: 620px;height: 500px;overflow: hidden;} p { padding: 15px; } What am I doing wrong?Thanks in advance!
Help with positioning
in HTML/XHTML
Posted
Interesting that you write "background" alone, followed by the hex # or the background image. I was taught to use "background-color" and "background-image". Nice to see that the simplified way works as well. Thanks, again, can't say it enough, for your help. I learned a ton!