Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.
Related
I have been attempting to make my menu responsive. www.treytrumble.com
It seems that because it is fixed, it will not scale properly when viewed on a device smaller than a laptop. What can I do to make the menu appear like this one when the screen is scaled to smaller than 1,150px wide? http://www.adtile.me
HTML
<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
trey#treytrumble.com<br/><br/>Resume
</div><!-- end .contactmenu -->
</div><!-- end .contactcontainer -->
<div class="container">
<div class="sidebar1">
<table width="120" height="104" border="0">
<tr>
<th scope="col"></th>
</tr>
</table>
<ul class="nav">
<li><img src="images/logo.jpg" width="180"/></li>
<li><a id="webbutton" class="nav">WEB DESIGN</a></li>
<li><a id="printbutton" class="nav">PRINT DESIGN</a></li>
<li><a span class="contactbutton">CONTACT & RESUME</span></a></li></ul>
</div><!-- end .sidebar1 -->
CSS
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
position:fixed;
}
ul.nav li {
border-bottom: 1px solid #666;
letter-spacing: 2px;
font-family: "Helvetica", Arial, sans-serif;
cursor: pointer;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #fff;
inline-box-align:initial;
color:#F60;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:#F60;
color: #FFF;
font-family: "Helvetica", Arial, sans-serif;
letter-spacing: 2px;
font-size: 9px;
}
This is quite simple to accomplish, but it's quite a bit hard to explain. You have to use media queries to accomplish this, maybe even JavaScript.
Media Queries
Chris Coyier has a very interesting article in CSS-TRICKS that explains various concepts of responsive menus here: http://css-tricks.com/responsive-menu-concepts/
As for the main question, you can definitely make that menu responsive, though, I wouldn't suggest you put the exact same layout you have for desktop for mobile, because that would be a problem since the screen is too small, I would suggest making it go all the way to the top like a normal menu, being responsive, you can also fix it to the top and adding a padding-top to the remaining elements so that they don't go below the menu.
If you decide that the menu should be always on top, make sure you add a z-index property to the nav or div element so that no other goes across it too.
FlexBox
There is another approach you can take as well, but depending on what support you're giving to certain browsers I would suggest or not using Flexbox. If you display your navigation as display: flex and you tweak it CSS wise, you can achieve beautiful combinations, but again, remember this is a slightly new CSS3 property, and mainly Internet Explorer has just recently began supporting it.
More about Flexbox can be found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Responsive Design
If you're new to responsive/adaptive design, then sir you have a lot of work to do, but, luckily for you, there are today tons of free and/or paid resources that will give you a pretty good idea of what to do.
I found this article on Team Tree House very useful: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can go on from there and start looking for other resources, some of them mentioned on this answer:
Media Queries
Flexbox
Other Tips
If you want to make your menu responsive, you also need to make your site responsive, make sure you have all these:
Responsive viewport tag
HTML5 doctype
A plan (grid system, media queries, flexbox, etc)
Fallbacks for unsupported content
Of course yes,
use media queries to choose the resolution you want it to snap to.
Define your classes within the query and apply it around the menu.
I found some free source code online for a nice menu bar that I like. It came with its own stylesheet which worked fine, but it jacked up a lot of the vertical alignment on my existing site. I want the menu bar and all tables centered on every page--simple. But because of this new stylesheet, everything is kinda centered, but not quite, and sometimes it's way off center.
I can fix any page, case by case, by playing around with margin-left in various elements, but this is tedious, and whenever I add a menu item, or put 2 tables side by side, etc, the horizontal alignment gets all jacked up again. I'm looking for a simple, universal way to center my menu bar and tables so that when menu items are added or removed, or tables get wider or placed side-by-side, all the centering stays correct.
First, a visual:
As mentioned, I can get everything to align perfectly only if I change styles on a page-by-page basis and tweak it differently on each page. I'm looking for a global solution.
The body tag has a width set:
<body style="width:720px;margin: 50px auto">
The menu source instructions said I have to set a width on body, which I've never done before on other web pages. If I don't do it, all the alignment goes way off. It seems ideal to not have to set a body width, I'm guessing that's causing problems.
The HTML for the menu bar looks like this:
<ul id="nav" style="margin-top:-95px">
<li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
<!--<li>RefSlot</li>-->
<li>Organization
<ul>
<li>Create New Member</li>
<li>Your Members</li>
<li>Sites</li>
<li>Archived Groups</li>
</ul>
</li>
<li>Create Group</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
CSS on top-level UL:
#nav {
margin: 0;
padding: 7px 6px 0;
background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
CSS on each LI:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
What can I do to force my content to center? Currently I'm having to tweak around with margin-left on BODY or TABLEs, etc, different on each page. Thanks in advance.
Working example: http://www.refslot.com/_stackdemo.html
Add following code to your css file:
body {
margin: 0 auto;
}
or change your body tag like this:
<body style="width: 720px; margin: 0 auto;">
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I'm working on the CSS file for a beginner's Internet Programming course I am taking. The problem is that whenever I made the image in the section into a link, it screwed up the alignment with the rest of the section. I have a Nav List on the side above where this image is, and the Image and Link below it are aligning under the nav bar, while everything else below THAT are staying aligned.
Here is the code:
<p>If you click on the Personal link, you can browse my favorite Halloween pictures,
stories, and films. And if you join my email list, I will keep you up-to-date on
all things Halloween.</p>
<h2>Product of the Week</h2>
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="20'' Deranged Cat">
</a>
<br>
20" Deranged Cat
<h2>My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it
for a full refund.
<strong>No questions asked!</strong></p>
Here's the CSS:
/* Section */
section
{
margin: 20px 25px 25px 25px;
}
section h1
{
font-size: 150%;
margin-bottom: .5em;
margin-left: 200px;
}
section h1:first-letter
{
font-size: 250%;
}
section h2
{
font-size: 125%;
margin: .8em 0 .5em 0;
margin-left: 200px;
}
section p
{
margin-bottom: .5em;
margin-left: 200px;
}
/*Formatting for added Product of Week Request in Section 6 Bullet 4*/
/*Changed for Section 7, Bullet 3*/
section img a
{
margin: 300px;
}
section a
{
display: inline;
}
/* Footer */
Please tell me what I'm doing wrong!
Damann23, welcome to SO...to align items you have to get familiar with several properties such as
float:left;
display:inline;
I put your code in a fiddle and although it needs work, this coould give you an idea of how to start. But remember, organizing your code in sections (divs) it's always a smart thing to do instead of running everything in a sheet. That way you can manage these sections individually
DEMO
Not really sure what it is you are trying to do but if you are trying to have them both on the same line you could wrap the text in a span tag and place the image and text in the a tag like so...
check the updated fiddle js fiddle
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="Cat">
<span>20" Deranged Cat</span>
</a>
I'm working on a website, and it works perfectly in Chrome/Firefox, but I'm experiencing two issues in IE8 and 9.
In IE9, the navigation menu in the header doesn't display.
In IE8, the entire header is screwed up. The title, subtitle, and navigation menu all appear above the main header image instead of on top of it. (Click here to see what it looks like).
I'm sure these are really simple fixes, I just couldn't find them. Thanks in advance.
Edit for code. HTML:
<div class="heightWrapper">
<h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
<h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
<img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
<nav class="topNavigationMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Media</li>
<li>Newsletter</li>
<li>Partnership</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
.heightWrapper {
height: 100%; /* To position the navbar at the bottom of the div */
margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
float: left;
position: relative;
bottom: 3.9em;
margin-bottom: -3.9em;
z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
float: left;
}
.topNavigationMenu li a {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2em;
font-weight: bold;
text-decoration: none;
color: #004080;
float: left;
padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
background-color: #004080;
color: #fff;
}
Fix for navigation menu in IE9
Apply position:relative to your heightWrapper and
Apply position:absolute to .topNavigationMenu (You already have bottom: 0 set). You should also remove the float:left from .topNavigationMenu.
As for the IE8 issues, neither header nor nav are HTML 4 elements, and IE 8 doesn't support HTML 5. Try including modernizer (http://modernizr.com/) in the head section of the page, or another HTML5 shiv. That should allow you to style them in IE7/8.
IE8
The reason is your layout. In your layout, there are 3 things:
h1
h2
menu
Now for the h's, you have used fonts not present in browers, or computers using #font-face. Internet Explorer doesn't support many CSS3 commands such as #font-face, causing your menu to be on the top.
The Solution:
Make the whole header a image and then put the menu.
IE9
I don't know but most probably the same. And don't forget about checking errors.