Attempting to have text over an image - javascript

I am trying to have a white round rectangle as the background in part of my website. I have attempted this with CSS, but I cannot get the round rectangle to stretch or shrink to the size of the div.
My other attempt is below using an img element. I can now get my image to stretch dynamically according to how much text is in the div BUT now I cannot place any text over it.
Do you know how I can get text to appear over my background in column 2?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body { background-color: red; }
.col1 { width: 20%; float: left; background-color: blue; }
.col2 { width: 60%; float: left; }
.col3 { width: 20%; float: left; background-color: yellow; }
#content { z-index: 10; }
#bk { z-index: 0; top: 0px; left: 0px; }
-->
</style>
</head>
<body>
<div class="col1">
abvdvf
</div>
<div class="col2">
<div id="content">
kjfdjkf
</div>
<img id="bk" src="i.png" width="100%" height="100%" /> <!-- Correctly resizes my picture but now I cant place any text over the pic -->
</div>
<div class="col3">
abvdvf
</div>
</body>
</html>

Try this as your #content CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
The technique is using a CSS3 rule called border-radius. You should look into it. Also, you don't normally need to set z-index.

The usual technique is to have four images for each of the rounded corners, and use CSS to place these on the edges of the box (you may need extra dummy divs to make this work.) Having the browser stretch an img is ugly, to say the least.

Related

How can I make my splitscreen responsive?

I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller.
Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.
Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.
I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.
My code: https://jsfiddle.net/rjtpvhn1/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="split a">text left</div>
<div class="split b">text right</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
font-size: 20px;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width: 100%;
height: 100%;
padding: 30px;
border: 1px solid;
overflow: auto;
}
.gutter {
cursor: e-resize;
height: 100%;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
}
JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)
Split(['.a', '.b'], {
gutterSize: 9,
sizes: [50, 50]
});

Content in Google Chrome larger than 16777216 px not being rendered

I recently discovered that my content in google chrome was not being rendered when it was longer than 16777216px in length.
jsfiddle
FULL HTML:
<html>
<head>
<style>
#content {
height: 16777316px;
position: relative;
font-size: 2em;
font-weight: 700;
}
#semi-hidden {
position: absolute;
bottom: 0;
background-color: #000000;
color: #ffffff;
height: 200px;
width: 50%;
float: left;
}
#hidden {
position: absolute;
bottom: 0;
background-color: #ffffff;
color: #000000;
height: 100px;
width: 50%;
float: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="content">Scroll Down ↓
<div id="semi-hidden"> The Bottom 100px of this DIV is not rendered. </div>
<div id="hidden"> This DIV is completly hidden. </div>
</div>
</body>
</html>
EDIT: This is due to Google Chrome not supporting layouts larger than 16777216 px.
Google Chrome represents laid out element positions using LayoutUnits, which can represent 1/64th the space of a signed int (2^31 / 64 integral values, or +/-16777216).
Google Chrome has no intention of supporting larger values in the near future.
Bug Report

Displaying a list over an image: the text goes to the right of it

I have an img element that I am using as the background of a navbar, I then will display the navigation links over the top of the img element. My problem as you will see in the images below is that the ul that holds the links get displayed to the right of the nav bar & not over it. Why does it do this & how can I get my links to be over the top of the img?
This is how it looks now: look at the white writting
This is how it should look
My code:
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } /* I am pretty sure the cause is because I use "inline" but I need it to position the navbar correctly to the left */
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; } /* Remove gap between navbar & content divs */
#contentImg { }
#navbar ul li { padding: 0; margin: 0; }
#navLinks { color: white; top: 0; left: 0; position: absolute; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- Error occurs here: the unordered list is displayed to the right of the nav bar instead
of where it should be which is inside the navbar -->
<ul>
<li id="navLinks">abcdef</li>
</ul>
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<img id="contentImg" src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/javascript">
<!--
window.onresize = setBackgroundImgWidth;
-->
</script>
</body>
</html>
you need to make the navbar background a background image to the div rather than an image that's part of the html. This is the cleanest way to display the image underneath the text. You can set a height and width in the css to the div to ensure the entire image appears as well.

