CSS help!

[jameshumphries47]

okay so im restarting a template i created and we have few members on the team and we need help we have a graphic of the website here http://spartan-gaming.com/%5eC47E961B7AB93AFBA7A85AD15D12D508E3E95B1C423EB0CF5E%5epimgpsh_fullsize_distr.jpg

now we are working on the menu bar http://spartan-gaming.com/CSS/how could i get the diagonal looking lines.? im assuming you use CSS but im stuck on the diagonol line bit. help?

 

~James

if you need code just ask

 

[minibois]

okay so im restarting a template i created and we have few members on the team and we need help we have a graphic of the website here http://spartan-gaming.com/%5eC47E961B7AB93AFBA7A85AD15D12D508E3E95B1C423EB0CF5E%5epimgpsh_fullsize_distr.jpg

now we are working on the menu bar http://spartan-gaming.com/CSS/how could i get the diagonal looking lines.? im assuming you use CSS but im stuck on the diagonol line bit. help?

 

~James

if you need code just ask

Probably something like shown here on this stack overflow question:

http://stackoverflow.com/questions/18798793/draw-angular-side-parallelogram-using-css

 

(The shape you were looking for was a parallelogram) 

[Hazy125]

Well, I don't know whether or not it's a list item or a floated div style arrangement, but basically what you're after is the CSS3 transform property. Specifically, skewX.

thing{transform: skewX(20deg);}

This will skew along the X axis 20 degrees. Note that this also skews the content, so you might want to apply the skew to a container and have a child element centered in the container

[Kevinkt]

whenever i see CSS. i think counterstrike source =(

[jameshumphries47]

Well, I don't know whether or not it's a list item or a floated div style arrangement, but basically what you're after is the CSS3 transform property. Specifically, skewX.

thing{transform: skewX(20deg);}

This will skew along the X axis 20 degrees. Note that this also skews the content, so you might want to apply the skew to a container and have a child element centered in the container

doesnt work when i do this 

 

#navigation1 ul #a  a{ 

    background-color: #252525; 

    transform: skewX(20deg);

}

 

#navigation1 ul #b   a{ 

    background-color: #be5827; 

    transform: skewX(20deg);

}

 

 

#navigation2 ul #a  a{ 

    background-color: #252525; 

    transform: skewX(20deg);

}

 

#navigation2 ul #b   a{ 

    background-color: #be5827; 

    transform: skewX(20deg); 

[Hazy125]

 

doesnt work when i do this 

 

#navigation1 ul #a  a{ 

    background-color: #252525; 

    transform: skewX(20deg);

}

 

#navigation1 ul #b   a{ 

    background-color: #be5827; 

    transform: skewX(20deg);

}

 

 

#navigation2 ul #a  a{ 

    background-color: #252525; 

    transform: skewX(20deg);

}

 

#navigation2 ul #b   a{ 

    background-color: #be5827; 

    transform: skewX(20deg); 

 

Don't apply it to the a tag perhaps, apply it to the id which I assume is the li tag

 

Also, noticed the ones that are only skewed on one side. And implementation such as this would work for that, just change values as needed

div{   -webkit-transform: perspective(100px) rotateX(-25deg);    -webkit-transform-origin: left center;    background-color: red;    padding: 10px;    width: 150px;}

And proof that this one does work: http://jsfiddle.net/h3uevjx1/Again, this skews the inner content..

[jameshumphries47]

Don't apply it to the a tag perhaps, apply it to the id which I assume is the li tag

 

Also, noticed the ones that are only skewed on one side. And implementation such as this would work for that, just change values as needed

div{   -webkit-transform: perspective(100px) rotateX(-25deg);    -webkit-transform-origin: left center;    background-color: red;    padding: 10px;    width: 150px;}

And proof that this one does work: http://jsfiddle.net/h3uevjx1/Again, this skews the inner content..

i have played with it and it works but how woul di stop the content from skewing http://spartan-gaming.com/CSS/

[Hazy125]

i have played with it and it works but how woul di stop the content from skewing http://spartan-gaming.com/CSS/

Gee it's hard without seeing your code. Anyways, I'm going to assume you did what I told you and added the skew to the li tag rather than the a tag. Niw all you need to do is apply an inverse skew to the a tag.

 

