I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.
Related
Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
.footer,
.push {
height: 50px;
}
.footer {
background: #000f14 !important;
padding: 20px !important;
text-align: center !important;
position: absolute !important;
bottom: 0 !important;
margin-top: 50px;
width: 100% !important;
}
.column {
display: inline-block;
width: 25%;
vertical-align: top;
text-align: left;
margin: 0 2.5%;
margin-top: 15px;
background: #000f14;
}
.column h3 {
margin-top: 0;
margin-bottom: 10px;
background: #000f14;
font-size: 25px;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
background: #000f14;
}
.column ul li {
padding: 5px 0;
background: #000f14;
font-size: 15px;
}
.column p {
margin: 0;
background: #000f14;
font-size: 15px;
}
<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="footer-placeholder">
<div class="footer">
<div class="column">
<h3>Contact Information</h3>
<ul>
<li>1234 Example Street</li>
<li>Example City, XX 12345</li>
<li>Phone: (555) 555-5555</li>
<li>Email: info#example.com</li>
</ul>
</div>
<div class="column">
<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
</div>
<div class="column">
<h3>Trademark</h3>
<p>© 2023 AquaTech. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
.footer,
.push {
height: 100%;
}
With this basically you tell your element with footer class that take the full height of its child elements.
You need to add the height in the class
.footer { height: auto }
And to make the content of footer visible add color in the class
.column{color: white}
The final look of your both CSS classes will be as below;
.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }
.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}
Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height
Simply add height: auto; to the .footer CSS selector.
Improvements suggestions:
Use the <footer> HTML element instead of <div class='footer'> for semantic markup.
Learn flexbox to layout the columns using display: flex.
Read about better ways to place the footer at the bottom
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...
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}
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