w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
CSS, center menu
Since you wish to resize the elements as the window shrinks, the best solution would be using flexbox. I'm linking an article for you: here

Categories : CSS

CSS - How to center a DIV menu
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left. try and remove it: float:left; So: #container #menu { background: none repeat scroll 0 0 #FFC341; float: left; overflow: hidden; position: relative; text-align: center; width: 100%; } #container #menu #menu_button { background: none repeat scroll 0 0 #FFC341; border-right: thin solid #FF9900; color: #000000; display: inline-block; float: left; font-size: 18px; margin: 0; position: relative; text-align: center; text-decoration: none; width: 150px; }

Categories : HTML

how to center a navigation menu
use text-align & display:inline-block for li: http://jsfiddle.net/dQbqP/1/ .div1 { margin:auto; text-align:center; } .div1 ul li { display:inline-block; list-style-type: none; }

Categories : HTML

How can I center my menu items?
It helps to use css. I have a separate style sheet. You will want to nest so that the outside one centers all elements inside of it and then internal menu items have a specific width, so they don't end up all together. <div class="centre"> <div class="block"> <li id="nav-home"><a href="http://www.martyversusaig.com">Home</a></li> </div> <div class="block"> <li id="nav-about"><a href="http://www.websitegoodies.com/guestbook.php?a=view&amp;id=1045057" target="&rdquo;_blank&rdquo;">Your Story</a></li> </div> MY CSS: .centre { text-align: center; margin: 0 auto; } .block { width: 100px; display:inline

Categories : HTML

How to center drop down menu?
adding a width to your ul li centers the child nav. working fiddle here: http://jsfiddle.net/ktFJg/ .nav ul { font-size:12px; width:1140px; text-align:center; display:table; } .nav ul, .nav ul li { float:none; } .nav ul li { margin-left:20px; width:100px; } .nav ul li ul { text-align:left; display:-inline-block; border:none; } .nav li { float:none; display:inline-block; display:table-cell; vertical-align:middle; color:#000; } .nav ul li a, nav ul li a:active { color:#000; } .nav ul li a:hover { color:#c0c0c0; }

Categories : HTML

How do i center menu items in CSS
Add this to CSS file. #cssmenu{ width:90%; //set according to you margin:auto; } margin:auto automatically centers the element according to page and content width

Categories : CSS

How To Center Align Menu Through CSS?
I'm not sure the HTML you provided matches up with the CSS (missing pieces?) but typically the best way to center stuff horizontally is to remove the floats and make each item display:inline-block. Then make the wrapper text-align: center. For instance: <div id="wrapper"> <div class="logo"></div> <div class="search"></div> <div class="cart"></div> </div> #wrapper { text-align: center; } .logo, .search, .cart { display: inline-block; } Hope this helps, if not please provide a pastebin or more code - thanks!

Categories : CSS

Navigation Menu in the center
You can use relative positioning on the ul and li items. First position the ul 50% to the left. Then, as long as the li only take up the space they need (non block), have the move back to the right 50% of their width. http://jsfiddle.net/suZR3/6/ #nav ul { position: relative; left: 50%; } #nav li { position: relative; right: 50%; }

Categories : HTML

How can I center my menu in the middle?
Beyond the margin: 0 auto; you need to also change the #navigation by removing the position: absolute; and the left: 260px; Please also notice that you are giving a bigger size to the menu #navigation and a smaller size to the header that contains it with the .center class. Complete fix to your issue: header .center { background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat; width: 510px; height: 100%; margin: 0 auto; } #navigation { width: 705px; height: 50px; overflow: visible; } The reason your code was not working is because you were just doing margin: auto which should technically work because it's giving your: top, right, bottom and left sides a margin of auto and while this is all fine, your #navigat

Categories : HTML

How do I center my dropdown menu?
It depends on your layout and page structure. It might be as simple as assigning #menu_container a fixed-width and automatic margins: #menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; } /* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */

Categories : Wordpress

How to align Navigation Menu to center?
You're missing text-align:center. .menu_nav ul { list-style: none; margin: 0 auto; text-align:center; } Fiddle: http://jsfiddle.net/84exq/

Categories : HTML

