Jump to content

Krewe

Members
 View Profile  See their activity

  • Posts

    387

  • Joined

  • Last visited

 Content Type 

Posts posted by Krewe

    Links side by side

    in HTML/XHTML

    Posted

    The answer was much simpler than using a table, this works:
    <a href="index.html" class="auto-style1">Appetizers | Nachos | Soups | Seafood | Steak </a><a href="index.html" class="auto-style1">Appetizers | Lunch | Desserts | Kids | Texmex | Tacos </a>

    Much less mark-up and semantically correct.And some CSS which takes care of the purpose the <strong> tags had:

    .auto-style1 { font-weight: bold; }

    This works, but not for what he needs. He wants each word as a link.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Link Test</title><style type="text/css">p{  margin: 0 0 10px 0;  padding: 0;}a.menuLinks{  font-weight: bold;  margin: 5px;}</style></head><body><p><a href="#appetizers" class="menuLinks">Appetizers</a> | <a href="#nachos" class="menuLinks">Nachos</a> | <a href="#soups" class="menuLinks">Soups</a> | <a href="#seafood" class="menuLinks">Seafood</a> | <a href="#steak" class="menuLinks">Steak</a></p><p><a href="#lunch" class="menuLinks">Lunch</a> | <a href="#desserts" class="menuLinks">Desserts</a> | <a href="#kids" class="menuLinks">Kids</a> | <a href="#texmex" class="menuLinks">Texmex</a> | <a href="#tacos" class="menuLinks">Tacos</a></p></body></html>

    I did the href's as "#link" because I am assuming he wants them to jump to a name anchor link.

    • Like 1

    Links side by side

    in HTML/XHTML

    Posted · Edited by Krewe

    Just remove the <p> and <strong> tags. Use CSS to add style properties to the link.
    ... I totally skipped the <P> tags some how, so my suggestion won't work :PYou could omit the <p> tags for say, a <ul> and <li> set of tags and display them horizontally with CSS, OR you could float the <p> tags left with a common class, or inline-styling if you have too...EDIT: I've been yelled at by a lot of people saying "<a> link anchors are not containers! Don't use them as such... blah blah blah" when I don't contain an anchor within a <p> or <div> or something... That is why I am suggesting a <ul> <li> set.

    FBLA Competition Website

    in Critiques

    Posted

    For FBLA in my school there is a web design competition event, so I decided to give it my shot Senior year... The prompt was to create a Community Calendar for your FBLA chapter and your local community. They encouraged you to incorporate social media and a map system. So naturally I did all three... cause I could. Here is my website: Http://www.codekrewe.com/fblaFor social media I just did a twitter feed in the footer and a facebook like box, where the facebook account is connected to the twitter.So when you add a facebook post it adds a twitter post. Makes both look more full :P. For the map system I used Google Map's API and created a custom dynamic map for each event page. (Event pages are dynamically loaded from a database) So the address is loaded into the API. Then there is also a feature on the event page where a user can get directions to an event, right in the event page itself. No redirecting to google maps. Let me know what y'all think. Krewe

    Portfolio Site Critique

    in Critiques

    Posted · Edited by Krewe

    Just adding my 2d worth. I don't like the way that the content is served from the navigation...to me it just looks very bad seeing the pages scroll past when one goes from one page to another. This interface has a very limited scope. It gets worse the more pages you have. What if you had 1000 pages? Would we have to see hundreds of pages whizz past before getting to the one we wanted? When your site first loads and you hit the home button the home page moves up a little. I validated it. At HTML5 it has 16 errors and 2 warnings...always validate, it will save you much heartache later. I am sure many millions of others will love your site and that's great. I am not one of them...sorry. Apart from that I still like it. Keep banging away you might just have something.
    I have got to agree with this aswell, basically everything he stated.you are kinda limited. Especially since your webpage will not handle dynamic height, which is no fun to work with/around. You have a great foundation though, now continue and make it even better.My website took me 5months+ to finalize my design and layout of items. I went through 3 completely different design and concepts.It may seem tedious, and it is, but you learn a lot about everything. If you don't like something, fix it. Don't say, well I'll forget it for now, because if you are anything like me once you see something you do like it will eat you up until you fix it.

    <head> confusion in W3Schools Tutorials

    in Suggestions

    Posted

    One reason I think they omitted it was because beginners to html tend to think <head> tag is for the top of the page. They use it just like <body> except they think what they put in there will be visible at the top of the page (Like a banner). Obviously this isn't true, so to avoid this confusion they just leave it out, since HTML can work perfectly fine without it. I'm not just saying beginners MIGHT get confused, I have to help beginners to HTML learn at my school and a majority of them thought the head was for the top of the page.

    hashing the username

    in PHP

    Posted · Edited by Krewe

    Why do you want to hash the username? Even if your setting a cookie.I can't think of any reason you'd need more security with a username if you HAVE TO hash it, so Sha1 should be enough.

    Portfolio Site Critique

    in Critiques

    Posted

    Did you create a new account cause I remember the world of type thing in your portfolio. Few things I noticed! 1) The nav bar, there is no hover effect when you mouse over any of the links. It's a little thing, but causes some people to think it isn't a link when it doesn't react to them in any way. (Cursor doesn't really count).2) Again with the nav bar, only the text is clickable. It would be really nice to be able to click the "Home" block for example instead of just the text "Home".3) Contact page submit button. In my opinion is really ugly. With your talent I'm sure you can do better! Bold text or something could make it look better, but I don't like how it looks right now.4) Something neat that might be cool to add is have your header and footer change to the background-color of the slide your on? For example the work page is white, so have the background-color of the footer and header change to #FFF aswell and change the font color accordingly. (Since your logo is all text :) it's not hard to change at all). This can easily be done with JavaScript, which I'm sure you knew! That's all I have, good job.~Krewe

    Dynamic Drop Down List

    in HTML/XHTML

    Posted

    With Shadow's link, which is what I was referring to when I said to just use JavaScript, is perfect. Only thing to be careful of (maybe the guy went over it on that blog post, I skimmed over it so I might of missed it) is that you need to have fall back for the odd users that have JavaScript disabled. How do you do this? Well in your javascript you either hide the submit button, or you return false the submit, either way you need a way to submit the drop down selection to a php file that will display the correct files.

    Dynamic Drop Down List

    in HTML/XHTML

    Posted

    Do you know about ajax. By selecting from one drop down, other drop down will fill. For this you need ajax. Search this in google: dynamic drop down list using ajax. Hope you will get a nice code there.
    He doesn't NEED AJAX, AJAX is just nice to have and use. (Heck he could even just use a nice little JavaScript/jQuery function to display a div full of the links documents once a dropdown is selected, without using AJAX at all)He can easily achieve this task with php, where it redirects them to a specific page depending on what drop down item they selected.But this can not be done just with HTML. Which method would you prefer? JavaScript/jQuery (Same thing just different coding syntax)orPHP
    • Like 1

    Position Absolute causing problems

    in CSS

    Posted · Edited by Krewe

    Absolute positioning always causes problems. It's probably best if you re-think your design. There's no way to get a page to be pixel-perfect in every browser, which is why you need to make designs fluid and flexible, allowing elements to interact between eachother.
    I know, this is for a client of the place I'm doing an internship for. The client had a graphic designer design the website before coming to us, and there is a lot of overlapping causing the need for absolute... I usually never use it, but saw the need here. I'll try my luck with relative, hopefully it works.

    Position Absolute causing problems

    in CSS

    Posted

    I asked this question on stack and someone kept telling me I need to switch to relative if I want the content to dynamically change its height... I'd rather not do that because then it changes the positioning (Since it's not relative to the parent element). So if there is a fix I'd be really grateful. Note: the homeHead has a fixed height, it is NOT DYNAMIC if that helps at all.

    Position Absolute causing problems

    in CSS

    Posted · Edited by Krewe

    I am trying to get the design of my homepage finished, however I am having some trouble getting the background color of a content div to flow passed a div. Html:

    [/font][/color]<div id="container">	<div id="content">		<div id="headerInfo">			<div class="leftLocation">				<p>golden, co</p>			</div>			<div class="rightInfo">				<span class="text">					<a href="about.php">about us</a>					<a href="contact.php">contact</a>					<span class="phone">XXX-XXX-XXXX</span>				</span>			</div>			<div class="rightPic">				<img src="images/facebook.png" alt="facebook" title="facebook" />				<img src="images/yelp.png" alt="yelp" title="yelp" />			</div>			<div class="clear"></div>		</div>		<div id="homeHead">			<img class="logo" src="images/logo.png" alt="logo" />			<img class="paintSplash" src="images/paintSplash.png" alt="paint" />			<span id="nav">				<a href="classes">classes</a>				<a href="classes">calendar</a>				<a href="classes">gallery</a>				<a href="classes">FAQ</a>				<a href="classes">private events</a>				<a href="classes">large-scale</a>			</span>			<span id="word">				...Paint			</span>				<img src="images/homeSlide1.png" class="pic1" alt="pic1"/>				<img src="images/homeSlide4.png" class="pic1" alt="pic2"/>				<img src="images/homeSlide7.png" class="pic1" alt="pic3"/>[/font][/color][color=#000000][font=Arial,]				<img src="images/homeSlide2.png" class="pic2" alt="pic4"/>				<img src="images/homeSlide5.png" class="pic2" alt="pic5"/>				<img src="images/homeSlide8.png" class="pic2" alt="pic6"/>[/font][/color][color=#000000][font=Arial,]				<img src="images/homeSlide3.png" class="pic3" alt="pic7"/>				<img src="images/homeSlide6.png" class="pic3" alt="pic8"/>				<img src="images/homeSlide9.png" class="pic3" alt="pic9"/>			<div id="step1">				<span class="easy">Easy as</span>				<span class="part">Sign Up</span>				<span class="num">1.</span>				<p style="padding-bottom:5px;">Pick your favorite class and <a href="#">REGISTER ONLINE</a>.</p>				<p class="bottom"><a href="#">Classes</a> Starting at only $25!</p>			</div>			<div id="step2">				<span class="part">Show Up</span>				<span class="num">2.</span>				<p style="padding-bottom:5px;">We supply everything! Check out the <a href="#">FAQ</a>.</p>				<p class="bottom">Limited Seating, <a href="#">Register Now!</a></p>			</div>			<div id="step3">				<span class="part2">Enjoy!</span>				<span class="num2">3.</span>				<img class="wine" src="images/wine.png" alt="wine" />				<p style="padding-bottom:10px;">Sip your drink, paint, play & have fun.</p>				<p class="bottom">See our <a href="#">Gallery</a> for results!</p>			</div>		</div><!--End Header Info -->		<div id="bodyInfo">			<div id="left">				<p>					<span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!				</p>				<p id="midLeft">					<span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes • Open Studio Times • Private Parties • Corporate Team-Builds • Charity Events				</p>				<p>					Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!				</p>			</div>			<div id="right">			</div>		</div><!-- End bodyInfo -->	</div></div>

    CSS:

    [/font][/color]#container{width:100%;height:100%;}#content{width:900px;height:100%;margin:0px auto;background-color:#FFF;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/*Header Info*/#headerInfo{position: relative;}.leftLocation{float:left;font-family: HelveticaNeueStd;font-size:14px;color:#4d2c0d;height:30px;margin-top:10px;}.leftLocation p{padding-right:5px;}.rightInfo{position: relative;float:right;width:360px;}.rightInfo a{color:#3397bf;text-decoration: none;font-size:14px;font-family: HelveticaNeueStd;padding-right:10px;}.rightInfo a:hover{color:#e11b6b;}span.text{position:absolute;top:-7px;}span.phone{font-family: Lavanderia;font-size:30px;color:#4d2c0d;}.rightPic{position: absolute;right:0px;}/*Home Head*/#homeHead{background-image:url('../images/homeHead.png');width:900px;height:573px;position:relative;clear: both;}.logo{position: absolute;top:-30px;left:10px;}.paintSplash{position: absolute;left:350px;top:-35px;height:105px;}#nav{position: absolute;left:245px;top:70px;}#nav a{color:#FFF;font-size: 16px;font-family: HelveticaNeueStd;padding-right:10px;text-decoration: none;}#nav a:hover{color:#e11b6b;}#word{position: absolute;top:90px;left:235px;padding:10px;color:#3397bf;font-family: Lavanderia;font-size:35px;}#pic1{[/font][/color][color=#000000][font=Arial,]}.pic1{position:absolute;top:249px;left:160px;width:140px;height:174px;}#pic2{transform: rotate(7deg);-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Safari and Chrome */-o-transform: rotate(7deg); /* Opera */-moz-transform: rotate(7deg); /* Firefox */}.pic2{position:absolute;top:263px;left:424px;width:102px;height:150px;transform: rotate(7deg);-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Safari and Chrome */-o-transform: rotate(7deg); /* Opera */-moz-transform: rotate(7deg); /* Firefox */}#pic3{transform: rotate(-13deg);-ms-transform: rotate(-13deg); /* IE 9 */-webkit-transform: rotate(-13deg); /* Safari and Chrome */-o-transform: rotate(-13deg); /* Opera */-moz-transform: rotate(-13deg); /* Firefox */}.pic3{position:absolute;top:252px;left:641px;width:121px;height:173px;transform: rotate(-13deg);-ms-transform: rotate(-13deg); /* IE 9 */-webkit-transform: rotate(-13deg); /* Safari and Chrome */-o-transform: rotate(-13deg); /* Opera */-moz-transform: rotate(-13deg); /* Firefox */}#step1{position:absolute;font-family: Helvetica;top:500px;left:100px;width:200px;height:60px;padding:15px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step1 a{color:#e11b6b;}.bottom{font-family: HelveticaNeueStd-Italic;color:#3397bf;}.bottom a{color:#e11b6b;}.easy{font-family: Helvetica;font-size:14px;position: absolute;color:#FFF;top:-25px;left:-30px;}.num{font-family: HelveticaNeueStd;font-size:45px;color:#FFF;position: absolute;top:-45px;left:20px;}.part{font-family: Lavanderia;color:#FFF;font-size:40px;position: absolute;top:-45px;left:60px;}.num2{font-family: HelveticaNeueStd;font-size:45px;color:#FFF;position: absolute;top:-45px;left:60px;}.part2{font-family: Lavanderia;color:#FFF;font-size:40px;position: absolute;top:-45px;left:100px;}#step2{position:absolute;font-family: Helvetica;top:500px;left:345px;width:200px;height:60px;padding:15px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step2 a{color:#e11b6b;}#step3{position:absolute;font-family: Helvetica;top:500px;left:590px;width:200px;height:60px;padding:10px;padding-bottom:20px;padding-left:50px;text-align: center;background-color:#f0deba;-webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;		box-shadow: 0 8px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}#step3 a{color:#e11b6b;}.wine{position:absolute;top:-30px;left:5px;}/*bodyInfo*/#holder{width:900px;height:573px;}#bodyInfo{width:100%;}#left{width:450px;float:left;}#right{width:450px;float:left;}

    Everything is wrapped in the container and content div so I thought as I add content after the homeHead the white background would just expand down as usual... not the case it just stays there. (Look at screenshot) If anyone has an idea to fix this I would be grateful!Now I know absolute doesn't affect the dynamic height of its parent container, relative does, but is there anyway I can get this to work with position absolute? Thanks everyone!~Krewe

    Website in all browsers the same?

    in Critiques

    Posted · Edited by Krewe

    It's nothing different then the info we've already given you...We've never said they have to be exactly the same, heck I even told you a while back that you should never stress about your website looking different in different browsers.

    if else with a string test fail

    in JavaScript

    Posted

    You will also see the condition test operator === in some javascript code.=== IS DIFFERENT from ==. == will test if x is equal to y. It doesn't care if x is a string or integer, nor does it care about y.However, === will test if x is equal to y, but it does care if x and y are strings or integers. If x = "5"; and y = 5; and you test x == y, it will come out true. But if you test x===y it will be false because they are different data types. ~Krewe

    Javascript is not working from <head>

    in JavaScript

    Posted

    Similarly, jQuery needs the same process Dsone said. Except different format: Long-Hand:

    $("document").ready(function (){// Place Code Here});

    Short-hand:

    $(function (){//Place code here});

    Both of those will only run once the page has loaded. Assuming you are using the JavaScript library jQuery.I just wanted to give you a heads up on this before you start using it.

    How to place one div next to other, not below

    in HTML/XHTML

    Posted

    I am trying to place "login" div right of {TITLE}. but with code what I have it goes below that parent div as a separate block. With out float:right login goes below {TITLE}. Is there way to have it right of it? 
    <div style="text-align: left; width: 100%; background-color: #99ccff"><h1>{TITLE}</h1><div style="float:right; text-align: left; background-color: #FF00ff">login</div></div>

    I want it be like this: http://www.w3schools...class_float.asp where that translate and search box are right of w3c logo but still in same div.

    You can't have the second div inside the first one. 
    <div style="float:left; text-align: left; width: 100%; background-color: #99ccff"><h1>{TITLE}</h1></div><div style="float:left; text-align: left; background-color: #FF00ff">login</div>

×
×
  • Create New...