Member Avatar for wwwmadeasy

hello every one and thanks for reading..

i wanted help in CSS coz i am new in that...

i wanted to know how to design the left menu which in that web site

and how it is possible to insert some text and image like u can see in the web site which i mentioned..look in the boxes in the page..can any one help me in that plz...

thanks in advance

  • 4 Contributors
  • 5 Replies
  • 143 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by wwwmadeasy

Dani AI

Generated

For : the simplest, most robust way to recreate the left-column “boxed” items is to split the problem into structure, styling, and behavior. was right to point you to tutorials for fundamentals, ’s expanding-menu idea is useful if you need interactivity, and ’s advice to inspect the live site is exactly the right next step — use your browser’s inspector to see the markup and which CSS rules affect each element.

Practical plan:

  • Markup: a semantic <nav> or <aside> with a <ul> of <li> items. Put the image and text inside an anchor so the whole box is clickable.
  • Styling: use display: flex on the anchor to align image + text, border-radius for rounded corners, box-shadow for depth, and transition for hover effects. Use box-sizing: border-box so padding behaves predictably.
  • Accessibility/responsiveness: add alt text for images, visible :focus styles for keyboard users, and let boxes be full-width on small screens.

Example structure and CSS you can adapt:

<nav class="left-menu">
  <ul>
    <li>
      <a href="#">
        <img src="thumb.jpg" alt="Thumbnail">
        <div>
          <strong>Title</strong>
          <div class="summary">Short description text.</div>
        </div>
      </a>
    </li>
  </ul>
</nav>
.left-menu a { display:flex; align-items:center; padding:10px; background:#fff;
  border-radius:8px; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background .15s; }
.left-menu img { width:48px; height:48px; object-fit:cover; margin-right:10px; }
.left-menu li { margin-bottom:12px; list-style:none; }

Troubleshooting tips: if spacing or styles don’t apply, check specificity in the inspector (look for overridden rules), clear cache, and verify the correct stylesheet is loaded. For older-browser fallbacks, progressively enhance — deliver a usable layout first, add rounded corners and shadows via CSS for modern browsers.

Recommended Answers

All 5 Replies

Member Avatar for wwwmadeasy

ithelp thanks for ur replay ...i did check that but there no clear idea about that..can any provide me some live example ...thanks..

Member Avatar for thacravedawg

if you really want to re-create an effect someone else created, the best way is to see exactly how they did it. if you want to create the same effect check their style sheet, it is locate here:

if you are trying to create the rounded boxes focus on the the css Id add-list-left and right, and the classes content-adds car etc.

then look at the html used, which starts at line 516.

hope that helps...

Member Avatar for wwwmadeasy

thacravedawg ..thanks very much and i will try that..

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.