I want to create a CSS box to act as a 'logo' piece or what have you, centered in another div on the middle of the page - I'm using bootstrap 3, put the div in a container-fluid for a full-width page as I wanted, and went about starting on the logo portion of it.
My code is as follows
.logo{
width: 50rem;
height: 50rem;
margin: 0 auto;
text-align: center;
font-size: 15em;
font-weight: 100;
font-family: 'Raleway' , sans-serif;
color: white;
border: 14px solid black;
}
For whatever reason, this doesn't actually make a square - I'm assuming this is based on the font-size, but it seems like the larger the font goes, it just spills outside of the box - so I can't for the life of me figure out how to both vertically align this text and create a perfect square around the text while I'm at it. Any insight would be greatly appreciated - thanks!
I have a container div that is basically that can be your body. The size can be adjusted.
Then there is the logo class. This class has a relative width.
In the examples case: 50% of its parent (container class)
There is no fixed height of the box so it height is based on the text.
The box is positioned in the center trough absolute positioning and transforming it again.
.container {
position: relative;
width: 500px;
height: 500px;
background-color: gray;
}
.logo {
position: relative;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 3em;
font-weight: 100;
font-family: 'Raleway', sans-serif;
color: white;
box-sizing: border-box;
border: 14px solid black;
}
<div class="container">
<div class="logo">
Some random text goes here?
</div>
</div>
Related
I'm new so please be as simple as possible. I want to put words over a picture and got code that words below. The text appears on a black box in the lower right. I want it to appear in the upper left.
When I change in text box bottom to top and right to left it takes up the whole image. If I keep it on the right-it goes down all the way to the bottom of the image. Even if I try to increase the px to make it not so long it doesn't work. How can I fix this & what am I doing wrong?
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<div class="container">
<img src="pdf/library.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
The positioning of the element is based on the left, right, top and bottom and it will be relative the element you positioned to (in your case is the div with the container class).
If you will use only left and top it will work as you expect. The values is how much space from that side it will take.
Also, if you use 3 or 4 sides, it will stretch the element so the boundaries of it will be on the side you specified.
For example (I used sample image from google for the snippet):
#TEST {
background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
border-radius: 3px;
margin: 1em 0;
color: #fff;
}
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
top: 20px;
left: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<section id="TEST">
<div class="container">
<img src="https://www.petcareplus.ie/wp-content/uploads/2020/04/dog-puppy-on-garden-royalty-free-image-1586966191.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
</section>
I have an dynamic div displaying some information that I want to position in an exact position relative to the background of the page. For example, I want to put a number 9 let's say, over the eye of a cat. In "full" resolution, this works fine, but tying the margin-left to a pixel size, or even a percent, will cause this to break. The code for the "eye" is something like this:
.catEye {
position: absolute;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
margin-top: 100px;
margin-left: 68px;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
Here is a plunkr that displays the problem. The problem is most evident at smaller resolutions. When in "full" resolution, the "9" should be directly over the cat eye.
http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview
I am using Foundation for the block-grid setup, 5 items per row. As the image I have is a certain size, this should generally remain the same if possible.
Question: Is there a way to get the "9" to always position directly over the eye, no matter the browser resolution? In my actual work, it needs to be positioned directly over a corner piece, so movement is very noticeable.
Clarification: After thinking about it, what I'm basically asking is positioning relative to the image element, because no matter the size/placement of it, as long as the "9" is placed relative to it, it would work.
I guess you meant to have sort of background-size:cover for the cat, I don't think that is possible in that case.
Currently, the relative position is set on the element that can be larger than 200px (which is the image size), and you have center value set on the background, so that it moves. The cat eye is always staying in the same place but not the cat image.
To fix it, you can set the relative element to max-width: 200px;. Simplified demo follows.
JSFiddle Demo
.imgCat {
background: url("http://i.imgur.com/qpbY8VC.png");
max-width: 200px;
height: 200px;
position: relative;
}
.catEye {
position: absolute;
left: 75px;
top: 95px;
width: 30px;
height: 30px;
display: block;
border: 2px solid orange;
border-radius: 50%;
}
<div class="imgCat">
<span class="catEye"></span>
</div>
First thing you can use left: and top: property to position an absolute/relative img (instead of margin-left & margin-top).
Second depending on how the containing img is resizing I'd set the left: and top: property with a percentage value.
Third use relative positioning (relative to static parent - like in your scenario).
put this in your CSS and let me know if it's the desired rendering
.imgCat {
background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
height: 200px;
}
li {
padding: 10px;
border: 1px solid #000;
}
.catEye {
position: relative;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
top: 50%;
left: 35%;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
BTW: actually the cat img doesn't look very responsive...
I've created a long scrolling website composed of different sections which fill up the whole screen. One Section contains some pretty lengthy text but the top and bottom parts of the text are cut off. Basically my div won't stretch all the way to accommodate the text. I would like my div to be able to stretch to at least 200% down.
fiddle
I've tried
overflow:auto;
min-height:100%;
This is what it looks like, as you can see at the bottom...the text is cut off.
If I remove Position: absolute; The whole text moves to the left and the bottom text is still cut off.
This is part of my html:
<section id="slide-15" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<h1>CV GUIDE</h1>
<br>
<h2>
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
</div>
</div>
</section>
and part of style.css
#slide-15 .bcg {
/*position: relative;*/
background-color: #1C1C1C;
min-height: 100%;
overflow: auto;
/*padding:150px;*/
}
slide-15 .hsContent {
position: relative;
}
slide-15 .hscontainer {
width-100%
min-height: 100%;
overflow: auto;
/* position:relative;*/
}
#slide-15 h1 {
margin: 70px;
color: #ffffff;
font-size: 30px;
line-height: 20px;
position: relative;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
#slide-15 h2 {
color: #ffffff;
font-size: 14px;
line-height: 150%;
position: absolute;
line-spacing: 1px;
text-align: justify;
width: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
with position:absolute it gets cut out of the workflow ,so you need to remove it with you want the parent div to adjust to height;
also set it to display:inline-block ,
check fiddle
You've got a lot of syntax errors in CSS,
I cleaned it up a little here's an updated fiddle
Try creating a class in css like this:
.test {
white-space: nowrap;
}
and apply it to your h2:
<h2 class="test">
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
There is probably a relentlessly simple solution to this but I've been chasing my tail for a while so I've come to ask those wiser and smarter than me.
I've got a website for a personal project I'm making which displays images within a lightbox. See image:
The header area (red) is fixed height.
I want the images (yellow) to sit within a light box (green) which also has a caption. Crucially the images displayed need to retain their aspect ratio, 5:4, and fill the remaining height left below the header (bar a small margin top and bottom).
There's probably a really simple, elegant solution out there but I've not found it.
Any help gratefully received.
EDIT ---
Here's a fiddle of what I'm trying to do: http://jsfiddle.net/qh2V8/
Even this isn't right as I've had to put a fixed width in to even try and get it to work.
CSS:
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 145px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 155px;
bottom: 20px;
padding: 8px;
padding-bottom: 30px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: #FF0;
width: 400px;
}
#overlayContainer img {
position: relative;
height: 100%;
width: 100%;
}
#overlayBg p {
position: relative;
padding-top: 8px;
padding-bottom: 10px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
}
HTML:
<div id="header"></div>
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" />
</div>
<p>Caption</p>
</div>
The image size need to be set through scripting, unless the images are a fixed constant size. The following link is of good help to your problem: Change image size with JavaScript
I'm pretty sure that you can get the original size of the image through yourImg.Style.Height and yourImg.Style.Width, and then make the calculations required to make it a 5:4 picture..
Here's where I got to.
There are fixed ratio solutions if you are basing the size of the element on width, using :before and padding-top. There's a good write up here.
There is a fixed ratio solution if you are basing the size of the element on height, however the height must be a % of the height of the screen. Written up here in another Stackoverflow question:
Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug
If you have a fixed pixel size header or footer and need an element to expand to fill the exact size remaining you can't do it with just HTML and CSS.
Here's a codepen.io of where I got to:
http://codepen.io/niazipan/pen/ydkGt
JS to set the image height, and CSS to style everything else around it. Code below:
HTML
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" id="yourImgId" />
</div>
<p>Caption</p>
</div>
CSS
html, body {
height: 100%;
text-align: center;
}
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 55px;
padding: 8px;
margin-left: auto;
margin-right: auto;
background: #FF0;
position: relative;
text-align: left;
}
#overlayContainer {
height: 100% !important;
width: 100%;
}
#overlayBg p {
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px;
}
JS
var size = window.innerHeight - 120;
document.getElementById('yourImgId').style.height = size + 'px';
document.getElementById('overlayBg').style.width = size * 1.25 +'px';
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}