|
Hi, I tried to make something like pinterest.
I want to remove this gap (Pointed by black arrow)
Click here to view image[^]
This is my CSS for container
.fokus-news
{
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
border: solid #C40000 1px;
width: 250px;
padding: 5px;
display: inline-block;
margin: 10px;
vertical-align: top;
}
|
|
|
|
|
Hello dear everyone,
I am creating a dropdown menu on my webpage (ASP.Net) but it seems that CSS for dropdown menu not to work for me.
My coding goes here, check this link Edit fiddle - JSFiddle[^]
I am not sure which part that causing it not to work. I viewed some sample from internet but I just don't get the mistake that I've done in my coding.
Looking for your help. Thank you very much.
modified 20-Oct-16 23:59pm.
|
|
|
|
|
First off, explain what is happening and what you expect to happen, instead of just saying "it doesn't work."
Secondly, you have overflow hidden on your ul which is hiding your items.
Since you did not explain what you want to have happen, I'm not sure what else to tell you.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Hello, thank you for replying. I solved the issue. As for result here was the coding i used :
ASP.Net html
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Daily Upload</a></li>
<li><a href="#">Report
<img id="arrow" style="float: right; padding-top: 5px;" src="source/arrow.gif" /></a>
<ul>
<li><a href="#">Daily report by branch</a></li>
<li><a href="#">Monthly report</a></li>
</ul>
</li>
<li><a href="#">Logout</a></li>
</ul>
CSS
ul.menu > li {
position: relative;
left: -40px;
width: 15%;
list-style-type: none;
float: left;
}
ul.menu ul{
display: none;
position: relative;
list-style-type: none;
z-index: 10;
}
ul.menu > li:hover ul {
display: block;
background-color: #fff;
padding: 0;
margin: 0;
}
li a {
border: 0.5px solid #bdbdbd;
display: block;
text-align: left;
padding: 5px 25px;
}
li a:hover {
background-color: #f44336;
color: white!important;
font-weight: bold;
}
li a.active {
background-color: #f44336!important;
color: white!important;
font-weight: bold;
}
Javascript
$(function () {
var selector = '.menu li a';
$(selector).on('click', function () {
$(selector).removeClass('active');
$(this).addClass('active');
});
});
|
|
|
|
|
I basically want to know about making a site which doesn't look messy, and for that, i don't want to divide it in some predefined portion.
i don't want to use table while making the index page.
give some hint for another way to do it.
|
|
|
|
|
Use divs.
Member 12793870 wrote: which doesn't look messy,
Regardless of which approach you use, anything can look messy.
Perhaps you should design it out on paper first or google for free web templates to get some ideas for what you want to do.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
If you don't want to use a table, then don't use a table. There are plenty of better ways to lay out your page.
Since it sounds like you're new to web design, you might want to start out with a framework. It's not quite as flexible as rolling your own styles, but it will probably get you up and running faster.
For example:
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
|
Can any Body tell me if i want to expert in Android Development which java concepts I need to focus
|
|
|
|
|
|
Member 12229102 wrote: Can any Body tell me if i want to expert in Android Development which java concepts I need to focus
The most accurate answer we can give is "all of them." But it will depend on what you end up doing. If you never need to access a db, then you won't need that. But we have no idea what code you will be or won't be doing.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Thank you for your support
|
|
|
|
|
When I request a .aspx page that is not on our site, I get redirected to a custom error page which is the designed behavior. When I request a pdf that is not on our site, however, I get a generic 404 error. My web.config has the following:
<customErrors mode="RemoteOnly" defaultRedirect="default.aspx">
<error statusCode="403" redirect="dcg/PageNotFound.aspx" />
<error statusCode="404" redirect="dcg/PageNotFound.aspx" />
</customErrors>
On top of this, when I do get redirected to "dcg/PageNotFound.aspx" page, the browser is appending the page to itself over and over like it's in a continual error loop. I don't understand why this is happening. Any help would be appreciated.
|
|
|
|
|
I found the continual loop problem. It was an Ajax call. I still do not know why I get the generic 404 when a pdf is requested.
|
|
|
|
|
Problem solved. After reading a number of articles, I saw mention of how a global.asax page can be used to handle errors. Now, when a pdf is requested and it's not on our site, the 404 is handled correctly.
|
|
|
|
|
Sorry experts if this is cheap question.
I have been struggling to get a handle on responsive web design and have been scouring the web for useful information.
Even though there is a lot of stuff out there, I keep running into the following:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="style320.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 544px)" href="style544.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 992px)" href="style992.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1200px)" href="style1200.css" />
My question is, where do I find the css files for instance style320.css, style544.css, etc?
I am essentially trying to convert the following html into responsive login page but nothing I have tried so far seems to be worked when I view the page on iphone.
<form id="FormToValidate" method="POST" action="verify_login.php">
<table width="560px" align="center">
<tr>
<td width="100%"><img id="Img2" src="images/welcome.gif" alt="" runat="server" /></td>
</tr>
<tr>
<td>
<span style="color:red;font-weight:bold;">INSTRUCTIONS:</span> To log into the screen, you will need to sign in with your .....</span>.
</td></tr><tr><td> </td></tr>
<td>
<span style="background-color:Yellow;"> eg: *****</span>
</td>
</tr>
<tr>
<td width="100%"><img id="Img1" src="images/line.gif" alt="" runat="server" /></td>
</tr>
</table>
<table>
<tr>
<td nowrap>
<div class="input text">
<label>User Name:</label>
<input maxlength="40" class="required" name="user" id="user" size="20" placeholder="Enter username!" type="text" title="Please enter a username." tabindex="2" value="" style="width:400px;color:#000;font-size:10pt;height:20px;" />
</div>
</td>
</tr>
<tr>
<td nowrap>
<div class="input text">
<label>Password:</label>
<input maxlength="40" class="required" name="pass" id="pass" size="20" placeholder="Enter password!" type="password" tabindex="3" title="Please enter a password." value="" style="width:400px;color:#000;font-size:10pt;height:20px;" />
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<div class="buttonSubmit">
<input type="submit" id="btnValidate" style="width:80px; margin-left:-152px;" value="Log in >>" />
</div><br clear="all"/>
</td>
</tr>
</table>
</form>
Thanks a lot in advance
|
|
|
|
|
Since there's no path specified in the href attribute, you find them in the same folder as your HTML / PHP file. If they don't exist, then you need to create them.
This example appears to be using a desktop-first approach, meaning that the styles in styleX.css only apply to screens up to Xpx wide. You would also need to have a base stylesheet with no media query, which would provide the base styles, and the styling for screens larger than your maximum breakpoint (1200px).
The alternative is to use a mobile-first approach; your base styles provide the styling for mobile devices, and you then use media queries with min-width / min-device-width to override the styling for larger screens.
You don't have to use separate stylesheet files; you can do it all in one:
@media screen and (max-device-width: 320px) {
}
@media screen and (max-device-width: 544px) {
}
...
NB: You'll struggle to make that form responsive as-is. You've used <table>s for layout, and you have fixed widths in inline styles. You've also used a negative margin to shift the button. You'll need to change the markup before you start trying to apply a responsive design to it.
Google has plenty of examples of creating a responsive login form, which would probably be a better place to start. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Awesome!
As always, thank you very much Richard.
|
|
|
|
|
Hello,
i run a website with tables of diffrent contact numbers in the UK.Its a free project im working on. I have some issue with this table that wont go to the main DB and i cant find a way to control it...
I think the best way is just working with some tables plugin for WP?
Thank you
|
|
|
|
|
Member 12768096 wrote: I think the best way is just working with some tables plugin for WP?
So...is this a statement or a question?
Is WP short for WordPress, or some other acronym, or did you forget an F, or...?
We need information to give you any help.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
I have a page called MainPage which has a draggable object and an iframe. When the iframe loads it opens a page called TestPage which is in the same domain as MainPage.
The droppable area is in TestPage and when I drop an object into the iframe on MainPage I would like the object to appear on TestPage at the exact location it was dropped. Currently I am able to drag but not drop the object in the drop area.
Please see my markup and script here.
modified 28-Sep-16 19:42pm.
|
|
|
|
|
I have the following code:
$('#GetEmployee').click(function () {
var id = $('#employeeidget').val();
$.ajax({
url: 'http://localhost:56811/api/Values/Get?id=' + id,
type: 'GET',
dataType: 'jsonp',
success: function (data) {
var items = '';
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td>" + data.EmployeeID + "</td>"
+ "<td>" + data.Name + "</td>"
+ "<td>" + data.ManagerID + "</td>"
+ "</tr>";
$('#tblEmployee tbody').append(rows);
});
},
error: function (jqXHR, exception) {
if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
I don't know what I am doing wrong but every time the ajax call is done it goes to error function
The error I am getting is jqXHR.status === 0 connect verify network. CORS is enabled in web.config file
modified 16-Sep-16 8:44am.
|
|
|
|
|
Member 8154845 wrote: CORS is enabled in web.config file
In which site? The one that's hosting your API, or the one where your code is running?
Member 8154845 wrote: dataType: 'jsonp',
Have you configured the JsonpMediaTypeFormatter, as described in this StackOverflow thread[^] and this tip[^]?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
@Richardd Deeming
Thank you for the response. I have CORS enabled in API.
No, I did not have JsonpMediaTypeFormatter configured. Let me try configuring it.
|
|
|
|
|
What is jqXHR.responseText when the error occurs?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
