How would I create a background that only effects the area within the yellow lines?
I have tried adding padding, but that expands the page and does not effect the background color
How would I align the writing to the correct red squares?
If possible I would like pointers to good resources to learn CSS styling. I have tried align:centre, flexbox.
#import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;1,700&display=swap");
* {
font-family: "Noto Sans", sans-serif;
}
.body {
background-color: #32a89d;
}
.homepage_text {
font-family: "Noto Sans", sans-serif;
text-decoration: none;
}
.container {
margin-top: 5%;
margin-left: 7%;
margin-right: 7%;
}
.logo_header {
margin-left: 7%;
}
.header_list {
list-style: none;
float: right;
font-family: "Noto Sans", sans-serif;
}
header {
display: flexbox;
}
/* Animated Text */
.wrapper {
height: 45px;
/*This part is important for centering*/
display: flexbox;
/* align-items: right; */
justify-content: right;
margin-right: 7%;
}
.typing-demo {
width: 56ch;
animation: typing 2s steps(40), blink 0.5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: "Noto Sans", sans-serif;
font-size: 2em;
}
#keyframes typing {
from {
width: 0;
}
}
#keyframes blink {
50% {
border-color: transparent;
}
}
/* End of Animated */
/* Navigation Bar */
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #808080;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #eceff1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
transition-duration: 0.25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #cfd8dc;
}
/* footer */
.facebook_icon {
align-items: centre;
}
.footer_icons {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Doorways Derby</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='/style.css'>
<script src='script.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<header>
<img class = 'logo_header' src = '/img/logo.png'
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="about.html">About Doorways</a></li>
<li><a class="menu__item" href="contact.html">Contact Us</a></li>
<li><a class="menu__item" href="get_involved.html">Get Involved</a></li>
<li><a class="menu__item" href="more.html">More</a></li>
<li><a class="menu__item" href="#"></a></li>
</ul>
</div>
<div class="wrapper">
<div class="typing-demo">
BE SOMEBODY THAT MAKES EVERYBODY FEEL LIKE A SOMEBODY
</div>
</div>
<li class = 'header_list'>
<ul><b>Contact Number: 07754128763</b></ul>
</li>
</header>
<body class = 'body'>
<div class="container">
<img class = 'img' src = '/img/122562126_1810506009098238_1438181275282.webp'>
<h3> How we started </h3>
<p class = 'homepage_text'> Doorways was co foundered by Craig (a full time working fabricator) and Lisa Wheatley (a school cook) with friends Patrick and Tina Hall in May 2015 to help homeless rough sleepers (around 15) in Derby city centre, by providing service users with a hot meal, a sandwich pack and a hot drink. </p>
<p class = 'homepage_text'>This issue was brought to our attention after Lisa had helped another group within the city by cooking meals for them to give out to homeless people. We set up the group with friends and a few family members to help make sandwiches and distribute the items and went out three nights a week.</p>
<p class = 'homepage_text'> It soon became apparent that there was a bigger issue within the city of more vulnerable people than we had anticipated. People were coming to use our service from hostels, shared accommodation, people in their own property on low income and even people with no life skills to cook for themselves. Our numbers increased quite quickly and numbers went up to around 60 visitors by the end of 2015.</p>
<p class = 'homepage_text'> Four years on and with the help and backing of several businesses, who help by donating end of day food items. and having a Facebook group with over 8000 members the support has been overwhelming. We have a core group of volunteers who help with cooking and the running of Doorways on our nights out, we regularly see over 100 visitors on each of our nights out now and have recently become a non-profit making registered charity (1182774).</p>
<p class = 'homepage_text'> Our aim is to have access to a building which we can use to cook the meals, use for storage and have as a drop in centre for people to come to for information in our sector, this is alongside still having our pop up street kitchen 3 nights a week.</p>
<h2> THEN COVID-19 HIT.</h2>
<p class = 'homepage_text'> Since March 2020, our plans have been put on hold as we have been unable to run the street kitchen and keep within the government guidelines set regarding social distancing and large gatherings in public spaces. We have however still been able to continue helping vulnerable people/families by setting up a food bank and produce table from our home address. We set up a food produce table twice a week on a Tuesday and a Saturday, where people can come along and take what they need to put meals on the table.</p>
<p class = 'homepage_text'> We regularly see over 120 households each time we are open. In addition to this, we have delivered or had collected over 2000 food parcels to those in need.</p>
</div>
</body>
<footer class = 'footer'>
<li class = 'footer_icons'>
<ul class = 'facebook_icon'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg></ul>
</li>
</footer>
</html>
<!-- <ul class="menu__box">
<li><a class="menu__item" href="about.html">About Doorways</a></li>
<li><a class="menu__item" href="contact.html">Contact Us</a></li>
<li><a class="menu__item" href="get_involved.html">Get Involved</a></li>
<li><a class="menu__item" href="more.html">More</a></li>
<li><a class="menu__item" href="#"></a></li>
</ul> -->
I think you have miss-spelled the flexbox property. The property is display: flex;
I don't think it's a good idea to have inside the tag. You can add the inside the container. It will help you to remove to the spacing issue.
To get justify-content to work, the element itself needs to be displayed as flex:
display: flex;
justify-content: right;
Aplying this to your .wrapper and the "Be somebody..." text will actually go to the right.
For learning some more CSS i recommend W3Schoool(free) or Codecademy(not free).
Flex is the answer!
CSS-Tricks provides a lot of good, useful information about css.
And flexbox froggy also helped me a lot to learn flexbox and grid.
If you flex a container, the children inside that container will align along eachother.
<div style="display: flex">
<p>LEFT</p>
<p>RIGHT</p>
</div>
You can then use justify-content and align-items, you align the content to your liking.
For quick solution :
position: absolute;
right: 0;
top: 35px;
There are many errors in your code, But hope so you will fix them, Best of luck.
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to đ©đ”đ”đ±://đšđ°đ°đšđđŠ.đ€đ°đź
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I've been trying to figure out the issue for hours. I've tried to use .about_container {justify-content: space-evenly;} However, it doesn't add any spacing between the child items. Also, the items do not adjust size. I've tried adding flex-flow, flex-basis, and flex-shrink/grow but none of them make any difference. I'm also having issues getting the images to be a specific size while also being responsive.
I would appreciate any advice!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
max-width: 1300px;
width: 100%;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
#media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason > h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul id="links">
<li>Home</li>
<li>About Us</li>
<li>How-to</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason">
<h2>Jason R.</h2>
<img src="90528548_10213477312766132_4964276883236585472_n.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of
Applied Science degree in Computer Programming at Minnesota State
Community and Technical college. I am now a Computer Science major
at Davenport University. I work on both the front-end and back-end
within our small team. Outside of work, I enjoy playing video games,
biking, hiking, programming and learning about anything and everything!
I look forward to working with you!</p>
</div>
<div id="about_mike">
<h2>Michael J.</h2>
<img src="Mike.jpg"/>
<p>Hey there! My name is Mike. I live in Montrose,
Colorado where I remotely work with Jason and Sam.
I am a self-taught graphic designer/illustrator.
For several years, I have developed a strong graphic
design portfolio and have a collection of my journey
over the years on my own personal Wordpress at
my wordpress.
I am advanced in Adobe InDesign, Illustrator, and
Photoshop. Outside of work, I enjoy working on digital
art, reading, photography, and teaching myself how to program.
I am currently learning web development and python. I look
forward to working with my team and I look forward to working
with our clients we work with.</p>
</div>
<div id="about_sam">
<h2>Samantha K.</h2>
<img src="cropped_profile_picture.jpg"/>
<p>Hi everyone! My name is Samantha K. I started as a self
taught designer and am now making the big move to pursue
a degree in web design. I have experience in affinity designer,
html and css. I have a beautiful 2 year old daughter, Emily, and
a one year old puppy, Tobi. I live in Clifton, Colorado with my
fiance, my daughter, our best friend and our dog. I enjoy bike rides,
swimming, movies, photography, writing and creating digital art.
I look forward to learning, gaining experience and working with my
team to create beautiful designs.</p>
</div>
</div>
</body>
the problem is here. you have given the images the width and height values to remain the same in all sizes.
.about_container img {
height: 300px;
width: 300px;
object-fit: scale-down;
}
I created a single class for each person div (about). and I gave each picture the width property as 350 px. instead of giving a fixed width height value to the images, I added the properties display block, width 100%. So they will always adjust themselves according to it, no matter how much the container width is.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
max-width: 80%;
height: 100%;
background-attachment: fixed;
background-image: url(2019-12-11-mountain-day-featured-01.jpg);
background-size: cover;
}
h1 {
font-size: 3em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-bottom: 10%;
}
.about_container {
display: flex;
color: #A3DAE3;
background-color: #784C87;
box-shadow: -10px -10px 15px #A3DAE3 inset;
border-radius: 25px;
margin-bottom: 10%;
justify-content: space-evenly;
}
.about {
width: 350px;
}
#about_jason {
margin-left: 20px;
}
#about_sam {
margin-right: 20px;
}
#about_mike {
margin-left: 20px;
margin-right: 20px;
}
.about_container img {
display: block;
width: 100%;
object-fit: scale-down;
}
article {
margin-top: 10px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #89A1C9;
}
footer {
text-align: center;
padding-top: 5%;
}
#links li {
transition: all .2s ease-in-out;
}
#links li:hover {
transform: scale(1.5);
}
#media only screen and (max-width: 768px) {
html {
width: 100%;
}
.about_container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
article {
padding-bottom: 20px;
padding-top: 20px;
}
.about_jason>h2 {
padding-top: 30px;
}
#about_mike a {
text-decoration: none;
color: #450175;
}
#about_mike a:hover {
color: #784C87;
}
}
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul id="links">
<li>Home</li>
<li>About Us</li>
<li>How-to</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sharethis-inline-follow-buttons"></div>
<h1>About Us</h1>
<div class="about_container">
<div id="about_jason" class="about">
<h2>Jason R.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey guys! My name is Jason. I graduated with my Associates of Applied Science degree in Computer Programming at Minnesota State Community and Technical college. I am now a Computer Science major at Davenport University. I work on both the front-end
and back-end within our small team. Outside of work, I enjoy playing video games, biking, hiking, programming and learning about anything and everything! I look forward to working with you!</p>
</div>
<div id="about_mike" class="about" >
<h2>Michael J.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hey there! My name is Mike. I live in Montrose, Colorado where I remotely work with Jason and Sam. I am a self-taught graphic designer/illustrator. For several years, I have developed a strong graphic design portfolio and have a collection of my
journey over the years on my own personal Wordpress at
my wordpress. I am advanced in Adobe InDesign, Illustrator, and Photoshop. Outside of work, I enjoy working on digital art, reading, photography, and teaching myself how to program. I am currently
learning web development and python. I look forward to working with my team and I look forward to working with our clients we work with.</p>
</div>
<div id="about_sam" class="about">
<h2>Samantha K.</h2>
<img src="https://i.pinimg.com/originals/72/1d/13/721d13848e02189b9c7aed0d27ae433a.jpg" />
<p>Hi everyone! My name is Samantha K. I started as a self taught designer and am now making the big move to pursue a degree in web design. I have experience in affinity designer, html and css. I have a beautiful 2 year old daughter, Emily, and a one
year old puppy, Tobi. I live in Clifton, Colorado with my fiance, my daughter, our best friend and our dog. I enjoy bike rides, swimming, movies, photography, writing and creating digital art. I look forward to learning, gaining experience and
working with my team to create beautiful designs.</p>
</div>
</div>
I'm trying to achieve the effect of having text show when I hover over it. I looked at another question: Using only CSS, show div on hover over <a> , and tried out some of the solutions, but they are not working for me. Here is my code: https://codepen.io/anon/pen/PLYGyg. Thanks!
div#thesishereyay {
margin-top: 50px;
margin-left: 120px;
position: absolute;
opacity: 0;
background-color: #000000;
}
h4.thesis {
margin: 10px;
}
li.thesisbutton {
position: absolute;
margin-top: 15px;
margin-left: 112px;
opacity: 1;
}
.thesisbutton:hover div.thesishereyay {
opacity: 1;
}
<ul class="nav">
<li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
<h4 class="thesis">
Thirst for triumph during the<br>
Vietnam war in order to prevent<br>
a U.S. humiliation led to Lyndon<br>
Johnson lying to the American public<br>
about the Gulf of Tonkin incident to<br>
gain support for the Gulf of Tonkin<br>
resolution, which resulted in the<br>
continuation of the war and the<br>
tragedy of more lives being lost<br>
for a war being fought in fear of what<br>
might happen if the U.S. was defeated.</h4>
</div>
You can make something like this.
div#thesishereyay {
margin-top: 50px;
margin-left: 120px;
position: absolute;
opacity: 0;
background-color: #000000;
}
h4.thesis {
margin: 10px;
}
li.thesisbutton {
position: absolute;
margin-top: 15px;
margin-left: 112px;
opacity: 1;
}
.nav:hover ~ #thesishereyay {
opacity: 1;
}
<div class="main">
<ul class="nav">
<li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
<h4 class="thesis">
Thirst for triumph during the<br>
Vietnam war in order to prevent<br>
a U.S. humiliation led to Lyndon<br>
Johnson lying to the American public<br>
about the Gulf of Tonkin incident to<br>
gain support for the Gulf of Tonkin<br>
resolution, which resulted in the<br>
continuation of the war and the<br>
tragedy of more lives being lost<br>
for a war being fought in fear of what<br>
might happen if the U.S. was defeated.</h4>
</div>
</div>
This the basic markup:
ul > li > div {display:none;} /* hide div inside li */
ul > li:hover > div {display: block;} /* show div when li hovered */
<ul class="nav">
<li class="thesisbutton">Thesis
<div id="thesishereyay">...</div>
</li>
</ul>
Hope that helps.
I know this is not css which you want, but maybe will help to somebody :)
$('#thesishereyay').on('mouseenter mouseleave', function(e) {
var $block = $('#thesishereyay');
if(e.type == 'mouseenter') {
$block.show();
} else if(e.type == 'mouseleave') {
$block.hide();
}
});
Not sure if this is what you're looking for but take a look:
li.hoverbutton {
position: relative;
}
#hoveron {
top: 100%;
left: 0;
position: absolute;
display: none;
background-color: #000000;
}
h4.showonhover {
padding: 10px;
color: #ffffff;
}
li.hoverbutton:hover #hoveron {
display: block;
}
<ul class="nav">
<li class="hoverbutton">
Hover!
<div id="hoveron">
<h4 class="showonhover">Text to show</h4>
</div>
</li>
</ul>
I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.
Here's my code:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
#media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>
Someone suggested this solution:
How to horizontally center a <div> in another <div>?
The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.
I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.
I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know.
Thanks,
Lyfe
Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.
Here is your code, with the Apple logo placed as the first list element:
<ul class="ul-header">
<li class="li-header"><img src="apple_logo.png" width='20px'></li>
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
</ul>
EDIT
To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
Note I added an ID to the image. Also, your settings may be slightly different.
if we have an actual look at the CSS and HTML of the apple page this is how you do it:
html:
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>
css:
#media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}
.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}
Comment:
I would bet the
position:absolute;
does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.
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 :)!