Make text completely fill container and clip mid-letter on edges - html
I'm trying to layer some text over an image, but want to allow the text to run off all edges of its container without extending the container. I'm going for something just like this:
where the background box is an image that's full-screen wide, and the text completely fills and overruns the image on all sides without extending its container. (That is, the image and the text should both be 100% wide.) I also wish to assign each word a unique id for other reasons.
Here's what I have right now: fiddle. So far I haven't been able to get the text to run off the right side of the image unless I set the width of #text-overlay to > 100%, which extends the width of the image container.
Is it possible to use something like text-overflow here? I'd be grateful for any help others can offer!
Code from fiddle:
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#banner-image {
height: 0;
padding: 0;
padding-bottom: 10%;
background: linear-gradient( rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5) ), url(http://placekitten.com/150/300);
background-position: 0% 0%;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
#text-overlay {
position: absolute;
max-height: 100%;
margin-left: -10px;
margin-right: 10px;
width: 120%;
overflow: hidden;
word-spacing: 3px;
}
#text-overlay div {
float: left;
padding-right: 4px;
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<body>
<div id="banner-image">
<div id="text-overlay">
<div id="word-number-0">Lorem</div><div id="word-number-1">ipsum</div><div id="word-number-2">dolor</div><div id="word-number-3">sit</div><div id="word-number-4">amet</div><div id="word-number-5">at</div><div id="word-number-6">suas</div><div id="word-number-7">utamur</div><div id="word-number-8">bonorum</div><div id="word-number-9">usu</div><div id="word-number-10">Appareat</div><div id="word-number-11">oportere</div><div id="word-number-12">ad</div><div id="word-number-13">nec</div><div id="word-number-14">meis</div><div id="word-number-15">consulatu</div><div id="word-number-16">vel</div><div id="word-number-17">eu</div><div id="word-number-18">partem</div><div id="word-number-19">equidem</div><div id="word-number-20">duo</div><div id="word-number-21">ne</div><div id="word-number-22">Affert</div><div id="word-number-23">corrumpit</div><div id="word-number-24">no</div><div id="word-number-25">eos</div><div id="word-number-26">Te</div><div id="word-number-27">cum</div><div id="word-number-28">appareat</div><div id="word-number-29">urbanitas</div><div id="word-number-30">laudem</div><div id="word-number-31">meliore</div><div id="word-number-32">appellantur</div><div id="word-number-33">mel</div><div id="word-number-34">te</div><div id="word-number-35">Quo</div><div id="word-number-36">no</div><div id="word-number-37">noster</div><div id="word-number-38">periculis</div><div id="word-number-39">accusamus</div><div id="word-number-40">tale</div><div id="word-number-41">scriptorem</div><div id="word-number-42">ad</div><div id="word-number-43">quo</div><div id="word-number-44">Nec</div><div id="word-number-45">tale</div><div id="word-number-46">partiendo</div><div id="word-number-47">id</div><div id="word-number-48">Eros</div><div id="word-number-49">aliquam</div><div id="word-number-50">vix</div><div id="word-number-51">ei</div><div id="word-number-52">ne</div><div id="word-number-53">eos</div><div id="word-number-54">nulla</div><div id="word-number-55">dolor</div><div id="word-number-56">disputationi</div><div id="word-number-57">No</div><div id="word-number-58">sit</div><div id="word-number-59">soleat</div><div id="word-number-60">facete</div><div id="word-number-61">efficiendi</div><div id="word-number-62">Eu</div><div id="word-number-63">animal</div><div id="word-number-64">integre</div><div id="word-number-65">sed</div><div id="word-number-66">sea</div><div id="word-number-67">no</div><div id="word-number-68">quaeque</div><div id="word-number-69">reformidans</div><div id="word-number-70">His</div><div id="word-number-71">ne</div><div id="word-number-72">homero</div><div id="word-number-73">tritani</div><div id="word-number-74">sed</div><div id="word-number-75">ea</div><div id="word-number-76">odio</div><div id="word-number-77">labore</div><div id="word-number-78">Odio</div><div id="word-number-79">delenit</div><div id="word-number-80">referrentur</div><div id="word-number-81">mel</div><div id="word-number-82">at</div><div id="word-number-83">has</div><div id="word-number-84">an</div><div id="word-number-85">etiam</div><div id="word-number-86">soluta</div><div id="word-number-87">molestie</div><div id="word-number-88">prima</div><div id="word-number-89">cotidieque</div><div id="word-number-90">ea</div><div id="word-number-91">eos</div><div id="word-number-92">Vix</div><div id="word-number-93">iusto</div><div id="word-number-94">tollit</div><div id="word-number-95">aliquid</div><div id="word-number-96">no</div><div id="word-number-97">audiam</div><div id="word-number-98">utamur</div><div id="word-number-99">prodesset</div><div id="word-number-100">ad</div><div id="word-number-101">pri</div><div id="word-number-102">cum</div><div id="word-number-103">dictas</div><div id="word-number-104">reformidans</div><div id="word-number-105">instructior</div><div id="word-number-106">ut</div><div id="word-number-107">Error</div><div id="word-number-108">quidam</div><div id="word-number-109">eu</div><div id="word-number-110">vel</div><div id="word-number-111">at</div><div id="word-number-112">mei</div><div id="word-number-113">aliquip</div><div id="word-number-114">volumus</div><div id="word-number-115">Ei</div><div id="word-number-116">regione</div><div id="word-number-117">aliquid</div><div id="word-number-118">quaerendum</div><div id="word-number-119">est</div><div id="word-number-120">Vel</div><div id="word-number-121">eius</div><div id="word-number-122">malorum</div><div id="word-number-123">at</div><div id="word-number-124">molestie</div><div id="word-number-125">copiosae</div><div id="word-number-126">interesset</div><div id="word-number-127">et</div><div id="word-number-128">cum</div><div id="word-number-129">Cum</div><div id="word-number-130">lorem</div><div id="word-number-131">splendide</div><div id="word-number-132">at</div><div id="word-number-133">debet</div><div id="word-number-134">everti</div><div id="word-number-135">maiestatis</div><div id="word-number-136">ut</div><div id="word-number-137">nam</div><div id="word-number-138">No</div><div id="word-number-139">vim</div><div id="word-number-140">putant</div><div id="word-number-141">liberavisse</div><div id="word-number-142">Ad</div><div id="word-number-143">euismod</div><div id="word-number-144">posidonium</div><div id="word-number-145">his</div><div id="word-number-146">graece</div><div id="word-number-147">quidam</div><div id="word-number-148">utroque</div><div id="word-number-149">eum</div><div id="word-number-150">te</div><div id="word-number-151">Nec</div><div id="word-number-152">ei</div><div id="word-number-153">commodo</div><div id="word-number-154">mentitum</div><div id="word-number-155">te</div><div id="word-number-156">his</div><div id="word-number-157">wisi</div><div id="word-number-158">detracto</div><div id="word-number-159">voluptaria</div><div id="word-number-160">Mei</div><div id="word-number-161">oratio</div><div id="word-number-162">antiopam</div><div id="word-number-163">contentiones</div><div id="word-number-164">et</div><div id="word-number-165">ex</div><div id="word-number-166">animal</div><div id="word-number-167">accommodare</div><div id="word-number-168">mei</div><div id="word-number-169">nullam</div><div id="word-number-170">admodum</div><div id="word-number-171">has</div><div id="word-number-172">at</div><div id="word-number-173">Ne</div><div id="word-number-174">tempor</div><div id="word-number-175">argumentum</div><div id="word-number-176">signiferumque</div><div id="word-number-177">quo</div><div id="word-number-178">nec</div><div id="word-number-179">ea</div><div id="word-number-180">feugiat</div><div id="word-number-181">postulant</div><div id="word-number-182">pri</div><div id="word-number-183">prima</div><div id="word-number-184">labore</div><div id="word-number-185">facete</div><div id="word-number-186">ut</div><div id="word-number-187">Eum</div><div id="word-number-188">gubergren</div><div id="word-number-189">consequat</div><div id="word-number-190">ut</div><div id="word-number-191">Alienum</div><div id="word-number-192">insolens</div><div id="word-number-193">evertitur</div><div id="word-number-194">est</div><div id="word-number-195">an</div><div id="word-number-196">Has</div><div id="word-number-197">ex</div><div id="word-number-198">labores</div><div id="word-number-199">tibique</div><div id="word-number-200">omittantur</div>
</div>
</div>
</body>
</html>
working fiddle first
Remove the margins and weird width and heights. Text should be 100% width, 100% height, no margin, no padding.
Set overflow: hidden on the parent container (so the text hides when it overflows)
Now you have text which fills the container completely, no space on the sides, no overflow.
Use transform: scale(1.1) (any number would work) to make the text slightly bigger so it spills out ever so slightly.
#banner-image {
height: 0;
padding: 0;
padding-bottom: 40%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(http://placekitten.com/150/300);
background-position: 0% 0%;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
#text-overlay {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
word-spacing: 3px;
transform: scale(1.1);
}
Related
Is an iframe considered an empty element even if it is showing an internal page within it?
Another week, another question I'm afraid. I've searched but I can't find an appropriate fix for this. I have an svg image with a number of areas in and I want to show a new iframe, which I have wrapped in a div, on top of the existing content when the links in the svg image are clicked. The div will be the same each time but the content of the iframe will be sourced from a different internal page for each link clicked.
The link part of this seems to work as I have removed the 'display:none' from the '.ifallc:empty' and I can see the iframe in the div is being populated when I click the links.
The problem is that when I add '.ifallc:empty {display: none;}' the iframe disapears on page refresh but it does not come back when I click the link to populate the iframe.
My question is, is an iframe with content from another page loaded still considered empty?
And if it is is there a simple way around this?
There are going to be a lot of data in the links and I am trying to prevent all the data on the linked pages from loading before it needs to be.
I hope there is enough code here to see whats going on.
box-sizing: border-box;
position: absolute;
top: -.2rem;
left: -.1rem;
z-index: 2;
/*background-color:#93c6e2;*/
border: .15rem solid #222;
border-bottom-right-radius: 0.5rem;
background: rgb(85, 85, 85);
height: auto;
width: auto;
max-width: 70%;
/* display: auto; */
/* background: linear-gradient(rgb(85, 85, 85),rgb(255, 255, 255)); */
/* display: none; /* FOR USE WHEN REQUIRED */
}
.ifallc { /*the iframe*/
display: auto;
box-sizing: border-box;
margin: auto;
border: auto;
}
.ifallc:empty {
display: none;
}
<a href="peif.html" target="ifall">
<path id="pe" class="landxx pe" d="m 649.707,798.409 c 0.997,-2.059 1.546,-3.468 3.113,-5.222 0.7,-0.783 1.24,-1.722 2.086,-2.366 0.613,-0.467 1.945,-1.093 2.001,-1.993 0.994,0.284 2.042,4.348 1.178,4.856 -0.629,0.37 -1.347,0.04 -1.8,0.682 -0.517,0.735 -0.401,1.737 0.622,1.882 -0.845,1.126 -0.609,2.552 0.724,1.115 1.17,-1.261 1.759,-0.377 2.87,0.565 0.952,0.808 2.042,-0.417 2.792,0.799 0.77,1.25 0.795,3.32 2.582,3.657 1.509,0.285 1.604,0.206 2.036,-1.463 2.884,-11.149 5.237,-15.065 1.92,-2.984 -0.482,1.754 0.515,-3.174 1.261,-4.859 0.383,-0.866 0.687,-1.349 0.701,-2.345 0,-0.632 0.957,-2.523 1.315,-0.825 0.241,-0.39 0.288,-0.8 0.141,-1.229 -0.06,-0.553 0.75,-1.151 1.045,-1.542 0.768,-1.021 1.729,-1.778 2.888,-2.309 2.522,-1.156 5.474,-1.581 7.776,-3.179 4.842,-3.362 8.195,-8.395 9.248,-14.131 0.394,0.417 0.873,0.583 1.439,0.5 -0.713,-1.66 0.03,-3.129 -0.958,-4.546 -0.39,-0.558 -2.329,-2.255 -2.209,-2.944 0.817,0.139 1.77,0.418 2.544,-0.04 0.767,-0.454 0.524,-0.602 1.389,-0.281 1.492,0.553 2.596,1.145 3.626,2.386 1.339,1.615 2.096,2.211 2.737,4.276 0.268,0.861 -0.07,1.565 1.122,1.668 1.151,0.1 0.85,0.56 1.646,1.271 1.544,1.381 2.681,0.646 3.219,3.003 0.417,1.826 0.339,2.265 2.286,2.848 2.098,0.628 0.117,3.076 1.188,4.296 0.581,0.661 1.487,0.886 2.335,0.851 0.529,-0.07 1.061,-0.118 1.595,-0.142 0.708,0 1.535,0.418 2.163,0.396 1.443,-0.05 3.152,-1.094 3.778,-2.353 0.661,-1.329 2.487,1.212 3.277,1.273 1.191,0.09 3.102,-1.774 3.95,-1.153 0.677,0.496 1.202,1.391 1.854,1.838 0.626,0.43 2.098,0.313 2.483,0.722 1.574,1.67 1.598,2.272 0.368,4.22 -0.985,1.56 -2.899,4.229 -3.172,6.044 -0.327,2.171 2.174,0.471 3.113,1.291 0.758,0.661 1.318,1.568 1.885,2.39 0.273,0.395 0.584,0.579 0.447,0.907 -0.09,0.7 -0.704,0.938 -1.131,0.151 -0.193,0.24 -0.386,0.48 -0.58,0.72 -1.122,-1.524 -3.609,-2.516 -5.024,-0.729 -1.613,2.038 -5.125,1.5 -7.443,2.114 -1.214,0.322 -1.801,1.67 -3.004,2.045 -1.264,0.395 -0.853,0.902 -1.695,1.66 -2.018,1.819 -3.416,1.297 -3.446,4.415 -0.01,1.081 0.06,1.987 -0.578,2.928 -0.603,0.895 -1.323,1.792 -1.083,2.939 0.249,1.19 1.275,2.882 -0.06,3.8 -1.119,0.771 -2.177,1.165 -3.094,2.24 -0.669,0.784 -1.017,1.675 -0.803,2.708 0.115,0.5 0.289,0.981 0.521,1.44 -0.559,0.243 -1.14,0.548 -1.561,1.001 -1.624,1.748 3.168,3.265 1.201,4.468 1.003,0.655 1.697,1.851 1.909,3.015 0.124,0.681 0.593,0.918 1.085,1.315 0.616,0.496 0.558,1.252 0.965,1.87 0.715,1.083 2.093,1.593 2.595,2.847 0.599,1.495 -0.55,2.408 -1.371,3.483 1.777,0.93 4.389,0.09 6.154,1.267 1.146,0.761 2.204,2.739 1.766,4.133 2.387,0.3 5.447,0.817 7.57,-0.636 1.34,-0.917 3.087,-4.232 4.891,-4.254 -0.211,0.867 -0.885,0.911 -0.355,1.807 0.562,0.951 -0.378,1.9 -0.318,2.986 0.154,2.824 0.251,5.72 0.593,8.527 0.927,-0.813 1.554,0.849 2.52,0.755 1.332,-0.13 2.266,-1.179 3.635,-1.167 1.306,0.01 2.252,-0.139 2.632,1.152 0.578,1.961 1.963,3.579 2.957,5.368 1.001,1.801 1.998,3.604 3.028,5.39 0.896,1.552 1.69,2.53 0.221,3.63 -1.295,0.969 -1.448,2.719 -0.977,4.115 0.408,1.205 0.109,2.815 0.177,4.988 0.03,0.937 1.17,2.128 1.211,3.1 0,0.06 -0.833,2.366 -0.9,2.427 -0.876,0.792 -1.396,2.227 -1.803,3.332 -0.744,2.019 1.247,2.191 1.252,3.76 0,1.114 -0.73,1.573 -0.938,2.653 -1.168,-0.801 -3.788,-3.527 -4.288,-1.497 -0.345,1.4 0.301,0.92 0.45,2.673 0.08,0.2 -1.168,-1.154 -0.666,-0.728 -0.01,0.296 -1.669,1.773 1.288,2.819 0.105,-1.402 1.81,0.859 2.605,0.633 0.456,-0.13 0.218,0.509 0.128,1.573 0.91,0.263 2.526,0.709 2.673,0.135 0.121,0.02 0.846,0.116 1.051,0.271 -0.585,3.217 -0.181,2.501 0.257,2.863 -0.323,0.668 0.139,0.516 -0.322,1.114 -0.792,1.028 -1.505,2.592 -2.458,3.539 -0.415,0.412 -0.99,0.631 -1.318,1.134 -0.602,0.923 0.647,0.492 0.808,1.265 0.207,0.991 0.606,0.956 0.253,1.399 -5.734,7.2 -1.924,0.984 -2.163,1.487 -0.536,1.129 0.861,2.579 0.105,3.875 -0.651,1.116 -2.026,1.511 -3.241,1.511 -1.364,0 -2.414,-1.019 -3.339,-1.891 -1.091,-1.027 -2.285,-1.508 -3.465,-2.344 -2.094,-1.483 -1.937,-4.181 -4.447,-5.211 -2.971,-1.22 -4.973,-4.122 -8.118,-4.896 -1.472,-0.362 -2.984,-1.379 -4.263,-2.175 -1.531,-0.952 -3.187,-1.271 -4.747,-2.112 -1.527,-0.825 -2.823,-2.085 -4.354,-2.957 -1.722,-0.98 -3.437,-1.941 -5.176,-2.894 -1.469,-0.805 -2.354,-2.651 -3.51,-3.84 -1.532,-1.576 -3.691,-2.404 -4.762,-4.36 -0.604,-1.104 -1.373,-2.43 -2.433,-3.095 -0.927,-0.582 0.304,-2.806 -1.32,-2.526 0.02,-0.281 0.09,-0.548 0.216,-0.8 0.242,0.144 0.482,0.291 0.72,0.44 0.64,-3.198 -0.743,-4.856 -2.346,-7.476 -1.456,-2.38 -2.445,-4.897 -4.486,-6.832 -0.612,-0.581 -1.237,-0.887 -1.07,-1.682 0.192,-0.915 -0.344,-1.942 -0.781,-2.704 -0.429,-0.749 -0.948,-1.552 -1.613,-2.117 -0.612,-0.521 -1.657,-0.768 -2.046,-1.526 -0.05,-0.397 -0.01,-0.791 0.107,-1.18 -0.121,-0.863 -0.668,-1.851 -1.061,-2.615 -0.753,-1.465 -1.781,-2.763 -2.616,-4.179 -0.787,-1.334 -1.229,-2.932 -1.786,-4.369 -1.3,-3.356 -3.396,-5.94 -4.338,-9.185 -1.287,-4.429 -5.048,-7.125 -6.755,-11.5 -1.953,-5.004 -5.991,-8.57 -10.887,-10.634 -0.431,-0.182 -2.046,-0.57 -2.101,-1.167 -0.08,-0.832 -0.251,-2.22 0.944,-2.072 2.126,0.264 1.319,-1.746 0.631,-2.793 -0.971,-1.477 -1.937,-2.094 -1.988,-3.931 0.197,-0.236 0.389,-0.476 0.576,-0.72 -0.04,-0.28 -0.885,-1.054 -1.074,-1.268 -0.994,-1.12 -0.386,-1.78 -0.802,-3.047">
<title>First</title>
</path>
</a>
<div class="miscbar"><iframe name="ifall" class="ifallc"></iframe></div>```
As per the specification, the :empty pseudo-class matches elements that has no children. By children, it means it could either be an element or just text. If you defined your iframe like this: <iframe src="//example.com"></iframe> It will be counted as empty. (see jsfiddle) However, if you start adding texts inside: <iframe src="//example.com">No iframe support</iframe> It will not be considered empty. (see jsfiddle)
I managed it :) I put an empty header in the wrapper div (misc bar) which contains the iframe and removed the line height and visibility of the header. Then I sent some text to that header at the same time the iframe is populated. I can now add border and background to the contents of the html which will only appear when the link is clicked.
<a href="peif.html" target="ifall" onclick="document.getElementById('miscbartitle').innerHTML = 'Enjoy'">
.miscbar { /*the outer div*/
box-sizing: border-box;
position: absolute;
top: -.2rem;
left: -.1rem;
z-index: 2;
/*
border: .15rem solid #222;
border-bottom-right-radius: 0.5rem;
background: rgb(85, 85, 85);
height: auto;
width: auto;
max-width: 70%;
*/
margin: 0;
padding: 0;
border: none;
}
.ifallc { /*the iframe*/
display: auto;
box-sizing: border-box;
margin: auto;
border: auto;
border: none;
}
#miscbartitle {
visibility: hidden;
line-height: 0;
}
Right items in header-bar not vertically centered. float:right'ed items seem to not inherit *ed properties
I am trying to create the following design
Where the left side is an image followed by a tag with words.
on the right are the menu options which should look like they are clickable. The slashes that separate them should never move change color etc. However "About" "Contact" and "The Future" will eventually look different when hovered over and will take you to different pages on the site.
So when I attempted to create this I made the following HTML and CSS (make sure the window is wide when you run it)
.modernShadow {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.fittingObject {
max-width: 100%;
max-height: 100%;
}
#topdiv {
position: fixed;
z-index: 2;
background-color: #4FBEA9;
width: 100%;
height: 44pt;
padding-top: 3pt;
padding-bottom: 3pt;
padding-left: 3pt;
padding-right: 3pt;
}
#topdiv * {
display: inline;
vertical-align: middle;
}
.title {}
.titleLogo {}
.titleHere {
color: white;
}
.rightList {
float:right;
vertical-align: middle;
}
<header>
<!-- Displays in tab bar -->
<title>Logo Here</title>
<div id="topdiv" class="modernShadow">
<img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
<h1 class="title">
<h1 class="titleLogo">Logo</h1>
<h1 class="titleHere">Here</h1>
</h1>
<nav class="rightList">
<ul>About</ul>
/
<ul>Contact</ul>
/
<ul>The Future</ul>
</nav>
</div>
</header>
And the result is this
And I can't explain why because I don't understand what is happening to make it this way.
Why are components under float:right not vertically aligned like everything else? I believe #topdiv * gives every subcomponent the style vertical-align: center so why isn't that coming into play?
Where is the spacing between the words and the "/"s coming from?
I am not sure it isn't just a fluke that "Logo Here" is appearing vertically centered... Maybe that is just the font size? But that is set by the .fittingObject css. (the title logo should be as big as it can be)
The end goal is essentially the picture above. The font size of the right items is variable and the text should just always be vertically centered inside of the containing div.
Answers:
Float doesn't work with vertical align, read more about it here; CSS Vertical align does not work with float
UL's have the property padding-inline-start which has a default of 40px and is pushing content to the right.
Max width and Max height properties only specify the limit of a certain element, it doesn't indicate their actual width and height values.
I modified your html to include wrapper divs; classes with left and right. In the right div I placed your rightList which has line-height css property and is an alternative to vertical-align:middle.
.modernShadow {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.fittingObject {
max-width: 100%;
max-height: 100%;
}
#topdiv {
position: fixed;
z-index: 2;
background-color: #4FBEA9;
width: 100%;
height: 44pt;
padding-top: 3pt;
padding-bottom: 3pt;
padding-left: 3pt;
padding-right: 3pt;
}
#topdiv * {
display: inline;
vertical-align: middle;
}
.title {}
.titleLogo {}
.titleHere {
color: white;
}
.left,
.right {
width: 49%;
display: inline-block;
}
.rightList {
width:230px;
float: right;
line-height: 60px;
}
.rightList ul {
padding-inline-start: 0px;
}
<header>
<!-- Displays in tab bar -->
<title>Logo Here</title>
<div id="topdiv" class="modernShadow">
<div class="left">
<img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
<h1 class="title">
<h1 class="titleLogo">Logo</h1>
<h1 class="titleHere">Here</h1>
</h1>
</div>
<div class="right">
<nav class="rightList">
<ul>About</ul>
/
<ul>Contact</ul>
/
<ul>The Future</ul>
</nav>
</div>
</div>
</header>
do you have any particular reason to use <ul> for all the navs? if you use <ul> <li>About</li> / <li>Contact</li> / <li>The Future</li> </ul> it will generate the display as you wanted. the <ul> has default user agent stylesheet. and for the vertically centered text, if you already set the height for the blocks, you can always use the same statement for line-height (in this case is 44pt) to make it vertically centered.
Basic vertical center in CSS behaving strangely on floated element
So i've come to live by these 3 CSS rules that almost always vertically center any block level element:
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
It works often. But in the case of this particular layout I'm building it is pushing the elements too high ( partially off the screen ) and I don't know why.
This is how the webpage looks before adding my vertically-center class to my portrait-container div:
And this code snippet is how it appears after adding the vertically-center class to the portrait-container div:
.clearfix:after {
content: "";
display: block;
clear: both;
}
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
body {
overflow: hidden;
}
main {
padding-top: 50px;
background: #fafafa;
text-align: left;
}
.portrait-container {
float: left;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
float: right;
}
<main class="clearfix">
<div class="portrait-container vertically-center">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
</div>
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good Kool Aid, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</main>
I just want the image container to be vertically-centered regardless of the height of it's parent. Help? Inspecting elements gave me no insights.
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
Related question: What does top: 50%; actually do on relatively positioned elements?
Your CSS was not bad but I didn't get along with it. So here is another approach on how you could solve it, maybe it helps also. It will always center the image vertically and does not matter how much text the box on the right will have. The colored borders are just there to help show the visual effect of the box sizes.
* {
box-sizing: border-box;
}
.portrait-container {
position: relative;
margin: 20px 0;
}
.portrait-container:after {
content: '';
display: block;
clear: both;
}
.portrait-container img {
position: absolute;
top: calc(50% - 80px); /* 50% from top minus half img height*/
width: 150px;
height: 160px;
border-radius: 50%;
float: left;
}
.portrait-container {
border: solid 2px orange;
}
.portrait-container .about-container {
border: solid 2px green;
padding: 0 50px;
margin-left: 150px; /* this elements should be at least 150px away from left side */
width: calc(100% - 150px); /* the max width this element should have to be placed */
/* next to the image is the total width(100%) - the image width */
}
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
UPDATE
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
The black circle is the only element there in the Fiddle, there's no obstructions. In the code you are having trouble with, you have many elements either in the way or wrapped around other elements trapping them. Your ruleset will work if you start stripping away the layers. Or you can just add a property and change another property as per Snippet 1.
One important note a relative element is actually occupying the original spot, so if given a left:40px it appears to be moved 40px to the left, but in reality it still occupies the space 40px to the right of where it appears to be. So relative elements are not really in a flow different from static elements. Therefore they are affected by and affect static layout, it's just not noticeable normally because they stack with z-index.
Snippet 2 is an interactive demo, I figured maybe that'll help explain things better.
The 3 CSS ruleset is a common way to vertically align elements, but it was originally position: absolute instead of position:relative and it had to be in another positioned element if I remember correctly.
REFERENCE
Specific Ruleset
W3Schools
MDN
SOLUTION
.vertically-center {
/* Changed to absolute from relative */
position: absolute;
top: 50%;
transform: translateY( -50% );
}
main {
/* Added position: relative */
position: relative;
padding-top: 50px;
background: #fafafa;
text-align: left;
}
SNIPPET 1
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50%);
}
body {}
main {
padding-top: 50px;
overflow: scroll;
background: #fafafa;
text-align: left;
}
img {
width: 150px;
border-radius: 50%;
float: left;
}
.about {
width: calc(100% - 150px);
float: right;
}
<main class="clearfix">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko" class="vertically-center">
<article class="vertically-center about">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all of my favorite work. When I'm not creating things, I enjoy excercising, playing video games, drinking good Kool Aid, and more.</p>
<p>If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</article>
</main>
SNIPPET 2
$('#b1').click(function() {
$('body').toggleClass('R S');
});
$('#b2').click(function() {
$('#N1,#N2,#N3').toggleClass('N M');
});
$('input[id$="2"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('left', num + '%') : $('section.S').css('margin-left', num + '%');
});
$('input[id$="3"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('top', num + '%') : $('section.S').css('margin-top', num + '%');
});
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: scroll;
font: 400 12px/1.2 Consolas;
}
section {
width: 50px;
height: 150px;
border: 2px dashed grey;
text-align: center;
color: white;
}
.R {
position: relative;
background: rgba(0, 0, 255, .3)
}
.A {
position: absolute;
background: rgba(255, 0, 0, .3)
}
.F {
position: fixed;
background: rgba(0, 255, 0, .3)
}
.S {
position: static;
background: rgba(122, 122, 0, .3)
}
.N {
position: absolute;
background: yellow;
color: blue;
}
.M {
position: relative;
background: black;
color: yellow;
}
#R1 {
left: 20%;
top: 3%;
z-index: 1;
}
#A1 {
left: 42%;
top: 44%;
z-index: 2;
}
#F1 {
right: 20%;
top: 44%;
z-index: 3;
}
#S1 {
margin-left: 0;
margin-top: -28%;
}
#N1 {
bottom: 0;
right: 0;
width: 25px;
height: 80px;
z-index: 4;
}
input {
width: 6ex;
position: static !important;
}
button {
font: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='S'>
<fieldset>
<button id='b1'>Body Relative/Static</button>
<button id='b2'>Nested Absolute/Relative</button>
<br><br> RLeft
<input id='R2' class='R' type='number' value='20'> RTop
<input id='R3' class='R' type='number' value='3'> ALeft
<input id='A2' class='A' type='number' value='44'> ATop
<input id='A3' class='A' type='number' value='44'><br> FLeft
<input id='F2' class='F' type='number' value='64'> FTop
<input id='F3' class='F' type='number' value='44'> SLeft
<input id='S2' class='S' type='number' value='0'> STop
<input id='S3' class='S' type='number' value='-28'><br> NLeft
<input id='N2' class='N' type='number' value='45'> NTop
<input id='N3' class='N' type='number' value='45'>
</fieldset>
<section id='R1' class='R'>RELATIVE
<section id='N1' class='N'>N<br>E<br>S<br>T<br>E<br>D</section>
</section>
<section id='A1' class='A'><br><br><br>ABSOLUTE</section>
<section id='F1' class='F'><br><br>FIXED</section>
<section id='S1' class='S'><br><br><br><br><br>STATIC</section>
</body>
You can achieve this by using flexboxwith a lot less code. The below code will do the trick.
.clearfix {
display: flex;
align-items: center;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
padding-left: 30px;
}
Check it out in codepen http://codepen.io/anon/pen/OWYxrb
Image behind content in Div
I am trying to create something similar to the attached image where the images show up all of the time and then on hover the content shows up with the color overlay.
Right now I have the images as a background to the div, but I'm not sure if that's the best way to go about this because I cannot find a way to make the image be the correct height in the div. The link is mtmdevbox.com
Thanks in advance!
HTML
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p>
</div>
</div>
CSS
.img-one {
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat;
width: 65%;
background-size: 100%;
float: right;
clear: both;}
screenshot of design
I think this is what you're after. Let me know if it helps!
<div class="article">
<div class="content">
<h1>
This is your title
</h1>
<p>
This is your content
</p>
</div>
</div>
CSS
.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; }
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; }
.content h1 { margin: 0; padding: 0; }
.article:hover .content { display: block; }
https://jsfiddle.net/2rb18h0r/
Rather than floating the elements, you can use positioning instead. Something like:
.img-one {
background-image: url("http://i.imgur.com/5BK0htU.png");
/*background-repeat: no-repeat;*/
width: 100%;
height: 300px;
position: relative;
background-size: 100%;
cursor: pointer;
}
.img-one .hidden-content {
position: absolute;
opacity: 0.2;
transition: all 0.4s;
left: calc(35% - 10px);
width: 65%;
height: 100%;
background: rgba(200, 200, 200, 0.4);
border-left: 10px solid white;
}
.img-one:hover .hidden-content {
opacity: 1;
}
.hidden-content h1 {
margin-left: 5%;
}
.hidden-content p {
width: 35%;
margin-left: 5%;
}
<div class="homepage-content img-one">
<div class="hidden-content">
<h1> For Guests </h1>
<p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam
reium harum sum</p>
</div>
</div>
In the above demo I have set the opacity to 0.2, however setting this to 0 will allow a complete 'hidden' state.
I have decided to use the opacity CSS instead of display:hidden|none as it will allow for transitions/smooth fade in effects. If you don't want that, you can set the initial state of display:hidden and then on the hover state use display:block|inline-block
Coding with background images
Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images. I was able to solve this adding to the link element these properties: position:absolute; z-index:9 and then it should work. EDIT Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css: http://css-tricks.com/perfect-full-page-background-image/