Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.
Register

Css Help

Latest Post

Chief

Member

71
the link is broken and your questions are confusing... i understand what you want but you should post the code.
 
Xilef

Xilef

Staff

11,676
You will need to show us the code for that site if you want any help.
It could be a number of things that cause this, the html, the css, widths, positions and ordering, etc.
 

Tdata

Sponsor

528
Sure:
Code: 
<head>
<link rel="stylesheet" href="./style/index.css" type="text/css" />
</head>

<div class="leftside">
<div class="anihead">A</div>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Air_font.html">Air</a></div> <div class="num">(10)</div></div><br>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Aishiteru_ze_Baby_font.html">Aishiteru_ze_Baby</a></div><div class="num">(26)</div></div><br>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Akahori_Gedou_Hour_Rabuge_front.html">Akahori_Gedou_Hour_Rabuge</a></div> <div class="num">(12)</div></div><br>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Akazukin_Chacha_front.html">Akazukin_Chacha</a></div><div class="num">(72)</div></div><br>


</div>
<div class="anibg1"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="rightside">
<div class="anihead">M</div>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="anibg1"><div class="name">Name</div><div class="num">(num)</div></div><br>


</div>

Code: 
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 background-color:#ff99cc; 
} 
 
#pagewidth{ 
 width:750px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto; 
} 
 
#header{
 position:relative; 
 height:90px; 
 background-image:url("../images/top-tile-bar.jpg");
 background-repeat:no-repeat; 
 background-position:center center;
 width:750px;
} 
 
#leftcol{
 width:150px; 
 float:left; 
 position:relative; 
  }
 
#maincol
{
    width:600px;
    background-color: #ffffcc;
    float: right; 
    display:inline; 
    position: relative; 
 }
 .conheadblue
 {
     background-color:#0000ee;
     color:White;
     text-align:center;
     font-size:x-large;
 }
 .conheadred
 {
     background-color:#bb0000;
     color:White;
 }
 
#footer{
 height:20px;
 width:100%;
  background-color:white; 
 clear:both;
 text-align:left;
 line-height:20px;
 } 
 

 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

.nav
{
    background-color:#ffffcc;
    border: medium solid #C0C0C0;
}
.navheader
{
    background-color:#0000ee;
    height:20px;
    line-height:20px;
    text-align:center;
    color:White;
    border-bottom: medium solid #c0c0c0;
}
.navbody
{
    background-color:#ffffcc;
    color:Black;
}

.num
{
    float:right;
    width:auto;
}
.name
{
    float:left;
}

 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
.nob
{
    border:0;
}

.anihead
{
    font-size:xx-large;
    background-color:#ddd;
}

.anibg1 
{
    background-color:#ddd;
}

.anibg2
{
    background-color:White;
}

.leftside
{
    float:left;
    width:45%;
}
.rightside
{
    float:right;
    width:45%;
}
 
Xilef

Xilef

Staff

11,676
I don't understand what you are trying to create with this.
Is it like:
http://i45.photobucket.com/albums/f81/x ... xample.gif[/img]

If so then you have some messed up code there.

EDIT: HAHAHA, DUDE! You will smack yourself in the face SOOOOO hard when I tell you what you did wrong XD

Here is the html fixed!
Code: 
<head>
<link rel="stylesheet" href="./style/index.css" type="text/css" />
</head>

<div class="leftside">
<div class="anihead">A</div>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Air_font.html">Air</a></div> <div class="num">(10)</div></div><br>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Aishiteru_ze_Baby_font.html">Aishiteru_ze_Baby</a></div><div class="num">(26)</div></div><br>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Akahori_Gedou_Hour_Rabuge_front.html">Akahori_Gedou_Hour_Rabuge</a></div> <div class="num">(12)</div></div><br>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Akazukin_Chacha_front.html">Akazukin_Chacha</a></div><div class="num">(72)</div></div><br>


</div>
<div class="rightside">
<div class="anihead">M</div>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="anibg1"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)</div></div><br>
<div class="anibg1"><div class="name">Name</div><div class="num">(num)</div></div><br>


</div>
 

Tdata

Sponsor

528
Well, tell me as i see no difference between the two.  Well other than the extra name/num lines addrd to M.  My problem is with the bgcolors not showing up as they should. 
 
Xilef

Xilef

Staff

11,676
Firstly, with anibg and anibg2 DDD should be DDDDDD and White should be FFFFFF.
Secondly, the problem is that the background color is defined but it has no height or width, so it is producing the background on 0 pixels by 0 pixels

Use this CSS code.
with anibg1 and anibg2 the width is 100% and height is 19px
Code: 
body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 background-color:#ff99cc; 
} 
 
#pagewidth{ 
 width:750px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto; 
} 
 
#header{
 position:relative; 
 height:90px; 
 background-image:url("../images/top-tile-bar.jpg");
 background-repeat:no-repeat; 
 background-position:center center;
 width:750px;
} 
 
#leftcol{
 width:150px; 
 float:left; 
 position:relative; 
  }
 
#maincol
{
    width:600px;
    background-color: #ffffcc;
    float: right; 
    display:inline; 
    position: relative; 
 }
 .conheadblue
 {
     background-color:#0000ee;
     color:White;
     text-align:center;
     font-size:x-large;
 }
 .conheadred
 {
     background-color:#bb0000;
     color:White;
 }
 
#footer{
 height:20px;
 width:100%;
  background-color:white; 
 clear:both;
 text-align:left;
 line-height:20px;
 } 
 

 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

.nav
{
    background-color:#ffffcc;
    border: medium solid #C0C0C0;
}
.navheader
{
    background-color:#0000ee;
    height:20px;
    line-height:20px;
    text-align:center;
    color:White;
    border-bottom: medium solid #c0c0c0;
}
.navbody
{
    background-color:#ffffcc;
    color:Black;
}

