I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>
Related
I am having an image and text to be displayed on a page. Is there any way to have fixed distance between the both? Tried with media queries but couldn't do it.
<div id="element">
Text Here
<div class="imagehere">
<img src="./img/pic.jpeg"/>
</div>
</div>
Note: The text need to be displayed above the image. Problem is the text is disappearing when the image overlaps with it.
Add this style
.imagehere {
margin-top: 10px; /* This will be fixed distance */
}
A simple margin will do the trick:
.text-wrapper {
margin-bottom: 30px;
}
<div id="element">
<div class="text-wrapper">Text Here</div>
<div class="imagehere">
<img src="./img/pic.jpeg" />
</div>
</div>
I have a container that holds an image, some text and a footer
The image is situated at the top with the text underneath, followed by a footer that simply contains some additional metadata
I want to be able to hover over the content (Excluding the footer) and for it to all highlight
The issue I have is that I cannot make the "text" div span all the way to the bottom where the absolute positioned footer begins.
The footer will highlight on hover independently. I don't want the content hover to effect the footer and I don't want the footer hover to effect the content hover
Here's a codepen link to an example which shows that the blue highlight only covers to the bottom of the text, opposed to the entire panel up until the metadata footer http://codepen.io/anon/pen/bVNeqr
An assistance or guidance here would be greatly appreciated.
HTML
<div class="item">
<div class="content">
<div class="image">
<img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
</div>
<div class="text"> Text here </div>
</div>
<div class="footer"> Footer </div>
</div>
Insted of position:absolute you can use css3 "flex" property to solve this problem. Try to add this to your code.
.item {
display:flex;
flex-direction:column;
}
.content {
flex-grow:1;
}
Here's an example
Something like this?
I just added some plain CSS stuff and it seems to work fine.
http://codepen.io/KingK/pen/bVNeoo/
.text
{ height: auto; }
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.