I have a webpage that is displaying an image and another section of text entitled "About Me" with some paragraphs underneath. Currently, the image is on the left and all the text is on the right (I want this). What I can't figure out, is how to align both the image and the text section (both the h3 and paragraphs) an equal distance from both the top of the screen and bottom of the screen. I would like the top of the image to align with the top of the h3 in the middle of the screen, with the paragraph sections sitting under the h3 on their corresponding side.
HTML:
<div id="wrapper">
<section id="homepage_section">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
<h3>About Me</h3>
<p>
Some text here.
</p>
<p>
Further text.
</p>
</section>
<footer>
<p>
© 2016 Name
</p>
</footer>
</div>
CSS:
.profile-photo {
display: block;
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#wrapper #homepage_section .profile-photo {
margin-top: 50px;
}
I generally want to avoid doing something like I have here, where I am simply just pushing the element down the page with margin-top. I'd rather have something that allows the element to automatically sit between the top and bottom of page. I'm also a little confused why the margin-top style element works in the second CSS section, but doesn't work when I put it in the .profile-photo section (which seem to be the same thing to me), but I suppose that is a little bit of a different issue.
Related
I have the following HTML structure:
<section class="mysection">
<div class="parallax"></div>
</section>
<section class="some-text">
blah.....
</section>
Before using parallax on the parallax div, some text just sits immediately below the bottom border of mysection. This is the CSS for parallax.
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, some text does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make some text always sits beneath the bottom border of mysection without overlap?
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
Hello Gurus: I am trying something but just don't get the theory...I have one main Div and inside of it are: paragraph text and one image (both of these are nested inside their own Divs) (hopeful I did this correctly!)
For easy visualization.... they are both at the top of the html page and the Image is styled as float: right; the text can be styled but that's where I am hung-up.
----- I want to move the TEXT ONLY from its position; downward from the top of the page like 50px-----
When I styled the text with padding or margin, it takes everything; text and the image, and moves everything down Together....HOW can I leave the image where it is currently, and just move the text downward leaving white space at the top above the text and not the image?
Is this a positioning style? Or am I thinking about this all wrong? Thank you kindly for your help!!
html:
<div class="wrapper">
<div><img src="blah" class="img-right" /></div>
<div><p>some text</p></div>
</div>
css:
.wrapper div p {
position: absolute //can also be relative, depending on your needs
top: 50px
}
.img-right {
float: right
}
position can be relative or absolute depending on how you need your page styled.
See also:
http://www.w3schools.com/cssref/pr_class_position.asp
I would like a way to prevent columns of flowing text from becoming too narrow. For example, in a column of HTML text, there is an image floated to the left. Text flows down the right-hand side of the column around the image, as expected:
However, if the image is almost as wide as the column, then the text ends up being very narrow:
In this case I want the text to simply not flow past the image, but to drop below it as if the image were a block:
I am trying to find a simple and general way of doing this. It's for a blog - I want to be able to add the image and text, maybe add a class or paste in a bit of markup (sigh), and have the flow work. I would prefer to do it with CSS and HTML only because it's hard to insert JavaScript to the blog posts. I have a couple of methods (see my answers) but neither is satisfactory. Can you do better?
When you set display: inline-block; to an element, the element will be flowed with surrounding content.
So you would need to add a line-break <br> to produce a line break in text, but the vertical space of the line will remains as you mentioned. [and one more thing happens is the horizontal scroll-bar which will appear if you decrease the width of the panel.]
Introduction
Using <table></table> element has a lot of benefits here.
When you use <table> element (as the following), it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <table>, it'll go to the next line and push the content down.
And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <table> when it hasn't any element inside or any specific height or border properties.
(different browsers have different behavior, Mozilla Firefox doesn't display table element with a specific border property but Google Chrome does.)
HTML:
<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...
CSS:
img { float: left; }
table { width: 12em; }
Here is the JSBin Demo.
The Solution
As a pure CSS way, I used ::before pseudo-element to create a element which behaves like the <table> HTML element.
HTML:
<div>
<img src="http://placehold.it/400x400" alt="">
<p class="content">
<!-- Here is the content... -->
</p>
</div>
CSS:
img { float: left; }
.content:before {
content: ' ';
display: table;
width: 10em; /* <-- Change the current width size */
}
Here is the JSBin demo.
A better solution is to give every paragraph an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.
If the img is flot: right, add clear: left to the p:before.
And if the img is float: left, add clear: right to the p:before
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
clear: left; //use clear:right if img is float:left
}
I tried adding an extra element before the text. I think this would probably just about work. Something like this:
<style>
.shim { display: inline-block; height: 0; width: 12em; }
</style>
<img class="floated">
<div class="shim"></div><br>
If one examines Derridaist reading...
This is OK - if the flow column is narrow then the shim drops below the image and the text follows it. I have to add the <br> to stop the text being indented by 12 ems, which adds a line of vertical space. I guess I could reduce the line-height on the <br>but the whole thing might end up being a bit verbose.
The simplest method I found is to set the minimum width of the column by preventing the first few words from wrapping:
<style>
.chunk { white-space: nowrap; }
</style>
<p><span class="chunk">If one examines</span> Derridaist reading...
This works well, but:
I have to manually edit the text each time I do this
I can't precisely control the column width (in ems or pixels)
I have a div that has two divs that float left/right respectively. The right div contains a lot of text, and the left div has 3 images.
I am trying to make it so that the three images are distributed with one at the top, middle, and bottom of text, so that if more text were added then the images would move to 'correctly fill the space'
I have a 'ul' inside the left and if I set the height:200px; property it displays correctly, but I can't get it to match the height of the other div dynamically! I've tried using % and tried the +1000 -1000 padding/margin hack but that doesn't seem to do have the desired effect, so I must be barking up the wrong tree. (I have searched all morning on this and I can make the div work but not the ul height to match the div!).
JSFiddle: jsfiddle.net/b98Rx/3/
HTML:
<div id="articleBody">
<div id="articleMainText">
<p>This is some text that should overflow to the some space below here</p>
</div>
<div id="articleMainImages">
<ul id="articleMainImagesUL">
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>
</div>
CSS: (In fiddle)
Example as an image:
Sorry for the MSPaint but I hope it shows what I'm trying to do!
I am open to other suggestions and I don't have to use a ul/li. Ideally to be compatible with as much as possible! I might make this into a 2 column table and make three seperate divs for each image to align top, middle, and bottom! Would this work?
EDIT:
Solved it myself, see this fiddle for how I did it! http://jsfiddle.net/B63Yy/
What might work is having nested divs, and having the images as backgrounds, attached to top, middle and bottom - though they would not print to paper. Of if you are targetting browsers that support multiple background css then use that.
This would not work if the text was too short as the images would start to overlap - unless you enforce a min-height.
Otherwise I think you are looking at javascript to do this.
Anyone know better?
Update: this kinda works ... needs polishing though.
<div id="articleBody">
<div id="articleMainText">
<div id="a"><div id="b"><div id="c">
<p>This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here</p>
</div></div></div>
</div>
</div>
#articleBody { /* Body of article */
display:block;
width:200px;
overflow:auto;
background-color:#ecd;
}
#articleMainText { /* Main text DIV */
width:10em;
margin-right:32px;
padding-left:32px;
margin-top:0px;
padding-top:0px;
}
#a, #b, #c {
background-image: url("http://phrogz.net/tmp/gkhead.jpg");
background-repeat: no-repeat;
background-size:20px 20px;
}
#a{background-position: left top}
#b{background-position: left center}
#c{background-position: left bottom}
I've edited your fiddle to work:
http://jsfiddle.net/b98Rx/7/
what I changed was:
#articleMainImages img {
bottom:0;position:absolute;
}
#articleMainImagesUL li {
height:33%;
position:relative
}
and deleted the table-cell props where you had them.
I am trying to translate my PSD file to code and I am having problems with these headers. The header would contain the name of the header, and a horizontal purple bar that stretches from the right side of the end of the name to the end of the div. I am using Foundation (responsive framework) and so I have given my header a width of three columns. I have written some code, but I am unsure how to get the purple line to not appear under the title name.
Currently, I have saved the purple line as a tileable image and set it as the background of the h3 tag. I have tried to play with the background position, but I cannot get the line from not appearing under the title name.
Here is a screenshot of part of the PSD file. To clarify, the purple bar next to Hours, Phone, and Location is not for the user to type any information onto; it is a decorative piece used to separate the different regions of information.
My code:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3>
</div>
</div>
.contact h3 {
color: #444;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
This would be a perfect time to use the HTML element <span> as this is pretty much exactly what it is meant to do. After the element, add <span></span>, give it the desired width you want, and set the background image for the span element. Not sure how your framework classes would be used to define the width, so I just put 'whatever' in that part. You might even be able to assign a class to the span element to define its width.
HTML:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3><span></span>
</div>
</div>
CSS:
.contact h3 {
color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
Just make a div that has a bottom border of the purple colour and thickness you want. Then float it left and that would give you your desired affect. You can then also place a text box inside that div if need be.