Member Avatar for PF2G

Hi,

i have this web page:

and i want to put some dark grey background behind the banner and the menu bar.

How do i do it?

Thank you,
PG2G

  • 2 Contributors
  • 3 Replies
  • 122 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

Quick summary: wrap the banner and the menu in a single full‑width bar and center the visible content inside a constrained inner container. was on the right track about using CSS instead of the deprecated center tag; the most reliable approach is a full‑bleed parent element that holds a centered child (max width + margin: 0 auto). This keeps the dark stripe spanning the viewport while the banner/menu remain centered and responsive.

A minimal pattern to try (put CSS in your head or an external stylesheet):

<div class="top-strip">
  <div class="site-width">
    <!-- banner markup -->
    <!-- nav markup -->
  </div>
</div>
body { margin: 0; }
.top-strip { background: #333; }        /* the dark stripe */
.site-width { max-width: 980px; margin: 0 auto; padding: 12px 16px; }
.top-strip img { display: block; max-width: 100%; height: auto; }
nav.primary ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }

Practical tips and troubleshooting:

  • Remove the <center> tag and any inline <style> blocks in the middle of the page; keep styles in one file.
  • If the stripe still looks constrained, the bar is inside another fixed-width parent — move .top-strip outside that wrapper or use width: 100vw; carefully.
  • If menu items use floats, clear them (or switch to flex) so the parent height contains them.
  • Make images display:block to avoid inline gaps and use max-width:100% for responsiveness.

On the PHP side: as noted, session_start() must be called before any output (no whitespace or BOM). See the PHP manual for details: session_start() - PHP Manual.

Recommended Answers

All 3 Replies

Member Avatar for hericles

Normally you would use the background-color property of the div. If you want it to extend the width of the page set the div width to 100% (or whatever width is relevant if you only want to cover a certain area) and then center your banner and menu.
Does that help?

Member Avatar for PF2G

Normally you would use the background-color property of the div. If you want it to extend the width of the page set the div width to 100% (or whatever width is relevant if you only want to cover a certain area) and then center your banner and menu.
Does that help?

I was thinking use some css i got the code of the banner and the menu:

<!--begin banner_slideshow-->
<center>
    <div id="slideshow">  
        <ul id="slide_fotos">  
            <li><img src="images/main_banner.jpg" alt="" title="Foto 01" />  
                <p></p></li>  
           <li><img src="images/banner1.jpg" alt="" title="Foto 02" />  
                <p></p></li>  
            <li><img src="images/banner2.jpg" alt="" title="Foto 03" />  
                <p></p></li>  
            <li><img src="images/banner3.jpg" alt="" title="Foto 04" /> 
				<p></p></li>  			
        </ul><!-- /fotos -->  
        <p id="pager">  
  
        </p><!-- /pager -->  
    </div><!-- /slideshow -->  
</center>
<!--end   banner_sslideshow-->

<style type="text/css">
.separador
{
	margin-right: 5px;
}
</style>

<!--begin menu_css-->
<div>
<ul class="menu">
	<li class="top"><a href="index.php" class="top_link"><span>Página Principal</span></a></li>
	<li class="top"><a href="inscricao.php" class="top_link"><span>Inscrições Online</span></a></li>
	<li class="top"><a href="cursos.php" class="top_link"><span>Cursos</span></a></li>
	<li class="top"><a href="contact.php" class="top_link"><span>Contacte-nos</span></a></li>
		
<?PHP
session_start();

if(is_logged())
{
?>
<li class="top"><a href="horarios.php" class="top_link"><span>Horários</span></a></li>
<li class="top"><a href="profile.php" class="top_link"><span>O Meu Perfil</span></a></li>
<?PHP
;}
?>
</ul>
</div>
<!--end  menu_css-->
Member Avatar for hericles

background-color is a CSS property so I would add that to whatever styling rules you are applying to those areas.
Did you write this code or download it from somewhere? You have a style rule floating in the middle of the page.
And your PHP session_start() code needs to be the very first thing on the page to work i.e. right at the top, the first line of code. You can't have it further down the page like that - unless my PHP is very rusty...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.