How to center 6 divs in a container div - horizontally

I'm trying to build a Fluid Grid website with DW CC.
For now I have a problem which I can't solve.
I have six links in a nav bar. Every link has different block sizes, so I arranged that with CSS.
Now I like to have those divs, which are in a container div, horizontally centered in that container div.
The link-divs are now left aligned, the text in each div is centered.
I show you the HTML part of the links and the CSS for the navigation.

<div class="nav_container">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
.nav_container {
          display: inline-block;
          position: relative;
          width: 100%;
          text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
          color: #DCDCDC;
          text-decoration: none;
          text-align: center;
.block1 {
          width: 60px;
          float: left;
.block2 {
          width: 150px;
          float: left;
.block3 {
          width: 85px;
          float: left;
.block4 {
          width: 90px;
          float: left;
.block5 {
          width: 80px;
          float: left;
.block6 {
          width: 80px;
          float: left;

You would add up all of the block widths which comes to 545px then wrap the blocks in a blockWrapper <div> and set its width: 545px; and margin: 0 auto; which will center the blocks horizontally (see full code below)
On another note it doesn't seem like a very fluid design if you're using fixed width px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.nav_container {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
color: #DCDCDC;
text-decoration: none;
text-align: center;
.block1 {
width: 60px;
float: left;
.block2 {
width: 150px;
float: left;
.block3 {
width: 85px;
float: left;
.block4 {
width: 90px;
float: left;
.block5 {
width: 80px;
float: left;
.block6 {
width: 80px;
float: left;
.blockWrapper {
    width: 545px;
    margin: 0 auto;
</style>
</head>
<body>
<div class="nav_container">
<div class="blockWrapper">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
</div>

</body>
</html>

Similar Messages

- How to vertically center a div?

How to vertically center a div? :-S

Cannot, really.
Read this -
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Reese" <[email protected]> wrote in message
news:eh34gg$rvh$[email protected]..
> How to vertically center a div? :-S
>

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

How to use a div id as a php var

Hello,
I have a form that is generated from a database with unique links that users can click and edit details about various vehicles.
Now these links are each in their own div that has an id that i would like to use for insertion back into the database. (the users click the vehicles, then edit details, then it is submitted)
The link is clicked for the vehicle, some details are changed via js windows etc, then the user click a finalize upload button to submit form
For some reason i cant figure out how to use the div id to pass via php back to the database.
what is the correct way to do this? not very experienced with ajax, and dont want to use.... but maybe hidden fields? confused.... the clicking of the unique divs does not submit the form, so not sure how to store the data effectively.... page cant be refreshed.
[CODE]
<div id="vehicle57">
<a href="javascript:showSlider(57, 2001, 'Audi', 'A6' , 57, false);">
<span class="videoStatHeading">VEHICLE: </span>
2001 Audi A6</a>
</div>
<div id="vehicle54">
<a href="javascript:showSlider(54, 1999, 'Dodge', 'Caravan' , 3, false);"><span class="videoStatHeading">VEHICLE: </span>
1999 Dodge Caravan</a>
</div>
[/CODE]
thanks a lot

hello Shocker,
here is the showSlider function, sorry didnt include it earlier
function showSlider(vID,year,make,model,setupId,clickPOS){
          //remove default style
          //$("#uploadOptions").removeAttr("style");
          //window.alert("ID: " + vID);
          addMask();
    var pos;
    if(!clickPOS){
              //make sure radio button 1 is showing
              $("#firstRadio").show();
              pos = calcPos(vID);//pos contains the position of the link clicks.
    }else{
              //this means were clicked (change vehicle setup), hide
              $("#firstRadio").hide();
              pos = $("#bottomFieldset").offset();
              pos.top           = pos.top-40;
              pos.left           = pos.left-40;
    //reset error container
    $("#errorContainer").html("");
          //set width and height to zero before animation
          $("#uploadOptions").attr("style","height:0;width:0;opacity:0;filter:alpha(opacity=0)");
          //set position attributes rel to document
          $("#uploadOptions").offset(pos);
          /** AJAX request */
          if(!clickPOS){ //only reset
                    $.get("../ajaxResponders/getSetups.php",
                              {vId: vID},
                              function(data){
                                        $("#setup_span").html(data);//to strip the html headers from data
                    /** end AJAX request */
                    /** AJAX request */
                    $.get("../ajaxResponders/getSetupPic.php",
                              {vId: vID},
                              function(data){
                                        $("#setupThumb").html(data);//to strip the html headers from data
                     //reset error container
    $("#setupThumb").html(" ");
                    /** end AJAX request */
          //set element values of box
          $("#setupTextBoxWrapper").hide();//hide textbox
          $("#setupTextBox").html("").val("");//reset the textbox
          //set actionButton button text/script
          $("#actionButton").html("Confirm");
          $("#actionButton").attr("href","javascript:confirm();")
          $("#setupRadioOptions").attr("style",'');
          //$("#setupType").attr("checked",'false');//uncheck prev selected
          $("input[name='setupType']:checked").attr("checked",false);
          $("#vYear").html(year);
          $("#vModel").html(model);
          $("#vMake").html(make);
          $("#vID").attr('value',vID);
          $("#setupId").attr('value',setupId);//add setupId for case 1 & 2
          //animate box to open
          //$("#uploadOptions").hide().slideDown("slow");
          $("#setup_span").hide();
          //calculate height of setupbox
          var outerHeight = $("#setup_span").outerHeight(true);
          var fH = 280 +outerHeight;
          $("#uploadOptions").hide().css("z-index",9999);
          $("#uploadOptions").hide().animate({
                    "width": "500px",
                    "height": fH,
                    "opacity" : "1"
          },600,"swing",function(){
                    //adjust height to fit
                    $("#uploadOptions").css("height","");
                    //if no setups found in the db
                    if(!clickPOS){
                              $("#setupLabel").html("Is this the setup for the media displayed?");
                              var setSpanHTML = $("#setup_span").html();
                              if($.trim(setSpanHTML)== "" && !clickPOS){
                                        //hide setup
                                        $("input[name='setupType']:checked").attr("checked",false);//uncheck selected box
                                        $("#setupType1").attr("disabled","disabled");
                                        $("#setupType3").attr("disabled","disabled");
                                        $("#setupType2").attr("checked",true);
                                        //no setup from db
                                        $("#setup_span").html('<span style="color:red">No setups found for this vehicle</span>');
                                        //flash setup span
                                        $("#setup_span").show().animate({
                                        "opacity":"0"
                                        },300,"swing",function(){
                                                            $("#setup_span").animate({
                                                                      "opacity":"1"
                                                            },300);
                                                  });//end function
                                        //flash confirm button
                              }else{
                                        $("#setup_span").hide().slideDown("slow");
                    }else{
                              $("#setupLabel").html("Change Setup");
          });//end function
}//end function

How to center in a Scene?

I'm liking the layouts, but I haven't figured out how to center something in a Scene. It doesn't take LayoutInfo, for example.
What's a good way to center a Component (a VBox in this case) in a Scene?
Thanks,
Dave

You can do it the good old way:
def IMAGES_WIDTH = 100;
def IMAGES_HEIGHT = 100;
var COLUMN_NB = 3;
var ROW_NB = 3;
var scene: Scene;
var previews: Container;
Stage
title: "Test of Tile layout"
scene: scene = Scene
    width: 500
    height: 500
    fill: Color.LAVENDER
    content:
      previews = Tile
        hgap: 10
        vgap: 10
        layoutX: bind (scene.width - previews.width) / 2
        layoutY: bind (scene.height - previews.height) / 2
        columns: COLUMN_NB
        content: for (i in [ 1 .. COLUMN_NB * ROW_NB ])
          ImageView
            image: Image
              url: "{__DIR__}clock.gif"
              width: IMAGES_WIDTH
              preserveRatio: true
}

How do I move folders with subfolders (containing pdf files) from my pc to ipad 3 to use in adobe reader

How do I move folders with subfolders (containing pdf files) from my pc to ipad 3 to use in adobe reader

You need to connect the ipad to the computer and open itunes.
Open the ipad and go into settings, icloud. Tap on "Documents and Data" and turn that on to sync to icloud.
Now go back into itunes and it should pick up your ipad already and tap on the ipad connection. There will pop up some taps on the center screen for sync options. Go thru each one (summary, info, apps, music, tv shows, podcasts, itunesU, books and photos).....you want to click on "Books".
To the left click the arrow next to the ipad under Devices.
The arrow will point down and open the sub menu, click on the "Books" sub menu here. You will see in the center window current books, PDF currently on the ipad.
Next go to the top and click on "File" (file, edit, view, controls, store, advanced, help) and click on "add folder to library"...... it will bring up your computer file system in a seperate window. File the folder your looking for and add it. This should get the folder set up to sync onto ipad thru itunes.
For additional ease in doing things on the middle window of itunes click back on summary, scroll a bit and you will see "Backup", click on "Backup to icloud". Then under "Options", check "Sync with this ipad over WiFi".
This will allow you to wirelessly sync your itunes and your ipad without having the ipad connected to the computer with a cable. You just have to be on the same wireless network.
If in itunes you add something like a pdf or photo, when your on your ipad open the Ibooks or Iphoto app and it wull update the file system to match your itunes account. The sync with with anything you do in itunes and it works the other way around also. If you save files, photos, books on the ipad, using the ipad (app store purchases, games, books)....the ipad will update to itunes next time your on the same network.
FYI - both the ipad and the computer have to be on.
Itunes updates (changes you make thru itunes), does not need itunes to be open for update content to update to the ipad. This is because it updates to the cloud.
Updates from the ipad to itunes will need itunes open on the computer. So it can sync with the cloud info.

How to center PS CSS layout?

I'm sure I'm just missing something really simple here, but
I've got a great sliced up layout successfully exported and
everything from PSCS3 Extended. My question is whether or not there
is some setting in the output dialogs in Save for Web that will
simply center the entire layout. The layout is constructed (by PS)
with AP Divs, and I'm new enough with CSS I don't know how to
easily center it. If I remove the absolute positioning from the
parent div and set margins to auto, it centers only that box... all
the contents stay in their respective absolute positions. So,
without having to manually recode every CSS selector to reposition
my layout front and center, how can I change the entire thing?
Help is greatly appreciated...
You can see the layout and code at
http://www.clark-imaging.com/dillon

#wrapper {
position: relative;
That should cause all of your AP elements within to center
properly.
Virginia Carter
Carolina Web Creations
======================
www.carolinawebcreations.biz
Miguel wrote:
> Hi.
> Create a wrapper and put all your content inside.
Something like this:
>
> #wrapper {
> width: 800px /*put here the width you want */
> margin: 10px auto; /*10px is the top and bottom margin.
The auto is for
> left and right and center the div */
> border: 0px /*you can add borders if is your desire */
> }
>
> <body>
> <div id="wrapper"> All the content goes here
</div>
> </body>
>
>
> "asksteevsid" <[email protected]>
escribió en el mensaje de
> noticias news:g4i0jo$r56$[email protected]..
>> I'm sure I'm just missing something really simple
here, but I've got a
>> great
>> sliced up layout successfully exported and
everything from PSCS3
>> Extended. My
>> question is whether or not there is some setting in
the output dialogs
>> in Save
>> for Web that will simply center the entire layout.
The layout is
>> constructed
>> (by PS) with AP Divs, and I'm new enough with CSS I
don't know how to
>> easily
>> center it. If I remove the absolute positioning from
the parent div
>> and set
>> margins to auto, it centers only that box... all the
contents stay in
>> their
>> respective absolute positions. So, without having to
manually recode
>> every CSS
>> selector to reposition my layout front and center,
how can I change
>> the entire
>> thing?
>>
>> Help is greatly appreciated...
>>
>> You can see the layout and code at
http://www.clark-imaging.com/dillon
>>
>

How to center menu and add spacing between buttons?

Here is my site: http://lauraportfolio.hostoi.com/index.html (If you are using Google Chrome you can right click and select "view page source" to see the html of the page)
See how the menu button are justified the left of the light pink menu bar? How can I put them in the center?
I would like to know how to center the menu, and then add spacing between the buttons.
At one point I added spacing between the buttons using CSS padding, but when I did that the last menu button, "Graphics" ran off the pink menu bar and became invisible and all kinds of crazy ugly stuff!
Below is what I beleive to be all of the CSS styling for the menu:
#menubar
          width: 900px;
          height: 72px;
          padding: 0;
          background-color: transparent;
          background-image: url(transparentpink.png);
          background-repeat: repeat;
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
          list-style: none;
          padding-right: 0px;
          padding-left: 0px;
          margin-right: auto;
          margin-left: auto;
ul#menu li a
          letter-spacing: 0.1em;
          display: block;
          float: left;
          height: 37px;
          text-align: center;
          color: #f0dbca;
          text-transform: none;
          text-decoration: none;
          background: transparent;
          font-family: bonvenoCF, verdana, Geneva, sans-serif;
          font-size: 150%;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          padding-top: 29px;
          padding-right: 26px;
          padding-bottom: 6px;
          padding-left: 26px;
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
          color: #F0DBCA;
          background-color: #F1836A;

PART 1
So as long as the width of the buttons plus the padding doesn't go over 900px it won't run off the page?
Right.   The "box model" in CSS works like this:
width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box.
PART 2
And do you know how I can center the whole thin instead of it being left-aligned on the menu bar?
You can't center floated menu items. The best you can do is make your menu fit the entire width of the container (or as close as you can) as described in PART 1 above.
To center your #menu container, use margin:0 auto;
To center text, use text-align:center on the #menu li a.
Nancy O.

How to center site in browsers. Currently aligned left.

Please tell me how to center my website in the browser windows. It is currently lining up completely to the left with a lot of white space on the right.
What code do I add and where. Thanks a lot.

Go to Code View in DW.
On line 240, delete
<div align="center">
Around line 25
change
<body>
<table width="760" border="0" cellspacing="0" cellpadding="0">
to
<body>
<div align="center">
<table width="760" border="0" cellspacing="0" cellpadding="0">

Can I center 2 divs over each other??

OK, I've built a website completely in Flash and I'm trying
to lay it out with dreamweaver so that when viewed on 800x640
resolution maxed browser window it will fit snug without any
horizontal scrollbar (the SWF's is fit to this standard); and when
viewed on 1024x768 maxed window it will be centered in the window
PLUS have a background on either side (So this background should
not appear in the 800x640 window). If that isn't clear compare
http://www.gamespot.com.
Right so my idea was just to put the SWF in a div and this
background PNG in a div and center them both, while making the PNG
width=100%.
Well that doesn't seem to work. I guess you can't center two
divs over each other?? The only way I can make one overlay on the
other is by giving it an absolute position, but then of course it
isn't centered any more.
Any suggestions?

Well, no, that's not what I meant.
Background images don't do 100%. Using CSS like this -
body { background-repeat:no-repeat;
background-position:center; }
will a) prevent the image from tiling, and b) will place it
in the center of
any size viewport. Is that what you wanted?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Joniba" <[email protected]> wrote in
message
news:en3a6r$jgr$[email protected]..
> Yeah, sorry I'm just learning all this, so now I know
how to (I didn't
> when I
> posted the message). So I guess I could just center the
background image
> with
> no-repeat, and if it's 100% it anyway shouldn't repeat
(?). Is that what
> you
> meant?
>

How to use BO as a Rule Container?

Hi Gurus,
my requirement is Based on Fundcenter and FMArea in FMBBC to fetch the User(BOSSID) from FMSB Application.
i created two containers (Fundcenter & FMArea) by using FMFCTR table. but the screen field values (Fundcenter & FMArea) in FMBBC are not passing to the rule container. i think by using BO we can pass those values (Fundcenter & FMArea).
FMArea is avialble in BUS0050, but fundcenter is delegated to ZBUS0050.
i created a rule for FMBBC Application. but i want to create a rule container by using BO BUS0050. how can we call it in Function Module.
SWC_GET_ELEMENT 'BUS0050' L_BUS0050
how can i declare it is in declaration of FM?
I need Input parameters are FundCentre and FMArea from BUS0050 to fetch the User (BOSSID) from FMSB Application?
Plz help me, how can i use BO as a container to my requirement ?

Hi Agardipkar,
i cheked the Rule. but iam unable to understand , iam a new one. i already wrote a code for Rule. please tell me if i use the BO, what are the changes required in my code. plzzzz
Workflow Container is BO -> BUS0050.
Rule container is BO->BUS0050
My Input parameters are FMAREA and FUNDCENTER, to fetch the BOSSID.
FUNCTION ZFM_RULE_BUDGET.
""Local Interface:
*" TABLES
*" AC_CONTAINER STRUCTURE SWCONT
*" ACTOR_TAB STRUCTURE SWHACTOR
*" EXCEPTIONS
*" FMAREA_NOT_FOUND
*" FUNDCENTER_NOT_FOUND
*" AUTHORIZER_NOT_FOUND
INCLUDE <CNTN01>.
TABLES : FMFCTR.
DATA : L_FMAREA TYPE FMFCTR-FIKRS,
L_FUNCEN TYPE FMFCTR-FICTR,
WA_ACTOR TYPE SWHACTOR,
L_BOSSID TYPE FMFCTR-BOSSID,
NUM_LINES TYPE I.
CONSTANTS: C_VALUE(2) TYPE C VALUE 'US'.
SWC_GET_ELEMENT AC_CONTAINER 'FMAREA' L_FMAREA.
IF SY-SUBRC NE 0.
RAISE FMAREA_NOT_FOUND.
ENDIF.
SWC_GET_ELEMENT AC_CONTAINER 'FUNDCENTER' L_FUNCEN.
IF SY-SUBRC NE 0.
RAISE FUNDCENTER_NOT_FOUND.
ENDIF.
IF L_FMAREA IS NOT INITIAL AND L_FUNCEN IS NOT INITIAL.
to get the authorizer from FMSB Application by using fundcenter and FMArea.
SELECT SINGLE BOSSID FROM FMFCTR INTO L_BOSSID
WHERE FIKRS = L_FMAREA
AND FICTR = L_FUNCEN.
IF SY-SUBRC EQ 0.
WA_ACTOR-OTYPE = C_VALUE.
WA_ACTOR-OBJID = L_BOSSID.
APPEND WA_ACTOR TO ACTOR_TAB.
ENDIF.
ENDIF.
DESCRIBE TABLE ACTOR_TAB LINES NUM_LINES.
IF NUM_LINES IS INITIAL.
RAISE AUTHORIZER_NOT_FOUND.
ENDIF.
ENDFUNCTION.

How to center text in shapes

how to center text in shapes. specifically circles. I want text to be centered directly in the middle

A lot depends on what you mean by centered, the number of lines of text, the actual font, and whether there are descenders.
Using vertical justification set to centered may or may not work for you, depending on the above factors, as it depends on the baseline, I believe, rather than the acutal glyph dimensions. You could try adding baseline shift, I suppose, to make fine vertical adjustments, or you can bite the bullet and use the old-fashioned method of two frames.

How to center the text displayed in a JList

Hi,
The width of the JList display area is wider than the text displayed. I tried to center the text displayed to make it look nicer. I had tried using "setAlignmentX(Component.CENTER_ALIGNMENT)" in my own ListCellRenderer class but did not work. Any idea how to center the text?
Fai.

Yes, I am using JLabels in my renderer and the following is the code:
public class MyCellRenderer extends JLabel implements ListCellRenderer {
     private static final Color HIGHLIGHT_COLOR = new Color(0, 0, 128);
     public MyCellRenderer() {
          setOpaque(true);
          setIconTextGap(12);
     public Component getListCellRendererComponent(
          JList list,
          Object value,
          int index,
          boolean isSelected,
          boolean cellHasFocus)
          String entry = (String)value;
          setText(entry);
          setFont(new Font("Ariel", Font.BOLD, 18));
          setAlignmentX(Component.CENTER_ALIGNMENT);
          if(isSelected) {
               setBackground(HIGHLIGHT_COLOR);
               setForeground(Color.white);
          } else {
               setBackground(Color.white);
               setForeground(Color.black);
          return this;
Can you point out where to implement the centering logic?
Thanks,
Fai.

How to upload a file which may contain text as well as image to the server using windows phone 8 application ?

How to upload a file which may contain text as well as image to the server using windows phone 8 application ?

You're going to need to give way more detail about the situation before we can help.

How to call a Oracle Proc,which contains Object Type as in Param, from java

Hi
Would like to know how to call a Oracle Procedure which contains the Object Type Parameter from java.
Here is my code will look like...
1. CREATE OR REPLACE TYPE emp AS OBJECT
Empno NUMBER,
Ename VARCHAR2(50)
[COLOR=royalblue]In step1 I have created object type.[COLOR]
2.CREATE OR REPLACE PACKAGE ref_pkg IS
TYPE tab_emp IS TABLE OF emp;
END ref_pkg;
[COLOR=royalblue]In step2,I have created a table type which is of type emp;[COLOR]
3. CREATE OR REPLACE PROCEDURE p_emp(p_emptab IN ref_pkg.tab_emp) as
BEGIN
FOR I IN 1..p_emptab.COUNT
LOOP
Some code written here
END LOOP;
END;
[COLOR=royalblue]In step3 I have passed tabletype which is of type emp as argument.[COLOR]
Now I need to invoke this procedure from JAVA.
Calling a procedure doesn�t matter.
But how I can map objecttype ? how will java recognize oracle object ?
How can I implement this ?
Any Help/Clues is Appreciated.
Thanks
Krishna

Hi Bob
You can call a stored proc from a database control with the jc:sql annotation itself.
Assume a stored proc taking one In parameter
* @jc:sql statement="call sp_updateData({id})"
void call_sp_updateCust(int id);
You can even call stored proc with OUT parameters using
* @jc:sql statement="{call sp_MyProc(?, ?)}"
void call_sp_MyProc(SQLParameter[] params)
You can also call stored functions via db control.
More info and diff ways to call at
http://e-docs.bea.com/workshop/docs81/doc/en/workshop/guide/controls/database/conStoredProcedures.html
Thanks
Vimala

How to center 6 divs in a container div - horizontally

Similar Messages

Maybe you are looking for