.num
{
    float:right;
    width:auto;
}
.name
{
    float:left;
}

 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
.nob
{
    border:0;
}

.anihead
{
    font-size:xx-large;
    background-color:#ddd;
}

.anibg1 
{
    background-color:#dddddd;
	width:100%;
	height:19px;
}

.anibg2
{
    background-color:#ffffff;
	width:100%;
	height:19px;
}

.leftside
{
    float:left;
    width:45%;
}
.rightside
{
    float:right;
    width:45%;
}
Now the Divs will define a new line, so move the br tags to before the two </div></div> tags (It should really be br / aswell)

This is your new HTML
Code: 
<head>
<link rel="stylesheet" href="./style/index.css" type="text/css" /></head>

<div class="leftside">
<div class="anihead">A</div>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Air_font.html">Air</a></div> <div class="num">(10)<br />
</div></div>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Aishiteru_ze_Baby_font.html">Aishiteru_ze_Baby</a></div><div class="num">(26)<br />
</div></div>
<div class="anibg2"><div class="name"><a href="http://animecasting.com/a-d/Akahori_Gedou_Hour_Rabuge_front.html">Akahori_Gedou_Hour_Rabuge</a></div> <div class="num">(12)<br />
</div></div>
<div class="anibg1"><div class="name"><a href="http://animecasting.com/a-d/Akazukin_Chacha_front.html">Akazukin_Chacha</a></div><div class="num">(72)<br />


</div></div>
</div>
<div class="rightside">
<div class="anihead">M</div>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)<br />
</div></div>
<div class="anibg1"><div class="name">Name</div><div class="num">(num)<br />
</div></div>
<div class="anibg2"><div class="name">Name</div><div class="num">(num)</div></div><br />
<div class="anibg1"><div class="name">Name</div><div class="num">(num)</div></div><br />


</div>

You will find all that works fine!
 

___

Sponsor

436
@Xilef: color keywords and three digit hex identifiers are actually completely valid CSS. Keywords are not considered "preferred" methods since the precise values of those keywords may vary from browser to browser where a standard has not been established, but three vs. six digit hex identifiers are just varying levels of specificity.
 
Xilef

Xilef

Staff

11,676
Mr. N":1vqrvv5f said:
@Xilef: color keywords and three digit hex identifiers are actually completely valid CSS. Keywords are not considered "preferred" methods since the precise values of those keywords may vary from browser to browser where a standard has not been established, but three vs. six digit hex identifiers are just varying levels of specificity.
Click to expand...
3 digit hex codes are giving me errors here :s
By errors I mean they aren't working at all, but that doesn't matter!
 

___

Sponsor

436
You should be able to use them, just make sure you lead them with a # sign. They work all the way back to at least IE5. I don't know why you'd have a problem :(
 

Tdata

Sponsor

528
I assumed that the content within the div would give it it's size. But, okay.  I use White and the like only while working with the mockups.  It isn't until after that point I input the final colors.

One last question, which I'm only bothering to ask now since I've already done it the hard way, was there a simpler way to do the Alternating BGs for the divs Rather than all of them by hand?  I mean 2 hours of doing it by hand was a little tedious.
 

___

Sponsor

436
Short answer: no. There is a CSS pseudo-class selector called odd/even but it's not supported by most browsers so even though it's cool you can't rely on it. It would look like:
Code: 
li:odd {
background-color:#888888
}

There's also an nth-child selector so you can select, for instance, only elements that are the 2nd and 5th elements, but once again no browser support.

The easier way to do it compared to your approach though is to just tag the odd elements with a class "odd". So:
Code: 
<ul class='nav'>
<li>Nav 1

<li class='odd'>Nav 2

...

then you would use css selectors:

Code: 
ul.nav li {
background-color: #AAAAAA;
}
ul.nav li.odd {
background-color:#DDDDDD;
}

This saves you a bit of work. There's an easy trick for generating these with PHP too which saves even more trouble, I'll post it later (have to go right now).
 

Ceroscuro

Sponsor

204
With Mr. N's css, I believe this should work:

Code: 
<?php

$links = array(
    'nav1' => 'nav1.html',
    'nav2' => 'nav2.html',
    'nav3' => 'nav3.html',
);

echo "<ul class='nav'>";

$index = 0;
foreach ($links as $title => $link) {
    echo "<li" . ($index % 2 == 1 ? " class='odd'" : "") . "><a href='" . $link . "'>" . $title . "</a>";
    $index++;
}

echo "</ul>";

?>
 

Ceroscuro

Sponsor

204
...Well that's what I just did...

Unless by num you mean 0 and 1 (or 1 and 2), in which case you can just insert

Code: 
$num = $index % 2;

after

Code: 
foreach ($links as $title => $link) {
 

Tdata

Sponsor

528
No, i intend to use three variables in this fashion:

Code: 
echo "<div" . ($index % 2 == 1 ? " class='anibg1'" : " class='anibg2'") . "><div class='name'><a href='index.php?p=" . $link . "'>" . $title . "</a></div><div class='num'>(" . $num . ")</div></div>";
To produce:

Code: 
<div class='anibg1'><div class='name'><a href='index.php?p=nav1'>Nav1</a><div class='num'>(5)</div></div>
<div class='anibg2'><div class='name'><a href='index.php?p=nav2'>Nav2</a><div class='num'>(3)</div></div>

$num is End-User defined.
 
You must log in or register to reply here.

Share this page

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

RPG Maker

  • Support & Help
    •
  • Tutorials
    •
  • Plugins - MZ, MV
    •
  • Scripts - Ace, VX, XP
    •
  • Resources
    •

    Content

  • Our Games
    •
  • Games in Development
    •  Emoji by Twemoji.
    Top