I have an issue with overlapping DIVS. Tried a few things but none have provided the desired outcome. I suspect this is quite easy but i'm missing the key element.
Currently the bingo div overlaps the numbers div. On many screens the numbers div is not even visible as the bingo div takes up the entire screen
HTML:
<body>
<div class="numbers" style="height:100%">
<h2>
What sort of number do you want?
</h2>
Evens
Odds
Primes
</div>
<div class="bingo">
</div>
</body>
CSS:
html{
font-size: 100%;
font-family: sans-serif;
}
h2{
margin:2rem;
}
h1{
margin:-2rem 0 2rem 2rem;
font-size: 4rem;
}
a{
margin: 0 0 0 2rem;
border:solid black 1px;
padding: 0.618rem 1rem;
text-decoration: none;
color:black;
}
a:hover{
color: white;
background-color: black;
}
img{
position: absolute;
bottom:0;
}
.bingo{
bottom:0;
margin: 4rem 0 0 0;
width: 100%;
height: auto;
overflow: hidden;
}
Thanks!
The "number" <div> takes the height from the contained elements, texts and <a>; the point is that the <a> elements are inline whose CSS height is just the height of the text lines. If they appear to be rectangular on the screen it's just cause you set a padding (that's not added to the parent <div> height).
That's causing the overlapping of the rectangles on the "bingo ", but for CSS height there is no overlapping.
The solution is that the "number" <div> takes the whole height of the elemets inside it in order to "push down" the "bingo" <div> using:
a {
...
display: inline-block;
margin-bottom: 2rem;
}
I added a bottom margin just to prevent they touch eachother when in a single column at the resize of the screen.
https://jsfiddle.net/hoq97sj5/1/
Related
I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
Is it possible to stack in-line-block elements?
I have a DIV which I want the elements inside it (h1 and P) to be centred. So I set the DIV to text-align centre and initally set the H1 and P tag to inline-blocks.respectively.
The idea was to display the two elements (H1 and P) as in-line-block elements so content is centred and a transparent png shows in the background for the length of the text.
But the problem I have is that having elements as inline-blocks means they will appears next to each other (I don't want this to happen), so I set the P tag as block element but it's resulting in the transparent png being as wide.
HTML:
<div id="hero">
<div class="container">
<div class="row">
<div class="span12" id="hero-text">
<h2>Heading line</h2>
<p>Paragraph line goes here</p>
</div>
</div>
</div>
</div>
CSS
#hero {
height: 435px;
width: 100%;
background: url(../img/hero-image.png) 0 0 no-repeat;
background-color: #999;
position: relative;
color: #FFF;
border-bottom: 3px solid #E6E6E6;
}
#hero-text {
position: absolute;
top: 33%;
text-align: center;
}
#hero h2 {
font-size: 4em;
font-style: normal;
line-height: 50px;
padding-top: 10px;
background: url(../img/bg-heading.png) repeat;
display: inline-block;
padding: 10px 20px;
}
#hero p {
font-size: 2em;
line-height: 30px;
display: block;
background: url(../img/bg-heading.png) repeat;
padding: 10px 20px;
}
Any help is appreciated.
This was actually tougher to solve than I originally thought. I could find two options for you. If you don't want to change your markup:
Give both #hero h2 and #hero p display:inline-block, and give them widths so that their combined width is greater than 100%. They both can be width:51%, or one can be wider than the other, just as long as their total is more than the width of the parent. This will cause the p to break to a new line. See http://codepen.io/anon/pen/cjDiH OR
2.If you want their widths to be fluid, I'd add an element in between the h2 and p that is display:block. I added hr, then took away its margin, padding and border to make it not visible other than to cause the line break. See http://codepen.io/anon/pen/AGDti
I see you figured out out to get them to stack like in your screenshot.
Now,
try adding width: auto; to #hero p in your css.
I am having a little trouble aligning two elements inside a div (the quote and the arnold pic).
Here is what it looks like:
<div class="container">
<div id="quote">
<p id="tagline-quote">"As a personal fitness trainer, I'm asked on a weekly basis where the best place to buy supplements is, and my answer is always bodybuilding.com"</p>
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg"></img>
</div> <!-- end #quote -->
Here is the css:
.container {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
}
#q-image{
}
This is a textbook "css floats 101" question. Oh, wait, I thought that was original but that's exactly what the article on alistapart is called. You can position the image inside the quote/paragraph and float it right - that's pretty much what the floats were made for before semantic layouts took over :)
<div class="container">
<div id="quote" class="clearfix">
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg" />
<p id="tagline-quote">“As a personal fitness trainer, I'm
asked on a weekly basis where the best place to buy supplements is,
and my answer is always bodybuilding.com”</p>
</div>
</div>
For CSS, I've thrown out some of the original padding :
#q-image{
float:right;
/*add some margin so that there is space between text and photo*/
margin-left:10px;
}
Now the issue that you were having with KodeKreachor's code was seemingly incorrectly "garbling" the divs below and you probably saw the quote container looking shorter than it should be. The workaround is using a "clearfix" that expands the parent container so that the floated element can fit inside. Remove it from the code and see how the (temporarily) highlighted container acts.
On a side note... try adding more paragraphs and move the image into one of them. Now that "odd" behaviour makes perfect sense - paragraphs start flowing nicely around that floated image without massive gaps.
Fiddle: http://jsfiddle.net/EvdV8/ Also: proper quotes. Also: img is a self-closing element so original markup was not valid.
If you're talking about side-by-side, you use a combination of "float: left;" and "display: inline-block" to force them next to each other.
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
display: inline;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
position:relative;
width:400px;
display: inline-block;
}
#q-image{
position:relative;
float: left;
}
I can't put this to work like it should, I'm not that good with CSS, I need you help!
I have a page like this:
<html>
<head><title>title</title></head>
<body>
<div id="page">
<div id="container">
<div id="head"><img src="..." alt="..." /></div>
<div id="content">
<div id="menu"><ul><li>...</li></ul></div>
<div id="content_body">stuff here</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
OK. My container div have a background color, I want that, as long as my text inside the content_body div expand, the background of the container div would expand too, but it is keeping a fixied height (it's just expanding the logo image height), and my text in the menu and content_body div is out of the background.
My CSS:
body
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
background-color: #333333;
background-image: url(Images/bg.png);
background-repeat: repeat-x;
color: #000000;
margin: 0px;
}
input
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
font-weight: bold;
}
h2
{
text-decoration: underline;
font-style: italic;
}
#page
{
width: 100%;
}
#container
{
overflow: visible;
width: 780px;
border: solid 6px #FFFFFF;
background-color: #DCDCCD;
margin: 0 auto;
margin-top: 15px;
}
#content
{
clear: both;
}
#menu
{
width: 240px;
display: block;
float: left;
}
#content_body
{
width: 500px;
display: block;
float: right;
}
What I'm doing wrong?
Everything in your #content div is floated, and well, floated elements don't really take up any space. Essentially since they are floated they are being taken outside of the regular stream of content and breaking the rules to be able to be pushed to the left or the right.
In order to get the div containing the floated elements to size with its content you could give is display: inline-block and maybe width: 100% so that it takes up the whole area...
#content{ display: inline-block, width: 100%; }
Giving it a display of inline-block makes everything outside of it think it is an inline-level element, but everything inside it is treated like it is a block-level element, and it ends up giving height to anything inside it that might be floated without having to give it a set height.
Try
#content
{
...
overflow: auto;
}
Edit:
Also make sure to add a width as DA points out in the comment below.
Try:
#footer{
clear:both;
}
demo