So, basically, the li is skew(20deg) and all the inner content is skewed as well. But if the inner content skews back ie. skew(-20deg) then the inner content will be displayed normally.

 

Finally, about the edges, I'm having a damn hard time getting that to work without using unsupported, experimental css features. My suggestion is to simply fill in the white space with a background colour rather than try and get only one side skewed

 

EDIT: There might be a way to do it if you have your list items like this li>div>a... Adding an extra container gives flex room, but it's 3am.... Not super keen on figuring that out

[jameshumphries47]

Gee it's hard without seeing your code. Anyways, I'm going to assume you did what I told you and added the skew to the li tag rather than the a tag. Niw all you need to do is apply an inverse skew to the a tag.

 

So, basically, the li is skew(20deg) and all the inner content is skewed as well. But if the inner content skews back ie. skew(-20deg) then the inner content will be displayed normally.

 

Finally, about the edges, I'm having a damn hard time getting that to work without using unsupported, experimental css features. My suggestion is to simply fill in the white space with a background colour rather than try and get only one side skewed

 

EDIT: There might be a way to do it if you have your list items like this li>div>a... Adding an extra container gives flex room, but it's 3am.... Not super keen on figuring that out

hmm not working here is my css

html, body {    max-width: 100%;}/*header/logo */#header { width: 1000; margin: 0 auto; position: relative; top: ;  float: left; height: 118px; padding-left: 8px; padding-top: 8px}/*Home latest popular forum*/#navigation1 {   -webkit-transform: skewX(-45deg);    -webkit-transform-origin: left center;    padding: 10px;    width: 150px;    display: inline;}#navigation2 {   -webkit-transform: skewX(-45deg);    -webkit-transform-origin: left center;    padding: 10px;    width: 150px;    display: inline;}#navigation1 { width: 500; margin: 0 auto; position: relative; left: -400px; top: 0px;   float: left; float: top;}#navigation1 ul {margin: 0; padding: 10 10 10 10; list-style-type: none; }#navigation1 ul li { display: inline; margin-right: -4px; }#navigation1 ul li a {text-decoration: none; padding: 10px 10px 6px 10px; text-transform: uppercase; border-left: 0px solid #000000; border-top: 0px solid #000000; border-right: 0px solid #000000; color: #FFFFFF }#navigation1 ul li.current_page_item a, #navigation ul li a:hover { color: #333333; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #fff; background: #fff url('images/nav.png') repeat-x  left top; }/*settings logout */#navigation2 { width: 400; margin: 0 auto; position: relative; top: 0px; left: 1292px; float: left; float: top; }#navigation2 ul { margin: 0; padding: 0; list-style-type: none; }#navigation2 ul li {display: inline; margin-right: -4px; }#navigation2 ul li a {text-decoration: none; padding: 10px 10px 6px 10px; text-transform: uppercase; border-left: 0px solid #000000; border-top: 0px solid #000000; border-right: 0px solid #000000; background-color: #be5827; color: #FFFFFF }#navigation2 ul li.current_page_item a, #navigation ul li a:hover { color: #333333; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #fff; background: #fff url('images/nav.png') repeat-x  left top; }/*background behind the logo*/#topcol {background: #252525; width: auto; margin: 0 auto; position: relative; float: left; height: auto; position: relative; top: -10px; left: -10px; padding: 0px 600px 0px 0px;}#container { overflow: auto; width: 1900px; margin: 0 auto; padding: 10px; background: #FFF; height: 400px;}#topcc { overflow: auto; width: 200px; margin: 0 auto; padding: 10px; background: #252525; color: #FFF; position: relative; left: 500px; top: 50px;}#topcc ul {margin: 0; padding: 0; list-style-type: none;}#topcc ul li a {color: #ffffff; text-decoration: none; border-left: 0px solid #000000; position: relative; left: 25%; text-align: left;}#navigation1 ul #a  a{     background-color: #252525; }#navigation1 ul #b   a{     background-color: #be5827; }#navigation2 ul #a  a{     background-color: #252525; }#navigation2 ul #b   a{     background-color: #be5827; }body {    background: #FFFFFF    

and my html 

