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.
Related
I am trying to code a resume template just to learn the basics about HTML and CSS. However I have a problem when it comes to positioning a rectangle inside another one. I have been searching for hours and how to fix this but not sure why it isn't appearing at all. I wanted the rectangle to appear over the blue one but under the "Name" text as like a highlighting bar.
I believe it has to do with how I am positioning my elements. I tried using z-index as well but none of the changes I am making is working.
Also as a quick follow up, I wanted to know why I can't align the text "Name" in the center of my rectangle. I tried doing text-align:center but that doesn't do anything either. I feel like I am missing a major concept here with both of these problems. Any insight would be appreciated.
I pasted the code I am working with here: https://jsfiddle.net/Lx09fvcw/1/
Specifically this HTML part:
<svg class = "leftBar">
<rect id="leftRec">
<div class="Name">Name</div>
<div class = "icon">
<img src ="img/education.png">
</div>
</rect>
<rect id = "rightRec"></rect>
</svg>
As an edit I originally wanted a rectangle above another one like this: https://imgur.com/a/eOUGT8n
I am trying to align everything inside an A4 Size Page, but the blue rectangle has a gap between the leftmost part of the A4 page. Since I am not allowed to use absolute, I would just like some insight into how to do that because nothing is working that I am trying online. Not asking for someone to implement it for me but just show me the way as it is a bit confusing. Thanks for the help
Current code: http://jsfiddle.net/05p9qo7t/1/
Keep in mind you can't directly append div as a child to rect, circle, and path. You just can do it with foreignObject, but I strongly not recommend that way.
But if you insist on such a thing you can check the foreignObject documentation here.
If you want to create a resume template in another way I can share some code for you for better illustration.
EDIT:
Here is an alternative solution for what you looking for, check the code snippet below:
.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.right-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.right-rect>span.name {
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.right-rect>span.name,
.container>div.right-rect>div.icon {
margin-top: 20px;
}
<div class="container">
<div class="right-rect">
<span class="name">Name</span>
<div class="icon">
<img src="img/education.png">
</div>
</div>
<div class="left-rect"></div>
</div>
NOTE: I just use 100vh and 100vw to fit every viewport, you can replace them with any suitable value.
Implementing left rectangle without position: absolute;
To avoid using position: absolute;, first of all, you should wrap all your element in your related parent, so you need to move
<div class="over-rect"></div>
and
<span class="name">Name</span>
to the related parent where in our case it is div with blue-rect class, then since we used pseudo-class styling we should modify some of our styles to make items fit the new position in the flow. After that we should get rid of position: absolute; and replace them with relative one.
This is optional and better for responsive designs in case you don't care about these stuffs you can keep up with absolute positioning.
But we also must do some modification in the flow with modifying the top element of items positioned relatively, so we add a top element to our style to move relative items with respect to their parent positioning.
Check out the code revises below:
body {
background: rgb(204, 204, 204);
}
.container {
width: 200px;
height: 29.7cm;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.blue-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 200px;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.blue-rect>div.over-rect {
position: relative;
top: 20px;
width: 100%;
max-width: 200px;
height: 3%;
background-color: red;
}
.container>div.blue-rect>span.name {
position: relative;
top: -18px;
z-index: 20;
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.blue-rect>div.icon {
margin-top: 10px;
}
.education {
width: 60px;
height: auto;
}
page[size="A4"] {
position: relative;
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
#media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
<page size="A4">
<div class="container">
<div class="blue-rect">
<div class="over-rect"></div>
<span class="name">Name</span>
<div class="icon">
<img class="education" src="img/education.png">
</div>
</div>
</div>
</page>
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; */
}
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;
}
So, I've just started learning HTML/CSS and I've been trying to figure out how to 'stick' a line under an h2 tag. What I mean by this is that in the HTML there is an h2 tag called Instructions followed by a div tag that contains 3 other divs that make up a line segment. By default the line is on the left side (naturally), but what I want to do is have the line stuck under the h2 tag so when the browser is extended or shrunk the line stays directly under the h2 tag instead of moving across the screen by itself.
I came across this site: http://www.barelyfitz.com/screencast/html-training/css/positioning/ and I was using it to try and see if absolute/relative positioning would help here. I guess I'm doing it horribly wrong since it doesn't seem to help.
I'm providing HTML/CSS and a jsfiddle below (The jsfiddle doesn't show how the line moves around when the browser is extended/shrunk, though so I'm hoping you get what I mean). If you can help guide me or give me some resources to understand what I need to do better that would be great :D
I'm sure this is trivial, but I'm trying to do my due diligence in learning it. There were a lot of different methods (I think) I found, but they seemed kinda complex.
HTML
<div id="instructions_box">
<h2>Instructions</h2>
<div class="line_divider">
<div class="blue_line"></div>
<div class="yellow_line"></div>
<div class="blue_line"></div>
</div>
</div>
CSS
#instructions_box{
display: inline-block;
//position: relative;
}
.line_divider{
background-color: aqua;
//position: absolute;
//bottom: 0;
//right: 2rem;
}
.blue_line{
height: 2px;
width: 50px;
background-color: rgb(0,0,139);
float: left;
}
.yellow_line{
height: 2px;
width: 90px;
background-color: yellow;
float: left;
}
#instructions_box h2{
text-align: center;
}
https://jsfiddle.net/10szzwvs/1/
Thanks
The wrapping you're seeing is, I think, due to the fixed widths you're using. Change your line width to percentages and it wont wrap on any size screen. Note you'll need to add your visual spacing elsewhere, e.g. on the h2 itself.
#instructions_box{
display: inline-block;
}
#instructions_box h2{
text-align: center;
padding: 0 25px 0; /* visual spacing */
margin: 0;
}
.line_divider{
background-color: aqua;
}
.blue_line{
height: 2px;
width: 30%; /* dynamic width here */
background-color: rgb(0,0,139);
float: left;
}
.yellow_line{
height: 2px;
width: 40%; /* dynamic width here */
background-color: yellow;
float: left;
}
<div id="instructions_box">
<h2>Instructions</h2>
<div class="line_divider">
<div class="blue_line"></div>
<div class="yellow_line"></div>
<div class="blue_line"></div>
</div>
</div>
You can always use CSS3 Flexbox. You've got to have the div of lines and the h2 in the same container as you already do. And then.
#instructions_box{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}