How do I make the parent div (graybox5) and child div (outlinebox5) heights responsive, so that the gray and outlined boxes always fit nicely around text? See attached screenshot for what it looks like now, you'll see all the extra space in the bottom half of the box (div). I don't want that much additional space, I want the gray box and the outlined box to wrap nicely around the text.
#graybox5 {
width: 100%;
min-height: 375px;
position: relative;
background-color: #F6F6F6;
margin: 20px;
}
#outlinebox5 {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #252527;
top: -10px;
left: -10px;
z-index: 10;
}
<body>
<div id="graybox5">
<div id="outlinebox5">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
</div>
</body>
Based on the code given it looks as though the graybox is there just to give the gray background, plus set a minimum height. It doesn't appear to add to the meaning.
Therefore this snippet takes a slightly different approach. It does not use a gray box in the HTML but instead sets part of the background to the div holding the text to gray using a linear-gradient background-image which is calculated by CSS to be slightly less than the full width and height of its element and positioned appropriately.
#outlinebox5 {
width: 100%;
height: 100%;
min-height: 375px;
position: relative;
border: 1px solid #252527;
z-index: 10;
background-image: linear-gradient(#f6f6f6, #F6F6F6);
background-repeat: no-repeat;
background-size: calc(100% - 20px) calc(100% - 20px);
background-position: 10px 10px;
}
<div id="outlinebox5">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
Like this?
.graybox {
background-color: #F6F6F6;
margin: 20px;
}
.outlinebox {
border: 1px solid #252527;
transform: translate(-10px, -10px);
}
<body>
<div class="graybox">
<div class="outlinebox">
<p style="text-align: left; font-weight: 800; margin:20px;">
We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
</p>
</div>
</div>
</body>
Related
I'm trying to teach myself some web coding, so please bare with me. At the moment, I'm creating a modal page whose modal contents have three div elements (a close button, an image, and paragraph tags). I have applied some padding on the left side of the divs in the modal content divs because I wanted the image and the paragraphs to be spaced next to each other pretty nicely. However, I want the padding to only apply to the image and the paragraphs tags, and NOT the close button.
My question is, is there a way to apply padding to only the image and paragraph tags, but NOT the close button div.
CSS
#modalPage1{
height: 100%;
width: 100%;
position:absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1 > #modalContent1 {
background-color: white;
height:100%;
width: 75%;
display:flex;
align-items: center;
position:relative;
}
#close{
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding:0%;
}
div > #modalTxt{
width: 80%;
}
#modalContent1 > div {
padding-left: 10%;
}
div > #modalImg{
width: 353px;
height: 447px;
}
HTML
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
<div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
The CSS code you currently have below applies the padding to every div that's inside the div with id="modalContent1". That's a problem because you can't specify what elements you want the padding to apply to; if it's a div, it gets padded. You could change the button to something that's not a div, but any other divs you add would still get padded.
#modalContent1 > div {
padding-left: 10%;
}
Instead of doing that, we can use classes instead, so only elements that belong to the class get padded. We can start by replacing the code above with the CSS below.
.padding {
padding-left: 10%;
}
This will apply the padding to every HTML element with class="padding".
Now we just have to add the classes into the HTML. You used ID="modalTxt" in your HTML twice, but IDs should only be used once, so we can replace that with class="modalTxt" instead. Make sure you replace that in your CSS too so you can keep the width customization, just change the # in div > #modalTxt to a . like this:
div > .modalTxt{
width: 80%;
}
Multiple classes can be used as long as they're separated by spaces, and having a separate class for padding lets you customize the padding on its own, and the elements' other attributes on their own. So your HTML would look like:
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
<div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
One last thing, you can safely remove the "modalFishTmg" class if you're not going to use it in any other elements, since you're already styling the image with an ID. Also, the classes could go in the divs where you put your <img> and <p> tags, but that would give the padding to anything that's in the div, which could be a problem if you add anything else.
To apply styling to every child div of #modalContent1 except for the div with identifier close this snippet uses the CSS :not pseudo class:
#modalContent1 > div:not(#close) {
/* set the padding as required here */
}
Just to make it obvious in this test, the background color of the relevant elements is set rather than padding:
#modalPage1 {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1>#modalContent1 {
background-color: white;
height: 100%;
width: 75%;
display: flex;
align-items: center;
position: relative;
}
#close {
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding: 0%;
}
div>#modalTxt {
width: 80%;
}
#modalContent1>div {
padding-left: 10%;
}
div>#modalImg {
width: 353px;
height: 447px;
}
#modalContent1>div:not(#close) {
background-color: cyan;
}
<div ID="modalPage1" class="modalFish">
<div ID="modalContent1" class="modalFishContent">
<div id="close">+</div>
<div><img ID="modalImg" class="modalFishImg" src="Images/Fish School.jpg"></div>
<div>
<p ID="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, I decided to use this as the background. Being that it's a dark color, it's easy to layer on different colors that will coordinate well, while
adding a pop to it. </p>
<p ID="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces appear a bit obscure, almost
reminiscent of a pile of leaves. Looking closely, we can see that the origami is in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
Note: view in full page othewise elements overlap and the effect cannot be seen correctly.
There are multiple ways to do this .
Add padding in #modalImg & #modalTxt.
Don't use 2 tags in img and p. Bring them under one div tag and apply inline CSS or a separate class or id .
This question already has answers here:
Setting CSS top percent not working as expected
(4 answers)
Closed 3 years ago.
When trying to set the distance of the paragraph from the top of the page it only works when its set as a pixel value and not when i set it as %. It somehow works with left though
I've tried the % but hasn't worked
.para1 {
font-family: sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: white;
border: none;
position: relative;
display: inline-block;
max-width: 70%;
top: 30%;
left: 9%;
margin: 0 auto;
text-align: left;
}
<div class="para1">
<p>If you're reading this I just would like to say a huge thank you for taking the time to want to know who's behind UnixCast. I'm a full-time student with a big passion for learning. I enjoy studying physics and hope to get a degree in astrophysics sometime
in the future. I've always had a passion for creating content online. From when YouTube was at the start of its big popularity boom, I fell in love with the idea of sharing content freely for everyone to see. My goals for my content are simple:
</p>
</div>
Expected results are to get the text to be responsive to whatever top % I give.
Well because your <div> needs a height. And the rest of your css has to be for the <p> not the <div>.
Example
.para1{
position: relative;
height: 200px;
}
p {
top: 80%;
left: 9%;
margin: 0 auto;
text-align: left;
border: none;
position: relative;
display: inline-block;
max-width: 70%;
font-family: sans-serif;
font-size: 12px;
letter-spacing: 1px;
}
<div class="para1">
<p>If you're reading this I just would like to say a huge thank you for taking the time to want to know who's behind UnixCast. I'm a full-time student with a big passion for learning. I enjoy studying physics and hope to get a degree in astrophysics sometime in the future. I've always had a passion for creating content online. From when YouTube was at the start of its big popularity boom, I fell in love with the idea of sharing content freely for everyone to see. My goals for my content are simple:
</p>
</div>
Here is my fiddle
Update
New fiddle
I've been researching, but I'm not sure how to look for what I want. I am in my first term of HTML and CSS. My page looks great on my 15 1/2 inch monitor... but when I move it to my 19 1/2 monitor, it adds another part of the background image to the right side, and stretches the menubar across the whole distance. What code am I looking for that will keep the page intact on a wider screen, perhaps adding colored (or blank) borders on each side? Thank you for your help.
Thank you to Brad and Fiddle for helping. The no-repeat helped the background, however, on the bigger monitor, my menubar wants to go clear across, and the .box and img.posit want to stick to the far left side. I'd rather they stay measured according to the background image.
thes style sheet:
body {font-family:Arial, Verdana, Garamond;
background-image: beach.jpg; background-repeat: no-repeat; background-position: center;}
a {text-decoration: none;
color: #FF4D10; font-size: 14pt;}
a:hover {background-color: white;}
.menu {position:center;
text-align: center;
width: 100%; margin: 0; text-decoration: none;}
.menuword {width: 10%; background-color: beach.jpg; font-weight: 500; text-decoration: none;}
.menuwordselect {width: 10%; font-weight: bolder; font-style: italic; text-decoration: none;}
.menupipe {width: 0%; font-weight: bolder;}
.box {width: 400px; margin-left: 25px; margin-top: 100px; border-radius: 7px; background-color: #ffff9c; padding: 10px; color: #303032;}
/* set styles for class named box to position the image */
img.posit {position: relative; left: 550px; top: -435px }
/* sets styles for class named posit to position the image */
I really appreciate your help :)
Brad... here is the code for the page...
<body background="beach.jpg">
<div style="text-align: center;">
<img src="Oahu banner.jpg" width="995" height="295">
<table class="menu">
<tr>
<td class="menuword">Waikiki</td>
<td class="menupipe">|</td>
<td class="menuword">North Shore</td>
<td class="menupipe">|</td>
<td class="menuword">Cultural and Historical</td>
<td class="menupipe">|</td>
<td class="menuword">Best Deal Ever</td>
<td class="menupipe">|</td>
<td class="menuword">More Info</td>
<td class="menupipe">|</td>
<td class="menuword">Site Map</td>
</tr>
</table>
</div>
<div>
<p class="box">Oahu known as "The Gathering Place", is the third largest of the Hawaiian Islands and home to more than 950,000 people, almost 75% of the U.S. state of Hawaii's population. The state capital, Honolulu, is on Oahu's southeast coast. In the greatest dimension, this volcanic island is 44 miles (71 km) long and 30 miles (48 km) across. The length of the shoreline is 227 miles (365 km). The island is the result of two separate shield volcanoes: Wai'anae and Ko'olau, with a broad "valley" or saddle, the Oahu Plain between them. The highest point is Mt. Ka'ala in the Wai'anae Range, rising to 4,003 feet (1,220 m) above sea level.
<br><br>
But there is more to Oahu than just height and width. Honolulu, the state's capital, not only displays an impressive skyline of highrises, but also the beautiful beach of Waikiki, where Duke Kahanamoku "the father of surfing" developed his surfing and swimming skills.
<br><br>Across the pineapple fields at the middle of the island, the North Shore is home to modern day world renown surfing competitions, prolific fruit plantations and a quiet, rural lifestyle for many residents.
<br><br>The cultural heritage of the native peoples is richly preserved in many world class museums, libraries and attractions. Pearl Harbor as an important piece of our American history is a must see stop for all visitors.
<br><br>There is something for everyone on this beautiful tropical island. Come vist and Hang Loose in Oahu!</p>
<img class="posit" src="waterfallbig.jpg" width="513" height="386" alt="Waterfall" />
</div>
</body>
You need background-repeat: no-repeat since background images by default repeat both vertically and horizontally.
For the second part of your question, it sounds like you want background-position: center. This will center the image both vertically and horizontally, leaving space around the image. Optionally, you can set the background-color to whatever you want.
CSS
background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);
JSFiddle
You may also try this, it would position the whole page in centre, irrelevant to size of screen
*{
margin:1px auto;
}
i would like to create a single page where:
1) The top, 100px, fixed
2) The bottom, 100px, fixed
3) Between top and bottom there is dynamic content
I was able to create exactly that but i have an issue, when i am scrolling the dynamic content, the elements go under and over the top and bottom and the same elements are visible thru the fixed top/bottom.
I tried clear: both; on the top and bottom div, but since they are fixed, the clear: both; did'nt works.
I would like to keep the dynamics elements inside the content div between top and bottom and if possible still use the main document scroll bar to scroll inside it.
Here is an example, assume the lines represent the top and bottom fixed div, and the 'element' are the dynamic contents.
element - not correct
element - not correct
element
element
element
element
element
element - not correct
element - not correct
Hope i am clear enough and thanks in advance!
I guess this is what you're looking for.
See this fiddle.
HTML
<header>
This is the header!
</header>
<article>
<p>Goodness one unimaginative rooster some that circa much jay goodness gosh pessimistic scantly dark some modest gasped where unexplainable some before about that a hello firefly macaw ethereally indecisive panda lorikeet where a peskily jellyfish a since lied factiously in and that after but falteringly so worm flabbily yet hey gladly more versus much precarious because a the boisterous quiet fed one alas hawk flawlessly thanks some.</p>
<p>Squirrel much krill regarding before contrary jeez outdid warthog immaturely articulately valiant hey suggestive thus far won darn wow scorpion portentously more hotly miraculous jeepers meagerly since excluding that however pinched yet whale adoringly floppy tenably wow and after via for unproductively as one prior the more on urchin rang much because some more approving near oh a as far lion some lucky far much frog far and beneath underlay far after nosy jaguar subconscious after this far input frequently distant the much positively gagged jeez unobtrusively far sank less before babbled far by when this the this sensible outside.</p>
<p>That far qualitatively intrepid vulture a ferret disgraceful moaned therefore easy much and curt insincerely dachshund notwithstanding yikes and dragonfly and patted until much jeez close fumed divisive copiously wherever near near far perceptible shrewdly ground yikes opened as elaborate adversely spilled that creepy imaginative by in hello groundhog magnificently jeez hence crud versus desperately caterpillar checked one wicked far some yikes.</p>
<p>And darn dependent that urchin upon much jeez ably sniffed a less in far darn far incorrect between inept caterpillar man-of-war manta hence ironically into more amenable negative sanctimoniously tortoise eagle far spoiled clapped tepid yikes irresistibly testy warthog hugged immense much immense alas thus paid therefore agitatedly about well following the hey aboard and that after and condescending seagull because alas slept hey this went dove far much far considering raccoon witless under ungraceful.</p>
<p>Emptied much gosh circuitously inside along a far pointed fanatic hey bravely with far yikes capybara meadowlark sedulous some lion squid floated darn drolly underwrote loving spat maliciously coaxing unwilling goodness seagull elephant snickered balked sloth for kookaburra inside untactfully so the where much human then because pungently cracked heard overtook firm skeptically reverently much some jeez less and hey towards.</p>
</article>
<footer>
This is the footer!
</footer>
CSS
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header {
top: 0;
}
footer {
bottom: 0;
}
article {
margin: 100px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Update
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
top: -20px;
width: 100%;
left: 0;
}
footer:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
bottom: -20px;
width: 100%;
left: 0;
}
header {
top: 0;
margin-top: 20px;
}
footer {
bottom: 0;
margin-bottom: 20px;
}
article {
margin: 120px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Updated the fiddle too.
here, take a look at this.
http://jsfiddle.net/PxabT/47/
update
http://jsfiddle.net/R4SV5/7/
Give the top and bottom elements a background-color or background image. Also it is probably a good idea to give top and bottom a z-index of 3 or higher.
I have some problems with CSS and z-index. Let me show you an example
Suppose that on a first moment it only appears the tag pointers. Then, when I click one of this pointers appears a tag globe. I want that the tag pointers appears always under the tag globes, and I want too that every time I open a tag globe it appears over all other tag globes opened.
My div structure is:
<div id="t01" class="tag">
<div class="small">
<div class="globe">
<div class="in-globe">
<!--tag globe content-->
</div>
</div>
<div class="globe-arrow"></div>
</div>
</div>
And the related CSS code is this:
.tag {
z-index: 3;
position: absolute;
left: 0; /*JavaScript modified*/
top: 0; /*JavaScript modified*/
width: 19px;
height: 26px;
padding: 0 11px 10px 15px;
background: url('../../images/zoom/tag.png') no-repeat center;
}
.small {
cursor: pointer;
width: 19px;
height: 26px;
}
.globe-arrow {
position: absolute;
left: 23px;
bottom: 30px;
width: 8px;
height: 6px;
background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat;
z-index: 5;
}
.globe {
position: absolute;
left: 23px;
bottom: 30px;
z-index: 4;
}
.in-globe {
font-size: 11px;
margin: 0 0 3px 3px;
padding: 3px;
background: #FFF;
border: 1px solid #000;
}
The 'tag' is all the conglomerate, and its background is the tag pointer image. However, this image has some shadows and I only want that a certain zone can be clicked. Then, the 'small' div has this function. The 'globe' and 'in-globe' divs are where the content of the globe is written (it could be an only div, there are two for historical reasons), and the 'globe-arrow' div is basically a little image to show this small arrow over the globe.
With this structure it doesn't work. In a same conglomerate, a globe is always over a tag, but an entire conglomerate defined before in the html code appears entirely under a newer one. In the same way, although a globe is inserted by JavaScript always after an older one (logically) the tag conglomerate is inserted when the page is loaded and then the overlapping works like I said.
Can you propose an smart way to reach my objective? Think that I'm interested on positioning the globe respective to the tag, because when I drag a pointer with a globe opened I want that the globe moves with it by CSS, not by JavaScript.
give .globe-arrow a z-index of 3
I solved the problem. There's no magic way to do it. I had to change the way I structure tags. It seems that z-index inherits from the container div, then like the parent has less z-index, a son of another parent with the same z-index appears under the first although this son has a bigger z-index. It's very confusing, yes.
In few words, I define a tag-container (to positionate the tag), into it I define a pointer and a tag globe. The first with less z-index than the second. Now, as all the divs with z-index has the same level all tag globes appear over all tag pointers.
I want that every time I open a new tag globe it appears over the opened globes. Against my desires, I had to use JavaScript for this because with a same z-index the browser show over the last defined div. This is ugly. I build a stack of z-index's that increases with more globes and decreases when I close them. Then I simply edit the css dinamicaly to put this new z-index to the new globe.
Thank you for your attention and help :) I hope this could be useful for somebody.