<html><head><title> Vidbyte development</title><link rel="stylesheet" type="text/css" href="style.css"/></head><body>	<div id="topcol">	<div id="header">		<a href=""><img src="images/logo.jpg" alt="Logo" /></a>	</div></div><div id="navigation2"><ul>	<li id="a"><a href="#">Settings</a></li>	<li id="b"><a href="#">Logout</a></li></ul></div><div id="navigation1">	<ul>		<li id="a"><a href="#">Home</a></li>		<li id="b"><a href="#">Lastest</a></li>		<li id="a"><a href="#">Popular</a></li>		<li id="b"><a href="#">Forum</a></li>	</ul></div></div><div id="container"><div id="topcc">	<h3><u>Top Content Creators</u></h3>	<ul>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>		<li><a href="#">placeholder</li>	</ul></div> </div></body></html>

[jameshumphries47]

Gee it's hard without seeing your code. Anyways, I'm going to assume you did what I told you and added the skew to the li tag rather than the a tag. Niw all you need to do is apply an inverse skew to the a tag.

 

So, basically, the li is skew(20deg) and all the inner content is skewed as well. But if the inner content skews back ie. skew(-20deg) then the inner content will be displayed normally.

 

Finally, about the edges, I'm having a damn hard time getting that to work without using unsupported, experimental css features. My suggestion is to simply fill in the white space with a background colour rather than try and get only one side skewed

 

EDIT: There might be a way to do it if you have your list items like this li>div>a... Adding an extra container gives flex room, but it's 3am.... Not super keen on figuring that out

any ideas?

[Hazy125]

any ideas?

I will leave my comfy bed and get on my desktop to fix this properly... Be back in hopefully under half an hour

[jameshumphries47]

I will leave my comfy bed and get on my desktop to fix this properly... Be back in hopefully under half an hour

thankyou

[Hazy125]

thankyou

Sorry it took way longer than anticipated.. I attribute that to it now being 5:34am... Anyway, i had to make a few changes. The code has been slightly refined.. I.. Uh.. Don't remember all the changes, but hey.. It works now

 

<html><head><title> Vidbyte development</title><style>html, body {    max-width: 100%; }*{	margin: 0;	padding: 0;}#wrapper{	width: 90%;	margin: 0 auto;}/*header/logo */#header {	 width: 100%; 	 margin: 0 auto;   	 float: left;	 height: 118px; 	 padding-left: 8px; 	 padding-top: 8px;	 }/*Home latest popular forum*/#topcol {	background: #252525; 	width: 100%; 	margin: 0 auto; 	position: relative; 	float: left; 	padding: 0px 600px 0px 0px;	box-sizing: border-box;}#navigation1 { 	width: 500px; 	margin: 0 auto; 	position: relative; 	left: 0; 	top: 0;   	float: left;}#sideFixLeft{	position: fixed;    width: 25px;	height: 34px;    background-color: #252525; 	z-index: -1;}#navigation1 ul {	margin: 0; 	padding: 0;	list-style-type: none; 	overflow: hidden;	}#navigation1 ul li { 	float: left;    padding: 0;    list-style: none;    list-style-image: none;	    display: inline-block;    position: relative;    transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg);	}#navigation1 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF; 	float: left;	display: block;	}#navigation1 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}#navigation2 { 	width: 400px; 	margin: 0 auto; 	position: relative; 	top: 0; 	right: 0; 	float: right; }#navigation2 ul { 	margin: 0; 	padding: 0; 	list-style-type: none;	overflow: hidden; 	}#sideFixRight{	position: fixed;	right: 5%;	flaot: right;    width: 25px;	height: 34px;    background-color: #be5827; 	z-index: -1;}#navigation2 ul li {	display: inline-block;	float: right;	transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg); 	}#navigation2 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF;	float: right;	display: block;} 	#navigation2 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}.light{     background-color: #be5827; }.dark{	background-color: #252525;}</style></head><body><div id="wrapper">	<div id="topcol">	<div id="header">		<a href="#"><img src="images/logo.jpg" alt="Logo" /></a>	</div></div>    <div id="navigation1">    	<div id="sideFixLeft"></div>            <ul>                <li><a href="#" class="dark"><span>Home</span></a></li>                <li><a href="#" class="light"><span>Lastest</span></a></li>                <li><a href="#" class="dark"><span>Popular</span></a></li>                <li><a href="#" class="light"><span>Forum</span></a></li>                     </ul>    </div>     <div id="navigation2">    <div id="sideFixRight"></div>        <ul>            <li><a href="#" class="light"><span>Logout</span></a></li>                        <li><a href="#" class="dark"><span>Settings</span></a></li>        </ul>     </div> </div></body></html>

 

