Could someone explain me why text goes out of div? And I cannot center vertically.
Why it's out of ul list box?
.experience-section {
padding: 0 25px;
}
.experience-section .figure {
font-family: 'Garamond-Italic';
background: url('../img/x.svg') no-repeat;
background-size: 100%;
height: 283px;
width: 283px;
}
.experience-section .figure ul li:first-child {
font-size: 193px;
}
.experience-section .figure ul li:nth-child(2) {
font-size: 80px;
letter-spacing: 0.2em;
margin-top: 23px;
}
<div class="col-md-4">
<div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
<div class="figure">
<ul>
<li>15</li>
<li>years</li>
</ul>
</div>
<h3>Our words talk about experience</h3>
<p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
</div>
</div>
image here
.experience-section {
padding: 0 25px;
}
.experience-section .figure {
font-family: 'Garamond-Italic';
background: url('../img/x.svg') no-repeat;
background-size: 100%;
height: auto;
width: 283px;
}
.experience-section .figure ul li:first-child {
font-size: 193px;
}
.experience-section .figure ul li:nth-child(2) {
font-size: 80px;
letter-spacing: 0.2em;
margin-top: 23px;
}
<div class="col-md-4">
<div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
<div class="figure">
<ul>
<li>15</li>
<li>years</li>
</ul>
</div>
<h3>Our words talk about experience</h3>
<p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
</div>
</div>
The size of the font is less than the div height but due to the default value of line-height, the text goes out of Div.
the reason is you hardcoded a height:283px to .experience-section .figure. Since the font size is high, it was overlapping.you can set height auto to fix it.
Related
I'm creating a dating site to learn web dev and I don't know how to make background-color work, it just doesn't on specific divs. What should I change? I tried a lot of things but nothing happened.
Adding lorem ipsum so I can ask this question... just skip this
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut felis magna. Cras lectus sapien, porttitor quis elit id, lacinia pellentesque urna. Fusce gravida felis sit amet purus mattis, sed faucibus turpis hendrerit. Integer convallis sagittis pulvinar. Curabitur tristique faucibus lorem iaculis egestas. Vivamus vitae lacus placerat, efficitur diam et, volutpat augue. Cras at purus vitae neque ultricies iaculis. Maecenas pellentesque ipsum nisi.
My code:
* {
padding: 0;
margin: 0;
color: black;
}
body {
overflow: hidden;
}
.container {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 95%;
height: 750px;
}
nav {
display: flex;
justify-content: space-between;
font-family: 'Pattaya', sans-serif;
font-size: 39px;
}
.logo {
cursor: pointer;
margin-top: auto;
margin-bottom: auto;
}
.menu {
margin-top: auto;
margin-bottom: auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 30px;
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
nav ul li a:hover {
background-color: #ede;
border-radius: 10px;
}
.circle {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(600px at right 800px);
}
.circlebig {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(940px at left);
}
.content {
display: flex;
justify-content: space-between;
font-family: 'Rubik', sans-serif;
font-size: 56px;
}
.text {
transform: translateY(25%);
}
.love {
font-size: 70px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 400s linear infinite;
}
#keyframes move {
to {
background-position: 4500vh;
}
.freeplan {
z-index: 3;
display: block;
background-color: #666 !important;
}
.paidplan {
z-index: 3;
display: block;
background-color: #35f !important;
}
<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#1,300&display=swap" rel="stylesheet">
<main>
<div class="container">
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<ul>
<li> ⁣ ⁣ Plans ⁣ ⁣ </li>
<li> ⁣ ⁣ About ⁣ ⁣ </li>
<li> ⁣ ⁣ Login ⁣ ⁣ </li>
</ul>
</div>
</nav>
<section class="content">
<div class="freeplan">
Freeplan
<img src="img/kiss.png">
</div>
<div class="paidplan">
Paidplan
<img src="img/kiss.png">
</div>
<img src="img/kiss.png">
</section>
<div class="circle"></div>
<div class="circlebig"></div>
</div>
</main>
You didn't close the curly brackets:
#keyframes move {
to {
background-position: 4500vh;
} // <==
}
I think you may miss the '#keyframes' curly bracket. please replace the #keyframes' as like my code.
#keyframes move {
to {
background-position: 4500vh;
}
}
I am trying to get images to keep the same ratio when they are placed in a div, next to text.
This is what it currently looks like. As you can see the images are stretched to how high the div is that contains the text next to it.
This is the HTML:
<body>
<div id="content" class="content">
<div id="title" class="title">
Sports
</div>
<nav class="nav_bar">
<ul>
<li>Home</li>
<li class="active">Sport</li>
<li>Academics</li>
<li>Other</li>
<li>Stats</li>
</ul>
</nav>
<div id="page_description" class="page_description">
One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
</div>
<div id="gym" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/gym.jpeg" class="pic" alt="The Gym logo"/>
</div>
</div>
<hr class="hr_divider">
<div id="5-aside" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
5 Aside Footy
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/5-aside.jpeg" class="pic" alt="5 Aside"/>
</div>
</div>
<hr class="hr_divider">
</div>
</body>
And here is the CSS:
.page_description {
background-color:rgba(555,555,555,0.5);
width: 40%;
margin-left: auto;
margin-right: auto;
font-size: large;
border-radius: 8px;
margin-bottom: 2%;
}
.main_container {
width: 40%;
margin-left: auto;
margin-right: auto;
/* overflow: hidden; */
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
display: flex;
/* margin-bottom: 5%; */
}
.other_div {
float: left;
min-width: 60%;
max-width: 60%;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
.activity_title_hours{
display: flex;
}
.activity_title {
float: left;
font-size: 35px;
text-decoration: underline;
height: 100%;
/* width: 50%; */
line-height: 40px;
}
.activity_hours {
float: left;
font-size: 25px;
min-height: 100%;
line-height: 40px;
text-align: left;
}
.pic {
float: right;
/* min-width: 35%; */
box-sizing: border-box;
margin-top: 1%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
padding-top: 5%;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.activity_description p {
font-size: 20px;
}
hr {
border-width: 2px;
}
.hr_tag {
width:40%;
margin-left: auto;
margin-right: auto;
}
.hr_divider {
width: 40%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.hr_title_divider {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.title {
text-align: center;
text-decoration: underline;
font-size: 45px;
padding-bottom: 1%;
padding-top: 1%;
color: white;
}
.content {
height: 100%;
width: 100%;
text-align: center;
display: inline-block;
}
How can I stop the images from stretching like they currently do?
Thanks
In your rule for .pic, change height: 100%; to height: auto;
I want the left li elemts to be at the same level with the ones in the right, here is the code: https://jsfiddle.net/v5m6cv1u/
<div class="menu">
</p>Code too long<p>
</div>
.menu h2 {
text-align: center;
font-size: 4vh;
text-transform: uppercase;
}
.menu h3 {
font-size: 3vh;
color: darkblue
}
.menu h4 {
padding: 0.2em 0em;
}
.menu .content {
padding: 3em 5em;
}
.ipsum {
list-style: none;
padding-bottom: 1em;
border-bottom: 1px solid #000000;
}
.menu p {
font-size: 1em;
}
.menu .vitae {
text-align: right;
color: brown
}
.meniu .vitae:after {
content: " VIT";
}
.menu .magna {
text-align: right;
color: darkslateblue;
font-size: 1.2em;
}
.menu .magna:after {
content: " MAG";
}
.menu ul {
columns: 2;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
}
.menu ul li {
display: inline-block;
}
.menu {
background-color: #FFFAE7;
}
.menu h1 {
color: #d00807;
font-size: 6em;
display: block;
text-align: center;
padding-top: 0.2em;
padding-bottom: 0.1em;
text-transform: uppercase;
}
<div class="menu">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum dolor sit amet, et denique molestiae sit. </h2>
<div class="content">
<h3>Lorem</h3>
<ul>
<li class="ipsum dolor">
<h4>Dolor</h4>
<p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p>
<div class="vitae">9.5</div>
<div class="magna">320</div>
</li>
<li class="ipsum sit">
<h4>Sit</h4>
<p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p>
<div class="vitae">9.5</div>
<div class="magna">320</div>
</li>
<li class="ipsum amet">
<h4>Amet</h4>
<p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p>
<div class="vitae">9.5</div>
<div class="magna">320</div>
</li>
</ul>
</div>
</div>
Instead of using columns on the ul, you could use this CSS on the lielements (it results in a different order, I don't know if that's okay for you?):
.menu ul li {
display: inline-block;
width: 45%;
box-sizing: border-box;
margin-right: 4%;
}
https://jsfiddle.net/w6br9r69/2/
Easy solution would be to make the element inline-block
.ipsum {
[...]
display: inline-block;
}
Hello I have made a website where people can get information on various topics. I spent all day yesterday adding in Rectangles to the background to make the site look slightly nicer. Last night I looked at the site on my phone and saw that the rectangles were not lined up correctly like they should be and the way they are on PC. I dont have enough reputation to post Images so I'll describe the problem.
On pc a rectangle is drawn behind one block of text and a rectangle is drawn behind an image. On the phone the image has the rectangle behind it but the text only has part of the rectangle behind it. Its as if they wont line up or the text is being re-formatted or something. The site name is omicrome.com if you want yo see for yourself. Here's the code that takes care of the part of the site with the problem.
<div class = "container_24">
<header>
<div id = "rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id = "rect0"></div>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div id = "rectIndexContact"></div>
<div id = "contactblock">
<h6>Contact</h6>
<center>Email</center>
<center>Twitter</center>
</div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p><p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
Here is the CSS:
#rect1{
position: absolute;
margin-top: 10px;
margin-left: -6px;
width: 750px;
height: 208px;
background: #ffffff;
z-index: -1;
}
#rect2{
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6{
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner{
background: url(../img/rectoday.jpg) no-repeat;
width:695px;
height:250px;
margin-top: 10px;
clear:both;
}
.callout{
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width : 250px;
height:250px;
margin: -250px 710px 22px;
float: left;
}
header{
overflow: hidden;
}
header h1{
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width : 220px;
height:60px;
margin: -10px 5px 22px;
float: left;
}
nav{
float: right;
padding-top:10px;
margin-right: 09px;
}
nav li{
display: inline;
}
li{
margin-left: 24px;
}
nav a{
text-transform: lowercase;
}
.grid_4{
}
.grid_3{
margin-left: 60px;
}
a{
color:#7e7e7e;
text-decoration: none;
}
a:hover, .selected{
color: black;
}
a:.selected{
color:black;
}
p{
font-size: 13px;
line-height: 20px;
color: #353535;
}
The rectangles are just with the id "rect1" or "rect0". Here is a link to the screenshots: https://drive.google.com/open?id=0B5JL3GH0xtHPMzVESWhSb1JDa0k and https://drive.google.com/file/d/0B5JL3GH0xtHPdUZSZm1ZMlFYWGs/view?usp=sharing How can I make the rectangles match up with the text and images the same way on pc's and phone's? Thanks -Jack.
UPDATE:
Created another example for clarification: jsfiddle updated.
There are two cases in the example below, the first one uses a wrapper like I am recommending, and the second one uses a rectangle using position absolute and fixed height like you are using. Check it out in different viewports and see what happens.
HTML:
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
</div>
<div class="rect1"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
CSS:
.wrapper {
background-color: #7DF481;
padding: 10px 20px;
}
.rect1 {
position: absolute;
top: 140px;
background-color: #ff0000;
height: 90px;
width:100%;
z-index: -1;
}
EDIT:
You should read more about responsive design, you could use a framework like Bootstrap. There's also media features that limit the stylesheet's scope, you can read more about that here: Using Media Queries.
The problem is that you are relying on a fixed height for your rectangles. The text will try to fit in the viewport of your device, making your container have a higher height. I recommend you using a wrapper instead of fixed rectangles. Here's an example: jsfiddle
HTML:
<div class="container_24">
<header>
<div id="rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id="rect0"></div>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1">
<div id="rectIndexContact"></div>
<div id="contactblock">
<h6>Contact</h6>
<a href="mailto:crew#omicrome.com" class="button" id="contactEMAIL">
<center>Email</center>
</a>
<a href="https://twitter.com/Error404inSpace" class="button" id="contactTwitter">
<center>Twitter</center>
</a>
</div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p>
<p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
</div>
CSS:
#rect1 {
background-color: #ffffff;
padding: 10px 20px;
}
#rect2 {
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6 {
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner {
background: url(../img/rectoday.jpg) no-repeat;
width: 695px;
height: 250px;
margin-top: 10px;
clear: both;
}
.callout {
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width: 250px;
height: 250px;
margin: -250px 710px 22px;
float: left;
}
header {
overflow: hidden;
}
header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width: 220px;
height: 60px;
margin: -10px 5px 22px;
float: left;
}
nav {
float: right;
padding-top: 10px;
margin-right: 09px;
}
nav li {
display: inline;
}
li {
margin-left: 24px;
}
nav a {
text-transform: lowercase;
}
.grid_4 {}
.grid_3 {
margin-left: 60px;
}
a {
color: #7e7e7e;
text-decoration: none;
}
a:hover,
.selected {
color: black;
}
a:.selected {
color: black;
}
p {
font-size: 13px;
line-height: 20px;
color: #353535;
}
I have a jQuery tools scroller set up with controls managing two separate divs of info - one images, the other related text that needs to sit over the top of the images with a transparent bg image. I am using z-indexing to achieve this and am aware of IE's issues with this but am unable to sort it (tested in IE6-8). Image of the issue below:
http://test.shakingpaper.com.au/not_working.png
It seems that the overlayed div is taking on the containers white. Try as I might, I can't resolve this. HTML/CSS code below:
<div id="content">
<div id="nav"></div>
<div class="s4 slideshow">
<div>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
</div>
<div>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
</div>
<div>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
</div>
</div>
<div id="overlay_bg"></div>
<div class="s4 information">
<div>
<h1>Support</h1>
<p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
<p>Support Us</p>
</div>
<div>
<h1>Events</h1>
<p>Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
<p>Read More</p>
</div>
<div>
<h1>Regional</h1>
<p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
<p>Support Us</p>
</div>
</div>
</div> <!-- end of content -->
#content {
height: auto;
min-height: 300px !important;
overflow: hidden;
position:relative;
margin-left: 27px;
width: 770px;
padding-bottom: 43px;
}
#nav {
width: 60px;
z-index: 10000;
position: absolute;
top:340px;
left: 28px;
}
.s4 {
width: 770px;
height: 370px;
overflow: hidden;
}
#nav a {
background-color: transparent;
background-image: url(images/transition.png);
background-position: 0 0;
text-indent: -1000em;
width: 10px;
height: 10px;
display: block;
float: left;
margin-right: 5px;
}
#nav a.activeSlide {
background-position: 0 -10px;
}
#overlay_bg {
background: url(images/soild_block.png) no-repeat;
width: 318px;
height: 339px;
z-index: 5000;
position: absolute;
top: 28px;
}
.information {
position: absolute;
top: 60px;
left: 28px;
z-index: 16000;
width: 290px;
height: 260px;
color: #FFF;
}
.information h1 {
font-size: 50px;
font-style: italic;
text-transform: uppercase;
}
.information p {
font-size: 17px;
line-height: 27px;
margin-top: 37px;
}
.information a {
font-size: 13px;
padding-bottom: 2px;
border-bottom: 1px solid;
color: #FFF;
text-transform: uppercase;
font-style: italic;
}
.information a:hover {
color: #000;
}
Any help would be greatly appreciated.
Does this happen in every browser or just IE 6? I tested your code in IE 7 & 8 and it appears to overlay the transparent div fine. In IE 6 I have issues like what your image link looked like. If it is only in IE 6 then I would say that it is the transparent png you are using as your background. There are some Java hacks that you can use to fix this issue. Here is a pretty good source I have used before to fix this issue:
http://homepage.ntlworld.com/bobosola/pnghowto.htm