html - Make a Menu div spread in the middle and work in smaller screens -

-

i'm building website client, , 1 of last problems can't solve menu issue. believe might helpful other people.

the menu has 3 divs inside (the parent div) . here code, bit shortened:

<div id="header">     <div id="logo"><img src='logo.png' /></div>     <div id='languageselect'>language select</div>     <div id="menu">         <ul id="menu_noya">             <li class="head_item">                 <a href="index.php?page=women">{$language["menuwomen"]}</a>                 <ul>                     <li><span style='color:#352618;font-family:tahoma;font-size:11px;font-weight:bold;'>{$language["inmenuwomen"]}</span></li>                     <li><a href='index.php?page=women'><img src='/styles/images/women1.jpeg' style='height:170px;width:120px;' /></a></li>                     <li><a href='index.php?page=women'><img src='/styles/images/women2.jpeg' style='height:170px;width:120px;' /></a></li>                     <li><a href='index.php?page=women'><img src='/styles/images/women3.jpeg' style='height:170px;width:120px;' /></a></li>                     <li><a href='index.php?page=women'><img src='/styles/images/women4.jpeg' style='height:170px;width:120px;' /></a></li>                 </ul>             </li>             <li class="head_item">                 { 5 more times } ...             </li>         </ul>     </div> </div>

css:

#languageselect {     float:right;     width:150px;     margin-top:65px;     padding-right:10px; }  #menu_noya, #menu_noya ul {     list-style: none;     z-index:1; }  #menu_noya, #menu_noya * {      padding: 0; margin: 0; }  #menu_noya li.head_item {     float:left;     width:142px;     margin-left: -1px;     text-align:center; }  #menu_noya li.head_item {     display: block;     color:#62e1e3;     text-align:center;     font-weight:lighter; }  li.head_item ul {      position:absolute;     display: none; }  li.head_item:hover ul {     margin-right:50px;      position:absolute;     display: block;      width:150px;     background-color:#ececec;     border-right:8px solid #352618; }  #header {     background-color:#352618;     height: 100px;     width:100%;     text-align: center;     position: relative; }  #logo {     float:left;     width:250px;     height:80px;     margin-top:12px;     margin-left:15px; }  #menu {     font-size:16px;     margin: 0 auto;     padding-top:65px;     display:inline-block; }

the problems are:

  • on small laptops (13-inch or 11-inch) smaller resolutions, middle menu gets out of header div, it's not in header , ends below it. same on ipad , iphone.

  • on pcs , laptops, menu isn't in middle of page, because logo , languageselect elements need same width. menu in middle between logo , language select, not in middle of page.

i've tried @media queries, it's "general" , works on devices not others. works specific device, can do, others?

the main thing want here make menu 100% of width it's given. let's assume resolution 1024px; if have 250px logo , 150px language select, there 624px left. want menu spread 100% of 624px.

one little additional question: smaller text looks blurry on website, it's not anti-aliased. there font looks times new roman works small font sizes?


Comments

Post a Comment

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more