Only literally just finished now. Live demo: http://h125.co/afb

 

EDIT: Also, that's about as good as you can get browser compatibility wise for diagonals. I changed the page size, but that menu shouldn't have any difficulty going back down to 1000px or whatever it was before. However, you have a whole bunch of unused white space in the middle which will interfere if you scale down any further

[jameshumphries47]

Sorry it took way longer than anticipated.. I attribute that to it now being 5:34am... Anyway, i had to make a few changes. The code has been slightly refined.. I.. Uh.. Don't remember all the changes, but hey.. It works now

 

<html><head><title> Vidbyte development</title><style>html, body {    max-width: 100%; }*{	margin: 0;	padding: 0;}#wrapper{	width: 90%;	margin: 0 auto;}/*header/logo */#header {	 width: 100%; 	 margin: 0 auto;   	 float: left;	 height: 118px; 	 padding-left: 8px; 	 padding-top: 8px;	 }/*Home latest popular forum*/#topcol {	background: #252525; 	width: 100%; 	margin: 0 auto; 	position: relative; 	float: left; 	padding: 0px 600px 0px 0px;	box-sizing: border-box;}#navigation1 { 	width: 500px; 	margin: 0 auto; 	position: relative; 	left: 0; 	top: 0;   	float: left;}#sideFixLeft{	position: fixed;    width: 25px;	height: 34px;    background-color: #252525; 	z-index: -1;}#navigation1 ul {	margin: 0; 	padding: 0;	list-style-type: none; 	overflow: hidden;	}#navigation1 ul li { 	float: left;    padding: 0;    list-style: none;    list-style-image: none;	    display: inline-block;    position: relative;    transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg);	}#navigation1 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF; 	float: left;	display: block;	}#navigation1 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}#navigation2 { 	width: 400px; 	margin: 0 auto; 	position: relative; 	top: 0; 	right: 0; 	float: right; }#navigation2 ul { 	margin: 0; 	padding: 0; 	list-style-type: none;	overflow: hidden; 	}#sideFixRight{	position: fixed;	right: 5%;	flaot: right;    width: 25px;	height: 34px;    background-color: #be5827; 	z-index: -1;}#navigation2 ul li {	display: inline-block;	float: right;	transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg); 	}#navigation2 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF;	float: right;	display: block;} 	#navigation2 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}.light{     background-color: #be5827; }.dark{	background-color: #252525;}</style></head><body><div id="wrapper">	<div id="topcol">	<div id="header">		<a href="#"><img src="images/logo.jpg" alt="Logo" /></a>	</div></div>    <div id="navigation1">    	<div id="sideFixLeft"></div>            <ul>                <li><a href="#" class="dark"><span>Home</span></a></li>                <li><a href="#" class="light"><span>Lastest</span></a></li>                <li><a href="#" class="dark"><span>Popular</span></a></li>                <li><a href="#" class="light"><span>Forum</span></a></li>                     </ul>    </div>     <div id="navigation2">    <div id="sideFixRight"></div>        <ul>            <li><a href="#" class="light"><span>Logout</span></a></li>                        <li><a href="#" class="dark"><span>Settings</span></a></li>        </ul>     </div> </div></body></html>

 

Only literally just finished now. Live demo: http://h125.co/afb

 

EDIT: Also, that's about as good as you can get browser compatibility wise for diagonals. I changed the page size, but that menu shouldn't have any difficulty going back down to 1000px or whatever it was before. However, you have a whole bunch of unused white space in the middle which will interfere if you scale down any further

woah okay dude i apreciate this alot, the witespace will be filled with a container holding videos at some point 

[jameshumphries47]

Sorry it took way longer than anticipated.. I attribute that to it now being 5:34am... Anyway, i had to make a few changes. The code has been slightly refined.. I.. Uh.. Don't remember all the changes, but hey.. It works now

 

