In the image below it shows an image , textbox and a css menu image
My CSS menu is perfect. I finally got it the way I needed it. My problem is that I need the textbox in the center of the nav bar and then I need my image to the left of the textbox
to be all the way to the left. I don’t know how to do that. I have tryed this:
<!-- Advsearch -->
<li class='active'><a href='#Searching'><span>
<form method="get" STYLE="FLOAT:CENTER;" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
And for the image I tried float:left
I made a jsfiddle for you to help me:
Js Fiddle
http://jsfiddle.net/TxeVt/
You can use the
correct { margin: 0 auto;} not { float:center }
and you are using float:center, center is not element float element are available is left, right, none, inherit Ok dude
Related
I am learning css and try to do a wordpress. I did a child theme as recommended, and works on implementation.
I have a problem on menu alignment ; The primary menu is actually on the left side. I would like to put it on the right side. I know that I could use secondary menu but my question is just to understand how to modify a wordpress by css :)
The template is Reykjavik.
I tried vary solutions in the style.css child folder, like :
.main-navigation {
margin: auto;
}
to enlarge the main navigation zone, and next
.main-navigation-container ul {
float: right;
}
to put the menu in the right side of the screen but nothing works...
Also proved to work on padding but nothing changed..
Are you able to tell me were I'm doing something wrong please ?
Thank you for your help,
Jerry
Edit :
`
<button id="menu-toggle" class="menu-toggle" aria-controls="menu-primary" aria-expanded="true">Menu</button>
<div id="site-navigation-container" class="main-navigation-container">
<div class="mobile-search-form"><form role="search" method="get" class="search-form" action="http://localhost:8888/wordpress/">
<label>
<span class="screen-reader-text">Rechercher :</span>
<input type="search" class="search-field" placeholder="Recherche…" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Rechercher">
</form></div><div class="menu"><ul id="menu-primary" class="menu-primary" aria-expanded="true"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">Accueil</li>
Page test
Skip to menu toggle button
`
Add width attribute, it should move to the right in that case. Because currently width of navigation div is 100% so it has no where to move.
Ok i found a solution, which is not the best way I thought but resolved.
It is to set :
.main-navigation { position: relative; margin: auto; margin-right: 0px; }
Because setting width at 100% it goes over the logo (test in the example).
Change ul width to 100% and text-align to right. Child li will be display inline-block so they will behave like a text and move to right side.
I am working in jquery mobile i need to change white icon on search input to black.
here is my code
<div id="dvSearch" data-role="fieldcontain" class="ui-hide-label" >
<label id="lblSearch" for="txtsearch">Search</label>
<input type="search" id="txtsearch" class="ui-icon-alt" data-i18n="[placeholder]attr.placeholderSearch;" data-theme="a"/>
</div>
Here is jsfiddle
You can replace the background-image value with images/icons-18-black.png by add this CSS:
.ui-icon-searchfield:after
{
background-image: url(images/icons-18-black.png); //Remember to update this path
}
Here is your fiddle with the updated code http://jsfiddle.net/rBu3W/3/
I'm trying to align my Checkbox with label to center in my little webpage I'm developing but I cannot figure out how, and yes I've googled!
You can view source on my webpage, http://www.sithhappens.net (Load the phone on your mobile though thats where all the CSS is done is for mobile view (Desktop view will come later).
And see the css at http://www.sithhappens.net/iphone.css
Not HTML5 but it works:
http://jsfiddle.net/gYCQz/
CSS:
input
{
display: inline;
}
body
{
text-align: center;
}
HTML4+:
<input type="checkbox" value="Test" /> Test
if u want check box in center use this
<div>
<input type="checkbox" value="Test" />
<div>
then u can use text-align(right,left,center) whatever u want.
also u can use
<div align="center">
</div>
and remove margin-bottom from all tag give width and height.
I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
I'm trying to get an div with image background to appear to the right of a text box. I have tried Float = none, left, right, I have tried position and even played with margins but nothing seems to get it to stay.
<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
How's that work for ya?
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>
float left and right try to throw your element as far to one side of the container as possible. If you want the element on the right side of a second element, put it after the second element in your HTML. Also, divs are block elements. Block elements want to be on their own line. Use an inline element (like a span), or set the display css property to inline on a block element you don't want on a new line.
EDIT: Here it is as a span for ya
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>
Just float:right the div and remove the 245px left margin so you aren't pushing the input too far away.