|
|
How can I access the ul and the li menu inside the div in CSS?
<section id="main">
<div id="=cont">
<ul>
<li><a href="about.html"> Our Hitory </a>
<ul>
<li><a href="index.html"> The Foundation </a></li>
<li><a href="about.html"> Our Founders </a></li>
</ul>
</li>
<li>
<a href="about.html"> Our Company </a>
<ul>
<li><a href="index.html"> Our Business Practices </a></li>
<li><a href="about.html"> Our Brokers </a></li>
</ul>
</li>
</ul>
</div>
I've tried so many combinations in css but can't seem to be able to access that menu and style it.
Thanks very much in advance!
|
|
|
|
|
Start by fixing the id attribute on the <div> - IDs cannot start with "=":
<div id="cont">
Then, it's simply a case of using the descendant or child selectors:
#cont ul
{
}
#cont > ul
{
}
#cont ul ul
{
}
#cont > ul > li > ul
{
}
#cont li
{
}
#cont > ul > li
{
}
#cont li li
{
}
#cont > ul > li > ul > li
{
}
If all else fails, use your browser's developer tools to inspect the elements to see what styles are applied.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Good day! Please help me how to convert this code for search in codeigniter way.
<title>test search
table,tr,th,td
{
border: 1px solid black;
}
| Username | Firstname | Lastname | | | |
|
|
|
|
|
hello...
In my designs, I almost always create a Parent Layer (div)...w/ relative positioning; & w/ a margin of '0 auto' so it remains centered on the page (since I almost always use background images)...& then my other divs (nested inside the parent) are always positioned absolutely...the code of which would look something like this:
<div id="Layer1" style="position:relative; width:840px; height:2500px; margin: 0 auto; background color: #FFFFF; layer-background-color: #FFFFFF">
<div id="Layer2" style="position:absolute; left:0px; top:0px; width:840px; height:222px; z-index:1; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000;"></div>
<div id="Layer3" class="style1" style="position:absolute; left:0px; top:50px; width:840px; height:136px; z-index:1">
<div align="center">TITLE</div>
</div>
<div id="Layer4" style="position:absolute; left:0px; top:250px; width:440px; height:380px; z-index:1"><img src="SomePhoto.jpg" width="440" height="380"></div>
<div id="Layer5" style="position:absolute; left:300px; top:720px; width:460px; height:330px; z-index:1">Some Text </div>
</div>...with a result similar to this:
http://www.moonjams.net/EXAMPLE.png
So...I'm not a pro coder by a long shot...I design like a graphic illustrator would in laying out a magazine page...but...given the fact that I've been told never to use Absolute Positioning (on the Child divs inside the Parent), how would I now re-code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all the elements flow correctly, stacking the way they're supposed to...left to right, top to bottom...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...???
[btw...not asking to have my work done for me...but if someone could please provide just a short code example using a couple fictitious image blocks, I would be appreciative...OR...direct me to an informational on the web detailing exactly how to do it...thanx].
thanx,
dox
|
|
|
|
|
There is nothing wrong with Absolute Positioning, this is a widely used property and is here to stay for a long time. The way you are using it is unnecessary that is if you don't display your layers above a fixed background image (<img src="">). If you want to move away from Absolute Positioning, use margins.
|
|
|
|
|
|
I am a heavy user of absolute positioning. It is used, in particular, to build what could be referred to as consoles. One could use relative positioning for this, too, but with a good deal more work (or just different adaptive habits). I use relative, too, in a situation where I produce additional input areas on demand. Content is absolute, out block is relative.
These, in turn, as a block can also be positioned absolutely. Less of a problem now, but it was the only way to make a page design consistent across platforms only a few years ago (IE, for example, was was a horror story).
Real lesson:
Don't listen too hard to others' opinions on the latest fashion in HTML development. Tables are/were frowned upon. Snobbery! Sure - you can do more with div's, but if you don't need that "more", life with tables is easier to design and easier to modify.
So - you need to meet your design needs - but only make changes that are either essential or that you perceive will come back and bite your backside sometime in the future.
Above all, you need predictability!
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi,
I am new to front end development I have a requirement to create a online registration form which has attachments and more comments i.e text field.
So I want to start my online form with HTML as it is an open source.
Can anyone guide me how to create a form and upon submission by user it must be either saved as pdf in their local drive and send an email to me or else directly upon submission it should sent to my email directly as pdf.I want to use open source/Excel for front end
|
|
|
|
|
Since you posted this question in the Web Development Forum, I'm assuming you are considering developing a Web Application to solve your problem.
That being said, I would check out the following library to handle your PDF requirements.
iTextSharp, a .NET PDF library download | SourceForge.net[^]
(I have never used it, but it looks interesting)
|
|
|
|
|
|
The part of the link after the # character needs to be defined as a "bookmark" within the target page. You do that by setting the id attribute on an element.
Eg:
target.html:
<img id="image1" src="..." />
Link:
<a href="target.html#image1">Image 1</a>
You can set the id on any visible element on the page, but it needs to be unique - no other element on the page can have the same id.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I am facing some difficulties in designing of this <a href="http://www.sarcasticca.com/ca-cpt-registration-form-june-2018/">CA CPT / CA Foundation Registration </a>[<a href="http://www.sarcasticca.com/ca-cpt-registration-form-june-2018/" target="_blank" title="New Window">^</a>]. I don't know what is happening what it doesn't showing the main image.
Please help!
Thanks in advance
|
|
|
|
|
Hey everyone,
My class assignment is to develop a functional analog clock using HTML, CSS, and JS. I'm having trouble with a one of the requirements which is using a drop-down menu to change the time according to a selected time-zone. My understanding is that I need to use the DOM to set the selector values, followed by some simple math for time conversions. Maybe I understand what to do, just not how to do it.
Here's a link to the code Clock Assignment - JSFiddle[^]
I'm very new to web development and any help would be greatly appreciated. Let me know if you need any more information.
|
|
|
|
|
How to perform addition using JavaScript outputed linetotal1,2,3,4,5 to subtotal
<td><input type="text" name="linetotal1" id="linetotal1" onKeyUp="calc1(this.form)" class="linetotal1" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 200
<input type="text" name="linetotal2" id="linetotal2" onKeyUp="calc2(this.form)" class="linetotal2" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 300
<input type="text" name="linetotal3" id="linetotal3" onKeyUp="calc3(this.form)" class="linetotal3" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 400
<input type="text" name="linetotal4" id="linetotal4" onKeyUp="calc4(this.form)" class="linetotal4" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 200
<input type="text" name="linetotal5" id="linetotal5" onKeyUp="calc5(this.form)" class="linetotal5" style="border:none;width: 100%;">eg.Output 200
</td>
<tr align="right">
<td colspan="3" class="noBorder">
<b><font size="4px;">Subtotal<br>Tax (%)</font></b></td>
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="0.00" onchange="result(this.Form)" style="border:none;width: 100%;">eg Subtotal Output 13000
<input type="text" name="tax" value="0.00" readonly="readonly" style="border:none;width: 100%;">
</td>
</tr>
|
|
|
|
|
Hi Every one can you explain in real time why they write CRUD operations in Database Store proc
and same way in code behind
|
|
|
|
|
Maniteja Attili wrote: why they write
Who is "they"?
|
|
|
|
|
the DB Developers and COde
|
|
|
|
|
Which ones? There is really no point in posting such vague details. If you want help with a proper question then please provide proper details.
|
|
|
|
|
Hi,
I have been developing a web application which is now a just a basic website coded in html/css/js. I will be shifting it to Rails platform (so I won't really need to implement this answer I am looking for in the long term). Like in Rails (or any other back-end coding platform), we can just define the layout (or template as some may prefer calling it) in one view file and write the other views separately. I was wondering if the same is possible without a working back-end.
Thanks for any help in advance.
Cheers,
Ritwesh
|
|
|
|
|
The Situation
I am displaying data from MYSQL database into a HTML table on a web page.
I am using CSS to display alternative rows in different text size and background colours.
I am using the 'hover' function to change background colours and text size
The Problem
The 'hover' function works perfectly for the 'odd; rows however for the 'even' rows it will change the text size but not the background colour
My CSS code
table tbody tr:nth-child(odd) td {
background-color: lightblue;
}
.table tbody tr:nth-child(even) td {
background-color: lightgreen;
}
table tbody tr:hover td {
background-color: white;
transition: all .5s;
font-weight:normal;
font-size: 2.5em;
color: black;
border-right: 1px solid grey;
}
Solution:
Can anyone spot the problem?
|
|
|
|
|
Works fine for me in Firefox, Chrome, Edge, and IE11: Demo[^]
The only slight issue is that the changing text size makes it very difficult to hover the next row accurately; as soon as the mouse leaves one row, its text size decreases, and the other rows shift up. It's easier to move in and out of the cells from the side.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks for giving me some assistance.
I have no idea why I had the problem but when I closed the browser cleared the cache and open it, it worked fine for me also.
Clearing the Cache while open made no difference.
Padding around the cells removes the issues you correctly identified on mouse over
Thanks again
|
|
|
|
|
If you don't, already, when refreshing a page under development, use Ctl=F5 (at least in firefox) to force reload without the cache. There are also methods to add a header that forces uncached reloads for all - which at times can be handy.
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
OzWaz wrote:
.table tbody tr:nth-child(even) td {
Do you really want that leading "." ?
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
