Jump to content

Vertical Help with TGG

TheGameGuyDev

By TheGameGuyDev
in CSS Help

 Share

Recommended Posts

TheGameGuyDev Newbie

TheGameGuyDev

Posted
Posted

Hello,

 

I have a website that is using div's and css file to arrange a page.  Such that:

 

<body>
<div class="shadowbox">
<div class="shadowbox-left"></div>
<div class="contentbox">
<div class="logo">
<img src="images/appleton-logo5.png" alt="Appleton Town Hall Logo" class="left" /></div>
<div class="fenceVertical"></div>
<div class="fenceHorizontal"></div>
<div class="mainmenu">
<div class="mainmenuctr">
<div class="menuwrapper"><a id="news" href="/"><span class="alt">News</span></a><a id="games" href="/index.html"><span class="alt">Games</span></a><a id="devblog" href="/index.html"><span class="alt">Devblog</span></a><a id="forums" href="/index.html"><span class="alt">Forums</span></a><a id="stuff" href="/index.html"><span class="alt">Stuff</span></a><a id="about" href="/index.html"><span class="alt">About</span></a>


</div>
<div class="fenceVertical"></div>
</div>
</div>
<div class="fenceHorizontal"></div>
<div class="aBox">
<div class="fenceWrapper">
<div class="fenceBox-left"></div>

<div class="newsblock">

