I know that a border can be used in lieu of the horizontal line tag (hr). However, in this case I don't want the line to take up 100% width; the current div does and so would the border if I were to put a border in.
So I would like to put a horizontal line (hr) in with 80% width but it's not showing up, well specifically the width is not 80%. The place at which I want to insert it is the very first line after the bottom class in my code.
My intention is to put the horizontal line (hr) right above the Cola (<p class="center1">Cola</p>) on the page. Also the styling doesn't seem to work either here for the hr class; trying to put a width and a color on it.
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 100vh;
width: 80%;
margin: 0 auto;
background-color: white;
font-size: 20px;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
}
.bottom {
flex: 0 0 100%;
height: 50%;
}
hr.style1 {
border-top: 1px solid #8c8b8b;
width: 80%;
}
.top {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-start;
margin-left: 3%;
width: 45%;
height: 100%;
}
.topb {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 50%;
height: 100%;
}
li {
list-style-type: none;
font-size: 18px;
}
.advisory {
background-color: white;
margin: auto;
width: 100%;
}
#advisory ul li {
margin-bottom: 2%;
}
.center {
text-align: center;
}
.center1 {
text-align: center;
color: green;
font-size: 28px;
}
.tpoint {
font-size: 24px;
color: orange;
}
<div class="container">
<div id="subnav">
<ul>
<li> Sam
</li>
<li> Sam
</li>
<li> <a class="active" href="#">Corn </a>
</li>
<li> Sam
</li>
<li> Sam
</li>
<li> Sam
</li>
<li> Sam
</li>
</ul>
</div>
<div class="top">
<div class="topa">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
</div>
<div class="topb">
<h2> Sams </h2>
<p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence
this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample
sentence this Sample sentence this Sample sentence this Sample sentence this</p>
</div>
</div>
<div class="bottom">
<div class="sam">
<hr class="style1">
<p class="center1">Cola</p>
<p class="center tpoint">Sample</p>
<ul>
<li>Sample
<ul>
<li>Sample</li>
<li>rsam</li>
</ul>
</li>
<li>san
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
</ul>
<p class="center tpoint">The sam</p>
<ul>
<li>sam
<ul>
<li>sam</li>
</ul>
</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
</ul>
<p class="center tpoint">Eggs</p>
<ul>
<li>sam
<ul>
<li>san</li>
</ul>
</li>
<li>Eri
<ul>
<li>Sam</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
You may modify your CSS as following:
Add width 100% to the class sam:
.sam {
width: 100%;
}
Add centering to the class style1:
.style1 {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Your hris inside a container that has a smaller width (div .sam), so it's width is 80% of that container. Just move it up in the HTML code, above the .bottom div:
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 100vh;
width: 80%;
margin: 0 auto;
background-color: white;
font-size: 20px;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
}
.bottom {
flex: 0 0 100%;
height: 50%;
}
hr.style1{
border-top: 1px solid #8c8b8b;
width: 80%;
}
.top {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-start;
margin-left: 3%;
width: 45%;
height: 100%;
}
.topb {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 50%;
height: 100%;
}
li {
list-style-type: none;
font-size: 18px;
}
.advisory {
background-color: white;
margin: auto;
width: 100%;
}
#advisory ul li {
margin-bottom: 2%;
}
.center {
text-align: center;
}
.center1 {
text-align: center;
color: green;
font-size: 28px;
}
.tpoint {
font-size: 24px;
color: orange;
}
<div class="container">
<div id="subnav">
<ul>
<li> Sam </li>
<li> Sam </li>
<li> <a class="active" href="#">Corn </a></li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
</ul>
</div>
<div class="top">
<div class="topa">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
</div>
<div class="topb">
<h2> Sams </h2>
<p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this </p>
</div>
</div>
<hr class="style1">
<div class="bottom">
<div class="sam">
<p class="center1"> Cola </p>
<p class="center tpoint"> Sample </p>
<ul>
<li> Sample
<ul>
<li> Sample </li>
<li> rsam </li>
</ul>
</li>
<li> san
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
</ul>
<p class="center tpoint"> The sam</p>
<ul>
<li> sam
<ul>
<li> sam </li>
</ul>
</li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
</ul>
<p class="center tpoint" > Eggs </p>
<ul>
<li> sam
<ul>
<li> san </li>
</ul>
</li>
<li> Eri
<ul>
<li> Sam </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The hr is inside .sam div which is not getting full width. That is why you are seeing the hr with small width (but it is taking 80% width).
.sam{
width:100%
}
This will fix the issue.
try it
<hr align="left" width="50%">
You have mistake in the markup
If you want horizantal line 100% width
change <hr class="style1"> to <hr class="style1"/>
This fixes it
Related
i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
i have this codes & styles in my project:
i want to aling the texts and span style
my default code image like this:
body {
direction: rtl
}
div {
position: absolute;
top: 30px;
right: -100px;
height: 300px;
overflow-y: scroll;
background-color: #fff;
box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
border-radius: 15px;
}
li {
display: flex;
align-items: baseline;
justify-content: space-between;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>
I want make my list like this image:
HOW can I align it like image above?
(my body direction is rtl)
change li { justify-content: space-between; } to li { justify-content: flex-end; }
body {
direction: rtl
}
li {
display: flex;
align-items: baseline;
justify-content: flex-end;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>
My gallery on mobile phones looks way worse in vertical position than in horizontal.
.order-gallery ul li {
display: inline;
}
.order-gallery ul {
display: flex;
justify-content: flex-start;
align-items: center;
list-style-type: none;
text-align: center;
padding: 0;
}
.order-gallery li {
flex: 1 33%;
padding: 0 20px;
}
.order-gallery li img {
max-width: 100%;
}
.panel-body {
background: rgba(21, 21, 21, 0.5);
padding: 15px;
<div class="panel-body order-gallery">
<ul>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
</ul>
</div>
Horizontal view: https://imgur.com/a/1XrZ07K
Vertical view: https://imgur.com/a/YRD7siT
I would like to place an image to the left of the text and keep it like that depending on the resolution of the window.
Here's what it looks like without an image: http://prntscr.com/fmky4f
This is what I would like it to look like after placing it. https://prnt.sc/fmkk0a
This is my code:
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
Now I tried just simply putting in the image with the .logo class properties, but they don't seem to do the job as intended.
If you're going to use floats and widths for the logo, use that for the menu also.
.xd {
float: left;
width: 90%;
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<img class="logo" src="http://placehold.it/50x50">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
You could also use flexbox. Perhaps something like this:
header,
ul {
display: flex;
}
header img {
display: block;
max-width: 100%;
height: auto;
}
header ul {
flex-grow: 1;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
header a {
padding: 5px;
color: #080808;
}
<header>
<div>
<img src="http://placehold.it/50x50">
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</header>
You can use position: absolute; and the default settings on the image as shown below. (You can use top and left settings to move it away from the border/corner if you want)
This keeps the menu items centered in relation to the container.
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
#image1 {
position: absolute;
}
<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
I want to make a flex-box layout where it looks like this:
I got the first 3 to look okay, then the next one isn't laying out well, not showing the text, and having a weird black background I can't figure out how to get rid of in CSS.
If I were to keep adding services and stuff to the first flex box structure, will it wrap automatically? When I used the flex-wrap command, it took the box display and stretched it out, and things went out of sorts.
here's the fiddle https://jsfiddle.net/b03q4zzc/
.container {
display: flex;
width: 100%;
height: 500px;
background-color: #fff
/* Make the parent a flex containter */
}
.container-two {
display: flex;
width: 100%;
background-color: #fff;
overflow: hidden;
}
.services {
flex: 1;
padding: 1em;
}
.service {
flex: 1;
/* Distribute free space among flex items */
padding: 1em;
}
h1 {
text-align: center;
display: block;
margin-top: 100px;
}
.service ul {
background-color: #fff;
overflow: hidden;
}
.service li{
list-style-type: circle;
text-align: left;
font-color: white;
max-height: 100px;
min-height: 50px;
max-width: 300px;
min-width: 200px;
}
.service--one h4, a {
text-align: left;
text-decoration: none;
color: red;
}
.service--one a:hover {
color: blue;
text-shadow: 0px 0px 3px white, 0px 0px 5 white;
}
.services--one {
background: #fff
}
.services--two {
background: #fff
}
.service h3 {
text-align: center;
}
.services p {
width: 200px;
display: block;
background: #fff
}
.service h6 {
width: 200px;
}
h5 {
margin-left: 25px;
display: inline-block;
text-align: center;
color: red;
}
.service {
margin-top: 50px;
margin-left: 0px;
display: inline-block;
flex: 1; /* Distribute free space among flex items */
padding: 1em;
}
.service h3 {
flex: 1;
text-align: center;
}
.service h5 {
text-align: center;
color: red;
}
.service--one h5 {
font-style: italic;
}
<ul class="container">
<li class="service service--one">
<h3>Business Services</h3>
<ul>
<li>Logo Design</li>
<li>Business Card Design</li>
<li>Letterhead Design</li>
<li>Namebadge Design</li>
<li>Signage and Window Decals</li>
<li>Pamphlets, Brochures, Menus and other business forms</li>
<li>Promotional Product Design</li>
</ul>
</ul>
</li>
<li class="service service--two">
<h3>Sports Services</h3>
<ul>
<li>Team Logo Design</li>
<li>Sellable Merchandise and Apparel Design</li>
<li>Promotional Product Design</li>
<li>Program Design</li>
</ul>
</li>
<li class="service service--three">
<h3>Personal Services</h3>
<ul>
<li>Wall Art</li>
<li>Slideshow Design</li>
<li>Custom Creations</li>
</ul>
</li>
</ul>
<ul class="container-two">
<h2>Popular Packages Include</h2>
<li class="services services--one">
<ul>
<li>"Start Me Up" <strong>$200.00</strong></li>
<p>This package includes <strong>Logo Design, Business Card Design,
Letterhead Design and Invoice Design</strong>.
This package is perfect for the start up, or someone reinventing their
company.</p>
<li class="services services--two"
<li>"Make Me A Brand" <strong>Buy 3 promotional product designs, get 2
free*</strong></li>
<p>This package is for the company that wants marketable merchandise.
These promotional products are great to hand out
at fairs and other events to get your name out there.
<h6>*Any promotional product utilized for sales and profit <i>
<strong>MAY</strong></i> fall under our
guidelines for "Royalties", and may be subject to royalties to Dave's
Logo Designs. For more information if your project would
fall under these guidelines, please <a href="contact.html">Contact
Us</a>.</h6></p>
<li>"Go Team Go" <strong>$250.00</strong></li>
</ul>
</li>
</ul>
<div class="footer">
<footer><h6>Some restrictions apply, contact us for more details.</h6>
<ul>
<h2>Find us on:</h2>
<li><a href="http://www.twitter.com/daveslogodesign" target="_blank"><img
src="https://s19.postimg.org/3tbo98443/twitter.png" height="25px"
width="25px" alt="twitter"></img>Twitter</a></li>
<li><a href="http://www.facebook.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/amc15huxf/facebook.png" height="25px"
width="25px" alt="facebook"></img>Facebook</a></li>
<li><a href="http://www.linkedin.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/t4kz3h237/linkedin.png" alt="linkedin"
height="25px" width="25px"></img>Linkedin</a></li>
<li><a href="http://www.skype.com/daveslogodesignd" alt="skype"
target="_blank"><img src="https://s19.postimg.org/y9hl7cpn7/skype.png"
height="25px" width="25px"></img>Skype</a></li>
<li><a href="https://www.instagram.com/daveslogos/"><img
src="https://s19.postimg.org/it8matadv/instagram.png" alt="instagram"
height="25px" width="25px"></img>Instagram</a></li>
<li><img>
</li>
</ul>
maybe something I'm doing is wrong. Thanks for the help.