How can I center a graphic under a
Why not simply apply a background-image to each li, use background-position:bottom center; to position the arrow, background-repeat:no-repeat; and then use padding-bottom so the content doesn't overlap the arrow.

Categories : Jquery

How do I center a MaxiMenu CK menu in Joomla?
Your problem is in line 24 of moo_maximenuhck.css: div.maximenuckh ul.maximenuck li.maximenuck{float: left; All you need to do is add float:none to line 233 in template.css. #nav ul.menu li { display: inline-block; background: transparent; margin-left: 16px; position: relative; float: none; }

Categories : CSS

Center Navigation Menu Text
Without knowing the dimensions of the background image its hard to be specific, but try putting the background on the header element rather than the nav. You can then set the width of the nav UL to the width of the inner part of the ribbon image and set a margin 0 auto on it to center it horizontally

Categories : HTML

How to align my dropdown menu to center of the page?
Here is a fiddle that shows you how to align your menu to the center of the screen. You can search for my changes in the css by searching for "EDITED". I marked all 3 changes that way. Here is what I did. 1.Remove the rule that makes the whole menu float left : #menu-container > ul { float: left; } 2.Specify on his parent element that you want it in the center of the page : #menu-container {text-align:center;} 3.Then for each menu element, change the following rule : #menu-container > ul > li { float: left; } to #menu-container > ul > li { display: inline-block; } As for your last question (I also want the menu only, without the empty grey space), I don't understand what you mean. You want to remove the grey color from the menu bar?

Categories : HTML

how to place dropdown menu in the center of page
hey buddy you can do it this way <div style="width:800px; margin:0 auto;"> centered content </div> REFERENCE One more thing, before posting on SO, searching for a relevant question, it will save lot of your valuable time . Happy Coding :)

Categories : HTML

