I can't get these to move to the center of the page. Anyone see what's wrong?
<ul id="contact">
<h1> Contact </h1>
<p> Dreamstowheels#yahoo.com </p>
<p> 2236 El Camino Real <br>
Santa Clara Ca 95050 </p>
</ul>
<ul id="follow">
<h1> Follow </h1>
<img src="http://www.flagera.eu/sites/all/modules/socialmedia/icons/levelten/glossy/32x32/facebook.png">
</ul>
<ul id="supporters">
<h1> Supporters </h1>
<p> Cyclinginquisition.com </p>
<p> Colombia Cycling Team </p>
<p> Calmar Bicycles </p>
<p> Rock Solid Cycling </p>
<p> Fast Freddie Foundation </p>
<p> Golden Creek Services (Envio de Paquetes) </p>
</ul>
</footer>
CSS
footer{ /*Footer section attributes */
margin: -50px auto;
width: 100%;
text-align: center;
/* border-top: solid 1px;*/
}
Let me know if you need to css for the contact, follow, and supporters divs. Thanks in advance.
Erase everything in your CSS code in fiddle and just put the following there.
footer{ margin:0 auto; text-align:center;}
https://jsfiddle.net/u2Zb2/45/
Related
i am making a website for school. The images need to float right with some <p> text to left of it but cant make it work. Who can help me, see img for clearence. Here is some code:
.img-inno {
float: right;
height: 10%;
width: 10%;
text-align: left;
}
<header class="inno"> Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
Eventually you will have some good data which shoes will fit the best. The data will be sent via email.
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it! </p>
More info? Click here
</footer>
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</article>
<article>
<header class="inno"> Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</article>
As c.m. noted it is better to do it with CSS Flexbox.
Check out the following example to get an idea of how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
article {
display: flex;
justify-content: space-between;
/*flex-wrap: wrap;
Use this if you want the images to wrap under the text for smaller screen sizes*/
}
.left {
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
}
.right {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.img-inno {
max-width: 200px;
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<article>
<div class="left">
<header class="inno">
Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
<p>Eventually you will have some good data which shoes will fit the best. The data will be sent via email.</p>
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it!</p>
<p> More info? Click here</p>
</footer>
</div>
<div class="right">
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</div>
</article>
<article>
<div class="left">
<header class="inno">
Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
</div>
<div class="right">
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</div>
</article>
</body>
</html>
Use CSS Flexbox
That is the html code
<article>
<p>Text</p>
<img src=""/>
</article>
and that css
article {
width: 500px;
display: flex;
}
then you can put spacing with margin and padding on your p or img and you can align your content, too
don't use float anymore, that's not modern coding style
read more about flexbox, there is a nice guide at css-tricks.com
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How do you easily horizontally center a <div> using CSS? [duplicate]
(22 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
The middle body text won't center, and I don't know why. Also, if you have any other recommendations, they would be greatly appreciated! This is for a project and I just need a little help. I am using the margin:auto property, but it doesn't seem to work.
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
This centers everything BUT the middle text, any solutions?
Add text-align: center; to your <li> tags.
li {
text-align:center;
}
For body text I have added
#body-text ul > li {
text-align:center;
}
Hope this will help You.
Attached snippet.
Let me know if any other issue .
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
#body-text ul > li {
text-align:center;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px;"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
Change your #body-text width to width: 750px; and remove your .ul width property.
#body-text {
width: 750px;
...
}
.ul {
border:1px solid green;
}
you should use flex css property:
your html will look like this (you now need to remove unused classes from markup):
<div class="container"> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<div class="text-center"> <!-- !!!!!REMOVE INLINE STYLE HERE!!!! -->
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<div> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
`
for css:
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
/*#body-text {*/
/* width:500px; */
/* display:block; */
/* margin-right:auto; */
/* margin-left:auto; */
/*}*/
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
/*.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}*/
/*.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
} */
/* THIS IS FLEX */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
a useful guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have the following code:
.date {
float: left;
border: 1px white solid;
text-align: left;
}
.text {
float: left;
text-align: left;
margin: 7px;
/* color: white; */ /* Removed for the snippet */
border: 1px white solid;
}
<ul>
<ol>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</ol>
<ol>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</ol>
<ol>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
</div>
</ol>
<ol>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</ol>
And I want the display to show up as (without the bullet points)
Date Text
Date Text
But right now it's showing as Date Text Date Text
I think if I didn't use div and instead only used ol it might work, but I want to practice using div and understand how positioning works in CSS.
First of all, replace ol with li. ol means an ordered list while li means list-item. Don't mix-up the two. ul and ol must contain li.
For your problem, I suggest a flex-box solution:
ul {
list-style: none;
width: 100%;
}
li {
width: 100%;
display: flex;
margin: 5px;
box-sizing: border-box;
}
.date {
width: 25%;
align-self: center;
}
.text {
flex: 1;
}
<ul>
<li>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</li>
<li>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years lider, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</li>
<li>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his clilege friend Dan Kottke
</div>
</li>
<li>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</li>
You only need to float .date, then .text will wrap around it. Your HTML is invalid though. a ul can't have an ol as a direct child. That should be a li instead.
.date {
float: left;
margin: 0 1em 0 0;
}
li {
margin: 0 0 1em;
list-style: none;
}
<ul>
<li>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</li>
<li>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</li>
<li>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
</div>
</li>
<li>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</li>
</ul>
i have following problem.
So i want to create a switch content on my Website.
I want to create that i can toggle with my navbar the content.
I dont have any Idea more...
This is my Code
<section class="content show" id="home">
<h1>Welcome</h1>
<h5>My new site is coming soon!</h5>
<p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
<p>More info »</p>
</section>
<!-- /About Page -->
<section class="content hide" id="about">
<h1>About</h1>
<h5>Some facts about me!</h5>
<p>
<ul>
<li>Alexander Constapel </li>
<li>20.02.1994 </li>
<li>Ausbildung zum Mediengestalter in Digital und Print </li>
<li>Webdevelopment & Design </li>
</ul></p>
<p>Subscribe me on Facebook!</p>
</section>
<!-- /Contact Page -->
<section class="content hide" id="contact">
<h1>Contact</h1>
<h5>Get in touch!</h5>
<p>Email: Alook.de<br />
Phone: 05<br /></p>
<p>Jever<br />
Germany</p>
</section>
And this is my CSS to this:
.show {
display: block;
}
.hide {
opacity: 0;
}
.content {
color: deepskyblue;
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
Ofc my NAV have href to #home #about #contact
But it still dont work.
Please help me out.
Thanks a lot.
Alex