This is a page from my blog.
I have created a gray colored box titled Journal entries.
The Point 1 reads as For recording...
As you can see, the text starting from the word For is slightly below the level of the number 1.
Same is the case with Point 2.
Please suggest what changes should I make to the code.
My code:
<div style="background-color: #F0F0F0; display: table-cell; vertical-align: middle; border-radius: 15px;">
<div style="margin-left: 10px; margin-right: 100px; margin-top: 15px; margin-bottom: 15px;">
<div style="text-align: center;"><span style="font-family: georgia; font-size: 17px; font-weight: bold;">Journal entries</span></div>
<br>
<div style="font-family: serif; font-size: 17px; margin-left: 30px;">
<div style="float: left;">1. </div>
<div>For recording 1<sup>st</sup> aspect, asset value is reduced period-wise by crediting its account:</div>
<div style="margin-left: 20px;">Depreciation A/c ...Dr.
<br>
To Asset A/c</div>
<br>
<div style="float: left;">2. </div>
<div>For recording 2<sup>nd</sup> aspect, the depreciation for the period is transferred to the Profit & Loss Account:</div>
<div style="margin-left: 20px;">Profit and Loss A/c ...Dr.
<br>
To Depreciation A/c</div>
</div>
</div>
</div>
Based on your comment, you don't want the text to go below the number at all. One option would be to place the number within the text div and then position it absolutely in the corner. Then add a bit of padding to the div to move the text over.:
<div class="text">
<div class="num">
1.
</div>
stuff
</div>
.text{
position: relative;
padding-left: 20px;
}
.num{
position: absolute;
width: 20px;
top: 0;
left: 0;
}
http://jsfiddle.net/THYga/1/
Use SPAN instead of DIV elements. if you can't change the html then assign display: inline to those DIV elements using CSS. and also don't use float: left to the numbering element.
Related
I'm a complete noob with programming. I am working on a project and I can't figure out the last piece. I am using bootstrap to create a jumbotron and I want to create an overlay with text information. Below is my code.
Thanks.
<div class="jumbotron" style="background-color: white;" >
<img class="img-responsive" src="images/sanDiegFallback.png">
<div class="overlay">
<h1>ReCon 2015</h1>
<div class="fadeInDown">
<p>October 14-16, 2015</p>
</div>
<div class="fadeInDown2">
<p>Marriott Marquis<br />San Diego, CA</p>
</div>
<div class="fadeInDown3">
<p>Registration open now<br />
<span style="font-size: 14px; line-height: 18px;">(Watch your inbox for details)</span>
</div>
<div class="fadeInDown4">
<a class="cta" href="https://twitter.com/intent/tweet?text=Save+the+date+for+%23ReCON2015+in+San+Diego%3A+October+14-15+http://is.gd/FkQv3k+%40SVISanDiego" style="background-color:none;
background-image: src(images/twitter_bg.png);
border:2px solid #ffffff;
border-radius:25px;
color:#ffffff;
display:inline-block;
font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif;
font-size:18px;
line-height: 18px;
text-decoration:none;
padding: 15px 35px;
text-indent: 20px;
" target="_blank">Share on Twitter</a>
</div>
</div>
</div>
You're not really clear, but if I get you right, you could just make the overlay position: absolute and add top: 0; left: 0; right: 0; bottom: 0;. If it's not already, your jumbotron has to be position: relative;.
With this technique your overlay will be the same size as your jumbotron. Depending on what you are really trying to do, you could have to add a higher z-index to the overlay.
How about adding a class to the jumbotron like
.jumbotron .withImage{
background: url(../pathToImage);
background-size:contain;
}
that way whatever you put over it will be over your image.
I have the following Div hierarchy:
<div id="DivTop">
<div id="DivTopLeft" style="float: left; width: 45%; padding: 10px 10px 10px 10px;">
Top left content.
</div>
<div id="DivTopRight" style="float: right; width: 45%; padding: 10px 10px 10px 10px;">
Top right content.
</div>
</div>
<div id="DivBottom" style="float: none;">
<div id="DivBottomFinePrint" style="float: none; font-size: 8px; text-align: right;">
Fine print content. This content appears between the `DivTopLeft` and `DivTopRight` divs.
</div>
<div id="DivBottomGridView">
<asp:GridView ...>
<div>
</div>
The content of DivBottomFinePrint appears between the DivTopLeft and DivTopRight divs. Also, DivTop and DivBottom seem to have the same Y coordinate whereas I want DivBottom to start vertically after DivTop finishes. I can specify the top margin for DivBottom but that requires hard-coding a value which I do not want to do.
Is there a way around this without using tables?
You should add this style in your container:
#DivTop{
clear:both;
}
float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image.
<div>
<div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
<img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
</div>
<div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
<div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
Profile
</div>
<div style="font-size: 1em; width: 215px; color: #cccccc;">
He is a good citizen and a great teacher.
</div>
</div>
</div>
I want to add 2 small icons aligned vertically on the right hand side of this image.
Can someone help me with the css ?
Something like this?
http://jsfiddle.net/7KTEQ/
Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div
and css for it is:
#smallImages {
position:absolute;
margin-left:400px;
}
change margin-left for css depending on second div width and image sizes..
I have some Divs floating but for some reason the 3rd DIV doesn't go under the 1st DIV. I can't figure out why? I think it has something to do with the images. When the images are not in, they float fine.
http://jsfiddle.net/xtian/9Je65/
HTML:
<div class="dl-content">
<div class="dl-content-left">
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt="">
<h4 class="left">The History of Documentation</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt="">
<h4 class="left">Rebuilding Ellis One Brick at a Time</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 3</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 4</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
</div>
<div class="dl-content-right">
<img src="img/thumbs/ad1.jpg" alt="">
</div>
</div>
CSS:
.dl-content{
width:940px;
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
.dl-content-left{
width:618px;
float: left;
}
.dl-content-left .content-block{
width:307px;
float:left;
margin-bottom: 20px;
}
.dl-content-left .content-block img{
width: 139px;
float:left;
margin: 0 8px 0 0;
}
.dl-content-left .content-block p{
float:left;
width:150px;
font-size: 12px;
line-height: 1.4;
}
.dl-content-right{
float:left;
width: 300px;
margin-left: 20px;
}
.dl-content-right img{
width: 300px;
}
I think its to do with the heights of the divs, as a height hasn't been set.
I added a clear div into it, separating the two sets of divs and it works now:
Demo here
You can also set a height on the divs and this would also solve the problem:
Demo here