I have a page where I'm trying to override the height of the elements on it. I tried defining height, but it won't go below the height of the page as determined by the elements in it.
So how do I set the page at the height I want, regardless of elements?
<div class="entry-content">
<div class="greetings">If
you would like... </div>
<p> </p>
<p> </p>
<p> </p>
<div class="number2">#1</div>
<div class="w">
<center>
</p>
<p style="border:5px;
border-style:solid; border-
color:#fff; padding:
0.5em;"><img class="alignnone size-
medium
wp-image-41" src="http://4309.co.uk/wp-
content/uploads/2020
/04/IMG_2020_112949-
scaled.jpg" alt="" width="95%" height="95%" /></p>
<p>
</center>
</div>
<p> </p>
<p> </p>
<div class="number2">#2</div>
<div class="w">
<center>
</p>
The element defining height here seems to be w. How to get css to ignore that and set height at any height I choose, for example 300px?
At the moment defining height by
.page-id-8122 {height:
300px;}
Doesn't work, but defining height at 800000px does. I'm assuming because there's nothing stopping the page height increasing, but element w is stopping it decreasing?
<body class="page-template-
default page page-id-8122
logged-in admin-bar
no-customize-support wp-
custom-logo cookies-set
cookies-accepted has-
sidebar-right">
<div id="page"
class="site">
<a class="skip-link screen-
reader-text"
href="#content">Skip to
content
</a>
Page here
Html as i wrote it.
<div class="number2">#1</div><div class="w"><center><p style="border:5px; border-style:solid; border-color:#fff; padding: 0.5em;"><img class="alignnone size-medium wp-image-41" src="http://4309.co.uk/wp-content/uploads/2020/04/IMG_20203_112949-scaled.jpg" alt="" width="95%" height="95%" /></p></center></div>
Related
I have automatically generated HTML (almost impossible to change it because it is generated by a third party library) that can generate this kind of HTML
<p>
<img src="...">
<img src="...">
</p>
It produces something like this screenshot:
I would like to be able to center the 2 image horizontally (here there are 2 but we can I have 1 or more).
Added: Full html
<div class="innercontent" data-slide-fit="fit" style="font-size: 32px;"><h1>Images</h1>
<ul>
<li>Images can be local or from Internet. It is recommended to use local images for better performances.</li>
</ul>
<p><img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;">
<img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;"></p>
<ul>
<li>They are streched or resized in order to occupy available space while giving room for other elements.</li>
</ul>
</div>
If we consisder the fact that the images will have the same width, you can approximate this using translate and margin. It's an approximation because there is the tiny space between the images
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%)">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-100%)" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-150%)" >
<img src="https://picsum.photos/id/4/150/100" style="transform:translateX(-150%)" >
</p>
Or like below to avoid the wrapping.
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%);">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%);margin-right:-150px;">
<img src="https://picsum.photos/id/3/150/100" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%);margin-right:-225px;">
<img src="https://picsum.photos/id/3/150/100" >
<img src="https://picsum.photos/id/4/150/100" >
</p>
You can add one class to p tag parent:
p.image-center{display: flex;align-items: center;justify-content: center;}
This is my simple code:
<h1 style="text-align:center;">Title TEST</h1>
<img class="center" src="MyImage.jpg">
<footer>
<p style="text-align:center;">Footer TEST</p>
</footer>
Text is centered correctly, the image not.. Why? I can't understand
In your current attempt, class="center" would have no meaning unless you have a class called .center defined in your CSS. It doesn't look like you have a stylesheet, though.
Here are two ways to center an image horizontally:
Use text-align: center on a parent element:
<div style="text-align: center;">
<h1>Title TEST</h1>
<img src="https://via.placeholder.com/350x150" />
<footer>
<p>Footer TEST</p>
</footer>
</div>
Center the image element itself by making it block-level and giving it a margin-left and margin-right of 0:
<h1 style="text-align: center;">Title TEST</h1>
<img style="display: block; margin: 0 auto;" src="https://via.placeholder.com/350x150" />
<footer>
<p style="text-align: center;">Footer TEST</p>
</footer>
I am creating a small page using html which has a header and a body. The header is within a tag with blue background.
The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header.
I don't want to use CSS to align the image.
Click Run Code Snippet to view the current page layout
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row:
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3">
<img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div style="font-size:20px;color:white; text-align:left; float:left">
<h3>Something</h3>
</div>
<img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,
<br>I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
jsBin demo
Learn to use <style>. Makes life easier and more time to drink coffee with friends.
Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)
<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline
<style>
.float-left{ float:left;}
.float-right{float:right;}
#header{
width:400px;
height:60px;
border:1px solid blue;
background-color:#2196F3;
}
#header img{
height:50px;
}
#header h3{
font-size:20px;
color:white;
}
#content{
width:400px;
height:400px;
border:1px solid blue;
}
</style>
HTML
<div id="header">
<img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<h3 class="float-left">Something</h3>
<img class="float-right" src="http://www.sona-systems.com/img/android.png">
</div>
<div id="content">
<p>
Hey,<br>
I am on vacation. I will respond after i come back
</p>
<p><i>Sent from gmail</i></p>
</div>
Another solution would be to place your images right inside the H3 element
<h3><img> Some Text <img></h3>
but than you need to play with the H3's line-height and the image's vertical-align etc.
Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook.
You can do this without using CSS on your images by simply moving the second image before the first one within the HTML.
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are.
Instead of
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
Do
<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height-->
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
You also have some a wrong double quote in this line
I can't get my block div's to center except my text on top and bottom. For some reason they are aligning only to the left.
I've tried margin:auto and setting the width 100%. I'm sure its probably an easy fix but I can't seem to find the error in my code.
Only thing that fixes it is adding a margin-left, however it doesn't look in all dimensions so would prefer if it naturally centered as it should.
http://jsfiddle.net/cV4UJ/
Some HTML please see JSfiddle instead:
<!-- Blocks -->
<div class="grid_24 center">
<div class="grid_7">
<div class="grey_boxes">
<p class="grey">
test
</p>
<p class="complete">
Complete
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_complete.png" class="complete" alt=" "/>
</p>
</div>
</div>
<div class="grid_1">
<p>
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
Any help would be much appreciated.
Thanks
http://jsfiddle.net/cV4UJ/2/
to make it work, you need to force the div.center to behave like a div (right now it has the properties of .grid_24 class, which is an inline left floated element)
.center {
margin: 0 auto !important;
float: none !important;
display: block !important;
width: 980px;
clear: both;
}
the most important properties needed for a centered div:
margin: 0 auto;
no float
be a block element (original display for a div)
have a width
i also put !important, to force it lose all the properties of grid_24
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.