I'm trying to make a square whit another square attached but smaller. The idea it put text in the big square and an icon in the smaller square (I put an image of example at the end).
I'm using bootstrap 4, so the idea it's build this using html and css not only puting a image, to have the responsive features of BS4 and a consitence in the whole webpage.
Thank you in advance for any help!
Big square whit a small square attached
Are you familiar with ::before and ::after pseudoclasses?
You could do something like this. This assumes all preexisting styles on your big-box and you'll also need to add background color and sizing to the ::after element to make it look exactly the way you want it, but in terms of positioning this is how it can work. There are some great additional resources below from a great guy name Kevin Powell on the powerful and impressive capability of ::before and ::after.
.big-box {
position: relative;
}
.big-box::after {
content: url(<icon-image>);
position: absolute;
left: 100%;
top: 15%;
}
Before & After Pseudo-elements 1
https://www.youtube.com/watch?v=zGiirUiWslI
Before & After Pseudo-elements 2
https://www.youtube.com/watch?v=xoRbkm8XgfQ
Before & After Pseudo-elements 3
https://www.youtube.com/watch?v=djbtPnNmc0I
A bit over simplified, but you could have something like this:
HTML:
<div class="parent-box">
<div class="big-box">
<p>Nuestro Servicio</p>
<p>lorem ipsum</p>
</div>
<div class="small-box">
<i>icon</i>
</div>
</div>
Then css:
.parent-box {
display: flex;
}
.big-box {
background-color: green;
border-radius: 8px;
padding: 12px;
display: block;
width: auto;
}
.small-box {
background-color: green;
height: 24px; //height of the icon
position: relative;
top: 15px;
}
Related
I'm trying to teach myself some web coding, so please bare with me. At the moment, I'm creating a modal page whose modal contents have three div elements (a close button, an image, and paragraph tags). I have applied some padding on the left side of the divs in the modal content divs because I wanted the image and the paragraphs to be spaced next to each other pretty nicely. However, I want the padding to only apply to the image and the paragraphs tags, and NOT the close button.
My question is, is there a way to apply padding to only the image and paragraph tags, but NOT the close button div.
CSS
#modalPage1{
height: 100%;
width: 100%;
position:absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1 > #modalContent1 {
background-color: white;
height:100%;
width: 75%;
display:flex;
align-items: center;
position:relative;
}
#close{
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding:0%;
}
div > #modalTxt{
width: 80%;
}
#modalContent1 > div {
padding-left: 10%;
}
div > #modalImg{
width: 353px;
height: 447px;
}
HTML
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
<div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
The CSS code you currently have below applies the padding to every div that's inside the div with id="modalContent1". That's a problem because you can't specify what elements you want the padding to apply to; if it's a div, it gets padded. You could change the button to something that's not a div, but any other divs you add would still get padded.
#modalContent1 > div {
padding-left: 10%;
}
Instead of doing that, we can use classes instead, so only elements that belong to the class get padded. We can start by replacing the code above with the CSS below.
.padding {
padding-left: 10%;
}
This will apply the padding to every HTML element with class="padding".
Now we just have to add the classes into the HTML. You used ID="modalTxt" in your HTML twice, but IDs should only be used once, so we can replace that with class="modalTxt" instead. Make sure you replace that in your CSS too so you can keep the width customization, just change the # in div > #modalTxt to a . like this:
div > .modalTxt{
width: 80%;
}
Multiple classes can be used as long as they're separated by spaces, and having a separate class for padding lets you customize the padding on its own, and the elements' other attributes on their own. So your HTML would look like:
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
<div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
One last thing, you can safely remove the "modalFishTmg" class if you're not going to use it in any other elements, since you're already styling the image with an ID. Also, the classes could go in the divs where you put your <img> and <p> tags, but that would give the padding to anything that's in the div, which could be a problem if you add anything else.
To apply styling to every child div of #modalContent1 except for the div with identifier close this snippet uses the CSS :not pseudo class:
#modalContent1 > div:not(#close) {
/* set the padding as required here */
}
Just to make it obvious in this test, the background color of the relevant elements is set rather than padding:
#modalPage1 {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1>#modalContent1 {
background-color: white;
height: 100%;
width: 75%;
display: flex;
align-items: center;
position: relative;
}
#close {
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding: 0%;
}
div>#modalTxt {
width: 80%;
}
#modalContent1>div {
padding-left: 10%;
}
div>#modalImg {
width: 353px;
height: 447px;
}
#modalContent1>div:not(#close) {
background-color: cyan;
}
<div ID="modalPage1" class="modalFish">
<div ID="modalContent1" class="modalFishContent">
<div id="close">+</div>
<div><img ID="modalImg" class="modalFishImg" src="Images/Fish School.jpg"></div>
<div>
<p ID="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, I decided to use this as the background. Being that it's a dark color, it's easy to layer on different colors that will coordinate well, while
adding a pop to it. </p>
<p ID="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces appear a bit obscure, almost
reminiscent of a pile of leaves. Looking closely, we can see that the origami is in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
Note: view in full page othewise elements overlap and the effect cannot be seen correctly.
There are multiple ways to do this .
Add padding in #modalImg & #modalTxt.
Don't use 2 tags in img and p. Bring them under one div tag and apply inline CSS or a separate class or id .
I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.
When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.
Here's the CSS:
img {
position: fixed;
bottom: 280px;
right: 800px;
}
and the HTML:
<img src="bob.jpg" height="50%" width="20%">
Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?
img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;
}
etc.
And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?
Thank you!
If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.
The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:
body {
background-color: white;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
p {
text-align: left;
font-size: 12px;
max-width: 50%;
margin: 0 auto;
}
hr {
width: 50%;
margin: 3em auto;
}
<div class="marquee">
<h3>THE X-FILES EPISODE GENERATOR</h3>
<hr>
<p>Make your own episode!</p>
<p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
<hr>
<div class="wrap">
<button onclick="sentenceLoad()">Generate</button>
</div>
<div class="container">
<h5></h5>
</div>
<img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>
Use CSS margin instead of repetitive <br> tags
No need to redefine the font since it is inherited from body
Add CSS rules to external file instead of inline (for <hr> for example)
Use margin: 0 auto to center block-level elements like <p>
jsFiddle: https://jsfiddle.net/azizn/d1xmv65m/
I have a use case whereby I want to draw rectangles in CSS. I need them to look like this:
I've managed to get the smaller and taller boxes drawn but can't work out how to draw those that drop below the line. Here's a fiddle
Heres' my HTML:
<div class="word">
<p class="letter taller"></p>
<p class="letter"></p>
<p class="letter"></p>
<p class="letter hanging"></p>
<p class="letter"></p>
<p class="letter taller"></p>
<p class="letter"></p>
</div>
Here's my CSS so far:
p {
display: inline-block;
}
.letter {
padding 1.618em;
border-width: 1px;
border-style: solid;
width: 2em;
height: 2em;
}
.taller {
height: 4em;
}
.hanging {
/* not sure what to implement here */
}
Using margins may affect other elements, especially if you plan on including other content on your page. (See this) I'd recommend using position: relative combined with top: 2em. What that does is it pushes the element down 2em, relative to the original position of the element.
.hanging {
height: 4em;
position: relative;
top: 2em;
}
http://jsfiddle.net/WtuyL/6/
(On an unrelated note... here's a little bonus if you want to fully imitate the image and remove whitespace. You'll net to set a manual size to all <p> elements though.)
The simplest way is to use a negative margin-bottom to achieve this (you don't need to use positioning):
CSS:
.hanging {
margin-bottom: -16px;
height:4em;
}
JSFiddle
Note: also comment the whitespace between display:inline-block elements to remove it.
Reference - see this to see more hacks how to remove the whitespace between display:inline-block elements.
Try this.
.hanging {
height:4em;
margin-bottom:-1em;
}
I have a problem with regards to achieving a specific design goal, and I hope you can help me out here.
I made a picture in PS that I hope explains to you what I want:
Every part of this picture should be in an individual tag (for example div), and be placed like this.
The logo should be placed on top of the big picture, with just a little bit of space between the edges. The name is placed on level with the bottom of the picture OR in the middle (whatever looks best).
The headline (new 911) is placed along with the top of the big picture, the description is in the middle (always middle, length of text will vary) and the footer (info info) is aligned with the bottom of the picture.
Is this something anyone could help me with?
I have some code, but it doesn't work exactly as planned. Here's my HTML:
<div class="content">
<div class="left">
<div class="poster">
<div class="poster_img">
<img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
</div>
<div class="poster_name">Porsche</div>
</div>
<div class="img">
<img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
</div>
</div>
<div class="right">
<div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
<div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
<div class="footer">
<div class="info1">info</div>
<div class="info2">info</div>
</div>
</div>
Here's my CSS:
.content {
position: relative;
clear: all;
margin: 5px;
margin-top: 10px;
}
.left {
display: table-cell;
}
.poster {
position: relative;
margin-bottom: -50px;
height: 50px;
}
.poster_img {
display: table-cell;
position: absolute;
}
.poster_name {
display: table-cell;
padding-left: 52px;
font-size: 15px;
}
.img {}
.right {
display: table-cell;
padding-left: 10px;
}
.header {}
.main {}
.footer {}
.info1 {
display: table-cell;
}
.info2 {
display:table-cell;
padding-left: 25px;
}
Hope you can help me out here! :)
Aleksander.
Positioning elements with CSS is not as complicated as it seems (if your design concept is good).
I like using grids to cleanly position elements. However most of the time position: absolute; with a position: relative; on the parent element will suffice.
Read on about this here: Absolute Positioning Inside Relative Positioning
Also try to find a site that has a similar design and explore the source. It looks like porsche would be a good place to start. There are also lots of "Design Inspiration" sites were you might find what you're looking for.
Good luck.
Rather then going into the depths of positioning, you may want to consider a simple float in combination with clear. usually works well enough - given the right stack order.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}