I have no idea why my image is shifting when my webpage is resized. There is no absolute positioning, the image just floats left, and the parents only give it some padding and margin.
Here is the HTML:
.section-title {
color: black;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.section-title-info {
margin-bottom: 1.5em;
margin-top: 0;
}
.section-words-info {
font-size: 20px;
color: black;
font-weight: 550;
line-height: 30px;
}
.section-info {
background-color: #706D9F;
padding: 2em 1em;
}
.container {
margin: 0 auto;
}
.img-main {
float: left;
height: 12em;
border-radius: 50%;
}
<section class="section-info container">
<h2 class="section-title section-title-info">Information</h2>
<img class="img-main" src="https://ibb.co/g7LnzSc">
<span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>
You need to add overflow: auto; to your .section-info By using float it takes that element out of the flow of the document so you need to force the parent to include it by using overflow auto. See here:
.section-title {
color: black;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.section-title-info {
margin-bottom: 1.5em;
margin-top: 0;
}
.section-words-info {
font-size: 20px;
color: black;
font-weight: 550;
line-height: 30px;
}
.section-info {
background-color: #706D9F;
padding: 2em 1em;
overflow: auto;
}
.container {
margin: 0 auto;
}
.img-main {
float: left;
height: 12em;
border-radius: 50%;
}
<section class="section-info container">
<h2 class="section-title section-title-info">Information</h2>
<img class="img-main" src="https://w3schools.com/html/img_girl.jpg" />
<span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>
Related
This question already exists:
non-semantic html code to semantic code html [closed]
Closed 3 years ago.
I currently have the HTML and CSS code below where I have used divs for different elemenets within the webpage. You can run the code to see the output below. I have been told by my lecturer that it is not semantic and need to change the divs to main, section, article etc but i'm not entirely sure how to go about doing this with the HTML and CSS that I have posted below. Can you still add classes to main, section etc?
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font:15px/1.5 Arial, Helvetica, sans-serif;
}
/*box display*/
.box_content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/*box sizing*/
.box_content .box{
position: relative;
width: 350px;
padding: 30px;
background:#2a333b;
box-shadow: 0px 20px 25px rgba(0,0,0,.2);
border-radius: 4px;
margin: 30px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
/*number icons*/
.box_content .box .icon{
position: relative;
width: 80px;
height: 80px;
color: #fff;
background: #000;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
font-size: 40px;
font-weight: 700;
transition: 1s;
}
/*icon colouring*/
.box_content .box .icon{
box-shadow: 0 0 0 #4eb1ba;
background: #4eb1ba;
}
/*hovering*/
.box_content .box:hover .icon{
box-shadow: 0 0 0 400px #4eb1ba;
}
/*position content*/
.box_content .box .content{
position: relative;
z-index: 1;
transition: 0.5s;
}
/*title color*/
.box_content .box .content {
color: #fff;
}
/*paragraph sizing*/
.box_content .box .content p{
margin: 10px;
padding: 0;
}
/*heading size*/
.box_content .box .content h1{
margin: 10px;
padding: 0;
font-size: 25px;
}
/*links- read more*/
.box_content .box .content a{
display: inline-block;
padding:10px 20px;
background: #2a333b;
color:#fff;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
margin: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
*/
<div class="box_content">
<div class="box">
<div class="icon">01</div>
<div class="content">
<h1>Intro to Business Management</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
<div class="box">
<div class="icon">02</div>
<div class="content">
<h1>Digital Identity</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
<div class="box">
<div class="icon">03</div>
<div class="content">
<h1>Information Systems & Databases</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
</div>
When resizing the <p > tag breaks out of its parent <div>, how can I
make it responsive and stay in the <div> HTML code. That's what I
want to achieved with HTML and CSS: I tried to wrap everything in a div so I can control elements using absolute elements so I can center it in the middle.
Thank you in advance for your advices to help me make nicely written websites in the future.
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
html,body {
height: 100%;
}
body {
margin: 0;
background-color: #eee;
}
header {
height: 100vh;
background-size: cover;
position: relative;
height: 100%;
background-image: url("/images/background.jpeg")
}
.text {
position: relative;
width: 100%;
height: 100%;
}
.text1 {
font-size: 35vh;
position:absolute;
top: 5%;
left: 5%;
color: #fff;
font-weight: bold;
margin: 0;
height: auto;
}
.text2 {
margin: 0;
font-size: 35vh;
position:absolute;
left:33%;
top: 40%;
font-size: 5vh;
text-transform: uppercase;
}
.text3 {
position:absolute;
left: 15%;
top: 50%;
width: 50vh;
height: auto;
margin: 0;
font-weight: 4vh;
font-weight: bold;
font-style: italic;
font-family: 'Didact Gothic', sans-serif;
color: #fff;
}
.text4 {
position:absolute;
left: 15%;
top: 65%;
margin: 0;
width: 50vh;
font-weight: bold;
font-style: italic;
color: #fff;
font-family: 'Didact Gothic', sans-serif;
}
<header id="showcase">
<div class="text">
<h1 class="text1">-20%</h1>
<h1 class="text2">Rabbat</h1>
<p class="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
<p class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
</div>
</header>
Use this in your head tag, and try not to use absolute positions for inner controls
<style>
p{
work-break: break-all;
}
</style>
I'm working on my portfolio, and I'm trying to add some bio text. I want everything to be aligned with my name. I've been successful at making a short tagline line up, but when I add a block with a lot of text, everything aligns to that block, or to the parent.
How can I restrict the width of the parent ( to that of the headline
I've put together a Codepen to demonstrate what I mean.
I'd preferably like to do it without JS
Snippet (doesn't look great in the small window):
header {
display: inline-block;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-contents {
margin: auto;
max-width: 920px;
}
header .header-contents .title {
display: inline-block;
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
.bio-text {
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-contents">
<div class="title">
First Lastname
<div class="tagline">
Tagline goes here
</div>
<!-- putting .bio-text here moves the tagline to the right margin -->
</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</header>
Try to use flex:
HTML:
header {
display: flex;
flex-direction: row;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-space {
flex: 1;
}
header .header-contents {
flex: 0;
margin: auto;
max-width: 960px;
}
header .header-contents .myname {
white-space: nowrap;
}
header .header-contents .title {
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
header .bio-text {
width: inherit;
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-space"></div>
<div class="header-contents">
<div class="title">
<div class="myname">
First Lastname
</div>
<div class="tagline">Tagline goes here</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</div>
<div class="header-space"></div>
</header>
Here's the challenge. I have a left-aligned text container (width: 40%;) that changes height with the window. I need my right half of the screen set as an image container (width: 60%) to which the image centers horizontally in the container, and vertically with the center of the text container.
Here is what my current code is doing:
Here is what I would like it to do:
I'm barely savvy in JS, so I'm trying to avoid it pending the need for tweaks. Here is my current code for the section:
.design-portfolio {
position: relative;
.web-img-container {
position: relative;
width: 60%;
margin-left: auto;
.web-img-lg {
img {
max-height: 40em;
}
}
}
.web-img-sm {
#media (min-width:75.063em) {
position: absolute;
visibility: hidden;
}
}
.web-design-box {
#media (min-width:75.063em) {
$font-title: 25px NexaBook;
$font-sub-title: 25px NexaHeavy;
$font-copy-title: 20px NexaHeavy;
$font-copy: 20px NexaBook;
position: relative;
width: 40%;
padding-right: 2em;
.size-fix {
position: relative;
}
.bg-box {
position: absolute;
background-color: $pink;
top: 2em;
bottom: 2em;
left: 0;
right: -2em;
}
.border-box {
position: relative;
border: .3em solid $black;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-top: 3em;
width: 60%;
margin-left: auto;
.h1 {
font: $font-title;
color: $white;
text-align: right;
}
.h2 {
font: $font-sub-title;
text-align: right;
}
.copy {
font: $font-copy;
color: $white;
text-align: left;
width: 100%;
height: 100%;
.h3 {
font: $font-copy-title;
color: $white;
text-align: left;
}
}
.copy p {
line-height: 1.2;
}
}
}
}
}
<section>
<div class="web-img-container">
<div class="web-img-lg">
<img src="assets/img/website-design.png" alt="web-design">
</div>
</div>
<div class="web-design-box">
<div class="size-fix">
<div class="bg-box"></div>
<div class="border-box">
<div class="h1">
my approach on
</div>
<div class="h2">
website design
</div>
<br>
<div class="copy">
<div class="h3">purpose</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="h3">simplicity</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="h3">mobile first</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</section>
I don't know how to set it up to run, as it's in SASS rather than regular CSS. :/
I'm having trouble trying to get the event-info class text to align to the right of the events calendar as a vertical list. Floating the events-list to the right seems to collapse my text altogether, which I don't want. Here is my HTML and CSS:
.workshop-events {
width: 100%;
background-color: #f2f2f2;
padding: 1px 20px;
/*padding: 20px;*/
}
.calendar {
width: 75px;
display: table-cell;
}
.calendar .month {
text-transform: uppercase;
font-size: 16px;
border: 1px solid #b2b2b2;
padding: 3px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.events-info {
font-weight: bold;
font-size: 14px;
}
<div class="workshop-events">
<h1 class="section-heading">WORKSHOP & EVENTS</h1>
<!-- EVENT CALENDAR -->
<div class="calendar">
<div class="month text-center">June</div>
<div class="day text-center">30</div>
</div>
<!--EVENTS CALENDAR-->
<div class="events-info">Lorem Ipsum</div>
<div class="events-info">Dolor Sit Amet Sed</div>
<div class="events-info">Libero</div>
<button class="view-all-events">VIEW ALL</button>
</div>
<!-- WORKSHOP AND EVENTS-->
You can simply float the calendar box to the left. For a better result, wrap all events-info + button into a container (to avoid the text to wrap to new lines below the calendar box, see the demo).
HTML updates:
<div class="events-container">
<div class="events-info">Lorem Ipsum</div>
<div class="events-info">Dolor Sit Amet Sed</div>
<div class="events-info">Libero</div>
<button class="view-all-events">VIEW ALL</button>
</div>
CSS updates:
.workshop-events {
overflow: auto; /*fix possible collapses caused by floating*/
}
.calendar {
float: left;
margin-right: 20px;
}
.events-container {
overflow: auto; /*prevent the text to wrap below the calendar*/
}
.workshop-events {
width: 100%;
background-color: #f2f2f2;
padding: 20px;
}
.calendar {
width: 75px;
display: table-cell;
}
.calendar .month {
text-transform: uppercase;
font-size: 16px;
border: 1px solid #b2b2b2;
padding: 3px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.events-info {
font-weight: bold;
font-size: 14px;
}
/*NEW RULES BELOW*/
.workshop-events {
overflow: auto;
}
.calendar {
float: left;
margin-right: 20px;
}
.events-container {
overflow: auto;
}
<div class="workshop-events">
<h1 class="section-heading">WORKSHOP & EVENTS</h1>
<!-- EVENT CALENDAR -->
<div class="calendar">
<div class="month text-center">June</div>
<div class="day text-center">30</div>
</div>
<!-- EVENTS INFO-->
<div class="events-container">
<div class="events-info">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="events-info">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="events-info">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<button class="view-all-events">VIEW ALL</button>
</div>
</div>
<!-- WORKSHOP AND EVENTS-->