CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cr1ms0nStraY
Cr1ms0nStraY

Reputation: 81

How to put <ul> around image in css

So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:

<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>

Here is how it looks at the moment: enter image description here

As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.

Here is the html file:

<body>
    <div id="line">
        <div class="line-menu">
            <ul class="menu-buttons">
                <li>ONE</li>
                <li>TWO</li>
                <li>TREE</li>
                <li>FOUR</li>
            </ul>
        </div>
    </div>
    <div id="top">
            <div id="logo">
                <img src="images/chelsea-logo.png">
            </div>
    </div>
    </body>

And the css file:

body {

    background: url('../images/background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;  
}

#top{

    width: 150px;
    margin: 0 auto;
    height: 150px;
    z-index: 1;
}

#top img {

    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 1;
}

#top img:hover {

    width: 158px;
    height: 158px;
    transition: all 0.3s ease;
}

#line {

    position: absolute;
    top: 0px;
    width: 100%;
    height: 75px;
    background: #423BD9;
}

.line-menu {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.line-menu ul {

display: inline-block;
padding: 5px;
margin: 25px;

}

.line-menu li {

padding: 0 89px;
display: inline-block;
}

I'll provide more information if needed. Thank you in advance for your time.

Upvotes: 1

Views: 89

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it.

You have the right idea by using absolute positioning to place the logo over the link panel.

I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.

To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.

You can adjust margins on various elements to control the spacing between and above the li elements.

Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.

body {
  margin: 0;
}
#top {
  border: 1px dotted black;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  text-align: center;
}
#top img {
  vertical-align: top;
  width: 150px;
  height: 150px;
}
#top img:hover {
  width: 158px;
  height: 158px;
  transition: all 0.3s ease;
}
#line {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 75px;
  background: #423BD9;
}
.line-menu {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.line-menu ul {
  display: block;
  text-align: center;
  margin: 20px 0 0 0;
  padding: 0;
}
.line-menu li {
  display: inline-block;
  margin: 0 20px;
  width: 100px;
  border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
  margin-right: 200px;
}
<div id="line">
  <div class="line-menu">
    <ul class="menu-buttons">
      <li>ONE</li>
      <li>TWO</li>
      <li>THREE</li>
      <li>FOUR</li>
    </ul>
  </div>
</div>
<div id="top">
  <div id="logo">
    <img src="http://placehold.it/150x150">
  </div>
</div>

Upvotes: 1

paranjothi
paranjothi

Reputation: 113

Add image after one and two. And .list-menu li float:left; display:block;

Upvotes: 0

Related Questions