Centre 2 Floating Elements

I have a relativly simple HTML layout where I have a heading div, then below that is a Main div that contains a NavBar on the left side & a ContentDiv on the right side.
My problem is that I cannot get my NavBar & ContentDiv to be displayed in the centre (horizontally) they always sit to the left (so NavBars x position is zero).
Do you know why they(the NavBar & ContentDiv) sit to the left & not centred?
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { display: inline; }
#navBar { height: 700px; }
#content { height: 700px; }
/* The above code displays the navbar above the content div but both
elements are centred
*/
/* The below code gets the navbar to be displayed to the left of the
content div which is what I want but now the 2 elements are not centred
they are on the left of the screen
How do I get them centred?
*/
#navBar { float: left; height: 700px; }
#content { float: left; height: 700px; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- This is the background image for this element, I know, I know I shd use CSS but it doesn't resize the images that way -->
<img src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<!-- This is the background image for this element -->
<img src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1000px"/>
</body>
</html>
Try this:
#navBar { display: inline; height: 700px; }
#content { display: inline; height: 700px; }
#main { margin: 0 auto; }
EDIT:
Updated code. I'm not sure if it's what you're looking for or not.
the last two css statements say float: left. thats why they're on the left =)
edit:
ah okay.... do i see that right: you want the nav left of the content, but both together should be centered?

CSS column devilry: a sticky div with an auto-stretching div in between it?

I should start by saying I have researched this question. I can't find any identical questions or ones which do what I'm after.
I'd like to be able to put some content at the bottom left of the page, and then have a div above that which automatically stretches itself to use all the space between the top of the page and the content at the bottom left, even when the user resizes the window.
Please see the image below.
I position the bottom-left content with position: absolute; bottom: 10px;, which works. So then I would ideally have the div above it automatically stretch to fill the big gap (i.e.):
[stretchy_div_height] = [100%] - [height_of_bottom_div] - [bottom_div_margin].
Ideally I would like to do this without JavaScript if possible. But either way is fine. I can't use faux columns for the height-stretching div (I need real content all the way down).
Thank you!
Here is an image of what I'm aiming to achieve:
See: http://jsfiddle.net/zSeLS/
CSS:
html, body {
margin: 0;
padding: 0
}
#left {
position: absolute;
left: 10px;
top: 10px;
bottom: 60px;
width: 120px;
background: #ccc
}
#leftButton {
position: absolute;
left: 10px;
bottom: 10px;
height: 40px;
width: 120px;
background: #f0f
}
#content {
margin: 10px 10px 10px 140px;
background: #999
}
HTML:
<div id="left"></div>
<div id="leftButton"></div>
<div id="content">
some content<br />
..
</div>
thirtydot's solution is good, but sometimes I find absolute positioning of the containing elements to be a little too inflexible, e.g. if you want to center your layout. You can still make it work that way, but as an alternative, you can float the relevant elements.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
height:99%;
width:800px;
margin:0 auto;
padding:0;
}
#left-top {
position:relative;
float:left;
width:200px;
height:100%;
background:#ffcccc;
}
#left-bottom {
position:absolute;
bottom:0;
width:200px;
height:20px;
background:#ccffcc;
}
#right {
float:left;
width:600px;
background:#ccccff;
}
</style>
</head>
<body>
<div id='left-top'>
<p>Left</p>
<div id='left-bottom'>Bottom</div>
</div>
<div id='right'>
<p>Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content</p>
</div>
</body>
</html>
You have to create a div which will include both the div for the left column and its footer..
like
<div id="content">
<div id="left">
<div id="columnleft></div>
<div id="footerleft"></div>
<div>
<div id="right"></div>
<div>
did you try it already?

Categories