Web Dev Questions That Don't Need Their Own Thread v4

[KmartSqrl]

Keep portfolio websites fairly minimal so the work can stand out. ESPECIALLY photography portfolios

[xmariusx]

[QUOTE=Killervalon;39859380]
Also, have a friend who is doing photography - I just can't really figure out how to do the website properly - especially without it not looking dull.[/QUOTE]
I have the same problem :S

[P1raten]

[QUOTE=xmariusx;39859805]I have the same problem :S[/QUOTE]
I'd suggest taking a "metro" approach.

[Killervalon]

[QUOTE=P1raten;39864173]I'd suggest taking a "metro" approach.[/QUOTE]

Do a design for me then :v:

[P1raten]

[QUOTE=Killervalon;39864407]Do a design for me then :v:[/QUOTE]
[thumb]http://puu.sh/2fgDI[/thumb]

$500, please.

On second thought, since you're a nice guy I'll give you a good deal.

$499.99, please.

[Killervalon]

[QUOTE=P1raten;39864510][thumb]http://puu.sh/2fgDI[/thumb]

$500, please.

On second thought, since you're a nice guy I'll give you a good deal.

$499.99, please.[/QUOTE]

Well, I must admit - you did a heck of a nice job and I think you deserve more. If you PM me I'll give you a DotA 2 Key! :v:

[P1raten]

[QUOTE=Killervalon;39864601]Well, I must admit - you did a heck of a nice job and I think you deserve more. If you PM me I'll give you a DotA 2 Key! :v:[/QUOTE]
Thanks dude!

I really need one!

[thumb]http://puu.sh/2fh7D[/thumb]

[Zay333]

Hey guys, really quick question.
I'm very new to html and css and I'm having some problem with image alignment.
More specifically, there a white border at the top of the image that keeps appearing that I don't want.

[img]http://shrani.si/f/1k/kb/3LGx7ua9/untitled-1.jpg[/img]

The code for it ( although very very basic) looks like this:

[center]<img src="http://media.moddb.com/images/mods/1/20/19025/auto/1362925844noxaeternamoddb2.jpg" alt="" width="949" height="683" />[/center]

[HTF]

What do you guys think is better these days a fluid layout or responsive?

I was thinking responsive if done correctly would be better but fluid is easier to implement.

[Vietnow]

