Optimizing the image layout and crafting the perfect CSS design

As a newcomer to the world of HTML and CSS, I am eager to learn from experienced gurus how to layout the image above using HTML and minimal CSS. Thank you for your help.

This is my approach: Firstly, I would slice eight small images and one white background image with rounded corners.

The HTML code:

<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>

</div>
<div id="bottom"  style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>

Note: What are the benefits of using these images as background images instead of in an img tag? Which method is preferred and why?

htmlcss

Answer №1

To create a navigation menu, you can use ul with the appropriate width and float its li's to the left. Divs can be nested inside a div or placed directly in the body.

Here is an example for better understanding:

style.css (CSS should be in the same directory or linked properly):

ul { margin: 0; padding: 0;  width: 500px; }
li { float: left; /* adjust width if images are different sizes */ }

HTML:

<!DOCTYPE ...>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-US" />
    <!-- ... -->
    <title>My Page</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="some js file"></script>
</head>
<body>
    <!-- .... -->
    <ul>
        <li><a href="http://target.com/target1" title="Latest News"><img alt="Latest News" src="..." /></a></li>
        <li><a href="http://outer.com" title="Outer Link" target="_blank"><img alt="Latest News" src="..." /></a></li>
        <!-- .. -->
    </ul>
    <!-- .... -->
</body>
</html>

Answer №2

Here's the solution:

http://jsfiddle.net/Wrd7F/

HTML code:

<ul>
    <li class="link1"><a href="#">Lipsum</a></li>
    <li class="link2"><a href="#">Lipsum</a></li>
</ul>

CSS code:

ul { width: 600px; float: left; }

ul li {
    background-image: url("https://i.sstatic.net/l2qJt.png");
    background-repeat: no-repeat;
    width: 137px;
    height: 46px;
    float: left;
    margin: 20px;
}

ul li a {   
    padding-left: 57px; /* Remember to subtract this amount from the width */
    width: 80px; /* Original width 137px - Subtract the padding you want to use on the right */
    height: 46px;
    line-height: 46px; /* Keep it the same as height for centered text */
    text-align: left;
    float: left;
    text-decoration: none;
    color: #222222;
}

.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }

Manually input the background positions, but Firebug can assist with messy image document layouts.

Ensure all images are arranged in one document horizontally or vertically. For hover images, place them below regular images side by side. Once vertical or horizontal positioning is established, only modify one value for hover and normal states.

Advantages of using CSS backgrounds over <img>:

  • Greater flexibility in size, padding, and style
  • Easier editing without needing Photoshop
  • :Hover state definition in CSS without requiring JS

Edit: In the CSS comment, meant to say "Subtract the padding you want to use on the left"

Edit2: Be cautious when dealing with limited width and text, especially with rounded borders. Flexibility may require some advanced techniques.

Answer №3

first: Instead of using the image in an img tag, consider using it as a background image. It would be even better if you utilize CSS sprites.

second: Use list style for this and apply float:left to it.

 <ul>
  <li>wew</li>
  <li>er</li>
  <li>rer</li>
 </ul>

css: 

li{
 float:left:
 margin:5px;
}

Answer №4

Take a look at this demo where the icons extend out of the white boxes just like in your screenshot

http://jsfiddle.net/RYAZp/

CSS

ul li {
    border: 1px solid #333;
    background: #FFF;
    border-radius: 10px;
    display: inline-block;
    padding: 10px 10px 10px 45px;
    overflow: visible;
    font-size: 15px;
    height: 1em;
    position: relative;
    margin-bottom: 1em;
}

ul li img {
    position: absolute;
    top: -0.5em;
    left: 5px;
}

HTML

<ul>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>  
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a file upload progress tracker using jQuery and AJAX

I have successfully implemented an AJAX upload feature that displays a progress bar and percentage completion. However, I would like to enhance the user experience by creating a separate progress bar for each file being uploaded. Is it possible to achieve ...

phpjqueryhtmlcssajax

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

htmlcssflexbox

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

"Creating a visually appealing form with the input element

