I would like to float two divs on html page like that: http://5toneface.eu/temp/
(ignore php-warnings). But between ruutLeft and ruutRight div there is a small gap or white border-like stripe. How to get rid of it? so the ruutLeft and ruutRight divs sides would be side-to-side exactly?
html is:
<!DOCTYPE html>
<html lang="et">
<head>
<title>Dynamint</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<link rel="stylesheet" href="navistyle.css" type="text/css" >
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrp">
<div id="header"><?php include("includes/header.php"); ?></div>
<div id="container">
<div class="ruutLeft">ruutLeft</div>
<div class="ruutRight">ruutRight</div>
<div class="contentLeft"><?php include("includes/contentleft.php"); ?></div>
</div> <!-- end container -->
<footer id="footerTop"><?php include("includes/footer.php"); ?></footer>
<!-- siia tuleb veel footerbottom -->
<footer id="footerBottom">
<p id="bottomp">© 2015 by WAHT? mööbel. All rights reserved</p>
</div>
</div> <!--end wrp -->
</body>
</html>
and css for this is also pretty simple:
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri light, Georgia, Verdana, arial;
background-color: #edeff0;
font-size: 105%;
color: #303030;
line-height: 1.4;
margin: 0;
}
#wrp {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
width: 100%;
height: 96px;
position: fixed;
top: 0px;
background-color: #fff;
}
#logo {
float: left;
margin: 2% 0 0 5%;
}
#container{
width: 100%;
height: auto;
margin-top: 0;
background-color: #edeff0;
}
.ruutLeft {
width: 40%;
height: 320px;
margin-left: 10%;
margin-top: 145px;
background-color: #8AC0CA;
float: left;
}
.ruutRight {
width: 40%;
height: 320px;
margin-right: 10%;
margin-top: 145px;
background-color: #CCCBC9;
float: right;
}
.contentLeft {
width: 80%;
margin-left: auto;
margin-right: auto;
min-height: 400px;
padding: 1% 1% 4% 1%;
font-size: 95%;
height: auto;
}
Float both your elements left.
Change .ruutRight to float:left - This will fix the issue.
Related
I'm trying to make my first portfolio, but I encountered this problem that I can't manage to solve. I'm still trying to make all the elements resize correctly, but the navigation bar is my priority. Indeed, whenever I reduce the width of the page, the navigation bar goes up, out of the screen. Hopefully someone knows how to solve this, thanks in advance for your help . This is the code.
#import url(//db.onlinewebfonts.com/c/4aa3e37e571255737e5e6d4e9d9770a5?family=Rockwell);
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
}
.wrapper{
margin-left: auto;
margin-top: auto;
width: 100%;
}
body{
background-color: #222326;
}
.nav-bar{
margin-top: 100px;
transform: translateY(-870px);
background-color: #0C0C0D;
width: 380px;
padding: 18px;
border-radius: 50px;
margin-left: 33%;
}
.nav-bar>a{
text-decoration: none;
color: #3A3B40;
padding-left: 4%;
position: relative;
}
.nav-bar>a>h4{
display:inline;
font-family: 'Raleway', sans-serif;
}
.contactme-link{
border-right: 1px solid #88898C;
margin-left: 1%;
margin-right: 2%;
padding-right: 3%;
}
.skills-link{
border-right: 1px solid #88898C;
padding-right: 3%;
}
.myworks-link{
margin-left: 2%;
}
.bg{
background: url('background.jpg');
position: relative;
padding-right: 100%;
padding-bottom: 66.6%;
background-repeat: no-repeat;
background-size: contain;
z-index: -2;
border-radius: 0 0 70px 70px;
}
.layer{
background-color: rgba(34,35,38,.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 0 0 70px 70px;
}
.me{
margin-left: 25%;
margin-top: 20px;
transform: translateY(-870px);
}
.face{
background: url('face-bw.jpg');
background-repeat: no-repeat;
background-size: contain;
height: 590px;
border-radius: 60px;
margin-left: 75px;
width: 475px;
}
.black-box{
background-color: #0C0C0D;
width: 585px;
text-align: center;
padding: 25px 20px 25px 20px;
border-radius: 50px;
margin-top: -115px;
}
.black-box>h1{
color: #D9D9D9;
font-family: 'Rockwell', sans-serif;
font-size: 68px;
}
.black-box>h4{
font-family: 'Raleway', sans-serif;
font-size: 20px;
color: #3A3B40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Andrea Testini Portfolio</title>
</head>
<body>
<div class="wrapper">
<div class="presentation">
<div class="bg">
<div class="layer"></div>
</div>
<div class="nav-bar">
<a href="#contact-me" class="contactme-link">
<h4>CONTACT ME</h4>
</a>
<a href="#skills" class="skills-link">
<h4>SKILLS</h4>
</a>
<a href="#my-works" class="myworks-link">
<h4>MY WORKS</h4>
</a>
</div>
<div class="me">
<div class="face"></div>
<div class="black-box">
<h1>Andrea Testini</h1>
<h4>Programmer and Web Developer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
<!---->
Change width: 380px; to max-width: 380px; in .nav-bar and you will be fine
I am just working on a simple example to try to understand the behavior of absolute positioning elements. There is a case that I don't understand.
I have a container, with a card inside of it. I want to add a footer inside of this card, so I put another div inside of it, as follow :
<body>
<section id="experiences">
<div class="experiences-cards-container">
<div class="experience-card">
<div class="card-footer"></div>
</div>
</div>
</section>
</body>
As it is a footer, I want it to be displayed at the bottom of my card. That is the reason why I used absolute positioning to do so :
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
But it seems that the footer element does not get positioned according to its direct parent experience-card but to an indirect parent experiences-card-container, because I get the following result :
My question is : Why is the footer element positioned according to an indirect parent and not the card since it is a direct parent ?
Here is the full CSS :
html, body
{
height: 100%;
}
#experiences {
height: 100%;
background-color: #ECECEC;
}
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
height: calc(100% - 100px);
text-align: center;
margin: auto;
}
.experience-card {
position: "relative";
display: inline-block;
width: 280px;
height: 350px;
background-color: white;
margin-right: 20px;
box-shadow: 0px 0px 6px 0px #949494;
margin-bottom: 20px;
text-align: left;
}
.experience-card .card-body {
padding-left: 10px;
padding-right: 10px;
}
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
Take out the quotation marks in position: "relative"; in the .experience-card class and it should work. By making it relative, it will become the context for the absolute positioning in the footer.
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
html,
body {
height: 100%;
}
#experiences {
height: 100%;
background-color: #ECECEC;
}
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
height: calc(100% - 100px);
text-align: center;
margin: auto;
}
.experience-card {
display: inline-block;
width: 280px;
height: 350px;
background-color: white;
margin-right: 20px;
box-shadow: 0px 0px 6px 0px #949494;
margin-bottom: 20px;
text-align: left;
position: relative;
}
.experience-card .card-body {
padding-left: 10px;
padding-right: 10px;
}
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
right: 0;
}
</style>
</head>
<body>
<section id="experiences">
<div class="experiences-cards-container">
<div class="experience-card">
<div class="card-footer"></div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You can try this:
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
/* height: calc(100% - 100px); */
text-align: center;
margin: auto;
}
I want to place an image next to some text inside a div but the image was pushed into the next div below and won't move up no matter how much I increase the margin or padding. I want the center of the image to be where the tip of the arrow is in the picture:
Here's where the image is and where I want it to be
Here's the CSS and HTML:
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
}
.round-border{
border-width: 0px;
border-style: solid;
border-radius: 50%;
}
.portrait-image{
width: 25%;
margin-bottom: 120%;
}
h9 {
font-size: 142%;
margin: auto;
padding-right: 30%;
padding-top: 12%;
display: inline-block;
}
.header-bar{
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
h10 {
font-size: 142%;
margin: auto;
padding-right: 24%;
padding-top: 5%;
display: inline-block;
}
#image position {
position: relative;
z-index: 1;
margin-botton: 40%;
padding-bottom: 20%;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
img {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<body style="background-color: #5D6D7E;">
<div id="about" align="center" position="relative">
<h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h9>
<div class="header-bar"></div>
<h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h10>
<div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</div>
</body>
Any help would be greatly appreciated, thanks.
There were many things wrong with your code and I'm not sure where to begin. There are no h9 or h10 header tags. I would suggest using valid header tags and modifying the font-size according to your taste. Also, you can't have a class/id name separated by a space. So, "image position" will not work. Fixed it the best way I could.
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
box-sizing: border-box;
}
.round-border {
border-radius: 50%;
}
.portrait-image {
width: 25%;
}
.header-bar {
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
#image-position {
float: right;
margin: 15% 5% 0 0;
}
#text {
float: left;
width: 57%;
word-break: break-all;
margin: 5%;
}
.clearfix {
/*clear the floats here*/
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<body style="background-color: #5D6D7E;">
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<div id="about" class="clearfix">
<div id="text">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<div class="header-bar"></div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</body>
You can use CSS float. It is for elements that 'float' to the side of a text.
Try setting:
#image-position {
/* ... Your css here */
float: right;
}
More information here.
Use bootstrap to achive this, try the below code snippet.
<div class="container">
<div class="row">
<div class="col-md-8">
<p>
Your text goes here...
</p>
</div>
<div class="col-md-4">
<img src="">
</div>
</div>
</div>
I hope this helps,
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).