Gabe doesn't love me </3
Everyone seems to have about 20 DotA2 keys, I have 0 :(

[editline]wtfgabe[/editline]

I don't even want to play it, I just want Gabe to love me.

[01271]

How do I get from this...
[img]http://filesmelt.com/dl/ScreenCap_2013-03-11_a_12.28_.18_.png[/img]

To this?
[img]http://filesmelt.com/dl/ScreenCap_2013-03-11_a_12.28_.18_1.png[/img]
I've tried but it doesn't want to work for me no matter what. :/ Also I really don't want to add javascript to my javascriptless website so I'd appreciate a CSS only solution.

<div id="navBar">
<ul>
	<li><a href="X">Menu</a>
		<ul>
			<li><a href="X">Menu Item</a></li><br/>
			<li><a href="X">Menu Item 2</a></li><br/>
			<li><a href="X">Yet Another Menu Item</a></li>
		</ul>
	</li>
	<li><a href="X">Tutorials</a>
		<ul>
			<li><a href="X">X</a></li><br/>
			<li><a href="X">X</a></li>
		</ul>
	</li>

</ul>

CSS:

#navBar
{
	float:left;
	background-color : #803020;
	width: 100%;
}


#navBar ul{list-style-type : none ;}
#navBar ul li{padding : 2px 10px 2px; background-color: #803020 ;float:left; }
#navBar ul a{ text-decoration : none; }
#navBar ul li:hover{background-color:#913a1e;}
#navBar ul li ul{display : none;}
#navBar ul li:hover ul{display : block;}
#navBar ul li ul{position : absolute; margin-left : -50px;}
#navBar ul li ul li {display : block;}

	#navBar a:link    {color:#FFF; font-size:150%}
	#navBar a:visited {color:#FFF;}
	#navBar a:hover   {color:#FFF;}
	#navBar a:active  {color:#FFF;} 

[xmariusx]

Add the background to the <ul> instead of the <li>

[01271]

That worked, now I just need to make it all thin.

[BrandonBolton]

[QUOTE=Killervalon;39859380]Any tips on designing a portfolio? Should probaly make one for myself at some point.
Also, have a friend who is doing photography - I just can't really figure out how to do the website properly - especially without it not looking dull.[/QUOTE]

You might want to look into having a WordPress website. It makes having a portfolio pretty simple, there are tutorials and themes out there.

[Poo Monst3r]

I've got a website I'm working on right now and I'm kind of experimenting with a new type of layout (at least new to me). I'm wondering how I can define a set body height with a percentage.

For example, this is what I'm trying to create (photoshop mockup):

[IMG]http://i49.tinypic.com/dotna1.png[/IMG]

It's a full-page website, I don't want any scroll bars vertically, and I want the image background to take up a set percentage of the page, with the black bars taking up the rest of the page.
[b]The problem is[/b], whenever I define a height in CSS using percentages, it doesn't change the height at all. It seems that only pixel values change the height of an element.

Is there a way of making the body a percentage height of the page?
I'm sorry if it's not clear what I'm asking for, if you need any clarification, just ask.

[buhbang]

[QUOTE=Poo Monst3r;39905287]I've got a website I'm working on right now and I'm kind of experimenting with a new type of layout (at least new to me). I'm wondering how I can define a set body height with a percentage.

For example, this is what I'm trying to create (photoshop mockup):

[IMG]http://i49.tinypic.com/dotna1.png[/IMG]

It's a full-page website, I don't want any scroll bars vertically, and I want the image background to take up a set percentage of the page, with the black bars taking up the rest of the page.
[b]The problem is[/b], whenever I define a height in CSS using percentages, it doesn't change the height at all. It seems that only pixel values change the height of an element.

Is there a way of making the body a percentage height of the page?
I'm sorry if it's not clear what I'm asking for, if you need any clarification, just ask.[/QUOTE]

that image is so dark i thought the background image was my monitor being unclean :v:
I'm not 100% sure what you're talking about, but I'll give it a shot.
My source will come from [url]https://developer.mozilla.org/en-US/docs/CSS/background[/url] if you wanted to know.

Try using

background-size: {width} {height}

it will set ur background image width and height. this is css3. Some browsers won't supported, but most will.

[Poo Monst3r]

[QUOTE=jung3o;39905375]that image is so dark i thought the background image was my monitor being unclean :v:
I'm not 100% sure what you're talking about, but I'll give it a shot.
My source will come from [URL]https://developer.mozilla.org/en-US/docs/CSS/background[/URL] if you wanted to know.

Try using

background-size: {width} {height}

it will set ur background image width and height. this is css3. Some browsers won't supported, but most will.[/QUOTE]

Yeah, the background image looks good on my screen but it's really dark on my mac, I'll have to tweak it a bit.
I appreciate the help here, and you've given me a great resource, so thank you for that, but I'm still having some trouble. Let me elaborate.

Right now I've got a header div, which contains the nav links and the h1:

#header {
    width: 100%;
    background-color: #000;
    border-bottom: 1pt solid #351a13;
}
#header h1 {
    margin: 8% 0 0.5% 8%;
    width: 350px;
    color: #3f3c2e;
    font-size: 24pt;
}

So the h1 is pushing the header down with top margins to give it all of that black space at the top.
Then I've got my content, now altered to use background-size to see if that would help:

#content {
    background-image: url('images/bg.png');
    height: 100%;
    background-size: 100% 40%;
    color: #fff;
    height: 100%;
}

What I want to do is get the content div height to be something like 40% of the page so I can still have my black bar footer at the bottom.

Here is the HTML, because that might help too:

[HTML]
<!DOCTYPE HTML>
<html>

<head>
<title>Facilitator Films</title>
<link rel = "stylesheet" media = "screen" href = "style.css" />
</head>

<body>

<div id = "header">

<div id = "nav">
<ul>
<li class = 'current'><a href = 'index.php'>Home</a></li>
<li><a href = 'portolfio.php'>Portfolio</a></li>
<li><a href = 'contact.php'>Contact</a></li>
</ul>
</div> <!-- /nav -->