<style type="text/css">
<!--
.NewsTitle { padding: 5px; font-size: 18pt; font-variant: small-caps; font-weight: bold; color: #000000; }
.NewsDate { padding: 5px; font-size: 8pt; font-variant: small-caps; color: #707070; }
.NewsBody { padding: 5px; font-size: 12pt; color: #000000; }        
.title1 {	font-size: 24pt; font-weight: bold;	font-variant: small-caps; padding: 5px; }
-->
</style>
<div class="title1">Title</div>



<table><tr><td>
<div class="NewsTitle">Headline 3</div>
<div class="NewsDate">2011-02-28 10:00:00</div>
<div class="newsbody"><p>ThTXTXTTXTXTXTXTXTX TXTXThway winithin the town's boundaries.  As indicated in the table below, the Town of Appleton deied the provinciaal populatoin trends between 2001 and 2006, a trend that will again be present in the 2011 cencus. [...]</p></div><img src="images/circularRoad.png" />
</td></tr></table>
<table><tr><td>
<div class="newsbody"><p>The Town of Appleton is a "young" cmomunity when compared to most communities of its size in the Province of Newfoundland and Labrador.  As the following table indicates, there is a good balance of population age within the community.  This is most likely a result of employment opportunities in nearby Gander and the presence of the Beaver Brook Antimony Mine about 50 kms from the town.  Combined with the presence of long-term residents and many expartriates reuturning to retire, the community's population offers a balance of a town that has "something for everyone". This characteristic is certainly not lost through the face that the residents of Appleton are very proud of their community, as is evident through its success in the Tidy Tows Program and its annual Appleton Winderfest.  Appleton's proximity to the Gander River, one of the best salmon rivers in the province, also offers a haven to the fishing and huning enthusiats. [...]</p></div><img src="images/circularRoad.png" />
</td></tr></table>
<table><tr><td>
<div class="NewsTitle">Headline 3</div>
<div class="NewsDate">2011-02-28 10:00:00</div>
<div class="newsbody"><p>I&#8217;ve been meaning to do a post for a little while now about some of the more common mistakes I see a lot of indie devs make when they release on the App Store. I am more than guilty myself of making these and I didn&#8217;t want to really say anything until I had actually [...]</p></div><img src="images/circularRoad.png" />
</td></tr></table>

</div>
<div class="push"></div> 
</div>
<div class="fenceBox-right"></div></div>

<div class="fenceHorizontal"></div>
<div class="footer">
<br>
, Copyright © 2011 </div>
</div>
<div class="fenceHorizontal"></div>
<div class="shadowbox-right"></div>
</div></div>

</body>

 

and the CSS for this is:

 

img.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
div.right {
display: block;
float: right;
}
div.left {
display: block;
float: left;
}
div.mugshot {  
display: block;
float: left;
padding-right: 10px;  
} 

a:link {
color:#ff9000;
text-decoration:none
}
a:visited {
color:#ffc273;
text-decoration:none
}
a:hover {color:#fff000}  /* mouse over link */
a:active {color:#ff0000}  /* selected link */

html {
/*	height: 100%;
min-height: 100%;
padding: 0;
margin: 0;*/
}
body{ 
/*background: #5b687c url("/images/bg-gradient.png") repeat-x left top fixed;*/
background: #ffffff url("images/backgroundtestLeft2.jpg") repeat-x left top fixed;
/*	height: 100%;
min-height: 100%;*/
padding: 0;
margin: 0;
}
div.shadowbox{
display: block;
/*	float: left;*/
position: relative;
margin:0 auto;
width: 100%;
}
div.contentbox{
display: block;
margin: 0 auto;	
background: #ffffff;
padding: 0px 20px 0px 0px;
margin: 0 auto;
width: 76%;
position: relative;
left: -12px;
    top: 0px;
}

div.shadowbox-left{
display: block;
background: transparent url("images/shadowbox-left.png") repeat-y right;
float: left;
/*position: relative;*/
position: absolute;
top: 0;
bottom: 0;
left: -13px;
width: 12%;
z-index: -1;
/*min-height: 100%;
height: 100%;*/
}
div.shadowbox-right{
display: block;
background: transparent url("images/shadowbox-right.png") repeat-y right;
float: left;
/*	position: relative;*/
position: absolute;
top: 0;
bottom: 0;
left: 72px;
width: 88%;
z-index: -1;
/*	height: 100%;
min-height: 100%;*/
}
h3 {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}
div.logo {
display: block;
margin-left: auto;
margin-right: auto;
margin:0 auto;
text-align: left;
width: 100%;
color: #fdfdfd;
font-family: helvetica, arial; 
background: #000000 url("images/3logo-bg-gradient.png") repeat-x right bottom;
padding: 0px 20px 0px 10px;
}

div.mainmenuctr {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
div.menuwrapper {
margin-left: 13%;
margin-right: auto;	
}
div.mainmenu {
display: block;
margin-left: auto;
margin-right: auto;
margin:0 auto;
text-align: center;
background: #ffffff url("") repeat-x right top;
width: 100%;
height: 49px;
font-family: helvetica, arial; 
padding: 0px 20px 0px 10px;
a:link: 
}

div.fenceHorizontal {
    width:100%;
    background: #ffffff url("images/pieceoffence.png") repeat-x left top;
    height:21px;
    padding: 0px 20px 0px 10px;
}

div.fenceVertical {
    height:100%;
    background: #ffffff url("images/pieceoffencevertical.png") repeat-y left top;
    width:21px;
    padding: 0px 0px 0px 0px;
}

div.aBox{
display: block;
/*	float: left;*/
position: relative;
margin:0 auto;
width: 100%;
}
div.fenceBox-left{
display: block;
background: #ffffff url("images/pieceOfFenceVertical.png") repeat-y left;
float: left;
/*position: relative;*/
position: relative;
top: -3px;
bottom: 3px;
left: 81px;
width: 3%;
z-index: -1;
/*min-height: 100%;*/
height: 218px;
}
div.fenceBox-right{
display: block;
background: #ffffff url("images/pieceOfFenceVertical.png") repeat-y right;
float: left;
/*	position: relative;*/
position: relative;
top: 0;
bottom: 0;
left: 0px;
width: 100%;
z-index: -1;
/*	height: 100%;*/
min-height: 100%;
}

div.fenceWrapper {
display: block;
margin-left: auto;
margin-right: auto;
margin:0 auto;
text-align: left;
width: 100%;
color: #000000;
font-family: helvetica, arial; 
background: #ffffff;
padding: 20px 20px 0px 10px;


}

div.newspadding {
display: block;
padding: 20px 20px 10px 10px;
width: 100%;
background: #ffffff url("images/textbg.png") repeat;

}
div.newswrapper {
min-height: 100%;
height: auto !important;
width:100%;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
div.newsblock {
display: block;
/*margin-left: auto;
margin-right: auto;*/
margin: 0 auto;
padding: 20px 0px 10px 10px;
width: 80%;
height: 100%;
color: #000000;
font-family: Arial, sans-serif;
/*helvetica, arial;*/
font-size: 12pt; 
/*background: #71808f url("/images/text-bg-gradient.png") repeat-x left top fixed;*/
background: #ffffff url("images/textbg.png") repeat;
}

 

the page can be seen at:

http://www.townofappleton.ca/underconstruction/

 

 

My problem:

 

I AM TRYING TO DRAW VERTICAL FENCES DOWN THROUGH THE SITE, I want to draw pieceofFenceVertical.png on the left and right of newsblock.. what is the CSS to do this right?

 

THANKS!!!

Your solution:

 

 

Link to comment
Share on other sites
TheGameGuyDev Newbie

TheGameGuyDev

Posted
  • Author
Posted

i do have it there. http://www.townofappleton.ca/underconstruction/images/pieceoffencevertical.png that is my issue, it isn't drawing

 

it is there:

 

images/pieceoffencevertical.png

 

and

 

i call to it as:

<div class="fenceVertical"></div>

from:

 

div.fenceVertical {
    height:100%;
    background: #ffffff url("images/pieceoffencevertical.png") repeat-y left top;
    width:21px;
    padding: 0px 0px 0px 0px;
}

 

 

i got the horizontal one to draw but dont know how to make it wrap the sides of 

<div class="newsblock">

 

 

 

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.