Ok, so I'm trying to create this div that shows information of the Civilian and Vehicle the user put in. I created the HTML and CSS for it, it was working all fine until I added 2 divs to the mix. With the one div, it looks like
this, with 2 divs, it looks like this. IDK what is happening here, really. When I add a background to everything, there is no white background where the giant gap is from "Information: " and "Civilian: ". To go with that, when I put the width of the 2 divs to %49.99 and set the display to inline-block, it shows up like this. IDK how to explain it, it just goes off of the screen into oblivion. I'm soo sorry if this is basic ass stuff to fix inside of my HTML/CSS, I have minor knowledge of either and I'm just trying to use jQuery to mess around with some stuff in there (basically edit the text). Here is my HTML/CSS code:
HTML:
<div id="civinfo">
<h1>Information</h1>
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
CSS:
#civinfo {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
background: #000000;
width: 35%;
height: 30%;
display: none;
font-family: 'Lato', sans-serif;
color: white;
border-radius: 10px;
}
#civinfo h1 {
text-align: center;
font-size: 35px;
margin: 8px;
}
#civinfo div {
margin: 0;
padding: 0;
display: inline-block !important;
width: 45%;
height: auto !important;
}
#civinfo div h2 {
text-align: center;
margin: 0 5px;
font-weight: 400;
font-size: 20px;
}
#civinfo div h3 {
display: inherit;
font-weight: 400;
margin: 0 10px;
}
#civinfo div span {
display: inline-block;
margin: 0;
padding: 0;
margin-bottom: 5px;
width: 75%;
height: auto;
}
#civinfo div p {
float: center;
text-align: center;
display: inherit;
padding: 5px 15px;
background: #bbbbbb;
color: black;
border-radius: 25px;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.content-wrapper{
display:flex;
}
.content-wrapper > div{
width:50%;
}
.content-wrapper > div > span{
display:flex;
}
h1{
display:block;
}
</style>
</head>
<body>
<div id="civinfo">
<h1>Information</h1>
<div class="content-wrapper">
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
</div>
</body>
</html>
Hi just wrap both civilian and vechicle div into one div and display it as flex.Try above code.Some css modification is done.
Related
I'm trying to enlarge my footer so it can take the all page and stick to the bottom (not following when scrolling), but I have no idea how to do it...
here's the result I have on my website : my result
Here's my code : https://codepen.io/Softee/pen/RwLaJye
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
}
div .Question {
font-size: 18px;
text-align: right;
}
div .Question a {
font-size: 14px;
margin-right: 10px;
color: #e5e5e5;
}
div .Logo img{
max-width: 100%;
min-width: 18%;
box-shadow: none;
}
div .Copyright {
font-size: 13px;
text-align: center;
}
<footer>
<div class="Logo">
<img src="https://i.postimg.cc/Bn1t4Nc9/Game-Star-Blanc.png">
</div>
<br>
<div class="Question">
<p>Une question ?<br> Contactez-nous!
</p>
</div>
<br>
<div class="Copyright">© 2021 Copyright: GameStar - La Star des références gaming.</div>
</footer>
Thanks in advance for your help!
This should do the trick.
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
width: 100vw;
position: absolute;
bottom: 0px;
}
Just add:
body {
margin: 0;
}
See here:
footer {
color: #e5e5e5;
margin: 0;
padding: 10px;
background: #613B6A;
}
div .Question {
font-size: 18px;
text-align: right;
}
div .Question a {
font-size: 14px;
margin-right: 10px;
color: #e5e5e5;
}
div .Logo img{
max-width: 100%;
min-width: 18%;
box-shadow: none;
}
div .Copyright {
font-size: 13px;
text-align: center;
}
body {
margin: 0;
}
<footer>
<div class="Logo">
<img src="https://i.postimg.cc/Bn1t4Nc9/Game-Star-Blanc.png">
</div>
<br>
<div class="Question">
<p>Une question ?<br> Contactez-nous!
</p>
</div>
<br>
<div class="Copyright">© 2021 Copyright: GameStar - La Star des références gaming.</div>
</footer>
You made your logo size to be 100% of your footer, you need to resize the logo smaller and float it left, then clearing the float to show the centered the text.
So I'm learning html and CSS and trying to make images fit in a line. It seems that the below code isn't working:
.container .portfolio-region ul li:nth-child(2){
margin: 0 30px;
}
If I increase the margin to 100px, It will work but then It won't fit in a line.
I can see in the example that the images auto resize to fit the margin. I've included pics in the below. Can someone help me with this? Thank you very much.
code:
/*================== TABLE OF CONTENT =================*/
/*
1. RESET CSS
2. DEFAULT STYLE
3. STYLE PORTFOLIO
*/
/*=============== 1. RESET CSS ==============*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/*=============== 2. DEFAULT STYLE ==============*/
.container {
max-width: 1170px;
padding: 0 12px;
margin: 0 auto;
height: 100%;
}
/*=============== 3. STYLE PORTFOLIO ==============*/
.container .heading {
text-align: center;
padding: 40px 0;
}
.container .heading .heading-title {
padding: 20px;
font-size: 35px;
}
.container .heading .heading-description {
font-size: 18px;
font-weight: 500;
font-style: italic;
color: gray;
}
.container .portfolio-region {
padding-top: 40px;
}
.container .portfolio-region .portfolio-item {
display: inline-block;
width: 30%;
}
.container .portfolio-region ul {
text-align: center;
}
.container .portfolio-region ul li:nth-child(2) {
margin: 0 30px;
}
.container .portfolio-region .portfolio-item .img {
max-width: 100%;
}
.container .portfolio-region .portfolio-item h4 {
padding-top: 20px;
font-size: 25px;
line-height: 40px;
}
.container .portfolio-region .portfolio-item p {
color: #6C757F;
font-style: italic;
font-size: 18px;
padding-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 1 - 04.03.2020</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<section class="portfolio-section">
<div class="container">
<div class="heading">
<h2 class="heading-title">PORTFOLIO</h2>
<h3 class="heading-description">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="portfolio-region">
<ul>
<li class="portfolio-item">
<img src="assets/image/01-thumbnail.jpg">
<h4> Threads</h4>
<p>Illustration</p>
</li>
<li class="portfolio-item">
<img src="assets/image/02-thumbnail.jpg">
<h4>Explore</h4>
<p>Graphic design</p>
</li>
<li class="portfolio-item">
<img src="assets/image/03-thumbnail.jpg">
<h4>Finish</h4>
<p>Identity</p>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
there could be many ways to achieve that first is to apply the margin like
margin-top: ;
margin-bottom: ;
margin-left: ;
margin-right: ;
or in one line like
margin: w x y z;
where w is for top, x is for right, y is for bottom and z is for left
or you can use flex-box where you have to apply justify-content: space-around; on the container of all image like the following
.container{
display: flex;
justify-content: space-around;
}
Set the height in CSS to number of pixels you want. For example
height: 100px;
After this, all pictures with this class would have the same height.
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
This is probably a silly question but I can't seem to figure out how to auto center my section
live demo: http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#
I have tried to add
margin: 0 auto;
to my div#content, with no luck.
The only way I was able to get it be centered was manually entering in
margin-left: xxpx
but I want it to be centered based on what content is in it. Any thoughts? Thanks in advance.
Rest of CSS
body
{
background: #C1CDC1;
}
h1
{
}
h2
{
margin-top: -40px;
margin-left: 120px;
}
h1.mainT
{
width: 590px;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
font-size: 2.5em;
}
h2.subT
{
width: 130px;
font-family: 'Open Sans Condensed', sans-serif;
}
h3
{
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
}
footer
{
color: #FCFCFC;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: .85em;
}
section#nav
{
width: auto;
margin-left: 550px;
margin-top: -80px;
padding: 5px;
word-spacing: 80px;
}
div#navContainer
{
height: 100px;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
}
div#content
{
height: 100px;
width: auto;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
display: inline-block;
}
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
}
HTML
<script>
$(document).ready(function () {
$('section#contentContainer').hide();
var $as = $('a.contentDown').click(function () {
//show back button, move it from left +300
$('section').show();
}); //closes click for contentDown
}); //closes ready
</script>
</head>
<body>
<div id="navContainer">
<h1 class="mainT"> Al Gore Rhythm Labs </h1>
<h2 class="subT"> Chicago, IL </h2>
<section id="nav">
<h3> Assignments </h3>
<h3> Writings </h3>
<h3> Presentations </h3>
</section>
</div>
<section id="contentContainer">
<div id="content">
<p> hello motto
</p>
</div>
</section>
</body>
<footer>
<p> Jordan Max 2014</p>
</footer>
</html>
Maybe this is the solution (don't forget to remove style="display: none;" for your section#contentContainer)
Result:
Add text-align center; to your section#contentContainer
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
text-align: center;
}
Good Luck!!
Add 'align="center"' to your section element.
As follows:
<section id="contentContainer" align="center">
This is not the preferred way but if you want to do it only in CSS, you would need to do 'text-align: center' on the element to center align it's internal 'inline-block' element.
CSS: text-align: center
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>