<h1>Facilitator Films</h1>

</div> <!-- /header -->

<div id = "content">
Body
</div>

</body>

</html>
[/HTML]

And here is what it looks like in both Google Chrome and Firefox:

[IMG]http://i47.tinypic.com/34gsd40.png[/IMG]

So is there any way to make that #content height a percentage so it can be fluid?

[buhbang]

make sure
[css]html, body {
height:100%;
}[/css]

[Poo Monst3r]

[QUOTE=jung3o;39905668]make sure
[css]html, body {
height:100%;
}[/css][/QUOTE]

oh my god thank you.
I had body { height: 100%; } but i didn't have the html in there.

mucho appreciato

[01271]

[QUOTE=01271;39878206]
[img]http://filesmelt.com/dl/ScreenCap_2013-03-11_a_12.28_.18_1.png[/img]
[/QUOTE]

Still need to fix the height of this, anyone?

[Killervalon]

[QUOTE=BrandonBolton;39902966]You might want to look into having a WordPress website. It makes having a portfolio pretty simple, there are tutorials and themes out there.[/QUOTE]

Eh, it just seems a bit hacky with the galleries.

[worreh]

Is there any editors like notepad++ for Linux that has FTP feature? Sublime Text 2 has package to do it but it just freezes my PC for few secs every time I save.

[asantos3]

[QUOTE=Worre;39912433]Is there any editors like notepad++ for Linux that has FTP feature? Sublime Text 2 has package to do it but it just freezes my PC for few secs every time I save.[/QUOTE]
I personally don't like to use FTP with my editor, I just upload wherever I want, open ftp program and bam.
Never need to use it this and it's not a editor but Git should do the trick (if my brain doesn't fails what you really need). Right guys?

[Ac!dL3ak]

[QUOTE=asantos3;39915345]I personally don't like to use FTP with my editor, I just upload wherever I want, open ftp program and bam.
Never need to use it this and it's not a editor but Git should do the trick (if my brain doesn't fails what you really need). Right guys?[/QUOTE]

unless you're on a free hosting provider...

[mac338]

Quick Flash (yeah, I know, don't comment that) question:
How do I keep a parent element above all scenes? As in, how do I make a number of layers stay when the scenes change, without copying each of these elements?

[ArgvCompany]

I'm fairly good at CSS in the sense that I know how to do almost any design you give me. The thing I'm not good at though, is coming up with my own designs from scratch. I suppose I can copy an existing design, but I want to get better at designing from scratch. Any tips?

[01271]

Is this safe from SQL injection yet?

		$query = 'CREATE TABLE User_SteamUsers' .
		'(steamID64 INTEGER, personaName TEXT, privilege_Level INTEGER, item_preferences TEXT, user_preferences TEXT)';

	$query = 
	'INSERT INTO User_SteamUsers (steamID64, personaName, privilege_level, item_preferences, user_preferences) ' .
	'VALUES ($profile, "$userName", 100, None, None); ';

if(!$database->queryExec($query, $error))
{
  die($error);
}

$profile is a number, $userName is where they could inject code by changing their steam name.

[Coment]

[QUOTE=01271;39938907]Is this safe from SQL injection yet?[/QUOTE]
Just gave it a quick look, but you should [URL="http://www.php.net/manual/es/function.sqlite-escape-string.php"]escape[/URL] everything before inserting it, even $profile. Just to be sure.

[01271]

[QUOTE=Coment;39940163]Just gave it a quick look, but you should [URL="http://www.php.net/manual/es/function.sqlite-escape-string.php"]escape[/URL] everything before inserting it, even $profile. Just to be sure.[/QUOTE]

Added that now, that's a pretty easy way of making things secure. Easier than regex at least :V

Here's a design fix request for someone, how do I make a fixed width div and make text take the place beside an image like this instead of stretching it?

[img] http://filesmelt.com/dl/table_layout.png[/img]

[buhbang]

[css]word-wrap:break-word;[/css]

make sure you have a set max width.

[editline]17th March 2013[/editline]

and then add [css]hyphens: auto;[/css]
if you want auto hyphens (this doesn't work for all browsers its css3)

[editline]17th March 2013[/editline]

same as wordwrap