Need some CSS help.

Ok well heres the problem. I tried to code my design today and I can't set the image to repeat.

Heres the index.html code.

<div id="leftnav">
<div id="navbg">
</div>
</div>

Code (markup):

CSS

#leftnav
{
background: url(images/leftnav.gif);
width: 44px;
height: 33px;
margin: 0 auto;
margin-left: 2px;
}

#navbg
{
background: url(images/navbg.gif);
background-repeat: repeat-x;
width: 4px;
height: 33px;
margin: 0px auto;
margin-left:44px;
}

Code (markup):

URL.

http://www.cezarykubel.com/UploadImages

Image on the left



Image being repeated



The problem is the navbg.gif won't repeat. How do I make it repeat?

Thanks,

 

You have to define the width for the container element. It looks like you have it set to 4px. Which means it will repeat for 4px. Put a larger value in there.

 

fixed. Now really what i wanted to do but its fine.

Repped

Thanks

 

what did you want to do?

 

I wanted it to repeat itself over the place so that it loads up faster.

But its ok.

 

I got another question.

For this template that I am doing right now, how to I get the second Welcome to be on the right side of the first one?

html code

<div id="content">
<br></br>
<img src="images/prowelcome.gif" align="left" /> <br><br></br></br>
Here at Unblock-Proxy.info, our goal is to get your favorite websites, like Myspace, YouTube, Hi5, ect, unblocked by the school or work firewalls.  The firewalls block certain websites that might distract worker and students from doing what they are suppose to.  We do not take any responsibility for job losses, school troubles, ect.  Have fun!

<div id="content2">
<br></br>
<img src="images/prowelcome.gif" align="left" /> <br><br></br></br>
Here at Unblock-Proxy.info, our goal is to get your favorite websites, like Myspace, YouTube, Hi5, ect, unblocked by the school or work firewalls.  The firewalls block certain websites that might distract worker and students from doing what they are suppose to.  We do not take any responsibility for job losses, school troubles, ect.  Have fun!
</div>
</div>

Code (markup):

css code

#content
{
width: 366px;
height: auto;
margin: 0 auto;
margin-left: 25px;
font-family: Tahoma;
font-size: 12px;
color: #A2A2A2;
text-decoration: none;
}

#content2
{
width: 381px;
height: auto;
margin: 0 auto;
margin-right: 25px;
}

Code (markup):

URL: http://unblock-proxy.info

Thanks

 

Coupla things here... first the content2 is inside the content. And you don't have the first paragraph in any type of container. Plus you are using BR tags, should just use P's instead.


This section of code:

<div id="content">
<br>
<img src="Unblock-Proxy.info%20-%20Coming%20Soon_files/prowelcome.gif" align="left"> <br><br>
Here at Unblock-Proxy.info, our goal is to get your favorite websites,
like Myspace, YouTube, Hi5, ect, unblocked by the school or work
firewalls. The firewalls block certain websites that might distract
worker and students from doing what they are suppose to. We do not take
any responsibility for job losses, school troubles, ect. Have fun!
<div id="content2">
<br>
<img src="Unblock-Proxy.info%20-%20Coming%20Soon_files/prowelcome.gif" align="left"> <br><br>Here
at Unblock-Proxy.info, our goal is to get your favorite websites, like
Myspace, YouTube, Hi5, ect, unblocked by the school or work firewalls.
The firewalls block certain websites that might distract worker and
students from doing what they are suppose to. We do not take any
responsibility for job losses, school troubles, ect. Have fun!
</div>

</div>

Code (markup):

Would look better:

<div id="content">
      <div class="content_box">
<img src="Unblock-Proxy.info%20-%20Coming%20Soon_files/prowelcome.gif" align="left"> <p>
Here at Unblock-Proxy.info, our goal is to get your favorite websites,
like Myspace, YouTube, Hi5, ect, unblocked by the school or work
firewalls. The firewalls block certain websites that might distract
worker and students from doing what they are suppose to. We do not take
any responsibility for job losses, school troubles, ect. Have fun!
</p> 
  </div>

<div class="content_box">

<img src="Unblock-Proxy.info%20-%20Coming%20Soon_files/prowelcome.gif" align="left"> <p>Here
at Unblock-Proxy.info, our goal is to get your favorite websites, like
Myspace, YouTube, Hi5, ect, unblocked by the school or work firewalls.
The firewalls block certain websites that might distract worker and
students from doing what they are suppose to. We do not take any
responsibility for job losses, school troubles, ect. Have fun!
</p>
</div>

</div>

Code (markup):

.content_box
{
width: 381px;
height: auto;
margin: 0 auto;
margin-right: 25px;
float: left;
}

And the #content has to have its width changed to a much higher value. Double the size of the .content_box plus its margins, padding etc. Also IE6 has oddities about sizes etc so you will have to adjust for it.

 

well i do have this

#page
{
width: 757px;
background-color: #FFFFFF;
height: auto;
margin: 0 auto;
}

Code (markup):

I'll see if it works

hmm...This is what it comes out to.

www.unblock-proxy.info

here is the full html code

<div id="page">

<div id="pronav">
</div>

<div id="prologobg">
<div id="prologo">
</div>
</div>

<div id="pronav">
</div>

<div id="content">
      <div class="page">
<img src="images/prowelcome.gif" align="left"> <p>
Here at Unblock-Proxy.info, our goal is to get your favorite websites,
like Myspace, YouTube, Hi5, ect, unblocked by the school or work
firewalls. The firewalls block certain websites that might distract
worker and students from doing what they are suppose to. We do not take
any responsibility for job losses, school troubles, ect. Have fun!
</p> 
  </div>

<div class="page">

<img src="images/prowelcome.gif" align="left"> <p>Here
at Unblock-Proxy.info, our goal is to get your favorite websites, like
Myspace, YouTube, Hi5, ect, unblocked by the school or work firewalls.
The firewalls block certain websites that might distract worker and
students from doing what they are suppose to. We do not take any
responsibility for job losses, school troubles, ect. Have fun!
</p>
</div>

</div>


</div>

Code (markup):

and the part of the css

body
{
background: url(images/probg.gif) repeat;
padding: 0;
margin: 0 auto;
}

#page
{
width: 757px;
background-color: #FFFFFF;
height: auto;
margin: 0 auto;
}

#content
{
width: 366px;
height: auto;
margin: 0 auto;
margin-left: 25px;
font-family: Tahoma;
font-size: 12px;
color: #A2A2A2;
text-decoration: none;
}

#content2
{
width: 381px;
height: auto;
margin: 0 auto;
margin-right: 25px;
}

Code (markup):

need some help

 

Ok, here's the problem. The content is containing the page class ( I wouldn't name it page, box is better, try to name them for what they are or do, it definitely isn't a page) so the page class is going to be constrained to the width of the content.

#content
{
width: 366px;

That part has to be double and you didn't put a float:left on the .page.