I am encountering two issues that I need help solving.
My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div.
The second problem pertains to creating a side bar on the right side of the page. I'm unsure whether I should use another div for this or opt for a full background image with a different color for the side bar against a white backdrop.
Attached is an image demonstrating what I have accomplished so far, featuring red lines indicating my desired layout:
(The purple div at the bottom was originally intended as the side bar; I added some text inside for visibility)
To sum it up, I have the following questions:
- How can I extend the navigation bar in terms of length and height?
- Should I use a separate side
div, a background image, or perhaps consider alternative options? (Please note that the logo image on the top right corner is only partially visible)
body {
background-color: gray;
}
#page {
margin: 0 auto;
word-wrap: break-word;
}
#nav,
#textarea,
#contactallpages {
display: inline-block;
}
#containerpage {
display: inline-block;
margin: auto;
text-align: center;
}
#centercontainer {
background-color: lightblue;
width: 85%;
margin: 0 auto;
padding: 0.5%;
}
#nav {
background: #aaaaaa;
width: 10%;
padding: 1%;
border-radius: 25% 0% 0% 0%;
text-align: center;
vertical-align: bottom;
}
#textarea {
background: #cccccc;
height: 70%;
width: 60%;
padding-top: 5%;
padding: 3%;
border-radius: 0% 10% 0% 0%;
text-align: left;
}
#contactallpages {
background: #bbbbbb;
vertical-align: bottom;
width: 10%;
padding: 1%;
font-size: 0.8em;
border-radius: 0% 5% 25% 0%;
}
#purplebanner {
background-color: purple;
}<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>
<li><a href="index.html" class="selected">Home</a>
</li>
<li><a href="#">About me</a>
</li>
<li><a href="#">more</a>
</li>
<li><a href="#">links</a>
</li>
<li><a href="#">in menut</a>
</li>
</ul>
</div>
<!--
-->
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
text text text
</p>
<p>
text text text
</p>
</div>
<!--
-->
<div id="contactallpages">
Contact info
<br>Name person
<br>
<br>Address
<br>more lines
<br>
<br>
<u>Telephone:</u>
<br>numbers
<br>
<u>E-mail:</u>
<br>address thingey
</div>
</div>
<div id="purplebanner">
text
</div>
</div>