HomeIssue with Html Page
3 posters
Page 1 of 1
Issue with Html Page
by ShadesOfJay December 23rd 2014, 10:23 am
I have no clue how to fix this at all.
Forum: virtuous-realms.board-directory.net
HTML Link: http://virtuous-realms.board-directory.net/h5-welcome-page
Forum: virtuous-realms.board-directory.net
HTML Link: http://virtuous-realms.board-directory.net/h5-welcome-page
- Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style type="text/CSS">
body {
background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 1296px 700px;
font-size: 11px;
font-family: Courier;
letter-spacing: 0.02in;
}
.box {
margin-left: 70%;
margin-top: 54%;
width: 400px;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.forumotion{
opacity: 0.0;
bottom: 0px;
left: 0px;
width: 3oopx;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.sitename {
text-align: center;
font-family: Georgia;
font-variant: small-caps;
font-size: 30px;
letter-spacing: 5px;
color: #FFF;
text-shadow: 0px 0px 10px;
}
a:link {
color: #a294b5;
text-decoration: none;
}
a:visited {
color: #a294b5;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 3px;
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
body {
background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
/*background-size*/
background-size: 160px;
font-family: Alef;
}
#nav {
width: 180px;
margin: 100px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
ul a {
display: block;
width: 100%;
height: 44px;
background: #E7533C;
color: #fafafa;
text-decoration: none;
text-align: left;
line-height: 2;
padding-left: 10px;
font-size: 1.4em;
border-bottom: 3px solid #cc4531;
}
ul a span {
float: right;
display: block;
margin: 0;
width: 44px;
height: 44px;
font-size: 1.4em;
text-align: center;
line-height: 1.5;
}
ul li {
width: 0;
height: 0px;
background: #E7533C;
clear: both;
}
ul li a {
color: transparent;
height: 0;
/*box-shadow*/
box-shadow: 0 2px 2px rgba(0,0,0,.1);
padding-left: 0;
}
ul li a span {
font-size: .9em;
line-height: 2.4;
}
ul:hover li a { padding-left: 10px }
ul:hover span { background: #cc4531 }
ul:hover li span { background: transparent }
ul li:hover > a { background: #cc4531 }
ul li:hover {
margin-top: 8px;
margin-bottom: 8px;
}
ul li:nth-child(1) {
transition: all 0s ease;
}
ul li:nth-child(2) {
transition: all 0s ease;
}
ul li:nth-child(3) {
transition: all 0s ease;
}
ul li:nth-child(4) {
transition: all 0s ease;
}
ul a:hover > span { background: #cc4531 }
ul:hover > li a {
color: #fff;
height: 44px;
}
ul li a:hover { border-bottom: 3px solid #9d3323 }
ul:hover li:nth-child(2) {
width: 100%;
height: 44px;
transition: all .1s ease;
}
ul:hover li:nth-child(3) {
width: 100%;
height: 44px;
transition: all .1s ease .1s;
}
ul:hover li:nth-child(4) {
width: 100%;
height: 44px;
transition: all .1s ease .2s;
}
ul:hover li:nth-child(5) {
width: 100%;
height: 44px;
transition: all .1s ease .3s;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li style="list-style: none; display: inline">
<a href="#">Menu<span class="entypo-right-open-big"></span></a>
</li>
<li>
<a href="#">Forum<span class="entypo-doc-text"></span></a>
</li>
<li>
<a href="#">Blog<span class="entypo-pencil"></span></a>
</li>
<li>
<a href="#">About Us<span class="entypo-info"></span></a>
</li>
<li>
<a href="#">Contact Us<span class="entypo-mail"></span></a>
</li>
</ul>
</div>
<table align="center" width="70%">
<tr>
<td valign="middle">
<div class="box">
<div class="sitename">
Virtuous-Realms
</div>
<a href=
"http://www.virtuous-realms.board-directory.net/forum">click
here to enter the forum</a>
</div>
<div class="forumotion">
<a href="http://www.forumotion.com" target=
"_blank">forumotion.com</a>
</div>
</td>
</tr>
</table>
</body>
</html>
ShadesOfJay- Forumember
-
Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by Ramdaman December 23rd 2014, 12:27 pm
You would have to go into more detail on what you would like fixed.
Ramdaman- Active Poster
-
Posts : 1615
Reputation : 99
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City -
Re: Issue with Html Page
by _Twisted_Mods_ December 23rd 2014, 1:10 pm
- Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style type="text/CSS">
body {
background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 1296px 700px;
font-size: 11px;
font-family: Courier;
letter-spacing: 0.02in;
}
.box {
margin-left: 70%;
margin-top: 54%;
width: 400px;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.forumotion{
opacity: 0.0;
bottom: 0px;
left: 0px;
width: 3oopx;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.sitename {
text-align: center;
font-family: Georgia;
font-variant: small-caps;
font-size: 30px;
letter-spacing: 5px;
color: #FFF;
text-shadow: 0px 0px 10px;
}
a:link {
color: #a294b5;
text-decoration: none;
}
a:visited {
color: #a294b5;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 3px;
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
#nav.body{
background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
/*background-size*/
-webkit-background-size: 160px;
-moz-background-size: 160px;
-o-background-size: 160px;
background-size: 160px;
font-family: Alef;
}
#nav {
width: 180px;
margin: 100px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
ul a {
display: block;
width: 100%;
height: 44px;
background: #E7533C;
color: #fafafa;
text-decoration: none;
text-align: left;
line-height: 2;
padding-left: 10px;
font-size: 1.4em;
border-bottom: 3px solid #cc4531;
}
ul a span {
float: right;
display: block;
margin: 0;
width: 44px;
height: 44px;
font-size: 1.4em;
text-align: center;
line-height: 1.5;
}
ul li {
width: 0;
height: 0px;
background: #E7533C;
clear: both;
}
ul li a {
color: transparent;
height: 0;
/*box-shadow*/
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
padding-left: 0;
}
ul li a span {
font-size: .9em;
line-height: 2.4;
}
ul li a { padding-left: 10px }
ul:hover span { background: #cc4531 }
ul li span { background: transparent }
ul li:hover > a { background: #cc4531 }
ul li {
margin-top: 8px;
margin-bottom: 8px;
}
ul a > span { background: #cc4531 }
ul > li a {
color: #fff;
height: 44px;
}
ul li a { border-bottom: 3px solid #9d3323 }
ul li {
width: 100%;
height: 44px;
transition: all .1s ease;
}
ul li a{
margin-top: 8px;
margin-bottom: 8px;
height: 44px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li style="list-style: none; display: inline">
<a href="#">Menu<span class="entypo-right-open-big"></span></a>
</li>
<li>
<a href="#">Forum<span class="entypo-doc-text"></span></a>
</li>
<li>
<a href="#">Blog<span class="entypo-pencil"></span></a>
</li>
<li>
<a href="#">About Us<span class="entypo-info"></span></a>
</li>
<li>
<a href="#">Contact Us<span class="entypo-mail"></span></a>
</li>
</ul>
</div>
<table align="center" width="70%">
<tr>
<td valign="middle">
<div class="box">
<div class="sitename">
Virtuous-Realms
</div>
<a href=
"http://www.virtuous-realms.board-directory.net/forum">click
here to enter the forum</a>
</div>
<div class="forumotion">
<a href="http://www.forumotion.com" target=
"_blank">forumotion.com</a>
</div>
</td>
</tr>
</table>
</body>
</html>
</html>
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by _Twisted_Mods_ December 23rd 2014, 1:13 pm
theres a exstra </html> that needs to be removed from code i posted but forumotion wont let me edit my post... says no post mode specified
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 23rd 2014, 11:30 pm
That solves one problem thanks!_Twisted_Mods_ wrote:
- Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style type="text/CSS">
body {
background: url(http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 1296px 700px;
font-size: 11px;
font-family: Courier;
letter-spacing: 0.02in;
}
.box {
margin-left: 70%;
margin-top: 54%;
width: 400px;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.forumotion{
opacity: 0.0;
bottom: 0px;
left: 0px;
width: 3oopx;
background-image: url(http://i.imgur.com/0lzIxXu.png);
text-align: center;
}
.sitename {
text-align: center;
font-family: Georgia;
font-variant: small-caps;
font-size: 30px;
letter-spacing: 5px;
color: #FFF;
text-shadow: 0px 0px 10px;
}
a:link {
color: #a294b5;
text-decoration: none;
}
a:visited {
color: #a294b5;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 3px;
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
#nav.body{
background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
/*background-size*/
-webkit-background-size: 160px;
-moz-background-size: 160px;
-o-background-size: 160px;
background-size: 160px;
font-family: Alef;
}
#nav {
width: 180px;
margin: 100px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
ul a {
display: block;
width: 100%;
height: 44px;
background: #E7533C;
color: #fafafa;
text-decoration: none;
text-align: left;
line-height: 2;
padding-left: 10px;
font-size: 1.4em;
border-bottom: 3px solid #cc4531;
}
ul a span {
float: right;
display: block;
margin: 0;
width: 44px;
height: 44px;
font-size: 1.4em;
text-align: center;
line-height: 1.5;
}
ul li {
width: 0;
height: 0px;
background: #E7533C;
clear: both;
}
ul li a {
color: transparent;
height: 0;
/*box-shadow*/
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
padding-left: 0;
}
ul li a span {
font-size: .9em;
line-height: 2.4;
}
ul li a { padding-left: 10px }
ul:hover span { background: #cc4531 }
ul li span { background: transparent }
ul li:hover > a { background: #cc4531 }
ul li {
margin-top: 8px;
margin-bottom: 8px;
}
ul a > span { background: #cc4531 }
ul > li a {
color: #fff;
height: 44px;
}
ul li a { border-bottom: 3px solid #9d3323 }
ul li {
width: 100%;
height: 44px;
transition: all .1s ease;
}
ul li a{
margin-top: 8px;
margin-bottom: 8px;
height: 44px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li style="list-style: none; display: inline">
<a href="#">Menu<span class="entypo-right-open-big"></span></a>
</li>
<li>
<a href="#">Forum<span class="entypo-doc-text"></span></a>
</li>
<li>
<a href="#">Blog<span class="entypo-pencil"></span></a>
</li>
<li>
<a href="#">About Us<span class="entypo-info"></span></a>
</li>
<li>
<a href="#">Contact Us<span class="entypo-mail"></span></a>
</li>
</ul>
</div>
<table align="center" width="70%">
<tr>
<td valign="middle">
<div class="box">
<div class="sitename">
Virtuous-Realms
</div>
<a href=
"http://www.virtuous-realms.board-directory.net/forum">click
here to enter the forum</a>
</div>
<div class="forumotion">
<a href="http://www.forumotion.com" target=
"_blank">forumotion.com</a>
</div>
</td>
</tr>
</table>
</body>
</html>
</html>
What it is suppose to do and look like is this: http://cssdeck.com/labs/css-flatly-menu
Except I changed a few things since it is a free code I found online.
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by _Twisted_Mods_ December 24th 2014, 4:35 am
well it probably be easier if you just tell me what chaanges you want and ill post the finished result
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 24th 2014, 4:50 am
I can't explain it very well. So...
You see this navigation bar here: [url= http://cssdeck.com/labs/css-flatly-menu] http://cssdeck.com/labs/css-flatly-menu[/url]
And my similar one here on my test html page: http://virtuous-realms.board-directory.net/h5-welcome-page
I am wanting the second link to do what the first link is doing. But, it wouldn't do what I wanted within a page I edited?
You see this navigation bar here: [url= http://cssdeck.com/labs/css-flatly-menu] http://cssdeck.com/labs/css-flatly-menu[/url]
And my similar one here on my test html page: http://virtuous-realms.board-directory.net/h5-welcome-page
I am wanting the second link to do what the first link is doing. But, it wouldn't do what I wanted within a page I edited?
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by _Twisted_Mods_ December 24th 2014, 5:21 am
http://css-kings.forumotion.com/h3-testing do the best you can of telling me anything you want to be different
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 24th 2014, 5:26 am
I found the issue.
http://virtuous-realms.board-directory.net/h5-welcome-page
Compare yours to mine. I noticed that when you took out the code for the little box that says Virtuous Realms that the nav menu worked... So its the little box that is interfering? But why?
http://virtuous-realms.board-directory.net/h5-welcome-page
Compare yours to mine. I noticed that when you took out the code for the little box that says Virtuous Realms that the nav menu worked... So its the little box that is interfering? But why?
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by _Twisted_Mods_ December 24th 2014, 5:40 am
oh you can take of the lil box by removing the class name from span and removing the width from the first width from ul >a >span ....... check out the page i posted and see if u want anything else
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 24th 2014, 5:44 am
Okay. I think we are both confused. Before you did anything, the characters or the little icons for each drop down option worked. I like what you fixed before. But I WANT the little box.
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 24th 2014, 6:10 am
Now I want that little box I had that led to the forums =)
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by _Twisted_Mods_ December 24th 2014, 6:18 am
ohhhhh i see it now lol the box was hidden off screen i had to scroll to see it... ok look now
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Re: Issue with Html Page
by ShadesOfJay December 24th 2014, 6:23 am
There we go! Finally... I couldn't figure out for hours how to fix that drop down thingy. Thanks sooo much! Could I have the code now?
ShadesOfJay- Forumember
- Posts : 35
Reputation : 1
Language : English -
Re: Issue with Html Page
by _Twisted_Mods_ December 24th 2014, 6:27 am
your welcome .. if theirs anything else you need let me know
- Code:
<head>
<style>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
body{
background: url("http://fc08.deviantart.net/fs71/f/2014/356/5/4/hompagebackground_by_shadesofjay-d8avfb7.jpg") no-repeat fixed center top / 1296px 700px transparent;
font-size: 11px;
font-family: Courier;
letter-spacing: 0.02in;
}
#nav {
width: 180px;
margin: 100px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 180px;
}
ul a {
display: block;
width: 100%;
height: 44px;
background: #E7533C;
color: #fafafa;
text-decoration: none;
text-align: left;
line-height: 2;
padding-left: 10px;
font-size: 1.4em;
border-bottom: 3px solid #cc4531;
}
ul a span {
float: right;
display: block;
margin: 0;
width: 44px;
height: 44px;
font-size: 1.4em;
text-align: center;
line-height: 1.5;
}
ul li {
width: 0;
height: 0px;
background: #E7533C;
clear: both;
}
ul li a {
color: transparent;
height: 0;
/*box-shadow*/
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
padding-left: 0;
}
ul li a span {
font-size: .9em;
line-height: 2.4;
}
ul:hover li a { padding-left: 10px }
ul li span{display:none;}
ul:hover li span{display:block;}
ul li:hover {
margin-top: 8px;
margin-bottom: 8px;
}
ul li:nth-child(1) {
transition: all 0s ease;
}
ul li:nth-child(2) {
transition: all 0s ease;
}
ul li:nth-child(3) {
transition: all 0s ease;
}
ul li:nth-child(4) {
transition: all 0s ease;
}
ul span { background: #cc4531 }
ul:hover > li a {
color: #fff;
height: 44px;
}
ul li a:hover { border-bottom: 3px solid #9d3323 }
ul:hover li:nth-child(2) {
width: 100%;
height: 44px;
transition: all .1s ease;
}
ul:hover li:nth-child(3) {
width: 100%;
height: 44px;
transition: all .1s ease .1s;
}
ul:hover li:nth-child(4) {
width: 100%;
height: 44px;
transition: all .1s ease .2s;
}
ul:hover li:nth-child(5) {
width: 100%;
height: 44px;
transition: all .1s ease .3s;
}
.sitename {
text-align: center;
font-family: Georgia;
font-variant: small-caps;
font-size: 30px;
letter-spacing: 5px;
color: #FFF;
text-shadow: 0px 0px 10px;
}
.box {
width: 400px;
background-image: url("http://i.imgur.com/0lzIxXu.png");
text-align: center;
bottom: 0px;
right: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<a href="#">Menu<span class="entypo-right-open-big"></span></a>
<li><a href="#">Profile <span class="entypo-user"></span></a></li>
<li><a href="#">Media <span class="entypo-video"></span></a></li>
<li><a href="#">Games <span class="entypo-rocket"></span></a></li>
<li><a href="#">Friends <span class="entypo-users"></span></a></li>
</ul>
</div>
<div class="box">
<div class="sitename">
Virtuous-Realms
</div>
<a href="http://www.virtuous-realms.board-directory.net/forum">click
here to enter the forum</a>
</div>
</body>
_Twisted_Mods_- Helper
- Posts : 2108
Reputation : 336
Language : English
Location : Ms -
Similar topics» HTML page issue
» i Dont Want To Creat HTML Page But Edit Forums HTML
» HTML Page will not save in HTML Pages Management
» How do you load the login page instead of the index.html page automatically
» HTML Page Login Form redirect to another Html Page when failed
» i Dont Want To Creat HTML Page But Edit Forums HTML
» HTML Page will not save in HTML Pages Management
» How do you load the login page instead of the index.html page automatically
» HTML Page Login Form redirect to another Html Page when failed
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
