I faced the problem with white-space: pre-line in my layout. When I wrap content in a div element it works just fine, but when I replace div with table text is no longer wrapping. This is only small part just to show the case. In original code it would be hard to replace this outer table. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
border: 1px dashed red;
font-size: 12px;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0 auto !important;
padding: 10px;
width: 600px;
}
.document-preview {
border-spacing: 0;
width: 100%;
}
.document-preview .content-details-row {
padding: 0 2px 0 162px;
position: relative;
white-space: nowrap;
z-index: 1;
}
.document-preview .content-details-row span:first-child {
display: block;
float: left;
margin: 0 2px 0 -160px;
overflow: hidden;
width: 160px;
z-index: 2;
}
.document-preview .content-details-row span:first-child:after {
content: "..............................................................................";
font-weight: lighter;
font-size: 10px;
letter-spacing: 2px;
}
.document-preview .content-details-row .content-details-value {
display: inline-block;
width: 100%;
z-index: 2;
}
.document-preview .content-details-row .content-details-value > div {
white-space: pre-line;
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="document-preview"><tbody><tr><td>
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Doesn't work: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</td></tr></tbody></table>
<hr />
<div class="document-preview">
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Works: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</div>
</body>
</html>
Working sample: http://jsfiddle.net/UPXzt/1/
Thanks in advance.
add this style to your page
table {
table-layout: fixed;
}
sample:
http://jsfiddle.net/UPXzt/10/
Try this demo
just add width to the div
.document-preview .content-details-row .content-details-value > div
{
width: 430px;
white-space: pre-wrap !important;
word-wrap: break-word;
}
Related
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.
I have a div, like this:
<div id="div1" name="div1" style="display:none;">
hello world
</div>
Thats on the bottom of my page. Now, when putting the mouse on an image, I want to show that div below the image. The problem is, I have 10 images next to each other and the div should be displayed below each of them dynamically, meaning putting the mouse on image 6 should display the div below image 6.
How can I do that?
Thanks!
This could be an approach if you want to use jQuery and want to move the div inside your DOM:
$(function() {
var div1 = $('#div1').remove();
$('img')
.bind('mouseenter', function() {
$(this).parent().append(div1);
})
.bind('mouseleave', function() {
div1.remove();
});
});
This can be accomplished by only CSS here is an working example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
img {width: 125px;}
#page-wrap { width: 125px; margin: 62px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; width: 125px;}
a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; }
a .name { font: 12px Georgia, Serif; width: 125px; display: none;}
a:hover .name { color: #900; font-weight: bold; position: relative; display: block;}
a:hover img { border: 1px solid #000; margin: 0px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#toby .photo { top: 0; left: 0; position: relative;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="people">
<a href="#toby" id="toby">
<div class="photo">
<img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" />
</div>
<div class="name">Toby Yong<br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table.
</div>
</a>
</div>
</div>
</body>
</html>
Here is jsfiddle of it: http://jsfiddle.net/Ek4Ej/
Code is based on this article: http://css-tricks.com/remote-linking/
you can easily add more images with this effect on page or apply any style to it.
try this DEMO
$(function() {
$("#main").on("hover",".img img", function(){
pos = $(this).offset();
$(".box").css({"left":pos.left,"top":(pos.top + $(this).height())});
$(".box").show();
});
});
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the
<span id="usernav">Logout<a href="#">My Profile</span>
from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)