I have the following code but my question is about the banner image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-attachment: scroll;
background-image: url(11.12.12_RBM2012_bkg01.jpg);
background-repeat: no-repeat;
background-position: center top;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
width: 920px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
background-color: #000;
}
.header {
}
.content {
padding: 10px 0;
width: 920px;
float: left;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.banner {
}
-->
</style></head>
<body>
<div class="container">
<img src="banner.jpg" width="120" height="600" alt="Banner" class="banner">
<div class="header"><img src="11.12.12_RBM2012_header01.jpg" alt="Insert Logo Here" name="Insert_logo" width="920" height="240" id="Insert_logo" style="background: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="content">
<p>Content</p>
<!-- end .content --></div>
<p>Content</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
I wish to place this outside the main container, to the right, below the header. Hopefully below, is an example of what I need. Any help?
Give the container-element a position relative:
.container {
width: 920px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
background-color: #000;
position: relative;
}
now you can give the banner an absolute position relative to the container:
.banner {
position: absolute;
left: 100%;
top: 50px;
}
you can change the top-position of course. if you need some space between the banner and the container, try some css-margin on the banner.
Related
I trying to place a div between divs for a mobile screen.
I don't want to use javascript, just plain css. Is there a way to achieve it?
I'm experimenting with flexboxes order but can't reach my goal.
.parent {
display: flex;
justify-content: flex-start;
}
.left {
background-color: yellow;
padding: 20px;
width: 50%;
}
.left-1 {
background-color: greenyellow;
padding: 20px;
}
.left-3 {
background-color: gray;
padding: 20px;
}
.right {
background-color: cyan;
padding: 20px;
width: 50%;
}
<section class="parent">
<div class="left">
<div class="left-1">1</div>
<div class="left-3">3</div>
</div>
<div class="right">2</div>
</section>
The easiest way to achieve your desired outcome is to use CSS grid layout, which allows for all elements to be siblings, along with a media-query:
/* simple reset to ensure all element sizes are calculated the same way,
and with the same base-styles: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
font-family: system-ui, sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
}
.parent {
/* using CSS Grid for layout: */
display: grid;
/* setting a gap between adjacent-elements,
(shorthand for 'row-gap' and 'column-gap') */
gap: 0.5em;
/* defining named areas for the contents to be positioned,
based on rows; the first row comprises of one area named:
'leftTop' and the second named 'main'; the second row
has 'leftLower' and 'main'; the reason that 'main' appears
twice is that we want the element in that position to span
across both rows: */
grid-template-areas:
"leftTop main"
"leftLower main";
/* setting height and width to be full-screen: */
width: 100vw;
height: 100vh;
/* setting padding, so that there is a visible gap between the
elements and the page's borders (obviously, adjust to taste): */
padding: 0.5em;
}
/* writing the common styles shared by all child-elements into the same
place for ease of maintenance/updates: */
.parent div {
padding: 20px;
}
/* the left-1 and left-2 elements will be laid out automatically according
to their order in the DOM, once any grid-items (the 'left-1', 'left-2',
and 'right' elements) have been allocated their specific places according
to the author's design: */
.left-1 {
background-color: greenyellow;
}
.left-3 {
background-color: gray;
}
.right {
background-color: cyan;
/* here we explicitly place this element into the named (but not quoted)
main grid-area: */
grid-area: main;
}
/* when the screen falls below 450px in width (obviously adapt to your own
requirements): */
#media screen and (max-width: 450px) {
/* the grid-template-areas are redefined into three single-column rows: */
.parent {
grid-template-areas: "topLeft" "main" "lowerLeft";
}
}
<section class="parent">
<!-- removed the wrapper 'left' column element, in order to allow the
'right' element to be positioned between the 'left-1' and 'left-3'
elements when the screen-size changes: -->
<div class="left-1">1</div>
<div class="left-3">3</div>
<div class="right">2</div>
</section>
JS Fiddle demo.
References:
box-sizing.
display.
font-family.
font-size.
font-weight.
gap.
grid-template-areas.
margin.
#media queries.
padding.
Bibliography:
"A Complete Guide to Grid."
"Basic Concepts of grid layout."
"CSS Grid Layout."
So I created a box with 2 div tags, namely: outer div and box div.
The total width(content block) of my outer div is 600w+50padLeft+50padRight= 700px. Meanwhile the total width of my box div (containing block) is 500w+98padL+98padR+4border = 700px.
Yet, my box is overflowing in the outer div.
Here is the image:
https://www.flickr.com/photos/183721425#N02/48599642452/in/dateposted-public/
aside,
article,
section,
header,
footer,
nav {
display: block;
}
div,
p {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
.outer {
/* TOTAL WIDTH: 700px */
width: 600px;
margin: 0 auto;
background: #9CF;
padding: 50px;
}
.box {
background: #B7D19C;
/* TOTAL WIDTH: 700px */
width: 500px;
padding: 98px;
border: 2px black solid;
}
p {
background: #FF9;
height: 100%;
/* here */
}
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand
how each of the properties combine to effect the overall width (and height) of page elements.
</p>
</div>
</div>
Use box-sizng:border-box property.
It defines how the width and height of an element are calculated, should they include padding and borders, or not. Margin is not considered. Usually the size (width or height) of the element not include border or padding
*{
box-sizing: border-box;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside,
article,
section,
header,
footer,
nav {
display: block;
}
div,
p {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
.outer {
/* TOTAL WIDTH: 700px */
width: 600px;
margin: 0 auto;
background: #9CF;
padding: 50px;
}
.box {
background: #B7D19C;
/* TOTAL WIDTH: 700px */
width: 500px;
padding: 98px;
border: 2px black solid;
}
p {
background: #FF9;
height: 100%;
/* here */
}
/*add styles here*/
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to
understand how each of the properties combine to effect the overall width (and height) of page elements.
</p>
</div>
</div>
</body>
</html>
Problem :
Your issue is with the box model itself as by default the border and the padding are not included in the actual elements width :
.outer has a width of 600px and has a 50px of padding (total width is 600px + 50px right padding + 50px left padding = 700px) so the .box will be shifted 50px to the right.
.box has 500px for the width, 98px for the padding and a 2px border which results in a 500px + 98px right padding + 98px left padding + 2px left border + 2px right border =700px.
the widths are equal but don't forget about the 50px of padding on the .outer that results on an overflow.
Solution :
The solution is very simple, add box-sizing: border-box on the two divs (better to use it on all the elements) which includes the padding and border on the width (meaning the padding and border won't overflow the declared width).
* {
box-sizing: border-box; /** that's it ! **/
}
aside,
article,
section,
header,
footer,
nav {
display: block;
}
div,
p {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
.outer {
/* TOTAL WIDTH: 700px */
width: 600px;
margin: 0 auto;
background: #9CF;
padding: 50px;
}
.box {
background: #B7D19C;
/* TOTAL WIDTH: 700px */
width: 500px;
padding: 98px;
border: 2px black solid;
}
p {
background: #FF9;
height: 100%;
/* here */
}
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand
how each of the properties combine to effect the overall width (and height) of page elements.
</p>
</div>
</div>
I have an image that I want displayed over another image inside of a div. The div has padding and margins. I want to align the image to the top and left of the div without the padding of the div showing. The div is relative position and image is absolute position. This works correctly in all browsers on desktop but not on iPhone.
I have checked that all divs have a position assigned as relative.
<div class="aaa">
<div class="bbb ccc">
<img src="common/banner.png" width="365" height="200" class="ddd"/>
<img src="images/picture.jpg" width="350" height="233" />
<h3>Text</h3>
</div>
</div>
<!-- ---CSS FOLLOWS, EXTRA CSS REMOVED--- -->
.aaa {
position: relative;
width:100%;
margin:auto;
padding:15px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
flex-direction: row;
}
.ccc {
position: relative;
}
.bbb {
max-width:350px;
position:relative;
color:#FFF;
flex-grow: 1;
padding: 15px 15px 50px 15px;
margin:15px;
text-align:left;
overflow:hidden;
}
#media (max-width: 410px) {
.bbb {
position:relative;
width:90%;
margin:15px 0;
height:auto;
overflow:auto;
}
.bbb img{
position:relative;
width:100%;
height:auto;
}
.bbb a,
.bbb a:hover,
.bbb a:focus,
.bbb a:visited {
position:relative;
margin-top:30p
}
}
.bbb a,
.bbb a:hover,
.bbb a:focus,
.bbb a:visited {
display: inline-block;
padding: 5px 15px;
position: absolute;
bottom:10px;
left: 50%;
transform: translate(-50%, 0);
transition: background 0.2s linear, color 0.2s linear;
}
Image should be flush with top and left of div.
Your markup doesn't contain any link (<a>), yet, the only element in your CSS you applied position:absolute to is .bbb a (with various modifiers), but that doesn't apply to anything.
Let's go over the basics: in order to display 2 elements one on top of the other (which, admittedly, is what you want achieve), you need:
a parent with position:relative
one child without position or with position:relative (this will constitute the document flow: will fill and determine the size of the parent and, indirectly, will also size the other element).
another child with position:absolute; + top, left, width and height (alternatively you can replace width:100%;height:100% with bottom:0;right:0), which will thus map itself to the dimensions of the parent, which, in turn, takes its dimensions from the normal flow (which only contains the other child). This element, being absolutely positioned, is not part of normal flow.
relative-parent {
position: relative;
font-size: 3rem;
}
normal-child {
height: 180px;
background-color: red;
color: white;
}
absolute-child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
color: red;
/* hide absolute child */
opacity: 0;
border: 1px solid red;
transition: opacity .3s;
}
relative-parent:hover absolute-child {
/* show absolute child on parent hover */
opacity: 1;
}
relative-parent,
normal-child,
absolute-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* all indented rules are irrelevant
I basically added them to style the example */
<relative-parent>
<normal-child>Normal child</normal-child>
<absolute-child>Absolute child</absolute-child>
</relative-parent>
The above is the general principle. All the styling (unimportant) rules have been indented, so the ones I talked above remained prominent.
The entire construct takes its size from the size of the flow, which is the normally positioned child (in the example: height: 180px; width: 100%. If you change that element, you also change the parent and the other child).
It doesn't really matter what elements you use (they can be even custom elements, as I made them, provided you give them a block or flexbox level value for display). If you use <div> as parent and <img>s as children, you should give the one in parent flow display:block.
If you apply the above principle without any validation errors, it will work cross-browser/cross-device. It's CSS level 1.
I'm not sure to understand, why 2 pictures on a phone? I see the tags "a" in your CSS so I send you this.
<a href="#" id="name">
<img title="Hello" src="common/banner.png" onmouseover="this.src='images/picture.jpg'" onmouseout="this.src='common/banner.png'" />
</a>
I am attempting to style some html that I do not have control over. WYSIWYG. What I need to do is:
Have the text not wrap under the image.
Control the text's vertical position. I am trying to position it approximately along the horizontal centerline of the image.
Text cannot be fixed width (the image however, can and is fixed width).
I have tried display: table, floating the text element and absolute positioning text, but they all had different problems. Thank you for any further ideas.
http://jsfiddle.net/6fjCX/3/ (you may need to shrink frame width to see effect)
img {
height: 66px;
width: 165px;
border: 1px solid black;
}
#title-text {
font-size: 32px;
line-height: 36px;
}
<h1 id="title-heading" class="pagetitle">
<img class="logo global custom" src="" alt="">
<span id="title-text">
Installing Confluence 3.4 on a Windows 64 bit system
</span>
</h1>
I set a width on both elements as well as the wrapper <h1>, to make sure they would float next to each other and there would be no text underneath the image.
Try something like this: http://jsfiddle.net/6fjCX/5/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
/* Float the image */
float:left;
}
#title-text {
font-size: 28px;
/* Since the element comes after in the markup */
float:right;
/* (h1 width) - (img width) - (#title-text left padding/margin) */
width:420px;
}
#title-heading {
/* set to a width that works for you */
width:600px;
}
You could also absolutely position the span and set position:relative on the h1, but I try to avoid absolute positioning when possible.
Demo: http://jsfiddle.net/6fjCX/7/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
float:left;
}
#title-text {
font-size: 28px;
position:absolute;
top:0;
/* (img width) + (span left padding) */
left:175px;
}
#title-heading {
/* contain absolute positioned elements */
position:relative;
}
I'm trying to get h1 to appear on the left and h2 on the right, which I've managed to do thanks to a previous post on stackoverflow. But now there is this white line showing up under the text that is seriously messing with my design. Any thoughts?
<div id="container">
<div id="header">
<h1 style="text-align:left;float:left;">Ken DeRosier</h1>
<h2 style="text-align:right;float:right;">Master Sculptor</h2>
<hr style="clear:both;">
<!-- end #header -->
</div>
...
</div>
This is all the CSS I can think of that could be affecting the code above.
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFbb;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/sunriseHeader.jpg);
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
padding: 0 10px;
padding-top: 170px;
padding-right: 20px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
Try replacing this line
<hr style="clear:both;">
with this
<div style="clear:both;"></div>
I think this is because you use a <hr> aka "horizontal rule". Why don't you try to use a span or a div or something else to clear which is not intended to display itself with something visible?