<html><head><title> Vidbyte development</title><style>html, body {    max-width: 100%; }*{	margin: 0;	padding: 0;}#wrapper{	width: 90%;	margin: 0 auto;}/*header/logo */#header {	 width: 100%; 	 margin: 0 auto;   	 float: left;	 height: 118px; 	 padding-left: 8px; 	 padding-top: 8px;	 }/*Home latest popular forum*/#topcol {	background: #252525; 	width: 100%; 	margin: 0 auto; 	position: relative; 	float: left; 	padding: 0px 600px 0px 0px;	box-sizing: border-box;}#navigation1 { 	width: 500px; 	margin: 0 auto; 	position: relative; 	left: 0; 	top: 0;   	float: left;}#sideFixLeft{	position: fixed;    width: 25px;	height: 34px;    background-color: #252525; 	z-index: -1;}#navigation1 ul {	margin: 0; 	padding: 0;	list-style-type: none; 	overflow: hidden;	}#navigation1 ul li { 	float: left;    padding: 0;    list-style: none;    list-style-image: none;	    display: inline-block;    position: relative;    transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg);	}#navigation1 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF; 	float: left;	display: block;	}#navigation1 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}#navigation2 { 	width: 400px; 	margin: 0 auto; 	position: relative; 	top: 0; 	right: 0; 	float: right; }#navigation2 ul { 	margin: 0; 	padding: 0; 	list-style-type: none;	overflow: hidden; 	}#sideFixRight{	position: fixed;	right: 5%;	flaot: right;    width: 25px;	height: 34px;    background-color: #be5827; 	z-index: -1;}#navigation2 ul li {	display: inline-block;	float: right;	transform: skew(-25deg);    -webkit-transform: skew(-25deg);    -moz-transform: skew(-25deg);    -ms-transform: skew(-25deg);    -o-transform: skew(-25deg); 	}#navigation2 ul li a {	text-decoration: none; 	padding: 10px 10px 6px 10px; 	text-transform: uppercase; 	color: #FFFFFF;	float: right;	display: block;} 	#navigation2 ul li a span{	transform: skew(25deg);    -webkit-transform: skew(25deg);    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -o-transform: skew(25deg);    display:block;	}.light{     background-color: #be5827; }.dark{	background-color: #252525;}</style></head><body><div id="wrapper">	<div id="topcol">	<div id="header">		<a href="#"><img src="images/logo.jpg" alt="Logo" /></a>	</div></div>    <div id="navigation1">    	<div id="sideFixLeft"></div>            <ul>                <li><a href="#" class="dark"><span>Home</span></a></li>                <li><a href="#" class="light"><span>Lastest</span></a></li>                <li><a href="#" class="dark"><span>Popular</span></a></li>                <li><a href="#" class="light"><span>Forum</span></a></li>                     </ul>    </div>     <div id="navigation2">    <div id="sideFixRight"></div>        <ul>            <li><a href="#" class="light"><span>Logout</span></a></li>                        <li><a href="#" class="dark"><span>Settings</span></a></li>        </ul>     </div> </div></body></html>

 

Only literally just finished now. Live demo: http://h125.co/afb

 

EDIT: Also, that's about as good as you can get browser compatibility wise for diagonals. I changed the page size, but that menu shouldn't have any difficulty going back down to 1000px or whatever it was before. However, you have a whole bunch of unused white space in the middle which will interfere if you scale down any further

if you want to join the project, its a video sharing site, your more than welcome!

[Hazy125]

if you want to join the project, its a video sharing site, your more than welcome!

 

I believe I've already been offered. If I join properly then I'll just go crazy and code everything. I'll just stick to hanging out on the sidelines until you all need help with something. Quick question, are you going for a single page approach to multi device support, or separate page. That is, are you using CSS media queries to change content accordingly or making a whole different mobile site

[Hazy125]

if you want to join the project, its a video sharing site, your more than welcome!

Got bored today and figured you might want to have a look http://h125.co/a92

[jameshumphries47]

I believe I've already been offered. If I join properly then I'll just go crazy and code everything. I'll just stick to hanging out on the sidelines until you all need help with something. Quick question, are you going for a single page approach to multi device support, or separate page. That is, are you using CSS media queries to change content accordingly or making a whole different mobile site

multi device support and maybe an app. but that is phenomenal you can code everything if you want i have no problem with that lmao!!! if you want to its your chocie, also how did you cod ethat html 5 or flash?