When using ASP.Net, there is a tag known as CheckboxList that generates the following output: <table class="checkbox"> <tbody> <tr> <td> <input id="/*longdynamicstring1*/" type="checkbox" name="/*longdynamicstring2*/ ...

asp.netcss

Is there a way to achieve this specific function using div elements instead of relying on tables, rows, and cells?

To achieve the same behavior as the example code, one can remove the use of the table, td, and tr tags and replace them with divs. The desired behaviors include: Content1 text wrapping within column1 when the page width decreases. Column2 having a minimu ...

htmlcss

Ways to incorporate a border line between a pair of icons within a bootstrap card

Incorporating a border line within the card-header is my current goal. My approach involves positioning two icons - one on the left side and the other on the right. Illustrative example below: https://i.sstatic.net/BgxVu.png Utilizing HMTL and CSS to ac ...

htmlcssbootstrap-4

Selenium: What causes the CSS selector to fail in IE10 while working fine in Firefox and Chrome?

from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC wait = WebDriverWait(webdriver, 10) elem = wait.until(EC.visibility_of_element_located( (By.CSS_SELECTOR, '.top_laye ...

cssseleniuminternet-explorer-10

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

javascripthtmlcss

Strategies for transferring a dynamic variable to a parent window's form in JavaScript?

What is the best way to use a changing parameter name when accessing a variable? For instance: opener.document.form.namerow_3.value = this.cells[0].innerHTML; opener.window.form.{varaible}.value=this.cells[0].innerHTML; In this scenario, the parameter ...

javascripthtml

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

javascripthtmlcssscroll

What is the best way to implement a zoom in function on a website tab using HTML?

I am currently working on an HTML page that includes tabs on the left side. When a tab is clicked, I would like it to display the corresponding content with a zoom-in effect. Essentially, the selected tab should come forward in a zoomed state while the res ...

htmlzooming

What is the best way to set an array as the value for an HTML form input?

I am attempting to set the value of an array to an input element in HTML. When I run the following code in my browser console, it works: let between0400am0800am = [1669352400000, 1669438800000]; document.getElementById("time400am800amEveryDay"). ...

javascripthtmlarrays

the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected! Below is my HTML code: <div class="tools-bg"> & ...

jqueryhtmlcss

Aligning with the parent element and adjusting slightly towards the left side

.parent-div { box-sizing: border-box; min-width: 0px; padding: 1rem; min-height: 1px; margin: 0; border: solid 1px; } .child-div-one { box-sizing: border-box; margin: 0; min-width: 0px; min-height: 400px; display: flex; border: sol ...

htmlcss

Is there a way to identify the presence of a mouse on a website?

In the process of developing a website, I encountered a dilemma with navigation buttons. They needed to be large for aesthetic reasons and ease of use but had to be small when not in use. To address this, I decided to shrink the buttons into thumbnails on ...

javascriptjqueryhtmlweb-applications

Implementing conditional ng-show based on checkbox status in AngularJS

I have created this code to filter out the out-of-stock products using ng-show. When the checkbox is checked, only the available products should be displayed. HTML: <input type="checkbox" id="chkStock" value="Exclude Out of Stock" ng-model="exclude" / ...

angularjshtml

How can I divide a div by utilizing word wrap?

My CSS-styled div is pretty straightforward .text { text-transform: capitalize; color: #FFFFFF; background: #918a8a; opacity: 0.6; font-size: 2em; height: 80px; width: 200px; } It creates a grey box w ...

htmlcss

JavaScript scripts are not functioning properly in a partial view following a refresh

Issue: The partial view contains JavaScript scripts that work when first loaded, but stop working after being loaded a second time. Description: I have a partial view reloading on value change in a select box (which calls this function). @(Html .DevE ...

javascriptc#htmlasp.net.net

Creating a function that uses setInterval to continuously update the input with a specific value

I am looking to use the setInterval function to continuously update the value of #test1. Additionally, I want the value of #test1 to be cleared and reset to 1 second after the user clicks a button. Example output can be found here: http://jsfiddle.net/eK ...

javascriptjqueryajaxhtml

Issues with Opera displaying specific characters when using webfonts

Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...

htmlcssfont-facewebfonts