So, what I am trying to do is divide the page (of width 700 pixels) in 60:40 ratio. In the 40 I want a pic, and the rest 60 text. I have used div to wrap both image and the text. But, the problem is that whenever I hover the cursor on the block, it acts as link to the index.html. I mean I want text selection over the text not hand cursor as default.
Here's the CSS, I am using:
#image {
width: 40%;
text-align: center;
margin-top: 50px;
float: left;
}
#contentwrap {
width: 60%;
float: left;
text-align: justify;
font-size: 18px;
height: 225px;
}
#contentwrap p {font-family: arial, helvetica;}
#contentwrap pre {
margin-top: 45px;
text-align: center;
}
The structure of html is as follows:
<div id = "image"><img src = "asd.jpg"></div>
<div id = "contentwrap"><pre> *text* </pre>
<p> *text*</p> </div>
Image is 175x175 px
That shouldn't be happening unless there is, indeed, a link OR you explicitly set cursor: pointer in your css. Try setting cursor: auto !important.
Related
Im trying to add an image/logo next to my header text, and make sure the image keeps it aspect ratio, and respects the size of the container, which is as high as its containing text.
But the image keep overflowing, or using its real dimensions. How can I get the image next to the text, both text and image horizontally centered.
The parent div can not have a height set, as it should respect the size of the text.
I tried using table instead, I tried using a before: pseudo element, but nothing works. This is what i got at the moment and its so wrong
.batman {
font-size: 20px;
font-weight: bold;
display: inline-block;
width: 100%;
}
.batman img {
min-width: 100%;
min-height: 100%;
}
<div class="batman">
<img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>
jsfiddle: https://jsfiddle.net/sxd91gqc/
Since it's one line of text, define a height equal to the line-height:
.batman {
font-size: 20px;
font-weight: bold;
display: inline-block;
line-height: 1.2em;
border: 1px solid red;
}
.batman img {
height: 1.2em;
vertical-align: middle;
}
<div class="batman">
<img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>
I just started a new project and I have run into a problem. My problem is that I cannot increase the font size of a paragraph tag that is inside a div tag. I also have a problem getting my paragraph tag centered in the center of the div.
div {
height: 50px;
width: 50px;
text-align: center;
}
.gases {
background-color: limegreen;
}
<!DOCTYPE html>
<html>
<head>
<title>The Periodic Table</title>
<style>
</style>
</head>
<body>
<div class="periodOne groupOne gases" id="hydrogen">
<p>H</p>
</div>
</body>
</html>
You can just increase the font-size of the paragraph and add a line-height equal to the height of the div to center it vertically.
Code:
/* ----- CSS ----- */
div {
height: 50px;
width: 50px;
text-align: center;
}
.gases {
background-color: limegreen;
}
#paragraph {
font-size: 30px;
line-height: 50px;
}
<!----- HTML ----->
<div class="periodOne groupOne gases" id="hydrogen">
<p id="paragraph">H</p>
</div>
You can add class to p tag and then give font-size,
.paragraph {
font-size: 15px;
}
You can vertically center the text inside div by,
.gases {
display: flex;
align-items: center;
}
You can also horizontally center content by adding,
justify-content: center;
You can style the tags directly, however, be aware this is a global change.
div p {
text-align: center;
font-size: 1.3em;
width: 100%;
}
Problem 1:-
I cannot increase the font size of a paragraph tag that is inside a div tag
Solution 1
->Make id for the paragraph tag and apply font-size on it.
Solution 2
-> you can directly change it size by just writing
p{
font-size:32px;
}
but best approach will be using of id so this paragraph can be identified uniquely.
Problem 2:-
I also have a problem getting my paragraph tag centered in the center of the div
div {
height: 50px;
width: 50px;
text-align: center;
}
You have write this code.In this code you are giving text-align center to div.
So it will send any thing to center which will be inside this div(not only this div every div on this page )
Solution 1
->you can remove this css property
Solution 2
-> you can also write this to get it back where it was
p{
text-align:left;
}
Whole solution is
<!--HTML-->
<div class="periodOne groupOne gases" id="hydrogen">
<p id="increaseFont">That's how you can incrrease font man</p>
</div>
//css
div {
height: 50px;
width: 50px;
text-align: center;
}
.gases {
background-color: limegreen;
}
#increaseFont{
font-size:23px;
}
p{
text-align:left;
}
another way.... instead of adding another id tag, you can use this..
hydrogen>p{
font-size: 30px;
line-height: 50px;
}
Both ways work equally, but this keeps your HTML cleaner
I have 2 simple intertwining issues related to my Unordered List which have caused me hours of headache. Each li within the ul contains 1 image, and 3 divs. The divs are titlebox, locationbox, and pricebox. There is text inside each of these divs. A JsFiddle demo is below along with a screenshot of what I need.
The li looks like:
<li>
<center><img src="LINK_TO_PHOTO"></center>
<div class="titlebox">Circa 1930 on the River</div>
<div class="locationbox">Lawrencetown</div>
<div class="pricebox">Offered at $249,000</div>
</li>
My issues are:
I want the titlebox (and the text within it) to stretch the exact width as the image above it, so there's no overhang. This means the text will have to get bigger if the user's monitor is larger, because the image width is a % and is responsive, so the text-size must be responsive as well.
I also need the pricebox (bottom div) to sit at the bottom of the green box. And I want the location box to sit equally between the titlebox above, and the price box below.
The 3rd box has a title of 2 lines, but I still need the location "Medford" to be aligned with those to the left. So I can't use a margin-top: % here because it would push the third box's location/price down too far (since the 2 lined title).
Here is a screenshot of what I need. Screenshot
See how I need the title and price to stretch the same width as the image?
And here is what it currently looks like: jsFiddle
Any help whatsoever would be great! Thank you so much
I use the following to horizontally center block and inline elements...
CSS Class
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
Note you will in some circumstances need to apply the CSS class to the parent element instead of directly to the element itself. Additionally if the width of the parent element is collapsed (e.g. using a float) you'll have to center that element as well by moving the class to the parent element's parent.
I am not sure this is the best way to solve your price spacing issue, but since you know there are 3 divs and one image, you could simply divide the height of a parenting div. Something like this:
#pictureBox
{
margin-left: auto;
margin-right: auto;
height: 50%;
}
#titleBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 25%;
}
#locationBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 15%;
}
#priceBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 10%;
}
I am sure you will have to play around with the percentages until you find a reasonable space you like, but I think that would distribute the space properly.
Here's what I came up with given some of the things you were looking for: http://jsfiddle.net/00gdax7m/8/
.titlebox {
width: 80%;
display: inline-block;
font-size: 17px;
font-size: 1.9vw;
margin-left: 10%;
margin-right: 10%;
line-height: 100%;
font-family: Garamond;
color: #002000;
text-align: center;
height: 20%;
}
.locationbox {
width: 100%;
display: inline-block;
font-size: 25px;
line-height: 100%;
font-family: Garamond;
color: #002000;
font-style: italic;
text-align: center;
height:20%;
}
.pricebox {
position:relative;
bottom:0;
width: 100%;
font-size: 32px;
line-height: 100%;
text-align: center;
font-family: Garamond;
color: #002000;
height: 20%;
}
.houseImage
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
height: 36%;
}
Key notes:
I found an answer here which explains the use VW units which helps with your font sizing. The answer says to be careful of browser compatibility though. Pure CSS to make font-size responsive based on dynamic amount of characters
As another user mentioned. Make sure you are using CSS correctly to center.
To make your elements evenly space adjust the height % of your divs within the li (BlueBaroo answered similarly while I was typing)
i have two div like this :-
<div class="pdetails">
<div class="contact_details">
text
</div>
<div class="clear"></div>
<div id="contact_area_form_" class="tform_wrapper">
text
</div>
</div>
the parent div is pdetails and it have two div (contact_details,tform_wrapper),my problem is the div contact_details show in top and the div tform_wrapper show in bottom.
how can i set this two div in the same line.
css code :-
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 510px;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float: right;
}
Remove div which have "clear" class or hide this with display:none.
<div class="pdetails">
<div class="contact_details"> text </div>
<div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>
or use width in % value.
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 80%;
}
For me they show up in one line. Only when the window size is not big enough for both of them to fit, they will be shown in a vertical alignment. You could give the parent-div a fixed width to avoid that problem. Then in case of a small window size a scrollbar would show up.
I would go something like this: http://jsfiddle.net/Ewyzt/
the clear in between is the one saying there cant be more on this line and pushed the other box down what you want to do is clear after the last box so you can build after the two first boxes otherwise things will start to float u besides them.
.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float:left;
}
I would like to suggest to use display: inline-block; property instead of float
Demo for display: inline-block
I am using Bootstrap to create all button elements on our website.
The button height is created using line-height, which also helps with centering the text.
I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle
This is the html.
<div class="button">
test
<small>(note)</small>
</div>
This is the CSS.
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
small {
font-size: 15px;
}
The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?
Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.
Thank you for the help.
It gets OK (on chrome) if you add a vertical-align to your small tag
http://jsfiddle.net/eAZCN/3/
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
.button small {
font-size: 15px;
vertical-align: middle;
line-height:10px;
}