I am new to html coding and I could not find exact and clear solution for my problem.
I want to create a page with this format: I want to do the page with list of html.
Here is my html code:
Although I made alignment center my picture is on the left side of the page. What is wrong or missing with 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%.
In this case the image has to be responsive:
img {
height: auto;
max-width: 100%;
}
Every <li> represent a row
<ul>
<li>
<p>text</p>
<p><img src=""></p>
<p>text</p>
</li>
</ul>
In total
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>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<li>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
</ul>
You would probably be best looking into using a grid system. I would recommend using Twitter's Bootstrap - definitely the best as easiest to start using
http://getbootstrap.com/
Related
I'm trying to make an informative website about the colosseum with buttons to show/hide text. I put some images with align=left so the information is next to it, but the buttons after the images are being re-aligned to. Here is what it currently looks like:
image
Here is some of the html:
<div>
<div class="buttons">
<div class="murmillo" onclick="changeGladiator('Murmillo')">
Murmillo
</div>
<div class="retiarus" onclick="changeGladiator('Retiarus')">
Retiarus
</div>
<div class="secutor" onclick="changeGladiator('Secutor')">
Secutor
</div>
</div>
<span id="gladiatorTitle"></span>:
<div id="gladiatorDescriptions">
<ul id="murmillo">
<p>
<img align="left" src="images/Murmillo.jpg" width="245px" />
A murmillo typically wears a metal helmet with a stylized fish on the crest, a rectangular shield (scutum),
and a short sword (gladius). The armor worn by a murmillo is designed to protect the head, torso, and legs,
and it is made of metal or leather. The murmillo is one of the most popular types of gladiators in ancient
Rome, and they are often pitted against other types of gladiators, such as the retiarius or secutor.
</p>
</ul>
<ul id="retiarus">
<p>
<img align="left" src="images/Retiarius.jpg" width="245px" />
A retiarius fights using a net, trident, and a small sword called a pugio. Retiarii are often pitted against
secutores, who are armed with a sword and a shield. The retiarius is lightly armed and wears little armor,
so they rely on their speed and agility to evade their opponents. Retiarii are also known for their
distinctive outfits, which include a tunic, a loincloth, and a fish-shaped helmet.
</p>
</ul>
<ul id="secutor">
<p>
<img align="left" src="images/secutor.jpg" width="245px" />
Secutors are heavily armed and trained to fight other gladiators, typically a murmillo or a retiarius. Their
armor and weaponry are designed to mimic those of a soldier, and they are known for their strong, muscular
build. They are also characterized by their helmet, which has a narrow opening that limits their vision and
makes them more reliant on their other senses. The secutor's helmet also has a crest that is shaped like a
fish, which gives them their name (secutor is Latin for "pursuer").
</p>
</ul>
</div>
</div>
<div>
<div class="buttons">
<div class="snacks" onclick="changeOther('Snacks')">
Snacks
</div>
<div class="celebrities" onclick="changeOther('Celebrities')">
Celebrities
</div>
<div class="other events" onclick="changeOther('Other Events')">
Other Events
</div>
</div>
<span id="otherTitle"></span>:
<div id="otherDescriptions">
<ul id="snacks">
<li>Olives</li>
<li> Fruits:
<ul>
<li>Figs</li>
<li>Grapes</li>
<li>Cherries</li>
<li>Blackberries</li>
<li>Peaches</li>
<li>Plums</li>
<li>Melons</li>
</ul>
</li>
<li> Nuts:
<ul>
<li>Walnuts</li>
<li>Hazelnuts</li>
<li>Pine Nuts</li>
</ul>
</li>
</ul>
<ul id="celebrities">
<li>Built during the reign of the Flavian emperors</li>
<li>In construction under Emperor Vespasian's Reign</li>
<li>Emperor Titus celebrated the opening day with 100 days of glagiatorial games</li>
<li>Emperor Commodus performed in arena</li>
</ul>
<ul id="other events">
<li>Dramas</li>
<li>Reenactments</li>
<li>Performances</li>
</ul>
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
overflow-y: scroll;
background: linear-gradient(125deg, #FFCA00 0%, #FFA000 100%);
}
.title {
width: 100%;
background-color: #000000;
border-radius: 0 0 70px 70px;
color: white;
font-size: 5rem;
text-align: center;
}
.body {
margin: 50px 10%;
font-family: Arial, Helvetica, sans-serif;
}
.buttons {
display: flex;
position: relative;
right: 15px;
column-gap: 31px;
padding-bottom: 27px;
}
.buttons>* {
cursor: pointer;
background: black;
width: auto;
display: inline;
border-radius: 50px 50px 50px 50px;
padding: 10px;
color: white;
}
img:not(.title>img){
padding-right: 25px;
border-radius: 20px 20px 20px 20px;
}
Any idea on what I could do?
Wrap your divs somehow like this:
<div class="container">
<div class="image-wrapper">
<img src="" alt="">
</div>
<div class="text-wrapper">
<p>Upper description text</p>
<div class="buttons-description-wrapper">
<!-- buttons with the description they are supposed to show -->
</div>
</div>
</div>
And then the CSS would be something like this
.container {
display:flex;
flex-direction:column;
/*use those for general layout*/
/*use the following for some better positioning*/
justify-content:center; /*to center it horizontaly*/
align-items:flex-start /*to align items to the top within this container*/
}
/*setting height properties on wrappers might be needed, depends on how much text are goiing to be displaying*/
Try this and let me know.
I am trying to have the 3 unordered list items take up the whole block spaced out evenly, with the 1st one at the start the 2nd one in the middle and the last one touching the end of the block.
I am trying to do it with flex box but currently I am having difficulty, I figured justify-content: would work for this task, but its not doing anything.
Here is the end result I am trying to achieve:
link to codepen
Example:
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
you could use flex-basis:33.33% on the lis so they stay 3 on one line and text-align:center
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
text-align:center;
}
ul li {
flex-basis: 33.33%;
}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
let me know if this helps
You can use text-align: center on the li..
li
flex: 1 1 100px
text-align: center
http://codepen.io/anon/pen/bqJKwK
Here is the text
#2017 ABCD
All Rights reserved
some text
Now I want this all in the footer, but 1. to the left 2. in the center and 3 in the right , how do i go about and accomplish this.
Thanks in advance.
Try this. This way you have more control over each section styling aspects.
#footer {
width: 100%;
}
#footer-inner {
margin: 0 auto;
text-align: center;
}
.year,
.middle,
.some-text {
display: inline-block;
}
<div id="footer">
<div id="footer-inner">
<div class="year">
#2017 ABCD
</div>
<div class="middle">
All Rights reserved
</div>
<div class="some-text">
some text some text some text
</div>
</div>
</div>
<ul class="mylist">
<li> #2017 ABCD </li>
<li> All Rights reserved </li>
<li> some text </li>
</ul>
in css:
.mylist li{
display:inline-block;
}
I want to display images inline, but instead of this they appear vertically and the horizontal scrollbar isn't come up. How can i make the screen scrollable without define exact width and how can i format the images to smaller than the screen vertically without explicit height? No js tricks. Thx
<section class="project-section">
<ul class="list-inline">
<li>
<article class="project-data">
<h1>#Model.CurrentTitleText()</h1>
<p>#Model.CurrentDescriptionText()</p>
</article>
</li>
#foreach (var elem in Model.ProjectInclude)
{
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="#Url.Action("Render", "Image", new { file = elem.Media.FileName })/" />
#if (!string.IsNullOrEmpty(elem.Media.CurrentTitleText()))
{
<h6>#elem.Media.CurrentTitleText()</h6>
}
#if (!string.IsNullOrEmpty(elem.Media.CurrentDescriptionText()))
{
<p>#elem.Media.CurrentDescriptionText()</p>
}
</article>
</li>
}
</ul>
Css:
.project-section {
padding-top: 50px;
padding-bottom: 50px;
max-height: 100%;
}
.fit-container {
max-width: 100%;
max-height: 100%;
}
.project-itemlist {
max-height: 100%;
}
.project-item-container {
max-height: 100%;
}
You have to make your list display inline:
CSS:
.list-inline li{
display:inline-block;
}
I made a codepen and mocked up your html. When I do so it displays correctly. I would suggest you check to ensure bootstrap is being loaded. The list-inline class is already set to display: inline-block if your properly loading bootstrap.
<section class="project-section">
<ul class="list-inline">
<li>
<article class="project-data">
<h1>Inline Images</h1>
<p>Lorem ipsum</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
</ul>
.project-section {
padding-top: 50px;
padding-bottom: 50px;
max-height: 100%;
}
.fit-container {
max-width: 100%;
max-height: 100%;
}
.project-itemlist {
max-height: 100%;
}
.project-item-container {
max-height: 100%;
}
I'm working on mobile app. I'm trying to align 3 images one below the other at the right corner with adjacent to the text. Please suggest me. Thanks in advance. Below is my Code
<div>
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
<li class="custom">
<h3>Week </h3>
<p class="topic">Sun </p>
<p>Mon</p>
<p>Tue </p>
<p class="ui-li-aside"> <span> <img src="images/progressnew.png" alt="download"> </span> <span> <img src="images/progressnew.png" alt="download"> </span> <span> <img src="images/progressnew.png" alt="download"> </span> </p>
</li>
</ul>
</div>
<styles>
.ui-listview .ui-li-aside {
position: absolute;
top: 1em;
right: 0.444em;
margin:24px;
text-align: right;
}
</styles>
Just add:
.ui-listview .ui-li-aside span{
display: block;
}
This tells the SPANS that contain the images to display as block elements instead of inline elements.
DEMO