I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}
margin: 0;
on the body, it's the default margin.
Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}
Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG
Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/
Related
I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.
It's supposed to look like this:
[1]: https://i.stack.imgur.com/OADQ6.png
How it looks in a browser:
[2]: https://i.stack.imgur.com/uKHV8.png
I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
}
h1 {
font-size: 32px;
margin: 0;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader
Then using margin to adjust the spacing between the h1 and h2.
Thank you, Damien Puaud!
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin: 120px;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: -100px;
width: 360px;
background: #457b9d;
padding: 7px 25px;
border-radius: 5px;
}
#activities {
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<h3>Top three activities to do at Alver</h3>
<img src="images/le5lrhfv5dygds5nzacn.jpg" />
<img src="images/last ned.jpg" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I did some changes on your code. You can do this also like this:
I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
vertical-align: middle;
display: table-cell;
}
.vertical {
display: table;
margin: 0 auto;
}
h1 {
font-size: 32px;
margin: 15px auto;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
width: 350px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div class="vertical">
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)
I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo
HTML:
<!DOCTYPE html>
<head>
<meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
<meta name="author" content="John Gibson">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="nomargins">
<header id="MainHeader">
<nav>
<ul>
<li class="inline" style="max-width:auto">
<img src="EPASD logo.svg" id="logo">
</li>
<li class="inline" id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li class="inline" id="DistrictName_2">
<div class="inline">Area School</div>
<div class="inline">District</div>
</li>
</ul>
</nav>
</header>
<aside>
<nav style="VerticalNavbar">
<a href="">
</nav>
</aside>
<section id-"MainContentArea">
<div id="carousel">
</div>
</section>
<aside id="articles">
<h1 class="ArticleSectionHeading">Articles</h3>
</aside>
</body>
</html>
CSS:
* {
margin: 0px 0px 0px 0px;
}
body {
background-image: url(background.svg);
background-size: cover;
background-attachment: scroll;
}
.nomargins {
margin: 0px 0px 0px 0px;
}
#MainHeader {
background: #F08819;
position: fixed;
z-index: 100;
height: 115px;
width: 100%;
min-width: 320px;
color: #000000;
opacity: 0.9;
}
#articles {
position: relative;
overflow: hidden;
}
#logo {
height: 100%;
max-height: 150px;
margin-top: -17px;
}
ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}
#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}
#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}
.inline {
display: inline;
}
.block {
display: block;
}
Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg
Is this what you wanted to achieve?
Changed HTML
<ul>
<li style="max-width:auto">
<img src="EPASD logo.svg" id="logo"></img>
</li>
<li id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li id="DistrictName_2">
<div>Area School</div>
<div class="clear">District</div>
</li>
</ul>
CSS
ul li, #DistrictName_2 > div {
display:inline-block;
}
.clear {
float:left;
clear:both;
}
Working example here:
JSFiddle