This is my html coding. When I run the webpage in firefox there is no color or formating at all it is just the info I entered. I tried typing the code differently and still does not work. I went into developer in firefox and the css does not show up, when I add it the webpage is formatted. How do I fix this so I do not need to go into developer to add the css everytime?
<!DOCTYPE html>
<html>
<head>
<title> Penn State Health St. Joseph Radiology Employee Reference</title>
<!-- Author: Brie Rennig -->
<!-- Date: 08/24/2016 -->
<link rel="stylesheet" type="text/css" href="rem.css">
</head>
<body>
<div id="wrapper">
<h1>
Penn State Health St. Joseph Radiology Employee Reference
</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
</nav>
<main>
<center>
<img src="ps_health.jpg" id="ps_health">
</center>
<br>
<div id="Statement_Health">
<center>
<h2>
Mission Statement
</h2>
<!-- This text is emphasised as it is the mission statement for Penn State Health -->
<em>
The Mission of St. Joseph's is to nurture the healing ministry of the Church, supported by education and research. <br/>
Fidelity to the Gospel urges us to emphasize human dignity and social justice as we create healthier communities. <br/>
<br/>
</em>
</center>
</div>
<br/>
<div id="Prayer">
<h3>
Radiologic Technologist Prayer
</h3>
<em>
Almighty and merciful Lord, <br/>
I thank thee for giving me this day <br/>
That I may be able to serve my brethren.<br/>
<br/>
Thou give me a keen of mind, <br/>
To be able to formulate appropriate factor <br/>
Just enough kVp to penetrate <br/>
And mAs for density <br/>
To produce a good quality radiograph. <br/>
<br/>
Grant that I may also possess <br/>
A hand with a tender touch <br/>
That I may not intensify the suffering <br/>
as I position the patient.. <br/>
<br/>
Lastly Lord, let me wear a sweet smile, <br/>
And speak soft and pleasant words <br/>
which may sooth the afflicted <br/>
And that they may have confidence in me. <br/>
<br/>
For the honor and glory of Thy kingdom <br/>
Amen. <br/>
<br/>
</em>
</div>
<footer>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
<br />
<p> <font face="algerian"> <font color= "#CCCCFF"> Posted by: Brianna Rennig </font> </p> </font>
<p> <font color= "#CCCCFF"> Contact Information: <a href="mailto:btr130#psu.edu">btr130#psu.edu</>.</font> </p>
Penn State Health St. Joseph
</footer>
</div>
</body>
</html>
and this is my CSS
body {
background: linear-gradient(to bottom, #f5f5f5, #0045cc);
}
#ps_health
{
}
#ballon_quote
{
border:5px;
border-style:ridge;
border-color:dark-blue;
width:60%;
height:50%;
}
#sms_MobileOnly
{
display: none;
}
#Statement_Health
{
margin-left: auto;
margin-right: auto;
width:90%;
border: 2px solid; black;
background-color: #CCCCFF;
}
#Prayer
{
margin-left: 25%;
margin-right: auto;
width:50%;
border: 2px solid; black;
background-color: #CCCCFF;
text-align: center;
}
footer ul
{
list-style-type: none;
}
footer li
{
display: inline;
}
footer a
{
text-decoration: none;
color: black;
}
nav ul
{
list-style-type: none;
}
nav a
{
text-decoration: none;
}
#wrapper
{
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA;
}
header
{
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 24px;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
main
{
margin-left: 200px;
padding: 10px;
background-color: #FFFFFF;
font-family: Times New Roman ;
}
footer
{
text-align: center;
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
}
nav
{
float: left;
width: 250px;
}
Related
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
I can't click on my links anywhere. They are not inside of the div that seems to be blocking my ability to click on them. They are also not supposed to be opaque because they are not inside of that div. They are in their own divs. Anyone see what I'm missing here? How do I change this so that I can click on my links again? I was messing with the background image for awhile. I just don't know what's going on. This is my cheezy website I'm making for school. I just need help so I can turn this in! Thank you!
<!DOCTYPE html>
<!--
LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017
-->
<html>
<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
max-height: 100%;
margin: 0 auto;
}
#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#heading
{
text-align: center;
}
#emailAddressLink
{
color: white;
}
#topBox
{
margin-top: 50px;
}
h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}
ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;
}
.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}
.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;
}
.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;
}
.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}
#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}
#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}
#owlImage
{
float: right;
width: 300px;
height: 200px;
}
#lastBox
{
line-height: 6em;
}
</style>
</head>
<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:HeatherSmithx#gmail.com" target="_blank">
Heather's Email
</a>
</address>
</div>
<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>
<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>
</ul>
</div>
<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>
<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>
</ul>
</div>
<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>
<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>
<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>
</body>
</html>
The issue is with the .boxContents class. The margin-top selector is pulling everything off. If you remove it, your links should function as expected. Also, just on a side-note, it's worth avoiding using lots of z-indexes in your CSS if they aren't required. It can lead to issues and content being hidden all too easily.
You've got a lot of z-index action going on there. I would be careful about how you are using the z-index. Refer to this great article on the CSS z-index which also higlights some of the pitfalls of using z-index. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Change the class .link to have z-index:5; and then test it. It will put it in front of your other <divs>.
Just make sure you keep that class with a higher z-index than your other classes / IDs.
A few tiny problems have been torturing me for weeks. After many researches and many trials I still can't figure out what to do.
On my online resume, the desktop display if perfect. On mobile though, there are many inconsistencies with font and images sizes.
Link of the page: t.btmx.fr
Problems
If you have an idea what's wrong or if there's something I should learn that would be very helpful :)!
Thank you very much!
Below is the code as asked by Paulie_D. I'm sorry if it's so long I don't know what to remove :(. First you'll find the CSS for small screens using media queries, then the "normal" CSS and then the HTML.
#
media screen and(max - width: 1000px) {
header {
font - size: 1em;
}
p {
font - size: 0.8em;
}
#
contact_button {
font - size: 1em;
}
#
personal - info - and - topskills {
display: flex;
flex - direction: column;
}
#
containermain {
display: flex;
flex - direction: column;
}
.topitem: nth - child(2) {
max - width: 100 % ;
}
.subelementspecial /* floating logo | title */ {
display: flex;
flex - direction: column;
}
}
header {
border-radius: 0.5em;
background-color: #AFC600;
opacity: 0.7;
margin: auto;
margin-bottom: 4em;
padding-bottom: 0.1em;
padding-top: 0.1em;
font-size: 0.8em;
text-align: center;
max-width: 1920px;
}
.bg1 {
background: url("medias/background.jpg") no-repeat top center;
}
.bg2 {
background: #232A2A;
}
#main-wrapper {
width: 100%;
background-attachment: scroll;
background-size: contain;
font-family: "texgyrescholaregular", Verdana, Georgia, serif;
}
#personal-info-and-topskills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
padding: 2em;
}
.topitem {
border-radius: 0.5em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
}
.topitem h2 {
margin-bottom: 1.5em;
}
.topitem:nth-child(2) {
opacity: 0.9;
min-width: 300px;
background-color: #3D3D39;
border-radius: 0.5em;
/* padding : top right bottom left */
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
max-width: 40em;
}
.topitem:nth-child(2) p {
color: white;
line-height: 2em;
}
.topitem:nth-child(2) strong {
color: #d8616f;
}
#contact_button {
background: #D3D699;
text-align: center;
color: black;
border-radius: 1em;
width: 40%;
margin: auto;
margin-bottom: 1em;
margin-top: 1em;
}
.topitem:nth-child(3) {
background: #C4D9D0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.topitem:nth-child(3) h2 {
color: black
}
#languages {
width: 100%;
}
.topitem:nth-child(4) {
background: #e0cece;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 350px;
}
.topitem:nth-child(4) h2 {
color: #b25960;
}
#containermain
/* contains experience, skills and education */
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
align-items: flex-start;
padding: 2em;
}
.cmain-element {
background-color: #FCF8F5;
border-radius: 1em;
padding: 0 1.3em 0.6em 1.3em;
margin: 1em;
max-width: 1500px;
/*properties for all the childs*/
}
.cmain-element:nth-child(1) {
flex: 1;
}
.cmain-element:nth-child(2) {
flex: 1;
}
.float-logo-title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.work-place-time h3 {
margin-top: 0.1em;
}
.logo {
margin-right: 30px;
}
#hobbies-passions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
align-items: flex-start;
background-color: #FCF8F5;
border-radius: 5px;
width: 40em;
margin: auto;
margin-bottom: 3em;
}
#hobbies-img {
text-align: center;
}
footer {
display: flex;
height: 60px;
border-radius: 5px;
background-color: #546363;
opacity: 0.8;
margin: auto;
max-width: 1920px;
}
#footerbox {
width: 40%;
display: flex;
margin: auto;
justify-content: space-around;
}
#font-face {
font-family: 'texgyrescholaregular';
src: url('font/texgyreschola-regular-webfont.eot');
src: url('font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/texgyreschola-regular-webfont.woff') format('woff'), url('font/texgyreschola-regular-webfont.ttf') format('truetype'), url('font/texgyreschola-regular-webfont.svg#texgyrescholaregular') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {
color: #DE7F89;
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
}
p {
font-size: 0.9em;
line-height: 1.5em;
}
ol,
ul {
font-size: 0.9em;
line-height: 1.5em;
/* for changing indent
padding-left: 30px;
*/
}
/*strong=default*/
a {
color: green;
text-decoration: none;
font-style: italic;
}
a:hover {
color: green;
}
a:active {
color: red;
}
a:visited {
color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="smallscreen.css" />
<meta charset="utf-8">
<title>Resume - Thibault Bétrémieux</title>
<link rel="icon" href="http://t.btmx.fr/wp-content/uploads/2016/07/favicon.png">
</head>
<div class="bg2">
<body>
<div class="bg1">
<div id="main-wrapper">
<header>
<h1>Thibault Bétrémieux - Resume as of 16<sup>th</sup> July 2016</h1>
</header>
<section id="personal-info-and-topskills">
<div class="topitem">
<p>
<a href="medias/thibault_betremieux_photo.jpg" target=_blank>
<img src="medias/thibault_betremieux_photo_mini.png" title="click to enlarge :) !" alt="Resume photo Thibault Bétrémieux" />
</a>
</p>
<!-- <a href.../> <Miniature/> </a> -->
<!-- target=_blank open in new link -->
</div>
<div class="topitem">
<h2>Personal information</h2>
<p><strong>About me: </strong>I am a young french expat living in Germany since two years, I speak four languages (French,English,German and Italian)</p>
<p><strong>Date of birth: </strong>24/12/1991</p>
<p><strong>Desired position: </strong>Online marketing or management in an international environment</p>
<p><strong>Place of residence:</strong> Bamberg, Bavaria (Germany)</p>
<a href="http://t.btmx.fr/contact">
<div id="contact_button">Contact me</div>
</a>
</div>
<div class="topitem">
<h2>Languages</h2>
<div id="languages">
<img src=medias/languages_450px.png alt="Languages">
</div>
</div>
<div class="topitem">
<h2>Computer skills</h2>
<h3>Microsoft Office</h3>
<ul>
<li>Word (including Mailing)</li>
<li>Excel (including charts and pivot tables)</li>
<li>PowerPoint (including masks)</li>
<li>Outlook</li>
</ul>
<h3>Internet</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>WordPress</li>
</ul>
</div>
</section>
<section id="containermain">
<div class="cmain-element">
<h2>Professional experience</h2>
<div class="float-logo-title">
<!-- is used to put the logo next to the title of work, place, and date-->
<div class="logo">
<p>
<img src="medias/aul_logo.png" alt="Logo Arbeit und Leben NRW" />
</p>
</div>
<div class="work-place-time">
<h3>Project manager (non renewable fixed-term contract)</h3>
<h4>Arbeit und Leben NRW, Düsseldorf, Germany</h4>
<p>05.2015 - 04-2016</p>
</div>
</div>
<ul>
<li>Organization and leading of Franco-German meetings for young people in vocational training – within the Program funded by the Franco-German Youth Office (OFAJ/DJFW) “Work in the partner country”</li>
<li>Animator of some of those meetings and training for the leading of intercultural exchanges</li>
<li>Development of partnerships between “Arbeit und Leben NRW”, socio-political organizations and/or vocational training centers</li>
</ul>
<div class="float-logo-title">
<div class="logo">
<p>
<img src="medias/dialoge_logo.png" alt="Logo Dialoge Sprachinstitut" />
</p>
</div>
<div class="work-place-time">
<h3>Assistant to the school direction (Master internship)</h3>
<h4>Dialoge Sprachinstitut GmbH, Lindau, Germany</h4>
<p>09.2013 - 01.2014</p>
</div>
</div>
<ul>
<li>CRM</li>
<li>Marketing: competition analysis and prospect survey research</li>
<li>Data exploitation and creation of documents for the ISO 9001 school certification</li>
<li>Various tasks for the school manager</li>
</ul>
<p>
<img src="medias/hsbc_trinkaus_logo.png" alt="HSBC Trinkaus logo" />
</p>
<!-- the logo is too large for any text to stand on its side -->
<h3>Assistant of the Team “Support to insolvency administrators” (Bachelor internship)</h3>
<h4>HSBC Trinkaus & Burkhardt AG (Corporate cients), Düsseldorf, Germany</h4>
<p>05.2012 – 08.2012</p>
<ul>
<li>Insight into equity backing principles, insolvency re-financing and trust accounts administration</li>
<li>Assistance to the team for opening trust accounts and for monitoring steps of insolvency proceedings</li>
<li>Daily queries for new insolvency cases in dedicated data bases</li>
</ul>
</div>
<div class="cmain-element">
<h2>Education</h2>
<h3>Specialization in E-Commerce and online Marketing</h3>
<h4>Conservatoire National des Arts et Métiers, Paris (Online training), France</h4>
<p>10.2014 - 04.2016</p>
<ul>
<li>“Online advertising and communication “(ESC127) - Grade: 1</li>
<li>"E-Commerce “(ESC128) - Grade: 1</li>
<li>“Collection and processing of digital marketing data “(ESC129) - Grade: 1</li>
<li>“Decision-making statistics in marketing “(ESC104) - Grade: 2,2</li>
<li>“Electronic marketing – digital marketing “(ESC123) - Grade: 1</li>
</ul>
<h3>Double degree: Master of Arts “Internationale Wirtschaftsbeziehungen” (International Economic Relations) – Grade 1,9</h3>
<h4>Albert-Ludwigs-Universität Freiburg, Freiburg im Breisgau, Germany</h4>
<p>10. 2012 - 09. 2014</p>
<p><strong>Masterarbeit: “Legislative environment of the bio-food sector”</strong> (Master’s thesis, 2014, 77p.) in German.</p>
<p>The founding texts (Codex Alimentarius and IFOAM Guidelines) and the laws of organic food; their relationships with the most famous bio private labels, internationally and in some regions and countries deeply involved in the organic food sector
(EU, USA, Switzerland, Germany, France, Austria ...).</p>
<h3>Double degree: Master of Arts „Commerce et Affaires internationales“ (International Business) – Grade 1,9</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2012 - 09. 2014</p>
<p><strong>Theoretical work for preparing my internship: “Quality and training”</strong> (Sept. 2013, 35 p.) in French.</p>
<p>EFQM (European Foundation for Quality Management) excellence model and quality management with examples relative to training. Management process of a training action, from creation to evaluation and its improvement in the context of a quality
approach.
</p>
<h3>Bachelor of Arts „Commerce et Affaires Internationales“ (International Business) – Grade 1,6</h3>
<h4>Université Paris Est Créteil (U-PEC), Créteil, France</h4>
<p>10.2009 - 08.2012</p>
<p>Diploma with four languages (French, English, German, Italian)</p>
<h3>Baccalauréat</h3>
<h4>Lycée d’Arsonval, Saint Maur des Fossés</h4>
<p>06.2009</p>
<p>Scientific Baccalauréat in engineering sciences</p>
</div>
</section>
<section id="hobbies-passions">
<div id="hobbies-img">
<h2>Hobbies and passions</h2>
<p>
<img src="medias/hobbies_passions_1.png" alt="My hobbies and passions" />
</p>
<p>
<img src="medias/hobbies_passions_2.png" alt="My hobbies and passions" />
</p>
</div>
</section>
<footer>
<div id="footerbox">
<div class="footerelement">
<a href="https://linkedin.com/in/thibaultbetremieux">
<img src="medias/footer/linkedin_logo_40px.png" alt="Thibault Bétrémieux Linkedin">
</a>
</div>
<div class="footerelement">
<a href="https://www.xing.com/profile/Thibault_Betremieux">
<img src="medias/footer/xing_logo_40px.png" alt="Thibault Bétrémieux Xing">
</a>
</div>
<div class="footerelement">
<a href="http://t.btmx.fr/category/tech">
<img src="medias/footer/wp_articles_40px.png" alt="Thibault Bétrémieux Wordpress articles">
</a>
</div>
</div>
</footer>
</div>
</div>
<!--BG1 -->
</div>
<!--BG2 -->
</body>
</html>
Notes:
Perhaps this can help (it's the structure of the website):
i.stack.imgur.com/BEHxr.png
(I can post only 2 links max please copy paste and sorry...)
What I've tried so far:
for the text: redifining all font-sizes with media-queries for screens smaller than 1000px. For some reason, I have to define font-size for subitems (Box-> Item -> Subitems) because changing h2 or p etc. doesn't affect them. I have to use crazy values like 1.7em for them to look alright on mobile. But then if I'm on desktop with a reduced window (at less than 1000px), 1.7em looks huge :( !!
for the images: setting the image as background of the parent's (if I'm not mistaken) box seemed like a promising solution, however when I did that, the image was overflowing the box on the mobile :( ! I've also tried putting width=100% on parent or child but it didn't work.
other things that didn't make any sense or things I can't remember :P
I managed to resolve all problems by using the following code which gives a scale to the page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Take care :)!
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>.
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>