I have a square div (called "square") and trying to put another div ("caption") inside the "square". But the caption goes outside the square boundaries! How to cut its size to the exact boundaries of the parent div?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
a {
text-decoration: none;
color: #FFFFFF;
}
div.square {
background-color: #1BA1E2;
display: inline-block;
width: 44px;
height: 44px;
margin: 0 6px 0 9px;
}
div.caption {
display: inline-block;
margin: 15px 0 0 3px;
padding: 0;
color: #FFFFFF;
font-size: 24px;
}
span.description {
display: inline-block;
vertical-align: bottom;
font-size: 18px;
}
</style>
</head>
<body>
<p>
<a href="page">
<div class="square">
<div class="caption">
Caption
</div>
</div>
<span class="description">
Description
</span>
</a>
</p>
</body>
</html>
In this case, Caption should be cut to Cap+ 1/2t inside the blue box (something like WP7 style). And a description alongside.
Put overflow:hidden in the styles for div.square. This will cause the caption to cut off at the boundaries of the box.
Running example
Related
I'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
I am using the following lay-out: http://peterned.home.xs4all.nl/examples/csslayout1.html
Right now, I'm trying to create something like this: http://imgur.com/P64BojY
What I would like to have is a header, two divs in the middle of the page and a fixed footer. All of the divs (except for the footer) should be of the same size.
Basically, what I'm trying to do is to divide the central div (from the lay-out I've mentioned before) into two divs of the same size, I need the footer to stay at the bottom of the page though.
For my other pages I'll need to be using the same lay-out, except for the bottom div, which has to be divided in 3 divs, like this: http://imgur.com/XuxxlAE
I'm not sure how to do any of this, since I'm working with the min-height 100%...
So yeah... any help would be appreciated! Thanks
is this what you want? easier to just show you a jsfiddle so you check the css needed.
<div class="container">
<div class="containerDivs">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div class="footer">
footer
</div>
</div>
http://jsfiddle.net/QcG7a/
Try this solution, I have replaced div content with two divs with class content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
background: none repeat scroll 0 0 #808080;
color: #666666;
font-family: arial,sans-serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
}
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: #FFA500;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
background: none repeat scroll 0 0 #F0F0F0;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: 750px;
}
div#header {
background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
border-bottom: 6px double #808080;
padding: 1em;
}
div#header p {
font-size: 1.1em;
font-style: italic;
margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}
div#content p {
padding: 0 1em;
text-align: justify;
}
div#footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 6px double #808080;
bottom: 0;
position:absolute;
width: 100%;
}
div#footer p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<!--div content duplicated-->
<div class="content" id="a">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div class="content" id="b">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
</html>
The HTML/CSS below works in recent browsers, but not in CF9's cfdocument. Anyone with ideas?
I would like to use the inline-block property in cfdocument, if I can. Or perhaps there is an alternative to render similar results?
WHAT DO I KNOW?
I am aware that CF's cfdocument supports a limited set of CSS properties (CSS1/CSS2). The CF documentation says it supports the "display" CSS property. However, it doesn't identify what values are supported. I have included the Expected Output and some Example Code.
EXPECTED OUTPUT (See image below)
EXAMPLE CODE
<cfdocument format="PDF" pagetype="letter">
<!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>
<title>CSS Demo: Display Property (block, inline, inline-block)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="margin: 0; padding: 0">
<style>
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { display: block; width: 6em; text-align: center; }
div#two p { display: inline; width: 6em; text-align: center; }
div#three p { display: inline-block; width: 6em; text-align: center; }
</style>
<div class="container">
<div id="one">
<strong>TEST 1: block</strong> This text is within block-level level element (DIV).
<p>Here's a block-level paragraph (P).</p>
Here's some additional text still inside a block-level elment.
</div>
<div id="two">
<strong>TEST 2: inline</strong> This text is within block-level level element (DIV).
<p>Here's an inline paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
<div id="three">
<strong>TEST 3: inline-block</strong> This text is within block-level level element (DIV).
<p>Here's an inline-block paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
</div>
</body>
</html>
</cfdocument>
You may try float instead display : follow link
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { float: right; width: 6em; text-align: center; }
div#two p { float: right; width: 6em; text-align: center; }
div#three p { float:right; width: 6em; text-align: center; }
.clear {clear:both; border:0px}
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).