List of shapes and text items

I'm encountering some challenges with my list of shapes - could it be that I am approaching it the wrong way? I could use some guidance on what I am trying to accomplish.

Check out My Fiddle

CSS:

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}

#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

HTML:

<div style="width: 1000px; margin: 0 auto; padding: 0 0 0 0;">



<ul>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="tablet" style="float:left; margin:  -100px 25px 0 25px;"></div></li>

<li style="display:inline;"><div id="circle" style="float:left;margin:  0 25px 0 25px;""></div></li>

<li style="display:inline;"><div id="circle" style="float:left;"></div></li>

</ul>



</div>

Upon reviewing my code and fiddle, you can see that it aligns correctly. I would like to insert an icon (which is a span) in the center of each shape and also a word beneath each one. However, when I add elements like this, it completely disrupts the layout. Perhaps I have approached the design incorrectly?

htmlcsshtml-lists

Answer №1

If you haven't provided the dimensions of the images you plan to insert, I can offer the following suggestions: Modify the CSS code as follows:

#circle { 
   height: auto;
    width: auto;
    border-radius: 50%;
   background: #3B5163; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
}

#tablet{
    width: auto;
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

Furthermore, consider using display: block and then float: left. If I'm incorrect, please correct me—this method allows CSS to view objects as blocks and lets you arrange the boxes to stack to the left or right with 'float:'. (If you don't specify float, they will naturally stack vertically) You may also want to experiment with an absolute positioning technique alongside these adjustments.

Answer №2

Hey there! If you're looking to achieve a specific style, check out this example: http://jsfiddle.net/29NF3/2/

Include the following CSS: 

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}
#circle span {
    clear: both;
    display: block;
    text-align: center;
    vertical-align: middle;
}
#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
.text {

    display: block;
    text-align: center;

}

See the updated demonstration here :- http://jsfiddle.net/29NF3/5/

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

Are you able to develop a customized TestNG Listener to cater to your specific requirements?

I have developed a unique concept for a TestNG listener that meets my specific requirements. Essentially, I aim to design a custom listener that generates a report using a predefined HTML format. The crux of my idea revolves around declaring the listener ...

javahtmlseleniumautomationtestng

Retrieve the div element by calling a scriptlet with JavaScript

I am facing an issue with a web page that includes a scriptlet like this: <div id="flash_chart"> <%=content_data['report_text']%> </div> The variable content_data['report_text'] contains a lengthy string ...

javascripthtml

Looking to utilize AngularJS validation in place of the default browser validation?

I am working on a form that contains two ng-forms for input validation. I have encountered two issues with my forms. 1) I am trying to implement a minlength validation for the Company input, but my current approach doesn't seem to be working. How can ...

javascriptangularjshtmlformsvalidation

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

Good day, I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div ...

javascriptcssvue.jsanimationaccordion

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

I am working with two boxes: one is called AuthorizedAmount and the other is called LessLaborToDate: <div class="col-md-6"> <div class="form-group"> <label>Authorized Amount</label> <div class="input-group"> & ...

javascriptjqueryhtmlasp.net-mvcrazor

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Implement Icon using CSS Class in jQuery Mobile

Is there a way to use an icon in jQuery Mobile on a span element and also support retina display without giving the span a fixed width? Should I attempt to utilize Media Queries to achieve this, or is there an "official way" to do it? Thanks, Nils ...

cssjquery-mobile

Finding the value of an input without having to submit it first and searching for it within a datalist

> Here is an example of HTML code <label>Person</label> <input name="PersonID" type="text" id="PersonID"> <label>Car Plate Number</label> <input name="PersonsCarPlateNumber" list="PersonsCarPlateNumbe ...

javascriptphphtmldatabasexampp

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

htmlcssz-index

jQuery text alignment breaking bug

I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...

jquerycss

Some CSS styles are not displaying correctly within an iframe

Let me start by clarifying that I am not looking to add extra CSS to the contents of an iframe from the parent document. My issue lies with a document that normally displays correctly but experiences styling issues when shown in an iframe. Whenever I searc ...

htmlcssiframe

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

I have a school project where I am creating a quiz-game web page. Each question will have 4 possible answers. The questions, along with their 4 answer choices and the correct answer, are randomly selected from a database. However, I am facing an issue w ...

phphtmlmysql

Managing concurrent users updating the same form on a web application

Imagine a scenario where user A opens a form with pre-filled data. While user A makes changes to the form data, user B also opens the same form with the data intended for user A. Just as user B begins modifying the data, user A clicks on the submit butto ...

javajavascripthtml

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

htmlcssangular

What is the best way to display multiple divs in a single location?

I am facing an issue with displaying different text on mouseover for three buttons. I successfully implemented it for one button, but when I added the other two, it stopped working. Here is the code I used for the first button: Using jQuery- document.get ...

jqueryhtmlcss

What is the best way to toggle the active class on a ul list?

After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's ...

javascriptjqueryhtmlcss

Using regular expressions in JavaScript, how can one extract the content along with the HTML tags from within the tags?

Below is the text to be analyzed: how much production in batu The text is displayed with HTML tags where each word is wrapped in a span with a specific style or class. For example: '<span style="">how &nbsp;</span><span style ...

javascripthtmlregex

Two HTML elements positioned alongside each other with inline word wrapping

Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use. I am attempting to align some "label ...

htmlcsslayout

Various height divs are arranged in two columns and float accordingly

My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...

htmlcss