HTML/CSS - How can I position these nested unordered lists correctly?
- by Samuroid
I am looking for some help resolving an issue im having with positioning the following unordered list elements that are contained in a div which has relative positioning:
The html structure of the UL:
<div id="accountBox" class="account_settings_box">
<ul>
<ul>
<li class="profileImage"><img src="images/profileimage.jpg" alt="Profile Image" /></li>
<li class="profileName">Your name</li>
<li class="profileEmail">Your email</li>
</ul>
<li><a href="">Messages</a></li>
<li><a href="">Settings</a></li>
<li><a href="">Password</a></li>
<li><a href="">Sign out</a></li>
</ul>
</div>
and the CSS for this list:
.account_settings_box ul ul {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
height: 150px;
outline: 1px solid blue;
}
.account_settings_box ul ul li {
display: inline-block;
border: none; /* Reset the border */
}
.profileImage {
float: right;
display: block;
width: 150px;
height: 150px;
outline: 1px solid purple;
}
.profileName, .profileEmail {
width: auto;
height: auto;
width: 150px;
height: 150px;
}
.account_settings_box ul ul li:hover {
outline: 1px solid red;
}
.profileImage img {
width: 150px;
height: 150px;
}
I am having difficultly with the embedded ul, i.e, .account_settings_box ul ul element.
The image below shows what it currently looks like.
I am trying to achieve the follow:
Have the image floating to the right, and have the "your name" and "your email" positioned to the left of the image (basically where they are currently).
Thanks for your help in advance.
Sam :)
