Having recently entered the world of HTML coding, I am struggling to find a clear and precise solution to my issue.
I am aiming to create a webpage that consists of a list of HTML elements.
https://i.sstatic.net/jQ1o0.jpg
Below is the HTML code I have written:
https://i.sstatic.net/6cQeb.jpg
Despite attempting to center-align the image, it still appears on the left side of the page. What could be the problem in my code?
There is no float: center. Only float: left and float: right. You can left-float all of <p> inside the <li> and set the width of them to 33.33%.
To ensure the image is responsive, add the following CSS:
img {
height: auto;
max-width: 100%;
}
Each <li> represents a row:
<ul>
<li>
<p>text</p>
<p><img src=""></p>
<p>text</p>
</li>
</ul>
Overall CSS rules
img {
width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
ul>li>* {
box-sizing: border-box;
display: block;
float: left;
word-break: break-all;
padding: 0 5px;
width: 33.333%;
}
.text-center {
text-align: center;
}
.full-width {
width: 100%;
}<ul>
<li>
<p>
Placeholder text here
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
Placeholder text here
</p>
</li>
<li>
</li>
<li>
<p class="full-width">
Placeholder text here
</p>
</li>
<li>
<p class="full-width">
Placeholder text here
</p>
</li>
<li>
<li>
<p>
Placeholder text here
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
Placeholder text here
</p>
</li>
</ul>If you're seeking an efficient layout solution, consider exploring a grid system. My top suggestion would be to incorporate Twitter's Bootstrap - recognized as the most user-friendly option to begin with.
Is there a downside to utilizing the CSS property word-wrap:break-word in this manner? body { word-wrap: break-word; } The definitions for the values of this property are as follows: normal: Breaks words only at allowed breakpoints break-word: Perm ...
Below is the javascript snippet that I have written: function submitForm() { var name = document.getElementsByName('name').value ,email = document.getElementsByName('email').value ,subject = document.getElementsBy ...
While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was: <div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}"& ...
What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...
What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...
I'm attempting to arrange three divs within the <header>: div1 (logo) at the top left of the page, nav2 (menu bar) at the top center of the page, and div3 (social networks) at the top right of the page. However, I am unsure of how to achieve thi ...
Check out this jsfiddle demo: https://jsfiddle.net/zpufky7u/1/ All the forms on my site were functioning correctly until suddenly angular started binding them all with class="ng-pristine ng-valid" Could this be due to a setting or something else causing ...
UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...
Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...
I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...
Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...
I have implemented a sprite to display my button image and a slightly darker hover image. Below is the CSS code I am using, with my image being 31px tall: a { background-position: 0 0; } a:hover { background-position: 0 -31px; } Although the ho ...
Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...
I keep encountering a 404 error when trying to load the CSS in my web application. The HTML content looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSL Inter App</title> <meta nam ...
I am experiencing an issue with my responsive design. When viewed on a device that is less than 600px wide, the drop-down multi-level navigation overflows downward and does not scroll because the header has a fixed position. As a result, the tabs in the me ...
Having an interesting dilemma here.. I'm trying to utilize this CSS code: .custom-forums { height: auto; width: 100%; border-image-source:transparent url("../images/forums.png") center top no-repeat; } in combination with: .custom-forum ...
html document <ul id="navbar"> <li class="selected"> <a href="#"> HOME</a> </li> <li> <a href="#"> ABOUT US</a> </li> ...
My goal with utilizing the grid system of Bootstrap 3 is to achieve the following visual layout: View my envisioned image here. However, when using the normal row and col structure, I end up with a different result: See what I actually get here. Is there ...
Is there a way to configure Magento 1.7 to display view.phtml for bundled products and view.phtml for simple products, or the other way around? I am looking to customize the views for different product types - what is the best approach to achieve this? ...
Hello! I am in the process of creating my first website, and it's going to be a D&D character randomizer. Currently, I'm working on the Nav-bar section and I have four bars that I want to fit across the screen equally, regardless of the scree ...