I would like to create a menu with a login form on the right.
<div class="menu">
<div class="q">
<li class="pic"></li >
<li class="pic"></li >
<li class="pic"></li >
</div>
<div class="p">
<form>
<li><input type="text" name="a" class="inp"/></li>
<li><input type="password" name="b" class="inp"/></li>
<li class="pic" style="background-color:red;"></li >
</form>
</div>
Which css properties should I choose, that works on every browser?
Where is it necessary to fix everywhere the width-s?
Should I choose display:block and float:left or setting line-hight and display:inline?
If the window size is too small I don't want the right part to "jump down". Is it a good idea to solve this with min-width?
I made an example here:
http://jsfiddle.net/q3dqv/153/embedded/result/
(Unfortunately id does not work on IE7)
Thanks for help!
First, you should use 'ul' tags for your list and then, try to use display:inline-block to your 'li' to display your float correctly in IE7.
Related
I have a series of textareas that all follow the same format nested html format but I need to target one specifically. The problem I'm having is that the unique value I can use to identify the specific textarea is a parent's sibling's child.
Given this html
<fieldset>
<legend class="name">
▼
</legend>
<ul id="element_5014156" class="elements">
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<textarea name="container_prof|15192341" id="container_prof15192341"> TARGET TEXTAREA</textarea>
</div>
::after
</li>
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64">
</div>
::after
</li>
</ul>
</fieldset>
There are many of the <li> elements. I can't use the name or id as they dynamically created.
I want to target the textarea that says TARGET TEXTAREA. The only unqiquess I can find is the title attribute of the <a> element within the element.
I can get that specifically
legend.name a[title*='Standout']
In Chrome Console: $$("legend.name a[title*='Standout']");
and I can traverse all the way to up to the <legend> element from the textarea
legend.name ~ ul.elements li.element div.content textarea
In Chrome Console: $$("legend.name ~ ul.elements li.element div.content textarea")
That gives me ALL the textareas that have a div with class="content" that has a li with a class=element which has a ul with a class=elements which has a sibling legend with a class=name.
The only thing I can figure out is to add the qualifier that the legend with the class=name has to have the anchor that has 'Standout' in it's title.
I've tried
$$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul
Any help would be most appreciated!
The only unqiquess I can find is the title attribute of the element within the element.
Typically you do not want to add style rules on the text of the title attribute as that text must be localized for screen readers.
I've tried $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul
What you’re asking is not currently possible with CSS. :/
Your best solution here will be to add a meaningful attribute or class to your HTML from within the JavaScript (or other language) that generates it.
This seems to work:
legend.name + ul >li:first-child > div > textarea {
color:red;
}
legend.name + ul >li:first-child > div > textarea {
color: red;
}
<fieldset>
<legend class="name">
▼
</legend>
<ul id="element_5014156" class="elements">
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<textarea name="container_prof|15192341" id="container_prof15192341">TARGET TEXTAREA</textarea>
</div>
::after
</li>
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64">
</div>
::after
</li>
</ul>
</fieldset>
The only thing I can figure out is to add the qualifier that the legend with the class=name has to have the anchor that has 'Standout' in it's title.
This you cannot do with CSS...you would need Javascript for that.
Does anyone can create a JSfiddle code to demonstrate how to integrate two or more anchor tags in the same li item? I have searched but no clear answer of how could you for instance divide the li element with lets say 3 square anchors 1/3 each. Do you for example need to add div tags to each anchor?
eg.
<ul>
<li>
</li>
<li>
</li>
You can use the jQuery Mobile grid:
http://demos.jquerymobile.com/1.4.5/grids/
e.g.:
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="http://lorempixel.com/80/80/food/1/" />
</div>
<div class="ui-block-b">
Some text
</div>
<div class="ui-block-c">
Delete
</div>
</div>
</li>
Here is a simple DEMO
NOTE: you can then use CSS to tweak widths, margins, padding, etc. to taste.
Let's say, as you asked, you have 3 elements:
<div class="your_three_elements">
<img src="..." alt="..." />
Your Text
Your Button
</div>
So you have to have one link per one target. But those things aren't anchors. An anchor would be something like this:
<div class"your_anchorlink">
Your Link
</div>
<div id="gototext">
When you click on the link, you will get to this text (which is on the same page).
</div>
You could combine that by having a link go_to_some_page.html#gototext which will open the go_to_some_page page and jump to the id gototext.
But maybe I am missunderstanding what you want to do.
I have a nav bar and an image and search bar that i want placed inside the nav bar, furthest to the right.
I posted a thread about this the other day and was told to create a container div and nest the img and search bar inside and then float the container right. I've tried doing this, but I'm still having issues. The search bar is overlapping the nav bar instead of being inside it and the profile picture is nowhere to be seen. I have included a more detailed example of my code and I'm hoping someone can find what exactly I'm doing wrong here.
<nav>
<ul>
<li class="drop">
<div class="user-avatar">
<img src="http://www.b.com/img.ihttp://c3e308.medialib.glogster.com/teebing/media/68/687cc4e9a6c1aeb052c522de735ca61842054334/cookiemonsterface.jpg" alt=""" />
</div>
</li>
</ul>
</nav>
<div id="head-search">
<span>Search</span>
<form id="searchform">
<input placeholder="Search">
<input type="button" class="btn">
</form>
</div>
http://codepen.io/donnaloia/pen/hlEjs
in your .user-avatar img class, add float: right;
http://codepen.io/anon/pen/izGhg
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I have an code like
<ul id="payment-methods">
<li>
<input class="payment-method" id="gateway_4063663" name="gateway" type="radio" value="4063663">
<label for="gateway_4063663">PagSeguro</label>
</li>
<li>
<input class="payment-method" id="gateway_4068219" name="gateway" type="radio" value="4068219">
<label for="gateway_4068219">Cash on Delivery (COD)</label>
</li>
</ul>
And I need to replace the label of gateway_4063663 for an image called 'icon_1.gif' but I have only access with CSS3.
Is there a way to replace the label... or set an backgroud image?
I'm using a css like
#payment-methods li #gateway_4063663 label { background: url('icon_1.gif'); }
but nothing happens...
I suggest you, wrap around a <div> tag, and change the background of <div>
<div class="TEST">
<label for="gateway_4063663">PagSeguro</label>
</div>
Change the background image for <div> and set the opacity for label to 0.
I found the solution.
As I mentioned, my xpath was wrong... the correct path is
#payment-methods li label[for="gateway_4063663"] {
content: url('pic_1.gif')
}