I am currently in the process of developing my website, where it'll be done entirely with CSS and JS, within a single page, entirely responsive. I am currently stuck on an issue I am not sure there is a way around.
I have a div, that contains 1) a picture and 2) a label. They are currently side by side.
When the mouse hovers over the div, the div extends to the right, but the picture stays the same size and location (left side of the div).
This makes the label appear (visibility set to true with JS) on the right side of the div.
My problem is I cannot figure out a way to center the label between the edge of the picture and the edge of the div it is contained within.
Here is some code:
index. html
<div class="menus1 " id = "menus1" style=" background-e: url('../images/background1.jpg');">
<img class = "images" src = "../images/handshake.jpg" id="pen"/>
<label style=" margin-left:5%; color:black; " class="visibleLabel" id="aboutMeLabel"><b>About Me</b> </label>
</div>
Where you see the "margin-left: 5%" is the closest thing I could get it to centering, it just isn't responsive.
Thank you :)
First of all, take the <style> tags* out of your html - its bad practice. Put all your style into your stylesheet. You can always add another class if needsbe.
by this i mean this kind of thing
style=" margin-left:5%; color:black; "
As for the centering, if you are looking to center the text within the label, just set your label css to text-align:center; - that would save a bit of bother.
Should you want to overlay the text on the image, then set the div background to the actual image? I see you have some kind of background there. You can always put a div within a div if thats your main background. And then include the label with the text-align-centered css within it.
Without a fiddle, or more code, it's difficult to know exactly what you're aiming for, but i hope this helps.
Rachel
Create another css file for the style tag or Add the style into head for example
<style>
text-align:center;
margin-left:5%
color:black;
</style>
JSFiddle
Related
I have some text inside a <p> that is inside a <div>. I have a css image shape that floats to one side. I want the text in the two upper boxes to wrap to the shape but also align to the bottom of the div. The two lower boxes work fine because I do not need to vertically align the text within them. The problem is, the text can vary in length and so can the amount of lines, so I can not use a fixed height. Therefore absolute positioning will not work, plus the text will ignore my floating css image shape.
I have read dozens of questions and answers and all of them seem to use hacks. There is also one question that seems to ask the same as mine, but I can't find it anymore, besides there was only one answer which was javascript based. I tried using flexboxes with align-items:flex-end; but that doesn't work well with my floating shapes. I also tried using a table and vertical-align:bottom; but my text just breaks to another line and doesn't wrap to the shape.
A workaround I came up with is to use padding-top on the text, but not knowing the height of the text means the text does not always position it to the bottom of the div, especially if the length of text changes.
EDIT: I am totally open to any new ideas. This was just the best approach I could come up with. I even started toying around with the idea of using only one shape for all four boxes. But that seems a bigger challenge.
EDIT: I also updated the URL's so you can now run the code snippet.
EDIT: I have decided to go the Javascript route and am working on a solution. I am open to any ideas.
EDIT: What bothers me the most, is that every single idea I come up with requires an army of Javascript. The solution, in my opinion, should NOT require a nightmare. CSS should be able to solve this, but I can't seem to find a way without Javascript.
div, img, p {
margin:0px;
border:0px;
padding:0px;
}
#wrapper {
display:block;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.box {
display:block;
position:absolute;
width:50%;
height:50%;
}
.box p { line-height:1.5em; padding:10px; }
/* The image shape is 300px x 300px. * /
/* I use 50vh because I want the shape size to always be half of the window height. */
/* This gives the illusion of one larger shape. */
.shape {
position:relative;
shape-margin:2em;
width:50vh;
height:50vh;
}
/* My workaround solution - #top_left p, #top_right p { padding-top:29vh; } */
#top_left { right:50%; top:0%; }
#bottom_left { right:50%; top:50%; }
#top_right { left:50%; top:0%; }
#bottom_right { left:50%; top:50%; }
#top_left p, #bottom_left p { text-align:right; }
#top_right p, #bottom_right p { text-align:left; }
#top_left .shape { float:right; shape-outside:url('https://i.stack.imgur.com/B1Dzu.png'); }
#bottom_left .shape { float:right; shape-outside:url('https://i.stack.imgur.com/Vxmz0.png'); }
#top_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/UL8uT.png'); }
#bottom_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/EGBRz.png'); }
<div id="wrapper">
<div id="top_left" class="box">
<img src="https://i.stack.imgur.com/B1Dzu.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="top_right" class="box">
<img src="https://i.stack.imgur.com/UL8uT.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="bottom_left" class="box">
<img src="https://i.stack.imgur.com/Vxmz0.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="bottom_right" class="box">
<img src="https://i.stack.imgur.com/EGBRz.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
</div>
I have created an image to illustrate. The pink borders are just to show the box boundaries.
shape_top_left.png
shape_top_right.png
shape_bottom_left.png
shape_bottom_right.png
The best you will probably achieve is through using the shape-outside property
Check out here for some documentation.
However, be warned as of 2019 this isn't supported in Internet Explorer or Microsoft Edge
A simple enough codepen example would be this
Well here is my Javascript solution. It requires a lengthy script so I will just get to the core of the solution.
The Workaround
With my CSS image shape floating to the right I can still get wrapping text, even though I want my text to align to the bottom. Since no working spec I have seen allows me to vertically align my text to the bottom and get it to wrap to a CSS shape, I need to create the illusion with padding-top. I solved the dilemma of not knowing my text height by running a series of checks through a loop in Javascript. Just check the initial height of the text, then add a single increment of padding-top, then compare with the parent container's height. Repeat this process until the text height reaches or exceeds the parent containers height. The important thing here is that each time you add an increment of padding-top, you change the height of the text. The more padding you add, and the closer the text gets to the CSS shape, the more the text wraps and flows differently. This is why we need to check the height on each increment. Since my text has a font size in EM units, I would have a hard time knowing it's computed height doing guesswork. Add in client zooming and it's a math nightmare! Rather we just check with single increments and no math needed, hooray!
My Javascript
This is just a core example, not the full script, but you should get the idea.
var counter = 0 ;
function checkHeight()
{
var container = document.getElementById("top_left") ;
var text = document.getElementById("top_left_text") ;
var container_height = container.offsetHeight ;
counter++ ;
text.style.paddingTop = counter + "vh" ;
var text_height = text.offsetHeight ;
if ( text_height < container_height ) { checkHeight() ; }
}
Another Future Solution
Using CSS Exclusions.
With CSS Exclusions you can have an element that does not float but, behaves like a floating element, so that content wraps around the element in much the way that floating elements do. Unfortunately, there is almost no support for this technology at the moment. That said, I would strongly encourage anyone interested to join the discussion and get more buzz going for the draft to maybe become a real spec. CSS Exclusions open up some really cool possibilities that, in my opinion, bring HTML out of the stone age in terms of document flow.
In the case of my problem here, I would simply be able to absolutely position my CSS image shape and get my layout without the need of Javascript. My text would be vertically aligned to the bottom because there would be no floats to say otherwise.
For those who want to know more about CSS shapes, read this excellent article.
I am trying to design a tumblr theme. I've set up a div with four buttons at the bottom of each post. One of these buttons is a share button. You hover over the share button and a div appears with links (you click and a new window opens and the post gets shared where ever you selected it to be shared).
In the example below: when I roll over the icon with the mouse, it comes up aligned to the left.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing
Also, when I resize the page, the menu ends up being in a totally different position.
I would like for the menu to appear as it appears in this image. I want the menu to appear directly beneath the div of buttons. I would like this menu to remain in the same position when in the page is resized or is a mobile viewport size. (This is a mock up I made with a photo editor) I've tried various adjustments in my code, etc with no avail.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing
Here is my code:
CSS:
.showme{
display: none;
width:100px;
height:120px;
text-align:right;
margin-top:30px;
z-index:5;
position:absolute;
float:right;
}
.showhim:hover .showme{
display : block;
z-index:5;
}
HTML:
<div class="showhim">
<li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
<i class="fa fa-share-square fa-lg"></i>
</li>
<div class="showme">
Twitter<br/>
Facebook<br/>
Google Plus<br/>
Pinterest<br/>
Email
</div>
I am open to any method to try and get this to work. I also have no problems with making this an onClick event rather than a hover event. My guess is that an onClick event would be smarter for mobile users (I'd love some input on this).
Any help is greatly appreciated.
At the minimum, you'll want to add something like:
right: 0;
to the CSS of .showme. This will place the block with its right border aligned with the right border of the containing block.
Note that the containing block is not necessarily the immediate parent. You probably want to add:
position: relative;
to the CSS of whichever element you want to use as the containing block (probably .showhim).
I have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:
test1
test2
test3
and so on....
html:
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
js:
$('span.account-info-icon').on("mouseenter", function(event){
$("#hover-container").show();
}).on("mouseout", function(){
$("#hover-container").hide();
});
The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover.
in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons.
Below is the css im using to position the overlay.
CSS:
#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;
}
Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js.
Any ideas appreciated!!!!
Thanks in advance!
To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.
On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:
#hover-container{
display:none;
position:absolute;
padding: 2px 0px 0px 9px;
left:100px;
}
Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:
.info-row-wrapper {
position:relative;
}
Pulling all of these together, you have:
<div class="info-row-wrapper">
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
</div>
Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)
please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/
Pretty much $el.hover() solves the thing.
and let me know if you have any doubts.
This looks better-
http://jsfiddle.net/L33jo3j7/4/
My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.