Center a menu with left align items
Try using display: inline-block;. You can add the following code: .extPanel { text-align: center; } .menuElement { display: inline-block; *display: inline; //ie zoom: 1; //ie //remove float: left; }

Categories : CSS

center a background imaged css menu from http://cssmenumaker.com
If you want to center the main menu links, you could try this: #cssmenu ul {text-align: center;} #cssmenu ul li {float: none; display: inline-block;} Rather than float: none, you can just remove the original float on the lis. If you are worried about the inline-block gaps that appear between the menu items, you could do this: #cssmenu ul {text-align: center;display: table; width: 100%; word-spacing:-.25em;} #cssmenu ul li {float: none; display: inline-block; word-spacing:0;} To avoid the submenu text being centered, try this: #cssmenu ul {text-align: center;display: table; width: 100%; word-spacing:-.25em;} #cssmenu ul > li {float: none; display: inline-block; word-spacing:0;} #cssmenu ul li li {text-align: left;}

Categories : CSS

How to center the options in select menu which are created dynamically in jquery mobile
It's just a matter of CSS, look at this : http://jsfiddle.net/hYLfG/ select { text-align : center; } OR style inline : <div data-role="header" data-position="inline" data-theme="b"> <h1>My Page</h1> <select id="selectMenu" style="text-align:center;"> </select>

Categories : Jquery

Horizontally center zurb foundation top bar menu, with multiline items vertically centered
I cannot resolve your issue, but I can explain why it is difficult to do with Zurb Foundation. The way that buttons are implemented (and reused in the top-bar) in Zurb Foundation have the css display:inline-block set. This means that you cannot vertically align the text using vertical-align:middle This makes it impossible to automatically align buttons with multiline text. The top-bar is not designed to have evenly spaced elements. You can use a ul.button-group.event-6 to get closer to your desired layout, but it will not work with all of your constraints. It is designed to have a Logo, a left menu and a right menu. Setting the height is easy and can be done in css by applying height:80px for example to each of the buttons. However, the multiline text alignment will be to the top. Submen

Categories : CSS

Twitter Bootstrap responsive menu/small devices: close/collapse menu on clicking a menu item
You can try something like.. $('.nav li a').on('click',function(){ $('.nav-collapse').collapse('hide'); }) This will work for menu links that are referencing '#'. The menu should already be collapsing if your menu links navigate to another page on the site as this would cause a full page refresh.

Categories : Twitter

android:gravity="top" doesn't align child view to top, but "center" aligns to center?
gravity attribute applies to widgets within the LinearLayout, while layout_gravity tells the parent of LinearLayout where to place the child (LinearLayout). Also, in a vertical LinearLayout the gravity="top" attribute won't work. In the layout you have now, both text views will be stacked one on top of the other, wrapped with a linear layout with no space in-between - so the "top" or "center" values won't do anything because there is no extra space to move the text views up or down. If you want to understand this better, try giving your linear layout and both text views backgrounds of different colors, like this: android:background="@color/mycolor" Then you will see the bounds of each widget.

Categories : Android

jquery ui dialog not showing in center of window after setting position to center
You're specifying the position value wrong. It should be like this: position: { my: "center", at: "center", of: window } In any case, the default value for position is center aligned, so just remove it. http://api.jqueryui.com/dialog/#option-position

Categories : Asp Net Mvc

Google 3D Earth How to find the center point from all the markers and set center view
You need to create a Placemark object using createPlacemark(). You probably don't need to create an array of Placemarks since the google earth API keeps the list of placemarks from which you can iterate using ge.getFeatures().getChildNodes(). for(var i = 0; i < data.length; i++ ) { // Create the Placemark var placemark = ge.createPlacemark(''); // Set the placemark's location. point[i] = ge.createPoint(''); point[i].setLatitude( data[i].lat ); point[i].setLongitude( data[i].lon ); placemark.setGeometry(point[i]); // Add the placemark to Earth. ge.getFeatures().appendChild(placemark); } Also, probably won't need array of points since have the array of data. Can simplify this to the following: for(var i = 0; i < data.length;

Categories : Google Maps

How to properly center two almost identical FontAwesome icons to the center of
Change the size of the icon to an odd number. It's 1px off because the object you're trying to center probably isn't an even number of pixels wide. .btn { width: 49px; min-height: 49px; border-radius: 50%; background: #854eb3; text-align: center; line-height: 49px; font-size: 30px; color: white; }

Categories : HTML

How to center the ad at the bottom center of the screen (libgdx + AdMob)
for libgdx paste this code in ur android class in onCreate() layout = new RelativeLayout(this); adView = new AdView(this, AdSize.BANNER, adMObid ); View gameView=initializeForView(new TalkingFriendApp(this), cfg); RelativeLayout.LayoutParams adParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); adParams.addRule(RelativeLayout.ALIGN_PARENT_TOP); adParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT); RelativeLayout.LayoutParams adParams1 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); adParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); adParams1.addRule(RelativeLayout.ALIGN_PARENT_CENTER); adView.loadAd(new AdRequest()); layout.addView(gam

Categories : Android

Why is the left side of my image in the center instead of the actual center?
Change your CSS this way #profile-banner .logo { margin: 125px auto 0; background: #333; border: 1px solid #666; width: 250px; height: 250px; padding: 0px; } Changes Remove position and top. Add the top as margin-top. Positioned elements do not respect margins.

Categories : CSS

css drop down menu :: sub menu is appearing within main menu after hover
You have to make some changes in the code. Fiddle css .menu{ width:70%; background:green; position:relative; } .menu ul{list-style:none;} .menu ul li{ margin-left:20px;position:relative; float:left} .menu ul ul{display:none;} .menu ul li:hover ul{display:block; background:black; position: absolute; margin: -2px 0 0 0; z-index: 11110;} .menu ul li:hover ul li{ float:none; height:20px; } Updated Fiddle Changes: display: inline-block; occupies the combined width of the inner container. position:relative; using it in menu will cause increase in the height of the outer container. you can read it at w3school

Categories : HTML

Center a DIV to the center of page regardless of screen size
.center-div { width: 600px; height: 600px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -300px; } This will center your DIV with class center-div horizontally AND vertically. The margin-left must be negative half of what your width is. The margin-top must be negative half the height. To just center horizontally: .center-div { width: 600px; height: 600px; position: relative; margin-left: auto; margin-right: auto; }

Categories : HTML

How to center a div exactly at the center(horizontally and verically) of a parent div in IE7
This should work, in every browsers: .outerdiv { position:relative; } .outerdiv .innerdiv { position:absolute; top:50%; left:50%; width:200px; height:200px; margin-top:-100px; // height / 2 margin-left:-100px; // width /2 }

Categories : CSS

Center iOS view hierarchy in center of superview
Both views should be sub views of a super view... UIView *activityView = //the view with the label and activity indicator... UIView *webView = //the web view... activityView.center = webView.center; Done :)

Categories : IOS

jQuery or CSS - Center a floating div based on the center of another div
It sounds like you are trying to build a horizontal menu with secondary-links that appear when you hover over the primary links. As a basic example, you can start with the following CSS: #nav > li { border: 1px solid gray; width: 200px; list-style: none; margin: 0; padding: 0px; display: inline-block; vertical-align: top; } #nav > li > a { display: block; background-color: lightgray; padding: 10px; } #nav > li > ul { display: none; } #nav > li:hover > ul { display: block; } When you mouse over the primary links, you can see the secondary menu. You can see the demo at: http://jsfiddle.net/audetwebdesign/BrL3G/ You can do a lot of minor adjustments to the styling, but at least you have something to demonstrate the b

Categories : Jquery

Ext.menu.Menu (Context Menu) is displayed only once on right click - Ext JS 4.2.1
Because you're creating a new menu instance every time, which means: a) Memory leak b) Duplicate component id So, remove the id from the class definition, you don't need it. Secondly, only create the menu once: onViewItemContextMenu: function(dataview, record, item, index, e, eOpts) { e.stopEvent(); if (!this.menu) { this.menu = Ext.create('MyApp.view.TreeContextMenu'); } this.menu.showAt(e.getXY()); }

Categories : Javascript

How to to center TextView to be always in center of Layout?
A RelativeLayout will suit your needs better: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/header_background" > <Button android:id="@+id/btnPrevious" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:paddingLeft="5dp" android:background="@drawable/selector_previous_arrow" android:visibility="gone" /> <TextView android:id="@+id/title" style="@style/title" android:layout_width="wrap_content" android:layout_height="wrap_conten

Categories : Android

How Can I Center Bootstrap Tooltip in center of SVG
These are the steps spelled out: Download the Bootstrap source The question you linked to apparently has a solution to the bug in Boostrap. Copy the code for getPosition. Add a case for center in the tooltip switch (Ctrl+F for getPosition again, but find not the function, but its use), like so: case: 'center': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width / 2 - actualWidth / 2} break Make sure to change the link in your HTML to reference the updated bootstrap.js file. Edit: link to working JFiddle. Bootstrap code has changed since the other post, and this is the simplest way to achieve what you want.

Categories : Jquery

Architecture/Design of PageObjects for Pages with hierarchy: menu-items/menu-sub-items/menu-sub-items-tabs
I think the following will be a simple and efficient solution, Class for Main page with methods to navigate(or click) other menu items and logout. Class for each menu item with methods for sub menu items, extend the Main page class

Categories : Java

Jquery move element from center to left and left to center
Please check this fiddle here: http://jsfiddle.net/9E2WQ/1/ You were very close. The problem is that that every time you clicked .moveLeft a it was updating the start position every time. This would mean that the element would never get back to center.

Categories : Jquery

Any way to center the center of my JFrame?
Use this helper method to center any JFrame or JDialog: public static Window centerFrame(Window win) { Dimension dim = Toolkit.getDefaultToolkit().getScreenSize(); win.setLocation((int) ((dim.getWidth() - win.getWidth()) / 2), (int) ((dim.getHeight() - win.getHeight()) / 2)); return win; }

Categories : Java

HTML 5 navigation menu showing overlapping list items in sub menu on hover
Make this change .MainMenu li:hover .SubMenu li{ display: block; position: relative; } position:relative; FIDDLE

Categories : HTML

VSTO (Document-level): Individual context menu in Excel (right click menu)
Here's some rough sample code with comments This was created in VS2010 and tested against Excel 2010 First step was to created a new Excel 2010 Add-In project Then added the sample code below to the default code generated inside ThisAddin.cs. This code will add a new menu item and remove the cut/copy/paste menu items when right-clicking on a single cell containing 'abc'. This is to simulate changing the context menu based on the contents of a cell. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Xml.Linq; using Excel = Microsoft.Office.Interop.Excel; using Office = Microsoft.Office.Core; using Microsoft.Office.Tools.Excel; using System.Diagnostics; using Microsoft.Office.Interop.Excel; nam

Categories : C#



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.