I'll admit from the outset that I'm a self-semi-trained hack when it comes to html and css.
The problem I need help with is a drop down menu that is not centering in the container div. I need to have the menu behave like the one in the live site http://wedevents.com.au/index.htm
PROBLEM PAGE EXAMPLE: http://www.wedevents.com.au/index.asp (it's a work in progress so please forgive the mess)
Thaks for any help!
Regards,
Rick
I'm assuming you mean you want the links across the top to be centered on the page?
Floating the ul left won't help that :p. On ul.topnav, remove float:left and change the following properties:
margin: 0 auto;
padding: 0 85px;
width: 630px;
height: 36px;
I would adjust the width on your .topnav and adjust the padding as well.
Then on your ul.topnav li ul.subnav add this left:-31px; this shall make your drop down center below the weddings option
Create another div that will contain your ul class=topnav, set the width that fit in the page wrapper and add this as the property of ul:
margin: 0 auto;
Related
I can't seem to get these social buttons to fully right align. I've set the margins of the page to "0" and have set the alignment to right="0" - any ideas what else to do?
The url is: http://www.radiobootcamp.org/TEST.html
Thanks!
add
style="text-align:right"
to that twitter div
This will allow to align the social media buttons to the right.
The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block.
.twitter {
border: 0 none;
height: 150px;
position: fixed;
right: 5px;
top: 400px;
width: auto;
}
The thing is that they have float defined as left. I would suggest to add float:right !important; and if not working put each button in a different div with height:auto and width:auto and put float:right on that div container.
Heres my website unbotttled.com and the categories sub menu does not align with its parent categories? Is it to do with the padding, is there another way to solve this other than removing the padding? Any help would be greatly appreciated. Thanks in advance.
The <a> and the <ul> are both being padded by the containing <li> "Categories". To help you understand - If you look closely the drop down is getting lined up to the left edge of "Categories" because of the containg <li>'s padding:15px.
There are a few ways to fix this, using a negative margin is one:
#menuleft ul li:hover ul {
display: block;
position: fixed;
visibility: visible;
width: 130px;
padding: 0;
padding-top: 20px;
margin-left: -15px;
Having a thorough understanding of the CSS Box Model is imperative for modern Web Development. It's fairly easy to understand.
Learn about it here: http://www.w3.org/TR/CSS2/box.html
It is not positioned correctly because the li it is inside of has padding of 15px. So it is to the right by 15px.
Add this CSS to the ul sub-menu margin-left:-15px
I am working on converting a site from mostly Flash to mostly CSS / HTML. It is going
swimmingly except for one thing.
Here is the site:
http://cohen.digitaldemo.net
If you mouse over the PRACTICE AREAS top menu option, you'll see the first item in the
submenu reads:
ARBITRATION CV for STEVEN
What it should read is:
ARBITRATION CV for STEVEN COHEN
Where the line wraps like this:
ARBITRATION CV for STEVEN
COHEN
Why isn't it wrapping?
Any help with this would be much appreciated...
Line 130 :
.sub-menu li { display:none ;
width:220px ;
height: 23px;
Remove this height.
in the css:
.sub-menu li {
background: none repeat scroll 0 0 #FC940F;
display: none;
height: 23px;
margin: 0;
padding: 0;
width: 220px;
}
you're restricting both the width and the height, so basically it's wrapping but you can't see the wrapped part. You can remove the height so you see the wraps, or increase the width so it doesn't wrap.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
I wish to make the all the list items to be centered. or at least 20 pixels from the top.
I have tried negative margin-top but that didn't work.
Any suggestions?
Here is the site. http://freddygonzalez.me/dev/85
The simplest way to do this is to remove display: inline and margin-top and add the following rules to the li elements:
float: left;
line-height: 49px;
Note that this won't work if a menu item can have two lines of text.