In order to follow correct web standards, I've tried to layout image and div inline. In orde to achieve that - I've used display:inline property.
But then I experienced the following issue: image renders from the center line, and div doesn't respect height parameter set to it. I've tried using line-height parameter, but that didn't give any useful results.
I've also tried various combinations with setting margin/padding to some values or to auto, or replacing div with span, or wrapping img and div with additional divs.
I've managed to achieve desired result by using position:absolute, but that doesn't help in cases where I want to use centered/relative positioning of the whole component...
Any clues or ideas or troubleshooting hints?
Please find the html example below:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div style="border: solid 2px green; height:40px;width: 600px;">
<span style="border:solid 2px green; position: absolute; height:50px; width: 50px;">
<i m g
style="display:inline; margin: 3px; padding:0px; border: solid 2px lightblue;"
height="38px"
width="38px"
src="someimage . JPG"
/>
</span>
<span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
Some text that should be displayed in the center/middle of the div
</span>
</div>
<br />
<br />
<br />
<br />
<div style="border: solid 2px green; height:80px;width: 600px;">
<span style="border:solid 2px green; position: absolute; height:50px; width: 50px; vertical-align:bottom;">
123
</span>
<span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
Some text that should be displayed in the center/middle of the div
</span>
</div>
</body>
</html>
Thanks for trying to help out.
First - the solution:
I've added few attributes to image tag and that helped a lot:
hspace="0" vspace="0" align="top" border="0"
Second: explanation:
Since I wanted to do "inline" (or "inline-block") thing, I had to figure out how inline/inline-block elements are laid-out by browsers. If you read CSS2 layout spec, you will soon find out that there is an issue with image and divs. Problem is with vertical-align - where image is aligned/rendered comparing to baseline, while divs go for bottom-line (or vice versa). That caused my example not be aligned.
Setting above mentioned params for the image tag helped.
Remarks:
Due to the complex history of IE5,6,7, Firefox, Gecko, WebKit, Chrome, CSS2 and BoxModel, there are some shortcomings to Layout model. Original problem comes from IE5 and 6 handling BoxModel in different way from CSS standard. That's maybe the main reason for having quirks mode and DTD standards.
However, this is a broad topic, if you want to find out more, I recoomend readin CSS2 spec and recommendation.
If you want to discuss it more - feel free to contact me via PM
Thanks again to all for helping and good luck with your Layouts
Kind regards
MP
Try this:
<div style="display: inline-block;"></div>
It's actually part of the CSS2 standard to display an inline thing as a block like a character.
One thing is, though, that <div>s are not supposed to occur inside of a <p> element, so you should instead use <span> tags.
I'm not sure exactly what you are trying to achieve. But it sounds like you want to float an image left with text in the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<style>
.wrap {
border: solid 2px green;
width: 600px;
overflow:hidden;
}
.myimg {
display:inline;
margin: 10px;
padding:0px;
border:solid 2px green;
height:70px; width: 70px;
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<img src="myimagepath" class="myimg" />
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
Related
I'm trying to prevent a parent division to be smaller than it's children using min-width and fit-content.
I first setup a division .parent with a min-width: fit-content. I, then added, a child with width: 100px and min-width: fit-content. Finaly, I added enough characters to the children to bust the 100px;
.parent {
border: 1px solid red;
width: fit-content;
}
.children {
border: 1px solid green;
min-width: fit-content;
width: 100px;
}
<div class="parent">
<div class="children">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
DEMO:
https://codepen.io/osasseville/pen/NadrgB?editors=1100
I would expect the parent to fit the content of the children, which fit the content of the characters.
Strangely, if I change the children's width to 1%, the min-width is respected.
The code is working as it should. The parent div will only stretch its width up to the contents inside it, i.e the child div.
And here you have defined the width of child div as 100px, so the parent div width will also expand only till 100px, and about the text, which is overflowing outside child div, is not considered as content for parent div.
If you want the parent to fit the content of the children, you should change the width of child div to fit-content
like this
.parent {
border: 1px solid red;
width: fit-content;
}
.children {
border: 1px solid green;
width: fit-content;
}
<div class="parent">
<div class="children">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
Ok, so I am not sure I totaly understand what you want to do but we can start from this answer. I dont't know how much you know about CSS so dont't be offended by my answer.
First, in HTML most elements have, by default, two types of rendering (this is really simplified) : block-level or inline. A block-level element will take the width of its parent. An inline element will take the width of its content.
So if you understand that principle you'll see that having the parent element to be as wide as its children which is as wide as its content is pretty simple. Here is an exemple:
.parent {
border: 1px solid red;
/* This will make the parent as wide as its content */
display: inline-block;
}
.children {
border: 1px solid green;
/* This is just so that we see if it's working */
max-width: 100px;
}
<div class="parent">
<div class="children">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Now, of course there are other ways to do it, but this is the simplest solution. The best solution will depend on your context.
you can also use display:inline-block; with Anupam Raut's answer:
<style>
.parent {
border: 1px solid red;
width: fit-content;
display: inline-block;
}
.children {
border: 1px solid green;
min-width: fit-content;
}
</style>
and html:
<div class="parent">
<div class="children">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
.wrapper {
height:1200px;
width:800px;
overflow: auto;
background:green;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.sidebar {
background:grey;
position:absolute;
left:10%;
top:0px;
bottom:0px;
width:20%;
height:100%;
float:left;
}
.content {
background:blue;
position:absolute;
left:30%;
right:0px;
top:0px;
bottom:0px;
width:70%;
float:left;
}
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Steven game dev</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
</div>
</div>
</body>
</html>
Hi all I'm new so go easy on me. I decided to make up a quick website something I haven't done in years and it turns out I literally forgot everything but I thought it would be easy enough to slide back in. I was wrong for some reason I cant add a background colour to one of my Divs. the div is inside a container div which could be the reason I'm having trouble but I'm fairly sure that shouldn't be an issue having done many times before. The div in question is my sidebar I don't understand why it's being difficult but I've tried many things to remedy it and I cant get it to work. Please excuse the sloppy nature of my css I was just quickly trying to block out the divs so that I could get a visual of what I was doing. Any help would be greatly appreciated I'm sure it's something silly that I have missed but this is basic stuff should be easy.
Seriously, this is a mystery, but I have got it working. Here is the solution:
#sidebar {
height: 100%;
width: 50%;
background-color:orange;
float:left;
}
“But wait”, I hear you say, “that’s the same code!”. Apparently not. Between the width: 50%; and the background-color: orange; is a character which I cannot see, but which stopped the background colour working.
When testing the snippet, I ended up deleting and re-typing the code, which is something I do when I get desperate.
You had whitespace characters before background-color: orange. So the browser thought the name was [whitespace][whitespace]background-color which it doesn't recognize. I know this because I looked at the #sidebar element in devtools and got unrecognized rule: background-color which only makes sense if there was some invisible white-space in that string. Turns out your sloppy css writing was inexcusable!
#sidebar {
height: 100%;
width: 50%;
background: orange;
float:left;
}
#container {
height: 800px;
width: 100%;
float:left;
background-color: grey;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
}
#content {
float: left;
background-color: red;
width:50%;
height:100%;
}
body {
height: 100%;
width: 100%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
background-color:blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styledesign.css"/>
</head>
<title>
Steven game dev!
</title>
<div id ="container">
<div id ="sidebar">
Home
About
Blog
Videos
Pictures
Contact
</div>
<div id ="content">
<h1>Welcome to my website take a look around </h1>
<p>
I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go.
Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4.
</p>
<p>
Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker.
I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke
following behind using Tails in ue4 particles editor.
</p>
</div>
</div>
</html>
I think you are looking for a sidebar navigation menu try my codes below. And I also recommend the following https://www.w3schools.com/w3css/w3css_sidebar.asp and http://jsfiddle.net/coltrane/cxQGc/.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
<style type="text/css">
.sidebar {
background: orange;
position: absolute;
left: 0;
top: 0px;
bottom: 0;
width: 178px;
}
.content {
background: red;
position: absolute;
left: 178px;
right: 0;
top: 0px;
bottom: 0;
}
</style>
I'm looking for a way in CSS to place a symbol into the margin of the document to highlight/indicate the position of some special phrase in the text body of the document. Think of the usual text-editors in programming IDEs that place little warning icons in the margin next to lines that contain errors.
This is easy to do if the document consists of non-wrapped single lines. Then I can just check if the line needs the symbol and place it manually.
But it gets tricky if I want to, for example, place an icon for spelling mistakes in a document where the browser automatically breaks the lines. Then I would have to have a way to figure out which line the spelling mistake ended up in. This is probably also possible with JS by checking the y-coordinate of some wrapper-span that marks the spelling mistake, but I'm looking for something more elegant.
Is there some trick with float-left or absolute positioning that allows me to, for example, put this marker symbol into the span that marks the error and have it be placed in the left margin of the document instead of inside the boundaries of the span?
Actually, the answer is exactly as you described. Have spans wrapping your text, and inside the span, include an icon element. Then float it left, and set a negative margin on it. Example:
CSS:
.icon {
display: inline-block;
width: 10px;
height: 10px;
background: blue;
float: left;
margin-left: -15px;
margin-top: 5px;
}
Markup:
<span class="selected"><span class="icon"></span>this is some text in a span. </span>
Working example: http://jsfiddle.net/FQCsn/
I think there's also an application for the position: absolute in the context of the :before pseudoelement. Try this and see if it gives you what you're looking for:
<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
{
margin-left: 5em;
}
.highlightThis
{
background-color: yellow;
}
.highlightThis:before
{
background-color: yellow;
content: "Note";
padding-left: 0.25em;
padding-right: 0.25em;
position: absolute;
left: 1em;
}
</style>
</head>
<body>
<div class="allowLeftMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
<span class="highlightThis">Excepteur sint occaecat</span>
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</body>
</html>
You can quickly adjust the size of the browser window to confirm that the note moves with the highlighted span.
What you can do is put a strong around the spelling error, add another tag (a span for example) right after that spelling error, and set that span in position: absolute, but without the "top" property (because the top position is variable). Put that span in width: 100% in order to "select" the line, and add another tag inside that span (a i tag for convenience), and use it to put your icon.
p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}
Example: http://jsfiddle.net/fwZqv/1/
Try to change the width of the "Result" window and see how it behaves.
It's not a perfect solution, and I would rather use JS for that matter.
I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line arranged image, text, image, text My images are coded like this with simple styles attacted
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
My "liketext" class is just has a simple text color modifier. With this code the first image and text are on the same line, and the the next image and text is on the line below. I want all four objects to be on the same line. I really have tried to solve this question on my own and appreciate any help given and hopefully this post can help others as well thank you!
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
More visual example for the float left/right option as shared below by #VSB:
<h4>
<div style="float:left;">Left Text</div>
<div style="float:right;">Right Text</div>
<div style="clear: left;"/>
</h4>
You can simply center the image and text in the parent tag by setting
div {
text-align: center;
}
vertical center the img and span
img {
vertical-align:middle;
}
span {
vertical-align:middle;
}
You can just add second set below, and one thing to mention is that h4 has block display attribute, so you might want to set
h4 {
display: inline-block
}
to set the h4 "inline".
The full example is shown here.
<div id="photo" style="text-align: center">
<img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
<span style="vertical-align:middle">Take a photo</span>
</div>
This question is from 2012, some things have changed from that date, and since it still receives a lot of traffic from google, I feel like completing it by adding flexbox as a solution.
By now, flexbox is the advised pattern to be used, even if it lacks IE9 support.
The only thing you have to care about is adding display: flex in the parent element. As default and without the need of setting other properties, all the children of that element will be aligned in the same row.
If you want to read more about flexbox, you can do it here.
.container {
display: flex;
}
img {
margin: 6px;
}
<div class="container">
<img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
vertical-align: text-bottom;
Tested, this worked for me perfectly, just apply this to the image.
First, I wouldn't recommend using inline styles. If you must, you should try applying floats to each item:
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>
<h4 style='float:left;" class='liketext'>$likes</h4>
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>
<h4 style='float:left;" class='liketext'>$dislikes</h4>
It might require some tweaking afterwards, and clearing the floats.
See example at: http://jsfiddle.net/6Rpkh/
<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
</style>
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
A H4 elemental is a block display type element. You could force the H4 to have a inline display type, or simply use an inline element like P instead and style it however you require.
For reference: http://www.w3.org/TR/CSS21/visuren.html#propdef-display
So you'd change the display type of the H4 like:
<html>
<head>
<title>test</title>
<style type='text/css'>
h4 { display: inline }
</style>
</head>
<body>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</body>
</html>
In this case you can use display:inline or inline-block.
Example:
img.likeordisklike {display:inline;vertical-align:middle; }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
Don't use float:left because again need to write one more clear line and its old method also..
try to insert your img inside your h4
DEMO
<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>
As far as I can tell, it is not possible to place a CSS background image 1em from the right border of any block, neither is it possible to place a image 1em from the bottom.
The following code places the background image 1em from the left and 2em from the top.
<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
Some text here
</div>
Is there any way in CSS to specify that the background image should be "this far from the right edge" if the size of the box is dynamic and assuming that you cannot change the HTML?
(Percentages won't work, since the box can change size)
If this is not possible, what is the smallest amount of change you need to make to the HTML?
This is the workaround I came up with:
<style>
div.background
{
float: right;
background: url('bar.png') no-repeat top left;
margin-right: 1em;
width: 16px;
height: 16px;
}
</style>
<div class="foo">
<div class="background" style=""> </div>
Some text here
</div>
The CSS3 background-position spec allows you to change the anchor point from the top left to anything you want. For example, the following will set the lower bottom corner of the image 1em from the right and 2px from the bottom:
background-position: right 1em bottom 2px;
Confirmed to work in:
IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0
As of April 2013, only IE6-8 and some fringe browsers lack support.
Here's a test page: http://jsbin.com/osojuz/1/edit
Elements with position: absolute; can be positioned by their right edge.
So, if you don't mind a minor change to the html, do this:
<div id="the-box">
<img id="the-box-bg" src="bar.png" />
Text text text text....
</div>
(...)
#the-box {
position: relative;
}
#the-box-bg {
position: absolute;
right: 1em;
z-index: -1;
}
You could of course also use absolute positioning of a second div, with a repeating background. But then you would have to set the size of the (inner) div in CSS.
You could try something like this:
<style type="text/css" media="screen">
#outer {
position: relative;
top: -1em;
left: -1em;
margin: 1em 0 0 1em;
outline: thin solid #F00;
background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%;
}
#inner {
outline: thin solid #0F0;
position: relative;
top: 1em;
left: 1em;
}
</style>
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Edit: Looking forward to CSS 3 background-position.
After some research the actual x pixel length of the background position is always counted from the left side of the element. The only way to make this work (without using other elements) would be to use javascript, calculate the left length given the elements width:
var rightMargin = "10"; // in pixels
var imageWidth = "16";
var left = element.style.clientWidth - imageWidth - rightMargin;
element.style.backgroundPosition = "0px " + left + "px";