layout - What is the best way to position a div in css? -

-

i'm trying place menu:

<div class="left-menu" style="left: 123px; top: 355px">       <ul>           <li> categories </li>           <li> weapons </li>           <li> armor </li>           <li> manuals </li>           <li> sustenance </li>           <li> test </li>       </ul>   </div>

on left hand side of page. problem if use absolute or fixed values.
different screen sizes render navigation bar differently. have second div contains main content needs moved right, far i'm using relative values seems work no matter screen size.

float indeed right property achieve this. however, example given bmatthews68 can improved. important thing floating boxes must specify explicit width. can rather inconvenient way css works. however, notice px unit of measure has no place in world of html/css, @ least not specify widths.

always resort measures work different font sizes, i.e. either use em or %. now, if menu implemented floating body, means main content floats “around” it. if main content higher menu, might not want:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">left</div> <div>right, spanning<br/> multiple lines</div>

you can correct behaviour giving main content margin-left equal width of menu:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">left</div> <div style="margin-left: 10em;">right, spanning<br/> multiple lines</div>

in cases want give main content padding-left doesn't “stick” menu closely.

by way, it's trivial change above menu on right side instead of left: change every occurrence of word “left” “right”.

ah, 1 last thing. if menu's content higher main content, render oddly because float odd things. in case, have clear box comes below floating body, in bmatthews68's example.

/edit: damn, html doesn't work way preview showed it. well, i've included pictures instead.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more