Originally my design looked like this, and I was happy with it, except the loading time was quite bad because the big circle logo was an image.
So the only way I could think of speeding up the loading times is to change it from an image to css3, unfortunately I haven't been able to find a nice replacement, but this is what I have at the moment.
Now my main concern right now is trying to lessen the gap between "Pavel" and "Design" but I'm not sure how.
On a less important note if you have any method of me being able to keep the original design without horrible load times that'd be good. I tried decreasing img quality and the size went from 1.6MB to 140kb and the load was still bad.
div.homepage {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
/* Logo Design */
div.circle {
margin: 0 auto;
border-radius: 50%;
width: 900px;
height: 900px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p.pavel, p.design {
font-family: 'Open Sans', sans-serif;
font-size: 10em;
color: #708090;
}
<body>
<div class="homepage">
<div class="circle">
<p class="pavel">Pavel</p>
<p class="design">Design</p>
</div>
<ul>
<li class="button">Home</li>
<li class="button">About</li>
<li class="button">Services</li>
<li class="button">Contact</li>
</ul>
</div>
</body
Paragraph elements have a margin by default, if you remove it then they should be closer to each other vertically. You can adjust the margin or use some padding to get the spacing that you want.
p.pavel, p.design{
margin: 0;
}
Try this.
p.pavel, p.design{
line-height:1;
margin:0;
}
Related
I'd like to know how to shrink a row of images so that they all fit within a div with an unspecified height. The images should never scale up beyond their native height, and they must maintain their aspect ratio. Also, I'd like the height of the containing div to be limited to the native height of the tallest image. The image tags have no height or width attributes.
Here's a fiddle with what I have so far. I approached this using flexbox and object-fit: scale-down. The row of images in question are gray and are in the div with the green background. They currently do not scale at all, but they are at least centered vertically and horizontally how I'd like them to be. Here are before and after images of the effect I'd like to achieve (sorry for switching the green background to yellow in the images). Additional details below the code snippet, but that about sums up the basic question.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
background-color: pink;
}
<div class="flex-column">
<div class="primary">
<img src="https://via.placeholder.com/200">
<div class="mask">
<img src="https://via.placeholder.com/200/FF000">
</div>
</div>
<div class="flex-row">
<div class="context">
<img src="https://via.placeholder.com/75x150">
</div>
<div class="context">
<img src="https://via.placeholder.com/150x75">
</div>
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div>
</div>
</div>
I'm working on a (fixed-height) interface styled with CSS and will likely be asking a series of questions. I'm not great at CSS, so I'm open to approaches that are very different from my failed attempt!
At the top is a single centered image ("primary image"), below that are two other images ("secondary images") in a row, and below that is some text. Eventually, I'd like both sets of images to be responsive to changes in the height and width of the browser. However, I'd like to preferentially scale down the secondary images more than the primary image when the browser is too short to contain everything at native dimensions. For this, it seemed like flexbox containers with various flex-grow values would work here; it seems to work with the primary image somewhat, but the secondary images refuse to scale.
Also, I'm aware that, even if my current approach worked, the object-fit: scale-down strategy would leave behind some unwanted "padding" that will result in visual space between the secondary images. I have a feeling a very different approach may be required to get the effect that I want in the end, since I want the images to sit adjacent to each other without extra space around them. Furthermore, there also seems to be an issue with the container itself when the browser becomes very thin, since a scrollbar appears but it should always be 90vh.
Thank you all for the input!
Add a min-height: 0; rule for .flex-row. I guess that means it was pretty close to working when I asked the question.
This solution retains the issue I mention in my question about the additional "padding" created around images when object-fit: scale-down (or cover) is used. So, that means I'll be asking another question about that topic!
I am trying to draw a short horizontal line over an image. Like a quote followed by horizontal line followed by author name. An example of what I'm trying to do is below.
How can I achieve this in html css?
You can use either an hr or a div with a border. I made a simple example, hope it helps.
html, body{
height: 100%
}
body{
background: lightslategray;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.quote {
background: url('http://lorempixel.com/g/600/200/abstract/?random=true');
color: white;
background-size: cover;
padding: 2rem;
text-align: center;
}
hr {
width: 40%;
}
<div class="quote">
<h1>A dream doesn't become reality through magic<br/> it takes sweat, determination and hard work.</h1>
<hr />
<h2>Colin Powell</h2>
</div>
you can use the horizontal line in html <hr>
You can do it in several way. How you go about it will depend on what you are trying to accomplish. Here are two ways; one using br element and the other using a div (it could be a label too). If you want to use a different color and add more style to it, you want to go with the div
.motto, .author{
display: block;
text-align: center;
}
.motto{
font-size: 1.85em;
}
.br{
width: 50%;
height: 2px;
margin: 25px auto;
border-radius: 2px;
background-color: #0088ee;
}
<i class="motto">It is better to be feared than loved if you cannot be both</i>
<div class="br"></div>
<!-- <hr/> -->
<strong class="author">Niccolo Machiavelli</strong>
Comment out <div class="br"></div> and uncomment <hr/> to see the two results.
After spending all day long trying to found how to make a nice tumblr-like grid for my website, I'm posting here to find help.
here's the page: http://alexis.gargaloni.free.fr/main.html
In order to access to my project there's a grid of images displayed. At the moment it looks OK, but now that I need to add something new, it starts to look really bad. screenshot
As you can see, there's a white gap. I've tried many things and there's every time a gap (even when it's not supposed to be there).
Here's an example of what I want to achieve: http://alexgargaloni.tumblr.com
here's my HTML code (included filter):
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> TOUT</button>
<button class="btn" onclick="filterSelection('imprime')"> IMPRIMÉ</button>
<button class="btn" onclick="filterSelection('digital')"> NUMERIQUE</button>
<button class="btn" onclick="filterSelection('picture')"> PHOTO</button>
</div>
<div class="pic"> <img class="filterDiv picture" src="images/ego5-4.jpg" alt="ego graphique" style="width:40% "> <img class="filterDiv imprime" src="images/ihp1_1.jpg" alt="affiches pour l'institut henri poincaré" style="width:25%"> <img class="filterDiv imprime" src="images/jpogat17.png" alt="portes ouvertes lycée du gué à tresmes 2017" style="width:25%"><img class="filterDiv imprime" src="images/detailbook1.jpg" style="width:35%"> <img class="expav filterDiv digital" src="images/expavstatic.png" alt="expérience de la durée" style="width:35%" ></div>
and CSS:
html {
position: relative;
min-height: 100%;
}
body {
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
margin: 0 0 900px; /* bottom = footer height */
padding: 25px;
}
.img{
margin: 20px;
}
/* FILTER */
.container {
overflow: hidden;
}
.filterDiv {
float:left;
/*color: #ffffff;*/
width: 100px;
line-height: 100px;
text-align: center;
margin: 13px;
display:none; /* Hidden by default */
}
.show {
display: block;
}
.pic
{
max-width: 100%;
}
I'm new to HTML and CSS, and I know that my code is not a 100% clean and it could be way more simplified, but I'm working on it.
Excuse my English, I'm French
Thank for your help!
EDIT #ben_fluleck
Thank you. There’s a problem with “height: 100%”, because it modifies the aspect ratio of my pic. If I change height and width with max-width and max-height, the white gap is back. I also need to keep “display: none” on. filterDiv to make the filter function work (something with javascript). And also I’m having a problem with filter now, it still works, but pics are not getting how they’re supposed to (before:picture after:picture, it's like elements filtered create a white space instead of disappearing). I’ve tried to do something with the tumblr html, but it didn’t seem to work. Simple things are super tricky to do… I really need something that trick the size itself like tumblr theme, because when I’ll ad new things on my website, I feel like it’s going to be a mess again.
Yes, my footer is not really well implemented, I’ve checked online a way to make it because it’s really tricky, and how I did was the only way I was able to make it work. Thank a lot for you help! We can see the footer later, for the moment I really need to focus on this grid
Sorry, the picture in my Css above should be pic since you have named them you can constrain the pics giving them a width property. I would remove the inline styling for width and use percentages in the Css.
I have constructed a fiddle you could expand upon but it should give you a better idea of the layout.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.box {
flex: 1 1 auto;
color: white;
font-size: 50px;
text-align: center;
padding: 10px;
}
/* Colours for each box */
.box1 {
background: #1abc9c;
}
.box2 {
background: #3498db;
}
.box3 {
background: #9b59b6;
}
https://jsfiddle.net/sLjuLjoc/1/
Try these CSS Layouts they will get your pics in order
Flexbox or Grid
set a viewport height in the body and work of that
body{
background: white;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
line-height: 25px;
/* margin: 0 0 900px; */
padding: 25px;
height: 100vh;
display: flex;
flex-direction: column;
}
.pic {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}
.filterDiv {
float: left;
width: 100%;
line-height: 100px;
text-align: center;
height: 100%; /*optional if you want them to be all the same same */
}
.show {
/* display: block; */
}
I have a DIV at the top and a few anchors. First is styled with a logo and the rest are text. The styles I've set are as follows.
div.nav-top {
height: 120px;
vertical-align: middle;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
width: 200px;
height: 40px;
display: inline-block;
}
a.nav-link {
vertical-align: middle;
}
However, these elements are not centered in the div. The alignment seems to follow the image, which is at the top. The text gets in the middle relative to the image. It's not a bad idea but I need the whole system img-a-a-a-a to be centered vertically. At the moment I pad it but as soon as the height of the outer DIV changes, everything breaks.
What am I doing wrong?
(I've found this post but here they apply tables and such. Doesn't seem like the most appropriate solution. Perhaps I'm mistaken?
Using Flexbox
nav, .menu {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
}
li {
padding: 0 5px;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Using CSS Table
nav, .menu {
display: table;
}
.logo, .menu {
display: table-cell;
vertical-align: middle;
}
li {
padding: 0 15px;
display: table-cell;
vertical-align: middle;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
You can refer to this blog, where the owner describes centering issues. He started 2001 but be aware that the last update's been made last summer, and I admire his persistence. He presents clear examples on how to center in the different versions of CSS.
In your case, I'd suggest that you use display: flex like so. Note that the whole centering magic's done from the containing control and imposed on the underlying children. There's actually no need to style nav-link at all (see remark below the example, though).
div.nav-top {
height: 120px;
background-color: purple;
padding: 10px;
display: flex;
align-items: center;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
background-position: center center;
width: 200px;
height: 100%;
}
a.nav-link { }
That's a new thing in styling and recently implemented. The disadvantage of that is that older browsers might have problems rendering it. But the upside is that it's much more intuitive to the designers (and fetching a decent version of a browser is not a far reach, unless managed centrally by the corporate).
You might want to use margin for the anchor controls, as they're going to be squashed toghether. Also, the sizes and fonts will need adjusting. If you do that, you'll probably end up needing the style which I suggested wasn't needed but that's specifics only you're aware of.
a.nav-link {
margin: 10px;
font-size: 20px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
It's always a good practice to control height with paddings instead of a fixed height and margins to center. So, keeping that in mind:
Wrap the div with the logo and the div with the anchortags as children of a container div.
give the purple box there (or whatever it represents the corresponding padding top and bottom to center that parent div you created inside.
.purple{
background:purple;
width:400px;
display:inline-block;
padding: 20px 15px;
height:auto;
}
EDIT
or, if you MUST have a fixed height on the parent;
.purple{
background:purple;
width:400px;
display:inline-block;
height:60px;
padding: 0px 15px;
}
See this demo
You can wrap your elements into a div and use margin: 0, auto; for the elements and the inner container as well.
Use display: flex: in the div above the text then just repeat from there
div {
display: flex;
justify-contents: center;
align-items: center;
}
Not an elegant solution, but if you make a table with the text in one cell and the image in the next cell it's aligned in the middle.
I just got my first paying development job developing a website for a local rapper and I'm pretty nervous.
I'm working on the site logo and navbar at the moment and I've run into a bit of an issue.
This is what I've got so far:
What I want is to crop off the extra space to the top and bottom of the "Citi B" text in orange. After getting rid of that unnecessary space, I want to align it to the bottom of the limegreen div.
Here is all related code.
HTML:
<div class="title-wrap">
<div class="title1">
<h1>Citi B.</h1>
</div>
<div class="title2">
<img src="img/logo.jpg" alt="Dog Logo">
</div>
</div>
CSS:
.title-wrap {
width: 60%;
margin: auto;
background: limegreen;
height: auto;
}
.title1, .title2 {
background: orange;
}
.title1 h1 {
font-size: 6em;
bottom: 0px;
margin: 0px;
padding: 0px;
font-family: 'Pacifico', cursive;
}
Flexbox code:
.title-wrap {
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-align-items: flex-end;
}
This problem is probably very simple to solve, but I'm drawing a blank for whatever reason. Thank you for any help you can provide!
I don't understand your problem, but I think your problem is about space in top of the page.
You should know that body have a little margin and you should remove it.
This code maybe can help you.
body {
margin: 0;
}
Good Luck.