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,
Related
I want to add text on top of two images and then place them side by side. I tried do this in the following way:
#main {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#front-header {
font-family: "Linux Biolinum";
font-size: 42pt;
line-height: 0pt;
font-weight: bold;
text-align: center;
}
#PI {
font-family: "Linux Libertine";
font-size: 22pt;
line-height: 0pt;
font-weight: normal;
font-style: normal;
text-align: center;
color: red;
}
#copyright {
font-family: "Latin Modern Mono";
font-size: 10pt;
line-height: 0pt;
font-weight: normal;
text-align: center;
}
#meerkat {
width: 18cm;
height: 14cm;
}
#salt {
width: 17.5cm;
height: 14cm;
}
#figu {
display: inline-block;
float: left;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#container {
height: 17.5cm;
width: 14cm;
float: left;
position: relative;
}
#images {
position: relative;
float: left;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 50px;
top: 50px;
}
.image {
position: relative;
float: left;
/* optional */
}
.image .text {
position: absolute;
top: 10px;
/* in conjunction with left property, decides the text position */
left: 10px;
width: 300px;
/* optional, though better have one */
}
<body style=" height: 723.09px;">
<p id="front-header">Learning HTML</p>
<p id="PI">Author:TH</p>
<p>
<br>
</p>
<p>
<br>
</p>
<div>
<img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">
<div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;">
<h1 style="color:white;">Hello World!.</h1>
</div>
</div>
<br>
<div>
<p id="copyright">Created Today</p>
</div>
</body>
I want to add text on top of the figures named "meerkat.jpg" & "salt-1.jpg". After that I want to place them side by side.
Please suggest. Thanks.
There are several solutions to achieve this and this is my take. I make use of the display: flex; property that is being explained at MDN. Examining the code in your question, I expect that you don't have that much experience in CSS, so I got rid of all the code and made a clean example.
When you set an image as background-image, you can just add an <hX> element inside of it to add the text on top of the image.
Another solution I provided is in the second row and makes use of position: relative; and position: absolute; together with an inline image. Setting the container to relative and the text that's inside of it to absolute will only affect the text inside the div.
You could also use float, but this can cause problems to your layout.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.image-wrapper {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
flex: 1;
width: 50%;
height: 300px;
border: 2px solid red;
/* Only to show that there are two images */
}
.image-wrapper h1 {
color: #fff;
margin: 0;
}
.container-position {
margin-top: 100px;
}
.image-wrapper-position {
position: relative;
flex: 1;
width: 50%;
}
.image-wrapper-position h1 {
position: absolute;
left: 20px;
top: 20px;
color: #fff;
margin: 0;
padding: 0;
}
<div class="container">
<div class="image-wrapper">
<h1>This is text</h1>
</div>
<div class="image-wrapper">
<h1>This is text on top of image</h1>
</div>
</div>
<div class="container container-position">
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
</div>
Use the following code as a guide for your website. Alter the width and height in <img> to suit you.
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
float: left;
width: 500;
height: 500;
margin: 50px;
border: 1px solid 0;
}
</style>
</head>
<body>
<h2>Text appearing above images</h2>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
</body>
</html>
Basically, when I try to add a paragraph into one of the <div>'s I run into trouble. The page seems to be messed up. Is there anything wrong with my code? And, what are some things that my code needs to be improved?
Thanks!
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
left: 676px;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
First of all, you have commas in your HTML, which is incorrect.
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left" class="wot">
<p>Test</p>
</div>
<div id="right" class="wot">
</div>
</div>
Second, the heights of the divs with the text in is set to 100% and the height of you #content div set to 1500px so the divs expand to this full height. The height of a div is only applied when it contains content which is why it changes when you put text in. You can remove the height from the CSS, or set it to a more appropriate value.
Two of your <div>s have commas separating the properties. Properties in html tags do not need to be separated by commas. They should just be separated by a space (this probably isn't even required, but you should do it in the interest of good style).
I'm going to assume the improper indentation is a result of posting the code, but if that's not the case, proper indentation is always a good way to improve your code.
I have change the following CSS code css
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
Hello i have a problem with my images in divs.
jsFiddle
.navbar {
position: fixed;
z-index: 1000;
height: 100%;
width: 60px;
left: 0px;
top: 0px;
background-color: #2e2d2d;
border-right: 1px solid #c6c5c5;
}
#works {
position: relative;
margin-left: 60px;
height: 100%;
}
.left {
position: relative;
width: 50%;
float: left;
}
.right {
position: relative;
height: 100%;
width: 50%;
float: left;
}
#works .up {
width: 100%;
height: 50%;
}
.up h1 {
font-family: ralewayregular;
text-transform: uppercase;
text-decoration: none;
font-size: 10px;
padding: 10px 15px;
}
.up h2 {
font-family: ralewayregular;
font-size: 5pt;
padding: 1px 15px;
}
.down_1 {
float: left;
width: 50%;
height: 50%;
}
.down_2 {
float: left;
width: 50%;
}
<div class="navbar">
<a class="menu-trigger"></a>
</div>
<section id="works">
<div class="all">
<div class="left">
<img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%">
</div>
<div class="right">
<div class="up">
<h1>bl bla</h1>
<h2>/asdasda <br /> as : VENEZIA
/ SELLEKTOR / SUGARPILLS / NIKKI LISSONI</h2>
<div class="arrow"></div>
</div>
<div class="down_1">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" />
</div>
<div class="down_2">
<img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" />
</div>
</div>
</div>
</section>
Div left must have the same hight like div right. Both should end in one line.
How to do this without giving them hight, to not strech my images? Div up and down should have 50% height but its not working.
Someone can help me solve it?
For them to to be the same height, there most be some measure, strict height or min-height.
For the height to measure, do something like:
.left, .right {
width: 100%; /* Adjust as needed */
min-height 50%; /* best to be the same as what you assume would
be the height of the taller both DIV's so that nothing will be cut off */
}
For your image not to be distorted, do something like:
.right img, .right img, {
width: 100%;
height: auto; /* Set the height to auto to give the
image a breathing space to reduce distortion */
}
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}
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