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;
}
Related
Below I will add my HTML and CSS code. I want to give my page a 2 column layout within the main section. Any help is much appreciated. The navigation, footer, and title part will be the same on each page. I just need the two-column on the main section.
HTML
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" alt="Pink" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" alt="Skull" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB#augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> #copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</body>
CSS
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 {text-align: center; font-family: Papyrus}
h2 {text-align: center; color: #f6130d; text-decoration: underline}
.wrapper{width:85%; margin:0 auto; max-width: 960px;}
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #f6130d; text-align: center;}
.menu{float:left; width: 25% }
/* Main section */
.banner{justify-content: center; background-color: #f6c10d; text-align: center;}
.bulletPoints ul {
display:inline-block;
text-align:left;
}
section{background-color: #f6870d; color: #f60d41; font-style:italic; margin: 25px 50px 75px;}
body {
background-image: url("images/background.jpeg");
}
.image1
{
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
/* Footer section */
* {box-sizing: border-box;}
.footer{text-align: center; background-color: #f6130d; color: #f6c10d; }
.box{float:left; width: 33.33% }
.footer::after {content: ""; clear:both; }
/* Copyright section */
.copyright {text-align: center; background-color: #f6130d; color: #f6c10d; }
I would also like to make sure all my floats are cleared as nessicary.
It's very easy with flex.
In 2021 you should try to avoid floats as much as possible.
Simply switch to flex as described here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As for your specific case:
.flex-container{
display:flex;
width:100%;
}
.col{
max-width:50%;
flex: 0 0 50%;
}
<div class="flex-container">
<div class="col">
col 1
</div>
<div class="col">
col 2
</div>
</div>
If you want to make them go vertically on mobile, just give the container the property flex-direction:column and make the 2 divs max-width:100% and flex:0 0 100%;
I am trying to place my social and email links found with a ul additional-menu, to be displayed under my site's logo and tagline. I seem to be struggling getting it underneath. At the moment it looks like this:
The code below is like so:
.additional-menu {
list-style-type:none;;
margin: 0;
position:relative;
clear:both
}
.additional-menu li{
display:inline-block;
}
.ast-header-html-1{
position:relative;
clear:both;
}
<div class="ast-site-title-wrap">
<h1 class="site-title" itemprop="name">
<a href="https://puffpastrydelights.com/" rel="home" itemprop="url">
Pastry Delights
</a>
</h1>
<p class="site-description" itemprop="description">
Made with love, served with pride
</p>
</div>
<div class="ast-builder-layout-element ast-flex site-header-focus-item ast-header-html-1" data-section="section-hb-html-1">
<div class="ast-header-html inner-link-style-">
<div class="ast-builder-html-element">
<ul class="additional-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
Wrap the whole thing with div that has display:flex and flex-direction: column
.wholeThing {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.firstBit {
display: flex;
border: 1px solid blue;
}
<div class="wholeThing">
<div class="firstBit">
<div class="logo"><img src="http://placekeanu.com/250" /></div>
<div class="tagline">Keanu is breath taking</div>
</div>
<div class="social">
social one two three
</div>
</div>
`
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/
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}