Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>
Related
I have attached my HTML and CSS below, along with a screenshot of the webpage. The bulleted list is not formatting correctly. I want them to form a straight line in the middle with the bullets right beside the words and evenly lined up in the center. Also, my header and footer, both red, look so much wider than the rest of the webpage; how would I fix this?
/*
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 {
text-align: center;
}
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;
}
<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>
Just add:
.bulletPoints ul {
display:inline-block;
text-align:left;
}
This way the list width would same as the longest line, and it will be aligned to the center as you already gave the property to the container. Just need to align the list to the left (as to overwrite the center alignment inherited from parent.)
/*
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 {
text-align: center;
}
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;
}
.bulletPoints ul {
display:inline-block;
text-align:left;
}
<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>
That's how lists work in a centered element, I'm afraid. However, there is a solution!
The problem is that you have a div that spans the whole width of the page, within which you've asked for the text to be centered. And your browser has done exactly what you asked for. However, the rule for where the bullets are positioned is that they go to the left of the entire text line. So, when the line is centered, they are off to the left, as you see. (Basically, the text-align applies to the text but not to the bullets, which are technically outside the text itself.)
The solution is to remove the text-align: center and instead to position your bulletPoints div so that this container is centered while the list inside remains left-aligned. You could, for example, do something like this, although you'll need to fiddle with the width to make it suit the layout you want:
.bulletPoints {
width: 50%;
margin: 0 auto;
}
The result will be a list that has the text and bullets properly aligned, but that is centered in the view. This is achieved by the margin property: by setting the left and right margins to auto, you are telling the browser so make them the same, and the only way to do this on an element that's narrower than the available space is to center it.
However, this way of doing things does mean you need to be careful about the responsiveness of your design, and ensure that things display properly on very wide and very narrow windows. For example, on a phone, you won't want to set the width to 50%. So media-query will be your friend!
(Your problem with the red blocks is that you've written the code in a way that produces a result you don't like. To solve it, we need a clearer idea of what you actually want - probably best in a separate question because it's a completely different thing to the list. In general, though, you could wrap the page in a container div that you can set to a max width, which will stop these becoming very wide (or just wrap the content of the header and footer in a container, so the red is full width but the text is constrained). But we'll need a clearer idea of what you want to give a better solution, as I say!)
I have attached my HTML along with my CSS code and a picture of the webpage. I can not figure out why there is a gap in the red background color at the bottom. Any help is much appreciated
/*
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 {
text-align: center;
}
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;
display: table;
}
/* Copyright section */
.copyright {
text-align: center;
background-color: #f6130d;
color: #f6c10d;
}
<!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>
</div>
</body>
Side note my verified CSS checker image is also not showing up at the very bottom of the page and the HTML checker is giving me the following error
Error: Stray end tag div.
From line 123, column 1; to line 123, column 6
just add h3{ margin-top: 0px; } to your css code to remove the white line between the red divs at the bottom of the side
add the div with 'class=copyright' inside the footer and remove the extra </div> at last
that h3 tag in your .copyright div taking the default
margin-block-start: 1em;
margin-block-end: 1em;
you can use
.copyright h3{
margin-block:0;
}
this will remove the white space..
or you can use
*{
margin:0;
padding:0;
}
this will remove the default margin and padding from the page
My website will not scroll vertically. This is stopping some of the content being displayed. I have tried to fix this but so far I have had no success using the the CSS overflow property. This is not scrolling in Google Chrome and is not bringing up any errors when I use the developer tools.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Football Informer</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div class="container">
<img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/football/world-cup-goal-keeper-sport-website-header.jpg" class="header_img" alt="Error">
<div class="text">
<h1>The Football Informer</h1>
<p class="strapline">The Home of Football</p>
</div>
</div>
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li>About</li>
</ul>
<div class="main_text">
<p class="intro_home_page">Welcome to The Football Informer. This is the place to keep up to date with the footballing world.<br>
Keep up to date with the big roomers about transfers and club takeovers. Or follow the Premier League fight in the leagues featured section. If you have any suggestions about the site please see the About page to see our contact information.</p>
<div class="heading">
<h1>Featured Articles</h1>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://thefootballfaithful.com/allardyce-reveals-cenk-tosun-struggles/" target="blank">
<p class="article_title ">Allardyce reveals Cenk Tosun struggles.</p>
<img src="https://i1.wp.com/thefootballfaithful.com/wp-content/uploads/2018/02/img_7476.jpg?resize=660%2C330" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Less than a month after joining Everton for £27m, Sam Allardyce has revealed that Cenk Tosun is struggling to adapt to life in the Premier League.</p>
<p class="article_intro">The Turkish international sat out of the Toffees’ 5-1 humbling at the hands of Arsenal on Saturday evening, with the once outcasted Oumar Niasse selected to start the game.<br>
Speaking after the defeat, Allardyce that the 26-year-old has struggled with the ‘pace and physicality of the game.’</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11715/11237193/leeds-sack-head-coach-thomas-christiansen-after-cardiff-thrashing" target="blank">
<p class="article_title ">Leeds sack head coach Thomas Christiansen after Cardiff thrashing</p>
<img src="http://e0.365dm.com/17/09/16-9/20/skysports-thomas-christiansen-leeds_4110664.jpg?20170925180918" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Leeds have sacked head coach Thomas Christiansen after a 4-1 thrashing at home to Cardiff on Saturday - their sixth Championship game without a win.</p>
<p class="article_intro">Christiansen's side had been without a win since Boxing Day and a spate of ill-discipline had seen three different players sent-off in four games.<br>
Leeds had been pushing for a place in the top six but slipped to 10th after the Cardiff defeat and the club announced his departure just over 24 hours later.<br>
Statement "Leeds United can confirm that head coach Thomas Christiansen has left the club."
</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
</div>
</body>
</html>
.container {
position: relative;
margin-top: 0;
margin-bottom: 0;
height:150px;
}
.header_img {
width:100%;
height:150px;
margin:0;
}
.text {
font-size:26px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
.strapline {
font-size:22px;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #666666;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.main_text {
margin-left:15%;
width:85%;
position: fixed;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
.intro_home_page {
font-size:20px;
text-align: center;
}
.heading {
background-color:red;
}
.article_title {
color:white;
font-size:24px;
}
.article_intro {
font-size:18px;
}
.article_strapline {
font-size:18px;
font-weight:bold;
}
.grey_background {
background-color:grey;
height:30px;
}
.interesting_article_img {
height:165px;
width:330px;
float: left;
}
img {
border: 0;
}
p, h1 {
margin: 0;
}
.featured_articles_format{
height:195px;
}
Any suggestions are greatly appreciated and I hope that I have asked a precise enough question.
You need to change the .main-text style. The position fixed is preventing scrolling.
.main_text {
margin-left:15%;
width:85%;
position: relative;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
This will fix the scrolling problem, may have to refactor the markup to make it look proper. Maybe look into using a css library/framework. Save you a lot of time and effort.
http://jsbin.com/qabewarawi/1/edit?html,css,output
Hi i just started using CSS i found this style which looks simple to do so i thought why not try making it to learn how to use CSS better,
But of course i failed badly basically am trying to make the style like this cause it looks like a simple thing to do right?
Result wanted:
My result:
Failed badly i know can anyone show me how to do the text position and stuff?
Thank you very much.
<div class="menu">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v"/>
<h3>Jetliner with 155 on board loses chassis during takeoff in Russia</h3>
<span>Pravda - </span><span>Mar 9, 2016</span>
<p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
</li>
<li>
<img src="data:image/jpeg;base64,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"/>
<h3>How Much Should You Spend on College and Student Loans?</h3>
<span>Black Enterprise - </span><span>Apr 20, 2016</span>
<p>The National Center for Education Statistics has a website that can help you calculate costs. CNN Money's College Cost Calculator is a great ...</p>
</li>
</ul>
</div>
Style code:
<style>
body {
background-color: white;
}
ul
{
list-style-type: none;
}
.menu ul li
{
margin: 15px;
}
img
{
vertical-align: middle; /* | top | bottom */
width: 80px;
height: 80px;
}
.menu ul li h3{
display: inline-block;
vertical-align: top;
}
.menu ul li span{
display: inline-block;
vertical-align: middle;
}
.menu ul li p
{
display: inline-block;
vertical-align: bottom; /* | top | bottom */
}
</style>
You can try somtehing like this
#container{
width: 500px;
height: 200px;
}
#imgContainer{
width: 30%;
height: 100%;
float:left;
}
#imgContainer img{
width: 100%;
height: 100%;
}
#textContainer{
padding:12px;
float: left;
}
<div id="container">
<div id="imgContainer"><img src="http://lorempixel.com/200/400/" alt=""></div>
<div id="textContainer">
<h2>Hello world this is some text </h2>
<p> and here is some smaller text </p>
</div>
</div>
`
Might sound harsh, but if you start with deleting all css you got, and give your image float:left; and move it to the bottom of the li might get you on your way.
goodluck
You could put the element within the <li> into a <section> and apply the styles as in this link
<ul>
<li>
<section>
<div class="left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSJGaeBPpPWONWkvBvhN3GcQxb_RVoIyAY7AxKuUuKFf0LFNkAUFVbuAZmEUtihSS0de0zFDx9v" />
</div>
<div class="right">
<h3>Jetliner with 155 on board loses chassis during takeoff in Russia</h3>
<span>Pravda - </span><span>Mar 9, 2016</span>
<p>A Boeing 737-400 en route Tyumen-Novy Urengoy lost chassis during takeoff on March 9 in Russia. Representatives of Yamal airline told ...</p>
</div>
</section>
</li>
</ul>
See modifications to your original code:
https://jsfiddle.net/xwaLsd8p/
Here is the problem: the Whole2 element in the css portion is supposed to be a container for the other divs, but it doesn't create the border or padding around he other elements. If anyone can tell me what I am doing wrong, please do.
By the way, the content is nonsense, ignore it.
This is my css:
<style>
.Whole2{
border:4px solid black;
padding: 1em;
}
.Title{
border: 1px solid;
background: lightblue;
text-align: right;
width: 57.9em;
height: 8em;
padding: .5em;
}
.Subtitle {
font-size: 0.8em;
}
.Blog1 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Blog2 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Friends {
border:1px solid black;
background: purple;
width: 12em;
height: 12em;
position: absolute;
top:10em;
left:0.5em;
padding: .5em;
}
.clears{
clear: both;
}
.theImg{
float: right;
padding: .5em;
}
.Blogs{
position: absolute;
top:10em;
left:14.4em;
}
.blogtext{
font-size: 18px;
}
.Whole2 {
border:4px solid black;
padding: 1em;
}
</style>
This is my html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lab1.css">
<div class="Whole2">
<head>
<div Class="Title">
<h1> Title thing </h1>
<div class="Subtitle">
<h2> Subtitle thing </h2>
</div>
</div>
</head>
<h3 class="clears"></h3>
<div class="Friends">
<head>
<h1> Friends</h1>
</head>
<body>
<table>
<th>
Friends
</th>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
</table>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blogs">
<div class="Blog1">
<head>
<h1> <span><time>2015-02-11</time></span>: Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
The moose (North America) or elk (Europe), Alces alces, is the largest extant species in the deer family. Moose are distinguished by the palmate antlers of the males; other members of the family have antlers with a dendritic ("twig-like") configuration. Moose typically inhabit boreal and mixed deciduous forests of the Northern Hemisphere in temperate to subarctic climates. Moose used to have a much wider range but hunting and other human activities greatly reduced it over the years. Moose have been reintroduced to some of their former habitats. Currently, most moose are found in Canada, Alaska, Scandinavia and Russia.
</div>
</h2>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blog2">
<head>
<h1> <span><time>2015-03-11</time></span>: Second Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
Their diet consists of both terrestrial and aquatic vegetation. The most common moose predators are wolves, bears, and humans. Unlike most other deer species, moose are solitary animals and do not form herds. Although generally slow-moving and sedentary, moose can become aggressive and move surprisingly quickly if angered or startled. Their mating season in the autumn can lead to spectacular fights between males competing for a female.
</div>
</h2>
</body>
</div>
</div>
</div>
</html>
First, put <div class="Whole2"> inside the body.
Second, you only can have one <head> and one <body>. And I think that you are confounding <head> with <header>.