|
|
hello again...
Attempting to design a site for my local area of NA [from scratch...(now in Pinegrow)...one that had previously been designed in Macromedia DW 2004...whereby all the child divs were of 'absolute' positioning; & resided inside a parent div set to margin: 0 auto...so everything was centered on the page (over a background image)]...but absolute positioning is horrible for responsive code construction; & I want our new site to be up to protocol for browser resize & smaller devices.
So...given the conspicuous lack of templates around the web (& in the app) that actually look like what I want to do...I worked up a rough sample of what the site should look like...roughly...(it's very simple, so this should be easy, right?):
http://www.moonjams.net/BurlCoNA.png
Keep in mind that all that you see above is always centered on the page (w/ a background image behind it)...& the page has to be responsive, whereby everything is distributed/flows correctly for browser resize & smaller devices.
ALSO: 1) The oval image block must be positioned where you see it on the page...top/left (in the parent)....over the gray rectangle.
ALSO 2) Speaking of which...the first child block (gray rectangle) is just that...a rectangular element filled w/ gray...not a header or paragraph or anything.
ALSO 3) Please don't send me to such-and-such tutorial or such-and-such code learning online seminar...I just want to do this on my own, so as to learn the basics of coding a responsive site along the way...(& if it turns out I'm too stupid for this task...if someone could put together a starter code page, where I could then place my own blocks/images/text...I would be happy to pay you, in kind...I just need to get this done; & my local area is waiting).
thanx,
dox
|
|
|
|
|
|
I wasn’t able to see your image but understand you want a responsive website and to author it yourself. Well there’s two ways to do it but it requires starting from scratch with a complete new way of thinking that defies your current method of HTML.
You have two ways here, one is using Bootstrap which is a framework of CSS and JQuery that covers almost everything. The other is creating your own framework from scratch. In other words writing your own responsive CSS system and JQuery.
Bootstrap looks easy but the examples are minimalist and a poor way to learn. Your website will look fine but will bomb on certain devices and no one will tell you. Then search engines will sort of look the other way and ignore you.
I’m on my 4th gen responsive design framework that is an hybrid of bootstrap, or a more complex overlay over the entire bootstrap package.
You might want to look at Mobirise
[Free Website Builder Software]
(https://mobirise.com/)
It’s a Windows app where you can select a template and drag sections onto the page and generate pure HTML. It’s actually pretty neat and makes good HTML. But the huge drawback is that you won’t really learn anything and you’ll paint yourself in the corner with it.
You can look at my website, for it’s a hybrid that uses some of the technology they used, only I cooked it up myself. I took the time to reverse engineer what they output and used some of the public components to fix my problems with the viewport and device display compatibility issues I had. Keep in mind this is 4th gen for me, but I know the framework really well now. And I write stuff scratch on Visual Studio 2017
Discover my world - Shameless hack and web contractor for hire - jkirkerx
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
We're developing a Angular 1 site that talks to a .NET WebAPI2 api. We have an interceptor related to the authentication side, but we're having problems with it. We are using a loading bar Angular component, and that component is reporting that the interceptor is broken. But we're not sure where/why and worse where to start investigating.
By simple code elimination, the _request method seems to be ok (or at least doesn't cause issues, it might still be bad code!)
Its the _responseSuccess method that causes the problem.
'use strict';
app.factory('authInterceptorService', ['$injector', '$q', '$location', 'localStorageService', function ($injector, $q, $location, localStorageService)
{
var authInterceptorServiceFactory = {};
function RequiresRefresh(responseURL)
{
if (responseURL.indexOf('getcutofftime') > -1)
return false;
if (responseURL.indexOf('resources') !== -1)
return true;
return false;
}
var _request = function (config)
{
config.headers = config.headers || {};
var authData = localStorageService.get('authorizationData');
if (authData)
{
config.headers.Authorization = 'Bearer ' + authData.token;
}
return config || q$.when(config);
};
var _responseSuccess = function (response)
{
var responseURL = response.config.url;
if (responseURL !== null && typeof responseURL !== 'undefined')
{
if (RequiresRefresh(responseURL))
{
var authData = localStorageService.get('authorizationData');
var JSONdata = {
windowsFullName: authData.windowsFullName
, windowsUserName: authData.windowsUserName
, summitUserName: authData.summitUserName
, summitFullName: authData.summitFullName
, clientID: 'MatterhornAuthApp'
};
$injector.get("$http")
.post(serviceBase + 'usermanagement/account/ReissueToken', JSONdata, { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authData.token } })
.then(function (response)
{
response = response.data;
localStorageService.set('authorizationData', {
token: response.protectedTicket
, summitUserName: response.summitUserName
, windowsFullName: response.windowsFullName
, windowsUserName: response.windowsUserName
, summitFullName: response.summitFullName
, refreshToken: ""
, useRefreshTokens: false
, isSummitAuth: authData.isSummitAuth
, isWindowsAuth: authData.isWindowsAuth
, roles: response.roles
});
}, function (err)
{
return $q.reject(err);
});
}
}
var status = response.status;
return response || $q.when(response);
};
authInterceptorServiceFactory.request = _request;
return authInterceptorServiceFactory;
}]);
Any help or advice would be appreciated.
|
|
|
|
|
How to use a php $_SERVER['PHP_SELF'] to insert form data into Mysql database and print
same form data automatically
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO reservation (`Class of Room`, `Room Number`, `Customer Name`, `Customer Address`, `Phone number`, Occupation, Amount, `Check in Time`, `Date`, Duration, `Name of Receptionist`) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",
GetSQLValueString($_POST['Class_of_Room'], "text"),
GetSQLValueString($_POST['Room_Number'], "text"),
GetSQLValueString($_POST['Customer_Name'], "text"),
GetSQLValueString($_POST['Customer_Address'], "text"),
GetSQLValueString($_POST['Phone_number'], "text"),
GetSQLValueString($_POST['Occupation'], "text"),
GetSQLValueString($_POST['Amount'], "text"),
GetSQLValueString($_POST['Check_in_Time'], "text"),
GetSQLValueString($_POST['Date'], "date"),
GetSQLValueString($_POST['Duration'], "text"),
GetSQLValueString($_POST['Name_of_Receptionist'], "text"));
mysql_select_db($database_Morrendb, $Morrendb);
$Result1 = mysql_query($insertSQL, $Morrendb) or die(mysql_error());
$insertGoTo = "reservation.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
header(sprintf("Location: %s", $insertGoTo));
}
?>
|
|
|
|
|
|
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.
|
|
|
|
|