I made 3 kinds of div's, 2 on the left side and one on the right side using float. Now I want automatically that my div text comes under my img div but I cannot get it working with 20 pixels. I have looked around for a bit on stackoverflow but couldn't find the
right answer, also most posts are 2-3 years old. I was wondering if someone could help me out?
Visit problem
HTML:
<body>
<div id="content">
<div class="b1"> </div>
<div class="b2"> </div>
<div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>
</body>
CSS:
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
}
.b1 { /*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
float: left;
position: absolute;
}
.b2 { /*big img div*/
background-color: blue;
height: 600px;
width: 470px;
float: right;
}
.b3 { /* text div*/
background-color: #14495e;
color: #6d6f6f;
margin: 0;
height: 290px;
width: 470px;
padding: 4% 6% 0;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
}
h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
Thanks for the help!
Your #content block has a fixed width and the child elements .b1, .b2, .b3 all have specific widths and heights. This is a perfect layout for absolute positioning.
Try the following:
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
position: relative;
}
.b1 { /*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
position: absolute;
top: 0;
left: 0;
}
.b2 { /*big img div*/
background-color: blue;
height: 600px;
width: 470px;
position: absolute;
top: 0;
right: 0;
}
.b3 { /* text div*/
background-color: #14495e;
color: #6d6f6f;
margin: 0;
height: 290px;
width: 470px;
padding: 20px;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
position: absolute;
top: 310px;
left: 0;
box-sizing: border-box;
}
h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
<div id="content">
<div class="b1"> </div>
<div class="b2"> </div>
<div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>
</div>
Remove position:absolute from b1 class
Like this?
HTML
<body>
<div id="content">
<div id="left">
<div class="b1"> </div>
<div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>
</div>
<div id="right">
<div class="b2"> </div>
</div>
</body>
CSS
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
}
#left, #right {
float: left;
}
.b1 { /*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
}
.b2 { /*big img div*/
background-color: blue;
height: 600px;
width: 470px;
}
.b3 { /* text div*/
background-color: #14495e;
color: #6d6f6f;
margin: 0;
height: 290px;
width: 471px;
padding: 4% 6% 0;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
}
h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
Basically I put the two divs you want to appear on the left in a div called #left and the one div you want to appear floated next to it in a div called #right, and then floated those two divs next to each other. Then the two divs in the #left div will naturally appear one under the other.
Fiddle: http://jsfiddle.net/v8kfc38h/4/
Change your CSS to the following:
body {
background-color: #efede7;
line-height: 1.5;
}
#content {
background-color: #fff;
width: 962px;
margin: 0 auto;
}
.b1 {
/*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
float: left;
/*position: absolute; removed, not required*/
}
.b2 {
/*big img div*/
background-color: blue;
height: 600px;
width: 470px;
float: right;
}
.b3 {
/* text div*/
background-color: #14495e;
color: #6d6f6f;
height: 290px;
width: 355px; /*changed, because padding adds up to form total width of 470px*/
padding: 4% 6% 0;
font-size: 1.0625em;
font-family:'ProximaNova', sans-serif;
float:left; /*added*/
}
h3 {
margin: 0;
padding: 0;
font-family:'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
Working DEMO.
Thanks for helping me! I found it also just out with a classmate from me =]
Marc Audet did get the closed to the answer thanks for it!
My solution HTML:
<body>
<div id="content">
<div class="b1"> </div>
<div class="b2"> </div>
<div class="b3"><p><h3>Wildlife</h3>
Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
</div>
</body>
My solution CSS:
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
}
.b1 {
background-color: #34495e;
height: 290px;
width: 470px;
float: left;
}
.b2 {
background-color: blue;
height: 600px;
width: 470px;
float: right;
}
.b3 {
background-color: #fff;
color: #6d6f6f;
margin-top: 20px;
height: 250px;
width: 430px;
padding: 20px;
float: left;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
Thanks for the help everyone!
Greetings,
FlatDesigner
Related
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I have problem with styling my html. I have HTML and CSS that looks like this:
HTML:
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
Your Result
</h2>
</div>
</div>
</div>
CSS:
.summary .scores .score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.summary .scores .score-name {
color: blue;
float: left;
line-height: 30pt;
font-size: 30pt;
}
.summary .scores .score-box {
float: right;
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 60pt;
text-align: center;
}
.summary .scores.distribution-hidden .score-box {
width: 160pt;
}
Now I want to add divided div under this score box. It should look like this:
Here is link to jsfiddle: https://jsfiddle.net/k666a9wu/
I was trying to do this but it always looks ugly. How can I do this with css?
Man, you are already doing it right.
* {box-sizing: border-box;}
.summary {
.scores {
.score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.score-name {
margin: 0;
color: blue;
line-height: 30pt;
font-size: 20pt;
overflow: hidden;
width: 215px;
span {
font-size: 10pt;
float: left;
width: 30%;
border: 3px solid;
margin-left: -1px;
padding-left: 3px;
padding-right: 3px;
&:first-child {
width: 70%;
margin-left: 0px;
padding-left: 0;
}
}
}
.score-box {
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 215px;
text-align: center;
}
&.distribution-hidden {
.score-box {
width: 160pt;
}
}
}
}
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
<span>Fall '13</span>
<span>50%</span>
</h2>
</div>
</div>
</div>
Preview
Output: http://jsbin.com/sasawofuda
I have a container I want to make a h2 appear aligned to the center with a slight line behind it. What I can't do is to make the line go behind the h2 box. No matter what I try, it keeps crossing over the h2 box.
Here goes a sample of what I need to accomplish:
Any help appreciated.
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
The css I'm using is:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 15px;
position: absolute;
}
I made a sample. check my jsfiddle http://jsfiddle.net/amitv1093/r3arp2m8/
html
<div class="container">
<h2> h2 </h2>
<div class="line"> </div>
</div>
css
.container
{
position:relative;
text-align:center;
background:#d9d9d9;
z-index:-99;
padding:12px 0px;
}
h2
{
width:100px;
background:grey;
height:50px;
text-align:center;
margin:0px auto;
line-height:50px;
}
.line
{
position:absolute;
width:100%;
height: 1px;
background: red;
top:50%;
margin:1px 0px;
z-index:-9;
}
h2 { //other props position: relative; }
alignment will be dynamic as container height
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
top: 50%;
position: absolute;
z-index: 1;
}
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
Try adding this:
h2 {
position: absolute;
left:0;
right:0;
margin:auto;
}
.line-section-header {
margin-top: 50px;
position: absolute;
}
Try changing this in css:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
margin-left: 420px;
z-index: 2;
position: absolute;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
position: relative;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 70px;
position: absolute;
z-index: 1;
}
I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it
x
using #close in a link like this makes your browser jump to that ID
Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;