I am trying to add an image and text as a Bootstrap menu item.
I would like to be able to see the hover effect on this custom menu item in the same way as other items.
Also, my CSS code is pretty dirty; it uses width:300px, div inside links, etc. Can someone please suggest me how to do this better?
My code can be seen here.
<li>
<div class="clearfix">
<a href="/" style="display:block; width:300px; padding-left:20px; color: black;" >
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</a>
</div>
</li>
You need to move the <a> tag above the clearfix and then just remove the inline color:black; on the a so that the hover color change works.
<li>
<a href="/" style="display:block; width:300px; padding-left:20px;" >
<div class="clearfix">
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</div>
</a>
</li>
JSFiddle here
In regards to css, firstly, I would not use inline styles - put the styles on the style sheet. You should preferably use width: auto; and use floats and padding to position the elements inside the menu item.
Related
<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.
this is my first post
just the site i needed cause im kinda new to all this
im trying to validate my page and there is 1 error that i dont know what to do with
Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
if i remove the div part
my page is not looking the same as it does with it and it works on all browsers right now with the errors
this is the piece of code that is making the error
<div class="picture_content margin-left">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
any help on how to fix this would be apreciated alot
thanks for taking the time
btw i downloaded a bootstrap temp and the Original file has the same errors
The error is
<ul class="image_box_story2">
a ul is a list and can only have li children, not div, that list doesn't have any li children at all.
Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.
I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
I have a fixed header.TPL file that is loaded on every page.
There's a DIV in this .TPL file with IMG SRC=xxx.png replacing the TEXT. (a twitter and facebook icon linking to the twitter page)
Ok, on the homepage it works well. The DIV is showing on the header with the image linking to the twitter page.
But when I go to another page, the DIV with the image disappear. All other DIVs are in the same way as before, only the DIV with the image has gone.
And if I change the image for a TEXT, it works fine. If I put an image again, the DIV only load on the homepage.
What's happening?
<div class="fullWidthBlock headerMenuBlock">
<div class="fixedWidthBlock">
<div class="headerMenuWrapper">
{module name="menu" function="top_menu"}
</div>
{extension_point name='modules\main\apps\FrontEnd\IWidgetDisplayer' HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
<div class="socialMenuWrapper">
<ul class="socialMenu">
<li><a class="twitterMenu" href="http://www.twitter.com/"><img src="modules/theme_iauto_grey/main/_files/icons/twitterblue.png" /></a>
<li><a class="facebookMenu" href="http://www.facebook.com/"><img src="modules/theme_iauto_grey/main/_files/icons/facebookblue.png" /></a>
</ul>
</div>
<div class="loginMenuWrapper">
{if !$GLOBALS.current_user.logged_in}
<ul class="loginMenu">
<li><a class="loginDialogControl" href='#'>[[Login]]</a></li>
<li><span>|</span></li>
<li><a href='{$GLOBALS.site_url}/user/registration/'>[[Register]]</a></li>
<li><span>|</span></li>
</ul>
<div class="loginDialogWrapper" style="display: none;">
{module name="users" function="login" HTTP_REFERER=$GLOBALS.site_url|cat:$GLOBALS.current_page_uri}
</div>
{else}
<div class="userGreeting">
<span class="welcomeMessage">
[[Welcome]], {$GLOBALS.current_user.user_name}
</span>
<span class="myAccount">
[[My Menu]]
</span>
<div class="myAccountDialogWrapper" style="display: none;">
{module name="menu" function="user_menu"}
</div>
</div>
{/if}
</div>
</div>
</div>
Solved.
When the image is inserted by CSS the DIV display the image not only in the homepage, but in every page.
Is it possible to design page (or region) in Oracle APEX with 4 buttons like those on APEX main page (after login)?
I tried but I have no idea how to do it.
I tried with custom HTML, using tables and HTML buttons, but HTML buttons are not shown.
Thanks in advance.
It's definitely possible, because the APEX interface itself is built in APEX!
This is part of the page source for the page with the 4 buttons:
<div class="apex-list-horizontal">
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-sqlws-128.gif" width="128" height="128" title="SQL Workshop" alt="SQL Workshop" alt="" />
</div>
<div class="label">
SQL Workshop
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-teamdev-128.gif" width="128" height="128" title="Team Development" alt="Team Development" alt="" />
</div>
<div class="label">
Team Development
</div>
</div>
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-admin-128.gif" width="128" height="128" title="Administration" alt="Administration" alt="" />
</div>
<div class="label">
Administration
</div>
</div>
</div>
Each button is like this fragment:
<div class="noncurrent">
<div class="image">
<img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" />
</div>
<div class="label">
Application Builder
</div>
</div>
So you could create a button template that resembles that:
<div class="noncurrent">
<div class="image">
<img src="/myImages/#BUTTON_ATTRIBUTES#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
In each button you would define the Label, the Link URL and I have assumed you might use "button attributes" to hold the image name.
Another way to achieve this would be to hold your button defintions (label, URL, image location) in a table and create a report like this:
select label, url, image_loc
from mybuttons
where ...;
Now you can build a report template ("row template" style) where each row has the template:
<div class="noncurrent">
<div class="image">
<img src="#IMAGE_LOC#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" />
</div>
<div class="label">
#LABEL#
</div>
</div>
This menu is built with the Shared Components->Navigation->Lists feature.
Check out this documentation: http://docs.oracle.com/cd/E17556_01/doc/user.40/e15517/nav.htm#CHDEEFAB
or this documentation for APEX 3.2: http://docs.oracle.com/cd/E14373_01/appdev.32/e13363/issue_track_ui.htm#BGBIICHF
You can create a List (Shared Components), and use the 'Horizontal Images with Label' template. Upload your images to #WORKSPACE_IMAGES#, and for each list entry, select the appropriate image in the 'Image' field.
If you create a Page 0 and add this list region there, it will appear on every page of your application.