layout - Centering boxes using CSS -


I'm trying to turn on the layout designed in the webpage in HTML + CSS.

The layout looks like this:

I want to focus with the central black div (with fixed width), while the menu should stay on the left and the left edge of the screen Fill up, as shown above.

The problem is that I did not know how the menu is styled to fill the entire left side to show the image in the menu.

Thank you very much.

You do this by filling it with the full width of the menu, and place the black logo element on it this.

  & lt; Div id = "menu" & gt; & Lt; Div id = "centered_wrapper" & gt; & Lt; Div id = "logo" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Amp; Gt; Home & lt; / A & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Amp; Gt; Azienda & lt; / A & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Amp; Gt; Lavorazioni & lt; / A & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Amp; Gt; Contattaci & lt; / A & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

Anything with CSS:

  body, html {margin: 0; Background: # 494848; } # Menu {margin-top: 150px; Height: 250px; Background: # 3A3A3A; } # Menu ul {margin: 0; Padding: 140px 0 0; } #Menu Li {margin: 0; List style: none; Padding: 5px; } #Menu Li: Hover {background: # 4c4c4c; } #Menu Li a {display: block; Width: 550 pixels; Margin: 0 auto; Color: #fff; Text-decoration: None; } #centered_wrapper {width: 0; Margin: 0 auto; Status: Relative; } #lollow {position: absolute; Height: 250px; Width: 350px; Margin-left: -175px; / Width Width: # 000; Z-index: 1; }  

You will notice that: The hover effect of the menu item will also be shown on the right hand side. In the 50% position on the horizontal axis, applying a non-repetitive background image lets you fix it. Half of the image in the form of half transparent, hover effect of the image. With adequate length.

  # menu li: hover {background: url (hover_effect.png) repeat-y 50% 0; }  

Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -