legg92
Members
-
Joined
-
Last visited
Everything posted by legg92
-
I need to learn how to develop websites using Visual Studio for Web, I guess I don't need sql server express as sql is already built into visual studio for web. Server-Side I'll be using ASP.NET in C# and SQL. Client-Side I'll be using HTML5/CSS3, DOM, JavaScript/XML(AJAX). Do I need to learn anything else for a pretty sweet website? I have learnt C++ thoroughly, I believe I have enough knowledge in HTML/CSS. I went over JavaScript quickly but need a better understanding of it. ASP.NET and SQL I'm playing around with as I did with C# which was kinda similar to C++. What order should I learn these subjects in? And are there any crash tutorials on topics? I need to be able to develop a website using Ajax/ASP.NET/C# as soon as possible. Any information will be appreicated, thanks!
-
I'm making progress, one issue I've got across though that is bugging is the navigation bar not resting on top of the main div, you can notice it if you look closely. Here is the problem: http://snag.gy/PTe2F.jpg Here's my html code: <!DOCTYPE html> <html> <head> <title>This is the title!</title> <meta name="description" content="This is the description!"> <meta name="keywords" content="these, are, keywords"> <meta charset="UTF-8"> <link href="styles/stylesheet.css" type="text/css" rel="stylesheet"> <!--[if lt IE 9]><script src="scripts/html5shiv-printshiv.js"></script><![endif]--> <!--It is good practice to use comment tags to hide the contents of scripts from the browser so they do not show as plain text.--> <script type="text/javascript" src="scripts/dynamicajaxcontent.js"></script> </head> <body> <header> <h1><a href="index.html">CITIZENS AGENCY</a></h1> <nav id="firstNav"> <ul> <li><a href="javascript:ajaxpage('page1.html','main'); loadobjs('styles/stylesheet.css')">ABOUT</a></li> <li><a href="javascript:ajaxpage('page2.html','main'); loadobjs('styles/stylesheet.css')">THE BIG PICTURE</a></li> </ul> </nav> <nav id="secondNav"> <ul> <li><a href="javascript:ajaxpage('page3.html','main'); loadobjs('styles/stylesheet.css')">ARCHIVE</a></li> <li><a href="javascript:ajaxpage('page4.html','main'); loadobjs('styles/stylesheet.css')">SEARCH</a></li> <li><a href="javascript:ajaxpage('page5.html','main'); loadobjs('styles/stylesheet.css')">FORUM</a></li> </ul> </nav> </header> <div id="main"> <br/><br/><br/><br/><br/><br/>Yo </div> <footer> This is the footer! </footer> </body> </html> Here's my css code (scroll down past the reset code): /* normalize.css v3.0.1 | MIT License | git.io/normalize */ /* 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */ html{ font-family:sans-serif; /* 1 */ -ms-text-size-adjust:100%; /* 2 */ -webkit-text-size-adjust:100%; /* 2 */ } /* Remove default margin. */ body{ margin:0; } /* =====|||||HTML5 display definitions|||||===== */ /* Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{ display:block; } /* 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video{ display:inline-block; /* 1 */ vertical-align:baseline; /* 2 */ } /* Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]){ display:none; height:0; } /* Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template{ display:none; } /* =====|||||Links|||||===== */ /* Remove the gray background color from active links in IE 10. */ a{ background:transparent; } /* Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover{ outline:0; } /* =====|||||Text-level semantics|||||===== */ /* Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title]{ border-bottom:1px dotted; } /* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong{ font-weight:bold; } /* Address styling not present in Safari and Chrome. */ dfn{ font-style:italic; } /* Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */ h1{ font-size:2em; margin:0.67em 0; } /* Address styling not present in IE 8/9. */ mark{ background:#ff0; color:#000; } /* Address inconsistent and variable font size in all browsers. */ small{ font-size:80%; } /* Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup{ top:-0.5em; } sub{ bottom:-0.25em; } /* =====|||||Embedded content|||||===== */ /* Remove border when inside `a` element in IE 8/9/10. */ img{ border:0; } /* Correct overflow not hidden in IE 9/10/11. */ svg:not(:root){ overflow:hidden; } /* =====|||||Grouping content|||||===== */ /* Address margin not present in IE 8/9 and Safari. */ figure{ margin:1em 40px; } /* Address differences between Firefox and other browsers. */ hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0; } /* Contain overflow in all browsers. */ pre{ overflow:auto; } /* Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp{ font-family:monospace, monospace; font-size:1em; } /* =====|||||Forms|||||===== */ /* Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */ /* 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea{ color:inherit; /* 1 */ font:inherit; /* 2 */ margin:0; /* 3 */ } /* Address `overflow` set to `hidden` in IE 8/9/10/11. */ button{ overflow:visible; } /* Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */ button, select{ text-transform:none; } /* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"]{ -webkit-appearance:button; /* 2 */ cursor:pointer; /* 3 */ } /* Re-set default cursor for disabled elements. */ button[disabled], html input[disabled]{ cursor:default; } /* Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner{ border:0; padding:0; } /* Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ input{ line-height:normal; } /* It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"]{ box-sizing:border-box; /* 1 */ padding:0; /* 2 */ } /* Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ height:auto; } /* 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */ input[type="search"]{ -webkit-appearance:textfield; /* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box; /* 2 */ box-sizing:content-box; } /* Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; } /* Define consistent border, margin, and padding. */ fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; } /* 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend{ border:0; /* 1 */ padding:0; /* 2 */ } /* Remove default vertical scrollbar in IE 8/9/10/11. */ textarea{ overflow:auto; } /* Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup{ font-weight:bold; } /* =====|||||Tables|||||===== */ /* Remove most spacing between table cells. */ table{ border-collapse:collapse; border-spacing:0; } td, th{ padding:0; } /*====================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================== ======================================================================*/ *{ top:0; bottom:0; left:0; right:0; margin:0; border:0; padding:0; } html{ height:100%; width:100%; font-size:62.5%; background-color:#E8E8B9; } body{ width:84.62%; margin:0 auto; } a{ text-decoration:none; color:black; } header{ } header h1{ font-size:48px;font-family:3.4285rem; text-align:center; margin:1.1428rem, 0 1.1428rem 0; line-height:0; } #firstNav, #secondNav{ height:100%; } #firstNav ul{ list-style-type:none; float:left; } #secondNav ul{ list-style-type:none; float:right; } #firstNav ul li{ font-size:24px;font-size:1.7142rem; line-height:1; float:left; } #secondNav ul li{ font-size:24px;font-size:1.7142rem; line-height:1; float:left; } #firstNav ul li a, #secondNav ul li a{ padding:0 1.1428rem; background-color:#B9B96A; } #main{ font-size:16px;font-size:1.1428rem; line-height:1.5; height:100%; clear:left; height:0 auto !important; background-color:#FFFFFF; } footer{ height:100%; font-size:16px;font-size:1.1428rem; line-height:1.5; background-color:#B9B96A; }
-
So i need to understand more about media queries and use rem *{ margin:0; border:0; padding:0; } html{ font-size:100%; background-color:grey; } body{ } a{ text-decoration:none; color:black; background-color:#FFFFFF; } header{ height:18.75%; width:100%; background-color:blue; } header h1{ margin:0; font-size:2.617924em; text-align:center; } #firstNav, #secondNav{ width:100%; margin-top:3.187%; background-color:black; } #firstNav ul, #secondNav ul{ list-style-type:none; } #firstNav ul li, #secondNav ul li{ height:9.375%; width:20%; float:left; font-size:1.618em; background-color:pink; } #firstNav ul li a, #secondNav ul li a{ background-color:#black; } #main{ background-color:green; } footer{ background-color:yellow; }
-
Okay so I've disabled zoom and am using percentages for all the design and EM for fonts. Look at the difference between the first and second picture. Info: The grey is the html background color, blue is header (the navigation bar (pink) is also in header), green is the main divider where all my html files will be opened, yellow is the footer. I tried media queries and box-sizing:border-box. Neither worked. http://snag.gy/FE5w4.jpg http://snag.gy/Nivja.jpg
-
Ah i see, I just don't want to make it too complex. Just so when the user clicks on the site it is displayed as 100% then they just zoom in and move around etc to perform tasks. The majority of users will be connecting to the site from home i.e laptop/pc Thanks for the help people, probably have all the info I now need to start working on the site tonight..
-
Sorry but why disable zoom-out if users need it on smaller devices? I want the user to be able to move around, zoom in and out. Thanks for the border box sizing tip, thats something I needed as my nav bar was collapsing..
-
Interesting info on the font there I'll definitely do it. Though is there not a way for the page to automatically change dimensions?
-
Hello all! I've been trying to design a website for a couple of weeks now and it's been really stressful wanting to learn everything about html/5 and css/3 (I've just started learning), and I'm being pretty impatient. What I've done is built a basic HTML5 structure with a navigation inside a header, you lose sight of the header/nav as you scroll down. What I would like which I've failed at is an interface compatible with all browsers and devices, a design that adjusts to the users browser size not matter what browser/device. Which also allows zooming in on smaller devices like tablets/iPhones etc. Every aspect of the site needs to be fixed in place (at the moment my navigation moves up and down when I'm resizing the browser) where the user can move around and zoom in and out. I've also read into the benefits of em, so I set the default font to 100%, and all the headers/paragraphs etc I set to em accordingly. Would it be wise to set all fonts to em and the rest of my website like margins etc to percentages? Thanks for the help in advance!